♻️[Refactor] 찜하기 구현 작업

src/api/book-club/react-query/customHooks.ts

@@ -126,9 +126,8 @@ export function useLikeBookClub(filter: BookClubParams) {
     //TODO: 로직 확인 후 변경 필요
     // onSuccess: () => {
     //   queryClient.invalidateQueries({
-    //     queryKey: ['bookClubs', 'list', DEFAULT_FILTERS],
+    //     queryKey: bookClubs._def,
     //   });
-    //   // console.log(bookClubs._def)
     // },
 
     onError: (_error, id, context) => {

src/api/book-club/react-query/likeOptimisticUpdate.ts

@@ -1,7 +1,7 @@
 import { QueryClient } from '@tanstack/react-query';
 import { BookClub, BookClubParams } from '@/types/bookclubs';
 import { bookClubs } from './queries';
-import { DEFAULT_FILTERS } from '@/lib/constants/filters';
+import { DEFAULT_FILTERS } from '@/constants/filters';
 
 export const likeOnMutate = async (
   queryClient: QueryClient,
@@ -12,34 +12,29 @@ export const likeOnMutate = async (
   const listQueryKey = ['bookClubs', 'list', filter || DEFAULT_FILTERS];
   const detailQueryKey = bookClubs.detail(id).queryKey;
 
+  // 기존 요청을 취소(데이터 충돌 방지)
   await queryClient.cancelQueries({ queryKey: listQueryKey });
   await queryClient.cancelQueries({ queryKey: detailQueryKey });
 
-  // console.log('🔍 수정된 listQueryKey:', listQueryKey);
-  // console.log('🔍 현재 활성화된 모든 쿼리키:', queryClient.getQueriesData({}));
-
+  // 기존 캐시 데이터 저장
   const previousBookClubs = queryClient.getQueryData<{ bookClubs: BookClub[] }>(
     listQueryKey,
   );
   const previousDetail = queryClient.getQueryData<BookClub>(detailQueryKey);
 
-  // if (!previousBookClubs) {
-  //   console.warn('⚠️ 캐시된 데이터가 없습니다. queryKey 확인 필요:', listQueryKey);
-  //   queryClient.invalidateQueries({ queryKey: listQueryKey });
-  // }
-
+  // 캐시 데이터 업데이트
   if (previousBookClubs) {
     queryClient.setQueryData(listQueryKey, (old: any) =>
       old?.map((club: BookClub) =>
         club.id === id ? { ...club, isLiked } : club,
       ),
     );
   }
-
   if (previousDetail) {
     queryClient.setQueryData(detailQueryKey, { ...previousDetail, isLiked });
   }
 
+  // API 요청이 실패 시 이전 상태로 복구할 수 있도록 기존 데이터를 반환
   return { previousBookClubs, previousDetail };
 };
 

src/app/bookclub/page.tsx

@@ -1,18 +1,20 @@
 import BookClubMainPage from '@/features/bookclub/components/BookClubMainPage';
-import { DEFAULT_FILTERS } from '@/lib/constants/filters';
+import { DEFAULT_FILTERS } from '@/constants/filters';
 import { fetchBookClubs } from '@/lib/utils/fetchBookClubs';
 import {
   dehydrate,
   HydrationBoundary,
   QueryClient,
 } from '@tanstack/react-query';
+import { getServerSideToken } from '@/lib/utils/getServerSideToken';
 
 export default async function Home() {
   const queryClient = new QueryClient();
+  const token = await getServerSideToken();
 
   await queryClient.prefetchQuery({
     queryKey: ['bookClubs', 'list', DEFAULT_FILTERS],
-    queryFn: () => fetchBookClubs(DEFAULT_FILTERS),
+    queryFn: () => fetchBookClubs(DEFAULT_FILTERS, token || undefined),
   });
 
   return (

src/app/layout.tsx

@@ -6,6 +6,7 @@ import { Toast } from '@/components/toast/toast';
 
 import { MSWComponent } from '@/components/MSWComponent';
 import '@/styles/globals.css';
+import { LikeProvider } from '@/lib/contexts/LikeContext';
 
 export const metadata: Metadata = {
   title: 'Bookco',
@@ -25,11 +26,13 @@ export default function RootLayout({
           strategy="beforeInteractive"
         />
         <ReactQueryProviders>
-          <HeaderBar />
-          <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col bg-white">
-            <Toast />
-            <MSWComponent>{children}</MSWComponent>
-          </main>
+          <LikeProvider>
+            <HeaderBar />
+            <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col bg-white">
+              <Toast />
+              <MSWComponent>{children}</MSWComponent>
+            </main>
+          </LikeProvider>
         </ReactQueryProviders>
       </body>
     </html>

src/app/page.tsx

@@ -1,18 +1,20 @@
 import BookClubMainPage from '@/features/bookclub/components/BookClubMainPage';
-import { DEFAULT_FILTERS } from '@/lib/constants/filters';
+import { DEFAULT_FILTERS } from '@/constants/filters';
 import { fetchBookClubs } from '@/lib/utils/fetchBookClubs';
 import {
   dehydrate,
   HydrationBoundary,
   QueryClient,
 } from '@tanstack/react-query';
+import { getServerSideToken } from '@/lib/utils/getServerSideToken';
 
 export default async function Home() {
   const queryClient = new QueryClient();
+  const token = await getServerSideToken();
 
   await queryClient.prefetchQuery({
     queryKey: ['bookClubs', 'list', DEFAULT_FILTERS],
-    queryFn: () => fetchBookClubs(DEFAULT_FILTERS),
+    queryFn: () => fetchBookClubs(DEFAULT_FILTERS, token || undefined),
   });
 
   return (

src/components/card/Card.tsx

@@ -7,7 +7,7 @@ import Avatar from '../avatar/Avatar';
 import {
   LocationIcon,
   HostIcon,
-  HeartIcon,
+  // HeartIcon,
   RatingIcon,
   OnlineIcon,
 } from '../../../public/icons';
@@ -52,10 +52,11 @@ function CardBox({ children, className = '', ...props }: CardBoxProps) {
 function CardImage({
   url,
   alt = '모임 이미지',
-  isLiked,
-  onLikeClick,
+  // isLiked,
+  // onLikeClick,
   className,
   isPast,
+  // isHost,
   ...props
 }: CardImageProps) {
   return (
@@ -73,11 +74,11 @@ function CardImage({
         fill
         className={twMerge('object-cover', isPast && 'grayscale')}
       />
-      {isLiked !== undefined && (
+      {/* {isLiked !== undefined && !isHost && (
         <div className="absolute right-5 top-[15px] z-10">
           <HeartIcon isLiked={isLiked} onClick={onLikeClick} />
         </div>
-      )}
+      )} */}
     </div>
   );
 }
@@ -218,6 +219,7 @@ function Card(props: CardProps) {
           max,
           isPast,
           isCanceled,
+          isHost,
           // meetingType,
           bookClubType,
           clubStatus,
@@ -234,6 +236,7 @@ function Card(props: CardProps) {
               alt={imageAlt}
               isLiked={isLiked}
               isPast={isPast}
+              isHost={isHost}
               onLikeClick={onLikeClick}
             />
 

src/components/card/types/card.ts

@@ -34,6 +34,7 @@ interface CardImageProps extends ComponentPropsWithoutRef<'div'> {
   alt?: string;
   isLiked?: boolean;
   isPast?: boolean;
+  isHost?: boolean;
   onLikeClick?: () => void;
 }
 

src/components/card/types/clubCard.ts

@@ -30,6 +30,9 @@ interface DefaultClubCard extends ClubCard {
   current: number;
   max: number;
 
+  // 호스트 여부
+  isHost?: boolean;
+
   //마이페이지 판별
   isMyPage?: boolean;
 }

src/features/bookclub/components/BookClubMainPage.tsx

@@ -15,7 +15,9 @@ function BookClubMainPage() {
   const { data, isLoading, isFetching } = useQuery({
     queryKey: ['bookClubs', 'list', filters],
     queryFn: () => fetchBookClubs(filters),
-    staleTime: 1000 * 30,
+    enabled: false, // ✅ 서버에서 이미 가져왔기 때문에 클라이언트에서 다시 요청하지 않음
+    refetchOnMount: false, // ✅ 마운트 시 다시 데이터를 불러오지 않음
+    staleTime: 1000 * 60,
   });
 
   const router = useRouter();

src/features/bookclub/components/ClubListSection.tsx

@@ -3,11 +3,14 @@
 import Card from '@/components/card/Card';
 import { formatDateForUI, isPastDate } from '@/lib/utils/formatDateForUI';
 import { useRouter } from 'next/navigation';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import EmptyState from '@/components/common-layout/EmptyState';
 import { clubStatus } from '@/lib/utils/clubUtils';
 import { BookClub, BookClubParams } from '@/types/bookclubs';
-import { useLikeClub, useUnLikeClub } from '@/lib/hooks';
+import { useLikeClub, useLikeWithAuthCheck, useUnLikeClub } from '@/lib/hooks';
+import { useAuthStore } from '@/store/authStore';
+import PopUp from '@/components/pop-up/PopUp';
+import { queryClient } from '@/lib/utils/reactQueryProvider';
 
 interface ClubListSectionProps {
   bookClubs: BookClub[];
@@ -16,15 +19,46 @@ interface ClubListSectionProps {
 
 function ClubListSection({ bookClubs = [], filter }: ClubListSectionProps) {
   const router = useRouter();
+  const {
+    isLikePopUpOpen,
+    likePopUpLabel,
+    onShowAuthPopUp,
+    onCloseCheckAuthPopup,
+  } = useLikeWithAuthCheck();
   const { onConfirmUnLike } = useUnLikeClub(filter);
   const { onConfirmLike } = useLikeClub(filter);
+  const { isLoggedIn, checkLoginStatus, user } = useAuthStore();
+
+  useEffect(() => {
+    checkLoginStatus();
+    console.log('메인 페이지: ', bookClubs);
+  }, [checkLoginStatus]);
 
   const today = useMemo(() => new Date(), []);
 
   // console.log('🔍 ClubListSection 데이터:', bookClubs);
 
   const handleLikeClub = (isLiked: boolean, id: number) => {
-    isLiked ? onConfirmUnLike(id) : onConfirmLike(id);
+    if (!isLoggedIn) {
+      onShowAuthPopUp();
+      return;
+    }
+
+    if (isLiked) {
+      onConfirmUnLike(id);
+    } else {
+      onConfirmLike(id);
+    }
+
+    queryClient.setQueryData(['bookClubs', 'list', filter], (oldData: any) =>
+      oldData.map((club: BookClub) =>
+        club.id === id ? { ...club, isLiked: !isLiked } : club,
+      ),
+    );
+  };
+
+  const handleLikePopUpConfirm = () => {
+    router.push('/login');
   };
 
   return (
@@ -52,6 +86,7 @@ function ClubListSection({ bookClubs = [], filter }: ClubListSectionProps) {
               club.endDate,
               today,
             )}
+            isHost={club.hostId === user?.id}
             onLikeClick={() => handleLikeClub(club.isLiked, club.id)}
             onClick={() => router.push(`/bookclub/${club.id}`)}
           />
@@ -62,6 +97,14 @@ function ClubListSection({ bookClubs = [], filter }: ClubListSectionProps) {
           subtitle="지금 바로 책 모임을 만들어보세요."
         />
       )}
+      <PopUp
+        isOpen={isLikePopUpOpen}
+        isLarge={true}
+        isTwoButton={true}
+        label={likePopUpLabel}
+        handlePopUpClose={onCloseCheckAuthPopup}
+        handlePopUpConfirm={handleLikePopUpConfirm}
+      />
     </main>
   );
 }

src/features/bookclub/hooks/useFetchBookClubList.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react';
 import useBookClubList from '@/features/bookclub/hooks/useFetchBookClubList';
-import { DEFAULT_FILTERS } from '@/lib/constants/filters';
+import { DEFAULT_FILTERS } from '@/constants/filters';
 
 describe('useBookClubList', () => {
   it('초기 필터 상태는 DEFAULT_FILTERS와 동일해야 한다', () => {

src/features/bookclub/hooks/useFetchBookClubList.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { BookClubParams } from '@/types/bookclubs';
-import { DEFAULT_FILTERS } from '@/lib/constants/filters';
+import { DEFAULT_FILTERS } from '@/constants/filters';
 
 const useBookClubList = () => {
   const [filters, setFilters] = useState<BookClubParams>(DEFAULT_FILTERS);