✨[Feat] api 수정 및 추가 사항 적용

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

@@ -9,6 +9,7 @@ import {
 } from '../index';
 import { WriteReviewParams } from '../types';
 import { AxiosError } from 'axios';
+import { likeOnError, likeOnMutate } from './likeOptimisticUpdate';
 
 export function useBookClubCreateMutation() {
   const queryClient = useQueryClient();
@@ -89,6 +90,9 @@ export function useCancelBookClub() {
   return useMutation({
     mutationFn: (id: number) => bookClubMainAPI.cancel(id),
     onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: bookClubs.list().queryKey,
+      });
       queryClient.invalidateQueries({
         queryKey: bookClubs.my()._ctx.created().queryKey,
       });
@@ -104,13 +108,15 @@ export function useLikeBookClub() {
 
   return useMutation<void, AxiosError<{ message: string }>, number>({
     mutationFn: (id: number) => bookClubLikeAPI.like(id),
-    onSuccess: (_, id) => {
-      queryClient.invalidateQueries({
-        queryKey: bookClubs.list().queryKey,
-      });
-      queryClient.invalidateQueries({
-        queryKey: bookClubs.detail(id).queryKey,
-      });
+
+    onMutate: async (id) => {
+      return likeOnMutate(queryClient, id, true);
+    },
+
+    onError: (_error, id, context) => {
+      if (context) {
+        likeOnError(queryClient, id, context);
+      }
     },
   });
 }
@@ -120,13 +126,15 @@ export function useUnLikeBookClub() {
 
   return useMutation<void, AxiosError<{ message: string }>, number>({
     mutationFn: (id: number) => bookClubLikeAPI.unlike(id),
-    onSuccess: (_, id) => {
-      queryClient.invalidateQueries({
-        queryKey: bookClubs.list().queryKey,
-      });
-      queryClient.invalidateQueries({
-        queryKey: bookClubs.detail(id).queryKey,
-      });
+
+    onMutate: async (id) => {
+      return likeOnMutate(queryClient, id, false);
+    },
+
+    onError: (_error, id, context) => {
+      if (context) {
+        likeOnError(queryClient, id, context);
+      }
     },
   });
 }

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

@@ -0,0 +1,60 @@
+import { QueryClient } from '@tanstack/react-query';
+import { BookClub } from '@/types/bookclubs';
+import { bookClubs } from './queries';
+import { DEFAULT_FILTERS } from '@/lib/constants/filters';
+
+export const likeOnMutate = async (
+  queryClient: QueryClient,
+  id: number,
+  isLiked: boolean,
+) => {
+  const listQueryKey = bookClubs.list(DEFAULT_FILTERS).queryKey;
+  const detailQueryKey = bookClubs.detail(id).queryKey;
+
+  const previousBookClubs = queryClient.getQueryData<{
+    bookClubs: BookClub[];
+  }>(listQueryKey);
+
+  const previousDetail = queryClient.getQueryData<BookClub>(detailQueryKey);
+
+  // 목록 캐시 업데이트
+  if (previousBookClubs) {
+    queryClient.setQueryData(listQueryKey, {
+      ...previousBookClubs,
+      bookClubs: previousBookClubs.bookClubs.map((club) =>
+        club.id === id ? { ...club, isLiked } : club,
+      ),
+    });
+  }
+
+  // 상세 캐시 업데이트
+  if (previousDetail) {
+    queryClient.setQueryData(detailQueryKey, {
+      ...previousDetail,
+      isLiked,
+    });
+  }
+
+  return { previousBookClubs, previousDetail };
+};
+
+export const likeOnError = (
+  queryClient: QueryClient,
+  id: number,
+  context: {
+    previousBookClubs?: { bookClubs: BookClub[] };
+    previousDetail?: BookClub;
+  },
+) => {
+  const listQueryKey = bookClubs.list(DEFAULT_FILTERS).queryKey;
+  const detailQueryKey = bookClubs.detail(id).queryKey;
+
+  // 이전 상태 복구
+  if (context.previousBookClubs) {
+    queryClient.setQueryData(listQueryKey, context.previousBookClubs);
+  }
+
+  if (context.previousDetail) {
+    queryClient.setQueryData(detailQueryKey, context.previousDetail);
+  }
+};

src/components/common-layout/FilterBar.tsx

@@ -3,24 +3,14 @@ import {
   SearchSection,
   FilterSection,
 } from '@/components/common-layout';
-import { BookClub, BookClubParams } from '@/types/bookclubs';
-import { Dispatch, SetStateAction } from 'react';
+import { BookClubParams } from '@/types/bookclubs';
 
 interface FilterBarProps {
   filters: BookClubParams;
   handleFilterChange: (newFilter: Partial<BookClubParams>) => void;
-  bookClubs: BookClub[];
-  initialBookClubs: BookClub[];
-  setBookClubs: Dispatch<SetStateAction<BookClub[]>>;
 }
 
-function FilterBar({
-  filters,
-  handleFilterChange,
-  bookClubs,
-  initialBookClubs,
-  setBookClubs,
-}: FilterBarProps) {
+function FilterBar({ filters, handleFilterChange }: FilterBarProps) {
   return (
     <section className="flex w-full flex-col gap-y-3 px-[20px] pt-[20px] md:px-[24px] lg:px-[102px]">
       <CategoryTabs filters={filters} onFilterChange={handleFilterChange} />
@@ -30,12 +20,7 @@ function FilterBar({
           handleFilterChange({ searchKeyword: value })
         }
       />
-      <FilterSection
-        bookClubs={bookClubs}
-        initialBookClubs={initialBookClubs}
-        setBookClubs={setBookClubs}
-        onFilterChange={handleFilterChange}
-      />
+      <FilterSection onFilterChange={handleFilterChange} />
     </section>
   );
 }

src/components/common-layout/FilterSection.tsx

@@ -2,45 +2,23 @@
 
 import DropDown from '@/components/drop-down/DropDown';
 import FilterCheckbox from '@/components/filter-checkbox/FilterCheckbox';
-import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import SortingButton from '@/components/sorting-button/SortingButton';
-import { BookClub, BookClubParams } from '../../types/bookclubs';
+import { BookClubParams } from '../../types/bookclubs';
 import { getMeetingType, getMemberLimit } from '@/lib/utils/filterUtils';
-import { clubStatus } from '@/lib/utils/clubUtils';
 
 interface CategoryTabsProps {
-  bookClubs: BookClub[];
-  initialBookClubs: BookClub[];
-  setBookClubs: Dispatch<SetStateAction<BookClub[]>>;
   onFilterChange: (newFilters: Partial<BookClubParams>) => void;
 }
 
-function FilterSection({
-  bookClubs,
-  initialBookClubs,
-  setBookClubs,
-  onFilterChange,
-}: CategoryTabsProps) {
+function FilterSection({ onFilterChange }: CategoryTabsProps) {
   const [showAvailableOnly, setShowAvailableOnly] = useState(false); // 신청가능
 
   const toggleAvailableOnly = (e: ChangeEvent<HTMLInputElement>) => {
     const isChecked = e.target.checked;
     setShowAvailableOnly(isChecked);
 
-    const filteredBookClubs = isChecked
-      ? bookClubs.filter(
-          (club) =>
-            club.memberCount < club.memberLimit &&
-            clubStatus(
-              club.memberCount,
-              club.memberLimit,
-              club.endDate,
-              new Date(),
-            ) !== 'closed',
-        )
-      : initialBookClubs;
-
-    setBookClubs(filteredBookClubs);
+    onFilterChange({ isAvailable: isChecked });
   };
 
   const updateMemberLimitFilter = (selectedValue: string | undefined) => {

src/features/bookclub/components/BookClubMainPage.tsx

@@ -9,14 +9,7 @@ import { useRouter } from 'next/navigation';
 import Loading from '@/components/loading/Loading';
 
 function BookClubMainPage() {
-  const {
-    clubList,
-    initialBookClubs,
-    setClubList,
-    isLoading,
-    filters,
-    updateFilters,
-  } = useBookClubList();
+  const { clubList, isLoading, filters, updateFilters } = useBookClubList();
 
   const router = useRouter();
 
@@ -48,13 +41,7 @@ function BookClubMainPage() {
           />
         }
       />
-      <FilterBar
-        filters={filters}
-        handleFilterChange={handleFilterChange}
-        bookClubs={clubList}
-        initialBookClubs={initialBookClubs}
-        setBookClubs={setClubList}
-      />
+      <FilterBar filters={filters} handleFilterChange={handleFilterChange} />
       {isLoading ? (
         <div className="flex h-[400px] justify-center">
           <Loading />

src/features/bookclub/hooks/useFetchBookClubList.ts

@@ -1,43 +1,26 @@
-import { useState, useEffect } from 'react';
-import { BookClub, BookClubParams } from '@/types/bookclubs';
+import { useState } from 'react';
+import { BookClubParams } from '@/types/bookclubs';
 import { useQuery } from '@tanstack/react-query';
 import { bookClubs } from '@/api/book-club/react-query';
+import { DEFAULT_FILTERS } from '@/lib/constants/filters';
 
 const useBookClubList = () => {
-  // TODO: 신청 가능 필터 param 추가시 clubList, initialBookClubs 상태 관리x
-  const [clubList, setClubList] = useState<BookClub[]>([]);
-  const [initialBookClubs, setInitialBookClubs] = useState<BookClub[]>([]);
-  const [filters, setFilters] = useState<BookClubParams>({
-    bookClubType: 'ALL',
-    meetingType: 'ALL',
-    order: 'DESC',
-    page: 1,
-    size: 10,
-    searchKeyword: '',
-  });
+  const [filters, setFilters] = useState<BookClubParams>(DEFAULT_FILTERS);
 
   const { data, isLoading, error } = useQuery({
     ...bookClubs.list(filters),
   });
 
-  const clubInfo = data?.bookClubs;
+  const clubList = data?.bookClubs;
 
-  // TODO: param 추가시, useEffect 대신 clubInfo 직접 사용
-  useEffect(() => {
-    if (clubInfo) {
-      setClubList(clubInfo);
-      setInitialBookClubs(clubInfo); // 초기 데이터 설정
-    }
-  }, [clubInfo]);
+  // console.log('useQuery 데이터:', clubList);
 
   const updateFilters = (newFilters: Partial<BookClubParams>) => {
     setFilters((prevFilters) => ({ ...prevFilters, ...newFilters }));
   };
 
   return {
     clubList,
-    initialBookClubs,
-    setClubList,
     isLoading,
     error,
     filters,

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

@@ -7,6 +7,10 @@ import {
 } from '@/features/club-details/utils/rating';
 
 function ReviewSummary({ reviewInfo }: { reviewInfo: ClubReviewResponse }) {
+  const validAverageScore = isNaN(reviewInfo.averageScore)
+    ? 0
+    : reviewInfo.averageScore;
+
   return (
     <section>
       <h2 className="mb-[10px] text-[20px] font-semibold text-gray-black">
@@ -20,10 +24,10 @@ function ReviewSummary({ reviewInfo }: { reviewInfo: ClubReviewResponse }) {
       >
         <div className="flex flex-col items-center justify-center gap-2">
           <div className="text-2xl font-semibold">
-            <span className="text-gray-black">{reviewInfo.averageScore}</span>
+            <span className="text-gray-black">{validAverageScore}</span>
             <span className="text-gray-dark-01"> / 5</span>
           </div>
-          <RatingDisplay ratingCount={reviewInfo.averageScore} />
+          <RatingDisplay ratingCount={validAverageScore} />
         </div>
         <div className="flex flex-col gap-1">
           {[5, 4, 3, 2, 1].map((score) => (

src/features/club-wish/components/WishPage.tsx

@@ -18,13 +18,7 @@ function WishPage() {
         }
       />
 
-      <FilterBar
-        filters={filters}
-        handleFilterChange={() => {}}
-        bookClubs={mockBookClubs}
-        setBookClubs={() => {}}
-        initialBookClubs={[]}
-      />
+      <FilterBar filters={filters} handleFilterChange={() => {}} />
       <ClubWishList bookClubs={mockBookClubs} />
     </>
   );

src/lib/constants/filters.ts

@@ -0,0 +1,10 @@
+import { BookClubParams } from '@/types/bookclubs';
+
+export const DEFAULT_FILTERS: BookClubParams = {
+  bookClubType: 'ALL',
+  meetingType: 'ALL',
+  order: 'DESC',
+  page: 1,
+  size: 10,
+  searchKeyword: '',
+};

src/types/bookclubs.ts

@@ -10,6 +10,7 @@ export interface BookClubParams {
   searchKeyword?: string;
   memberLimitMin?: number;
   memberLimitMax?: number;
+  isAvailable?: boolean;
 }
 
 export interface MyProfileParams {