🐛[Fix] 찜하기 hydration 에러 해결 #339

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

@@ -17,14 +17,12 @@ export const likeOnMutate = async (
   await queryClient.cancelQueries({ queryKey: detailQueryKey });
 
   // 기존 캐시 데이터 저장
-  const previousBookClubs = queryClient.getQueryData<{ bookClubs: BookClub[] }>(
-    listQueryKey,
-  );
+  const previousBookClubs = queryClient.getQueryData<BookClub[]>(listQueryKey);
   const previousDetail = queryClient.getQueryData<BookClub>(detailQueryKey);
 
   // 캐시 데이터 업데이트
   if (previousBookClubs) {
-    queryClient.setQueryData(listQueryKey, (old: any) =>
+    queryClient.setQueryData(listQueryKey, (old: BookClub[] | undefined) =>
       old?.map((club: BookClub) =>
         club.id === id ? { ...club, isLiked } : club,
       ),
@@ -42,7 +40,7 @@ export const likeOnError = (
   queryClient: QueryClient,
   id: number,
   context: {
-    previousBookClubs?: { bookClubs: BookClub[] };
+    previousBookClubs?: BookClub[];
     previousDetail?: BookClub;
   },
 ) => {

src/app/bookclub/error.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import ErrorTemplate from '@/components/error/ErrorTemplate';
+
+export default function BookClubError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <ErrorTemplate
+      error={error}
+      reset={reset}
+      title="북클럽 목록 조회 오류"
+      message="북클럽 목록 조회 페이지 정보를 불러오던 중 에러가 발생했습니다."
+    />
+  );
+}

src/app/layout.tsx

@@ -6,7 +6,6 @@ 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',
@@ -26,13 +25,11 @@ export default function RootLayout({
           strategy="beforeInteractive"
         />
         <ReactQueryProviders>
-          <LikeProvider>
-            <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>
         </ReactQueryProviders>
       </body>
     </html>

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,11 +52,10 @@ function CardBox({ children, className = '', ...props }: CardBoxProps) {
 function CardImage({
   url,
   alt = '모임 이미지',
-  // isLiked,
-  // onLikeClick,
+  isLiked,
+  onLikeClick,
   className,
   isPast,
-  // isHost,
   ...props
 }: CardImageProps) {
   return (
@@ -74,11 +73,11 @@ function CardImage({
         fill
         className={twMerge('object-cover', isPast && 'grayscale')}
       />
-      {/* {isLiked !== undefined && !isHost && (
+      {isLiked !== undefined && (
         <div className="absolute right-5 top-[15px] z-10">
           <HeartIcon isLiked={isLiked} onClick={onLikeClick} />
         </div>
-      )} */}
+      )}
     </div>
   );
 }

src/features/bookclub/components/BookClubMainPage.tsx

@@ -9,21 +9,31 @@ import { useRouter } from 'next/navigation';
 import Loading from '@/components/loading/Loading';
 import { useQuery } from '@tanstack/react-query';
 import { fetchBookClubs } from '@/lib/utils/fetchBookClubs';
+import { useEffect, useState } from 'react';
+import ErrorHandlingWrapper from '@/components/error/ErrorHandlingWrapper';
+import ErrorFallback from '@/components/error/ErrorFallback';
+import { getCookie } from '@/features/auth/utils/cookies';
 
 function BookClubMainPage() {
   const { filters, updateFilters } = useBookClubList();
-  const { data, isLoading, isFetching } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ['bookClubs', 'list', filters],
-    queryFn: () => fetchBookClubs(filters),
-    // enabled: false, // ✅ 서버에서 이미 가져왔기 때문에 클라이언트에서 다시 요청하지 않음
-    // refetchOnMount: false, // ✅ 마운트 시 다시 데이터를 불러오지 않음
-    staleTime: 1000 * 60,
+    queryFn: () => {
+      const token = getCookie('auth_token');
+      return fetchBookClubs(filters, token || undefined);
+    },
   });
+  // console.log('클라이언트 데이터:', data); // 클라이언트의 데이터 확인
 
+  const [isHydrated, setIsHydrated] = useState(false);
   const router = useRouter();
   const user = useAuthStore((state) => state.user);
   const userName = user?.nickname || '북코';
 
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
   const handleFilterChange = (newFilter: Partial<typeof filters>) => {
     updateFilters(newFilter);
   };
@@ -50,14 +60,20 @@ function BookClubMainPage() {
         }
       />
       <FilterBar filters={filters} handleFilterChange={handleFilterChange} />
-      {isLoading || isFetching ? (
+
+      {isLoading || !isHydrated ? (
         <div className="flex h-[400px] justify-center">
           <Loading />
         </div>
       ) : (
-        <div className="pb-12">
-          <ClubListSection bookClubs={data} filter={filters} />
-        </div>
+        <ErrorHandlingWrapper
+          fallbackComponent={ErrorFallback}
+          suspenseFallback={<Loading />}
+        >
+          <div className="pb-12">
+            <ClubListSection bookClubs={data} filter={filters} />
+          </div>
+        </ErrorHandlingWrapper>
       )}
     </>
   );

src/features/bookclub/components/ClubListSection.tsx

@@ -10,7 +10,6 @@ import { BookClub, BookClubParams } from '@/types/bookclubs';
 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[];
@@ -19,6 +18,7 @@ interface ClubListSectionProps {
 
 function ClubListSection({ bookClubs = [], filter }: ClubListSectionProps) {
   const router = useRouter();
+
   const {
     isLikePopUpOpen,
     likePopUpLabel,
@@ -31,13 +31,10 @@ function ClubListSection({ bookClubs = [], filter }: ClubListSectionProps) {
 
   useEffect(() => {
     checkLoginStatus();
-    console.log('메인 페이지: ', bookClubs);
   }, [checkLoginStatus]);
 
   const today = useMemo(() => new Date(), []);
 
-  // console.log('🔍 ClubListSection 데이터:', bookClubs);
-
   const handleLikeClub = (isLiked: boolean, id: number) => {
     if (!isLoggedIn) {
       onShowAuthPopUp();
@@ -49,12 +46,6 @@ function ClubListSection({ bookClubs = [], filter }: ClubListSectionProps) {
     } else {
       onConfirmLike(id);
     }
-
-    queryClient.setQueryData(['bookClubs', 'list', filter], (oldData: any) =>
-      oldData.map((club: BookClub) =>
-        club.id === id ? { ...club, isLiked: !isLiked } : club,
-      ),
-    );
   };
 
   const handleLikePopUpConfirm = () => {

src/features/club-details/components/HeaderSection.tsx

@@ -17,7 +17,6 @@ import {
   useLikeWithAuthCheck,
   useUnLikeClub,
 } from '@/lib/hooks/index';
-import { useLikeContext } from '@/lib/contexts/LikeContext';
 
 interface HeaderSectionProps {
   clubInfo: BookClub;
@@ -46,8 +45,6 @@ function HeaderSection({ clubInfo, idAsNumber }: HeaderSectionProps) {
   } = useLikeWithAuthCheck();
   const { onConfirmLike } = useLikeClub();
   const { onConfirmUnLike } = useUnLikeClub();
-  const { likedClubs, toggleLike } = useLikeContext();
-  const isLiked = likedClubs?.has(clubInfo.id) ?? clubInfo.isLiked;
 
   const { isLoggedIn, checkLoginStatus, user } = useAuthStore();
 
@@ -68,14 +65,12 @@ function HeaderSection({ clubInfo, idAsNumber }: HeaderSectionProps) {
     !isLoggedIn ? router.push('/login') : handleJoin(clubInfo.id);
   };
 
-  const handleLikeClub = () => {
+  const handleLikeClub = (isLiked: boolean) => {
     if (!isLoggedIn) {
       onShowAuthPopUp();
       return;
     }
 
-    toggleLike(clubInfo.id, !isLiked); // ✅ 전역 상태 업데이트
-
     if (isLiked) {
       onConfirmUnLike(clubInfo.id);
     } else {
@@ -107,7 +102,7 @@ function HeaderSection({ clubInfo, idAsNumber }: HeaderSectionProps) {
       clubInfo.endDate,
       new Date(), // TODO: new Date() 최적화 후 수정
     ),
-    onLikeClick: handleLikeClub,
+    onLikeClick: () => handleLikeClub(clubInfo.isLiked),
     host: {
       id: clubInfo.hostId,
       name: clubInfo.hostNickname,