From 281994221e694ac2bc262339c1f0c072460191e8 Mon Sep 17 00:00:00 2001
From: Sungu Kim <108677235+haegu97@users.noreply.github.com>
Date: Mon, 6 Jan 2025 02:11:29 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=B1=84=ED=8C=85=EB=B0=A9?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=83=81=EB=8C=80=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EB=B3=B4=EC=9D=B4=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/chat/[id]/page.tsx                    |  1 +
 .../components/ChatMessage.tsx                |  4 +-
 .../chat/container/BookClubChatContainer.tsx  | 54 +++++++++++--------
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/app/chat/[id]/page.tsx b/src/app/chat/[id]/page.tsx
index 74df14f6..39860903 100644
--- a/src/app/chat/[id]/page.tsx
+++ b/src/app/chat/[id]/page.tsx
@@ -163,6 +163,7 @@ function ChatRoomPage() {
             userId: msg.userId,
             userNickname: msg.userNickname,
             content: msg.content,
+            image: msg.image,
           } as ChatMessageType;
         } else {
           return {
diff --git a/src/features/chat-room/container/chat-bubble-list/components/ChatMessage.tsx b/src/features/chat-room/container/chat-bubble-list/components/ChatMessage.tsx
index 21a491a0..db68319e 100644
--- a/src/features/chat-room/container/chat-bubble-list/components/ChatMessage.tsx
+++ b/src/features/chat-room/container/chat-bubble-list/components/ChatMessage.tsx
@@ -10,6 +10,7 @@ interface ChatMessageProps {
   isConsecutive: boolean;
   hostId: string | number;
   time: string;
+  image?: string;
   onProfileClick?: (userId: string | number) => void;
 }
 
@@ -21,7 +22,7 @@ function ChatMessage({
   time,
   // onProfileClick,
 }: ChatMessageProps) {
-  const { userId, content, userNickname } = message;
+  const { userId, content, userNickname, image } = message;
   const [isPopUpOpen, setIsPopUpOpen] = useState(false);
   const router = useRouter();
 
@@ -36,6 +37,7 @@ function ChatMessage({
             content,
             time,
             name: userNickname,
+            image: image,
             isHost: userId === hostId,
             onProfileClick: () => setIsPopUpOpen(true),
             isConsecutive,
diff --git a/src/features/chat/container/BookClubChatContainer.tsx b/src/features/chat/container/BookClubChatContainer.tsx
index c9a4fcc7..4bc4beac 100644
--- a/src/features/chat/container/BookClubChatContainer.tsx
+++ b/src/features/chat/container/BookClubChatContainer.tsx
@@ -11,6 +11,7 @@ import { findRecentMessage } from '@/features/chat/utils/chatRoom';
 import { formatDateForUI } from '@/lib/utils/formatDateForUI';
 import { useAuthStore } from '@/store/authStore';
 import Loading from '@/components/loading/Loading';
+import EmptyState from '@/components/common-layout/EmptyState';
 
 export default function BookClubChatContainer() {
   const [recentMessages, setRecentMessages] = useState<
@@ -56,30 +57,37 @@ export default function BookClubChatContainer() {
         <Loading fullHeight={false} />
       ) : (
         <div className="mx-auto flex w-full max-w-[996px] flex-col gap-5">
-          {bookClubChats
-            .filter((bookClub: BookClubProps) => !bookClub.isInactive)
-            .map((bookClub: BookClubProps, id: number) => {
-              const recentMessage = findRecentMessage(
-                recentMessages,
-                Number(bookClub.id),
-              );
+          {bookClubChats.length === 0 ? (
+            <EmptyState
+              title="진행중인 채팅방이 없어요."
+              subtitle="모임에 참여해보세요!"
+            />
+          ) : (
+            bookClubChats
+              .filter((bookClub: BookClubProps) => !bookClub.isInactive)
+              .map((bookClub: BookClubProps, id: number) => {
+                const recentMessage = findRecentMessage(
+                  recentMessages,
+                  Number(bookClub.id),
+                );
 
-              return (
-                <Link key={id} href={`/chat/${bookClub.id}`}>
-                  <ChatCard
-                    variant="bookClub"
-                    props={{
-                      ...bookClub,
-                      isHost: user?.id === bookClub.hostId,
-                      lastMessage: recentMessage?.content || '',
-                      lastMessageTime: recentMessage?.date
-                        ? formatDateForUI(recentMessage.date, 'CHAT_ROOM')
-                        : '',
-                    }}
-                  />
-                </Link>
-              );
-            })}
+                return (
+                  <Link key={id} href={`/chat/${bookClub.id}`}>
+                    <ChatCard
+                      variant="bookClub"
+                      props={{
+                        ...bookClub,
+                        isHost: user?.id === bookClub.hostId,
+                        lastMessage: recentMessage?.content || '',
+                        lastMessageTime: recentMessage?.date
+                          ? formatDateForUI(recentMessage.date, 'CHAT_ROOM')
+                          : '',
+                      }}
+                    />
+                  </Link>
+                );
+              })
+          )}
         </div>
       )}
     </section>