296 refactor 최종발표 전 리펙토링

src/app/chat/[id]/page.tsx

@@ -39,7 +39,7 @@ function ChatRoomPage() {
   const [isConnected, setIsConnected] = useState(false);
 
   const { data } = useQuery(
-    bookClubs.my()._ctx.joined({ order: 'DESC', page: 1, size: 10 }),
+    bookClubs.my()._ctx.joined({ order: 'DESC', page: 1, size: 100 }),
   );
 
   const bookClubDetail = data?.bookClubs?.find(
@@ -64,17 +64,13 @@ function ChatRoomPage() {
 
           await new Promise((resolve, reject) => {
             const checkConnection = setInterval(() => {
-              console.log(`소켓 연결 시도 ${attempts + 1}회`);
-
               if (client?.connected) {
-                console.log('소켓 연결 성공!');
                 clearInterval(checkConnection);
                 resolve(true);
               }
 
               attempts++;
               if (attempts >= maxAttempts) {
-                console.log('소켓 연결 최대 시도 횟수 초과');
                 clearInterval(checkConnection);
                 reject(new Error('소켓 연결 타임아웃'));
               }
@@ -181,7 +177,7 @@ function ChatRoomPage() {
   };
 
   return (
-    <div className="flex w-full flex-1 flex-col gap-5 pb-10">
+    <div className="relative flex w-full flex-1 flex-col gap-5 pb-10">
       <header className="flex w-full min-w-[336px] items-end bg-gray-light-02 px-[20px] py-[30px] sm:justify-between md:px-[24px] lg:px-[102px]">
         <div className="flex w-full flex-col gap-5">
           <div className="flex items-center justify-between">
@@ -192,12 +188,12 @@ function ChatRoomPage() {
                 className="bg-gray-light-02"
               />
               <h3>채팅</h3>
-              <ParticipantCounter current={10} />
+              <ParticipantCounter current={bookClubDetail?.memberCount} />
             </div>
             <div>
               <IconButton
                 icon={<HamburgerMenuIcon width={16} height={12} />}
-                onClick={() => console.log('메뉴 열기 버튼 클릭')}
+                onClick={() => {}}
                 className="bg-gray-light-02"
               />
             </div>
@@ -226,7 +222,7 @@ function ChatRoomPage() {
           onProfileClick={() => {}}
         />
       </div>
-      <div className="fixed bottom-8 left-0 right-0 flex w-full items-center justify-between gap-3 bg-white px-4 sm:px-[24px] lg:px-[102px]">
+      <div className="sticky bottom-0 flex w-full items-center justify-between gap-3 bg-white">
         <form className="w-full" onSubmit={handleSubmit}>
           <MessageInput value={message} onChange={handleMessageChange} />
         </form>

src/constants/navigation.ts

@@ -2,7 +2,7 @@ export const NAV_ITEMS = [
   { id: 'bookco', href: '/bookclub', label: 'bookco' },
   { id: 'bookclub', href: '/bookclub', label: '책 모임' },
   { id: 'exchange', href: '/exchange', label: '책 교환' },
-  { id: 'wish', href: '/wish', label: '찜 목록' },
+  // { id: 'wish', href: '/wish', label: '찜 목록' },
   { id: 'chat', href: '/chat', label: '채팅' },
 ] as const;
 

src/features/auth/api/auth.ts

@@ -30,7 +30,7 @@ export const login = async (data: LoginFormData) => {
     await getUserInfo();
 
     const token = getCookie('auth_token');
-    console.log('token', token);
+
     if (token) {
       initializeSocket(token);
     }

src/features/auth/api/refreshAccessToken.ts

@@ -15,7 +15,6 @@ export const refreshAccessToken = async (refreshToken: string) => {
       throw new Error('토큰 갱신 실패');
     }
 
-    console.log('리프레시 성공');
     return response.json();
   } catch (error) {
     console.error('토큰 갱신 에러:', error);

src/features/bookclub/components/BookClubMainPage.tsx

@@ -33,6 +33,7 @@ function BookClubMainPage() {
         }
         actionElement={
           <Button
+            className="hover-dim"
             text="모임 만들기"
             size="small"
             fillType="solid"

src/features/bookclub/components/ClubListSection.tsx

@@ -31,7 +31,7 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) {
           <Card
             key={club.id}
             clubId={club.id}
-            imageUrl={club.imageUrl || '/images/profile.png'}
+            imageUrl={club.imageUrl || '/images/defaultBookClub.jpg'}
             imageAlt={club.title}
             title={club.title}
             location={club.town || ''}

src/features/bookclub/hooks/useFetchBookClubList.ts

@@ -13,8 +13,6 @@ const useBookClubList = () => {
 
   const clubList = data?.bookClubs;
 
-  // console.log('useQuery 데이터:', clubList);
-
   const updateFilters = (newFilters: Partial<BookClubParams>) => {
     setFilters((prevFilters) => ({ ...prevFilters, ...newFilters }));
   };

src/features/chat-room/components/chat-bubble/ChatBubble.stories.tsx

@@ -39,7 +39,7 @@ export const OpponentMessage: Story = {
 * 늦게 오시는 분은 미리 말씀 부탁드려요!`,
       time: '오후 2:31',
       name: '김철수',
-      profileImage: 'https://picsum.photos/200',
+      image: 'https://picsum.photos/200',
       isHost: true,
     },
   },

src/features/chat-room/components/chat-bubble/components/OpponentBubble.tsx

@@ -4,7 +4,7 @@ export interface OpponentProps {
   content: string;
   time?: string;
   name: string;
-  profileImage: string;
+  image?: string;
   isHost?: boolean;
   onProfileClick?: () => void;
   isConsecutive?: boolean;
@@ -14,7 +14,7 @@ function OpponentBubble({
   content,
   time,
   name,
-  profileImage,
+  image,
   isHost,
   onProfileClick,
   isConsecutive,
@@ -25,7 +25,7 @@ function OpponentBubble({
         {!isConsecutive && (
           <ChatBubble.Profile
             name={name}
-            imageUrl={profileImage}
+            image={image || ''}
             isHost={isHost}
             onClick={onProfileClick}
           />

src/features/chat-room/components/chat-bubble/components/atoms/atoms.stories.tsx

@@ -33,7 +33,7 @@ export const Time: StoryObj<typeof ChatBubble.Time> = {
 export const Profile: StoryObj<typeof ChatBubble.Profile> = {
   render: () => (
     <ChatBubble.Profile
-      imageUrl="https://picsum.photos/200"
+      image="https://picsum.photos/200"
       name="홍길동"
       isHost={true}
     />

src/features/chat-room/components/chat-bubble/components/atoms/atoms.tsx

@@ -80,12 +80,13 @@ export function ChatBubbleTime({
 
 interface ChatBubbleProfileProps extends HTMLAttributes<HTMLDivElement> {
   name: string;
-  imageUrl: string;
+  image?: string;
   isHost?: boolean;
 }
 
 export function ChatBubbleProfile({
   name,
+  image,
   isHost,
   className,
   onClick,
@@ -98,7 +99,7 @@ export function ChatBubbleProfile({
         onClick={onClick}
         data-testid="profile-image"
       >
-        <Avatar src={'/images/profile.png'} alt={name} size={'mdLg'} />
+        <Avatar src={image || '/images/profile.png'} alt={name} size={'mdLg'} />
         {isHost && (
           <div className="absolute -right-1 -top-1 flex h-[18px] w-[18px] items-center justify-center rounded-full border-2 border-gray-normal-01 bg-green-normal-01">
             <HostIcon width={9} height={9} data-testid="host-icon" />

src/features/chat-room/types/chatBubbleList.ts

@@ -9,6 +9,7 @@ export interface ChatMessageType extends BaseMessage {
   userNickname: string;
   userId: number;
   content: string;
+  image?: string;
 }
 
 export interface SystemMessageType extends BaseMessage {

src/features/chat/components/chat-card/ChatCard.tsx

@@ -185,7 +185,7 @@ function ChatCard<T extends ChatCardVariant>({
           imageUrl,
           isHost,
           title,
-          currentParticipants,
+          memberCount,
           lastMessage,
           lastMessageTime,
           unreadCount,
@@ -202,7 +202,7 @@ function ChatCard<T extends ChatCardVariant>({
                 <div className="flex items-center justify-between gap-2">
                   <div className="flex min-w-0 items-center gap-1">
                     <ChatCardTitle>{title}</ChatCardTitle>
-                    <ParticipantCounter current={currentParticipants} />
+                    <ParticipantCounter current={memberCount || 0} />
                   </div>
                   {unreadCount && unreadCount > 0 && (
                     <>

src/features/chat/components/chat-card/types/variantChatCard.ts

@@ -8,10 +8,11 @@ interface CommonProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export interface BookClubProps extends CommonProps {
-  currentParticipants: number;
+  memberCount?: number;
   lastMessage?: string;
   lastMessageTime?: string;
   unreadCount?: number;
+  hostId?: number;
 }
 
 export interface ChatRoomHeaderProps extends CommonProps {

src/features/chat/container/BookClubChatContainer.tsx

@@ -9,6 +9,8 @@ import Link from 'next/link';
 import { getRecentChats, getStompClient } from '@/features/chat/utils/socket';
 import { findRecentMessage } from '@/features/chat/utils/chatRoom';
 import { formatDateForUI } from '@/lib/utils/formatDateForUI';
+import { useAuthStore } from '@/store/authStore';
+import Loading from '@/components/loading/Loading';
 
 export default function BookClubChatContainer() {
   const [recentMessages, setRecentMessages] = useState<
@@ -20,14 +22,16 @@ export default function BookClubChatContainer() {
   >([]);
 
   const { data, isLoading, error } = useQuery(
-    bookClubs.my()._ctx.joined({ order: 'DESC', page: 1, size: 10 }),
+    bookClubs.my()._ctx.joined({ order: 'DESC', page: 1, size: 100 }),
   );
 
+  const { user } = useAuthStore();
+
   useEffect(() => {
     const fetchRecentChats = async () => {
       try {
         const response = await getRecentChats();
-        console.log('최근 채팅 내용 조회 성공:', response);
+
         setRecentMessages(response || []);
       } catch (error) {
         console.error('최근 채팅 내용 조회 실패:', error);
@@ -43,36 +47,39 @@ export default function BookClubChatContainer() {
   }, []);
 
   const bookClubChats = data?.bookClubs || [];
-  console.log('bookClubChats', bookClubChats);
 
-  if (isLoading) return <div>로딩중...</div>;
   if (error) return <div>에러가 발생했습니다</div>;
 
   return (
-    <section className="flex flex-1 bg-gray-light-02 px-6 py-5">
-      <div className="mx-auto flex w-full max-w-[996px] flex-col gap-5">
-        {bookClubChats.map((bookClub: BookClubProps, id: number) => {
-          const recentMessage = findRecentMessage(
-            recentMessages,
-            Number(bookClub.id),
-          );
+    <section className="flex flex-1 items-center justify-center bg-gray-light-02 px-6 py-5">
+      {isLoading ? (
+        <Loading fullHeight={false} />
+      ) : (
+        <div className="mx-auto flex w-full max-w-[996px] flex-col gap-5">
+          {bookClubChats.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,
-                  lastMessage: recentMessage?.content || '',
-                  lastMessageTime: recentMessage?.date
-                    ? formatDateForUI(recentMessage.date, 'CHAT_ROOM')
-                    : '',
-                }}
-              />
-            </Link>
-          );
-        })}
-      </div>
+            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>
   );
 }

src/features/chat/container/ChatContainer.tsx

@@ -17,7 +17,6 @@ export default function ChatContainer() {
       const connectSocket = async () => {
         try {
           await initializeSocket(token);
-          console.log('채팅 페이지에서 소켓 재연결 성공');
         } catch (error) {
           console.error('채팅 페이지에서 소켓 재연결 실패:', error);
         }

src/features/chat/container/ExchangeChatContainer.tsx

@@ -1,39 +1,14 @@
 import React from 'react';
-import ChatCard from '../components/chat-card/ChatCard';
-
-interface BookClubChatData {
-  imageUrl: string;
-  isHost: boolean;
-  title: string;
-  currentParticipants: number;
-  lastMessage: string;
-  lastMessageTime: string;
-  unreadCount: number;
-}
 
 export default function ExchangeChatContainer() {
   const message = '아직 참여중인 채팅이 없어요.';
-  const mockBookClubChats: BookClubChatData[] = [];
 
   return (
     <section className="flex flex-1 bg-gray-light-02 px-6 py-5">
       <div className="mx-auto flex w-full max-w-[996px] flex-col gap-5">
-        {mockBookClubChats.length === 0 ? (
-          <div className="flex h-full justify-center pt-[255px] text-center text-gray-dark-02">
-            <span className="whitespace-pre-wrap">{message}</span>
-          </div>
-        ) : (
-          mockBookClubChats.map((chat, index) => (
-            <ChatCard
-              key={index}
-              variant="bookClub"
-              props={{
-                ...chat,
-                onClick: () => console.log('채팅방 클릭'),
-              }}
-            />
-          ))
-        )}
+        <div className="flex h-full justify-center pt-[255px] text-center text-gray-dark-02">
+          <span className="whitespace-pre-wrap">{message}</span>
+        </div>
       </div>
     </section>
   );