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() { ) : (
- {bookClubChats - .filter((bookClub: BookClubProps) => !bookClub.isInactive) - .map((bookClub: BookClubProps, id: number) => { - const recentMessage = findRecentMessage( - recentMessages, - Number(bookClub.id), - ); + {bookClubChats.length === 0 ? ( + + ) : ( + bookClubChats + .filter((bookClub: BookClubProps) => !bookClub.isInactive) + .map((bookClub: BookClubProps, id: number) => { + const recentMessage = findRecentMessage( + recentMessages, + Number(bookClub.id), + ); - return ( - - - - ); - })} + return ( + + + + ); + }) + )}
)}