Merge pull request #542 from boostcampwm2023/feature/FE/#541-채팅-기록-생성…

…일자를-기준으로-그룹화하여-보여주기 Feature/fe/#541 채팅 기록 생성일자를 기준으로 그룹화하여 보여주기
boostcampwm2023 · Feb 17, 2024 · 30ad66f · 30ad66f
2 parents 054548a + 456a74a
commit 30ad66f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 21 deletions.
diff --git a/frontend/src/components/aiChatPage/ChatLogContainer/ChatLogList/ChatLogGroup.tsx b/frontend/src/components/aiChatPage/ChatLogContainer/ChatLogList/ChatLogGroup.tsx
@@ -1,5 +1,25 @@
-interface ChatLogGroupProps {}
+import { ChatLogItem } from './ChatLogItem';
 
-export function ChatLogGroup({}: ChatLogGroupProps) {
-  return <ul className="flex flex-col gap-12"></ul>;
+interface ChatLogGroupProps {
+  date: string;
+  rooms: {
+    id: string;
+    title: string;
+    createdAt: string;
+  }[];
+}
+
+export function ChatLogGroup({ date, rooms }: ChatLogGroupProps) {
+  return (
+    <ul className="flex flex-col gap-12">
+      {date}
+      {rooms.map(({ id, title }) => (
+        <ChatLogItem
+          key={id}
+          id={id}
+          title={title}
+        />
+      ))}
+    </ul>
+  );
 }
diff --git a/frontend/src/components/aiChatPage/ChatLogContainer/ChatLogList/ChatLogItem.tsx b/frontend/src/components/aiChatPage/ChatLogContainer/ChatLogList/ChatLogItem.tsx
@@ -18,7 +18,7 @@ export function ChatLogItem({ id, title }: ChatLogItemProps) {
       className="group w-full h-30 display-medium14 text-white p-5 rounded-lg flex justify-between items-center hover:surface-default"
       onClick={handleClick}
     >
-      {title ?? '임시 타이틀~'}
+      {title}
       {/* <div className="hidden group-hover:flex">
         <IconButton
           icon="ic:outline-edit"

diff --git a/frontend/src/components/aiChatPage/ChatLogContainer/ChatLogList/ChatLogList.tsx b/frontend/src/components/aiChatPage/ChatLogContainer/ChatLogList/ChatLogList.tsx
@@ -1,6 +1,6 @@
-import { ChatLogListResponse } from '@stores/queries';
+import { ChatLogGroup } from '.';
 
-import { ChatLogItem } from './ChatLogItem';
+import { ChatLogListResponse } from '@stores/queries';
 
 interface ChatLogListProps {
   list: ChatLogListResponse;
@@ -9,11 +9,11 @@ interface ChatLogListProps {
 export function ChatLogList({ list }: ChatLogListProps) {
   return (
     <div className="w-h-full flex flex-col gap-16">
-      {list.map(({ id, title }) => (
-        <ChatLogItem
-          key={id}
-          id={id}
-          title={title}
+      {list.map(({ date, rooms }) => (
+        <ChatLogGroup
+          key={date}
+          date={date}
+          rooms={rooms}
         />
       ))}
     </div>

diff --git a/frontend/src/pages/HomePage/HomePage.tsx b/frontend/src/pages/HomePage/HomePage.tsx
@@ -19,14 +19,16 @@ export function HomePage() {
   return (
     <>
       <Background />
-      <main className="w-screen h-dvh relative flex-with-center gap-36 z-1">
-        <Button onClick={openLoginPopup}>AI에게 타로보기</Button>
-        <Button
-          onClick={moveHumanChat}
-          color="dark"
-        >
-          채팅방 개설하기
-        </Button>
+      <main className="w-screen h-dvh relative flex-with-center z-1">
+        <div className="flex gap-36 mt-150">
+          <Button onClick={openLoginPopup}>AI에게 타로보기</Button>
+          <Button
+            onClick={moveHumanChat}
+            color="dark"
+          >
+            채팅방 개설하기
+          </Button>
+        </div>
       </main>
     </>
   );

diff --git a/frontend/src/stores/queries/getChatLogListQuery.ts b/frontend/src/stores/queries/getChatLogListQuery.ts
@@ -2,8 +2,12 @@ import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
 export type ChatLogListResponse = {
-  id: string;
-  title: string;
+  date: string;
+  rooms: {
+    id: string;
+    title: string;
+    createdAt: string;
+  }[];
 }[];
 
 export function getChatLogListQuery() {