✨ [Feat] tanstack-query 및 쿼리키 설정 변경

src/api/book-club/bookClubMainAPI.ts

@@ -1,5 +1,5 @@
 import apiClient from '@/lib/utils/apiClient';
-import { BookClubParams } from '@/types/bookclubs';
+import { BookClubParams, MyProfileParams } from '@/types/bookclubs';
 
 export const bookClubMainAPI = {
   //북클럽 삭제
@@ -10,18 +10,43 @@ export const bookClubMainAPI = {
 
   //북클럽 목록 조회
   getBookClubs: async (params?: BookClubParams) => {
-    return await apiClient.get('/book-clubs', { params });
+    const response = await apiClient.get('/book-clubs', { params });
+    return response.data;
   },
 
   //단일 북클럽 조회
+  getBookClubDetail: async (bookClubId: number) => {
+    const response = await apiClient.get(`/book-clubs/${bookClubId}`);
+    return response.data;
+  },
 
   //유저가 참가한 북클럽 조회
+  userJoined: async (userId: number, params?: MyProfileParams) => {
+    const response = await apiClient.get(`/book-clubs/user/${userId}/joined`, {
+      params,
+    });
+    return response.data;
+  },
 
   //유저가 만든 북클럽 조회
+  userCreated: async (userId: number, params?: MyProfileParams) => {
+    const response = await apiClient.get(`/book-clubs/user/${userId}/created`, {
+      params,
+    });
+    return response.data;
+  },
 
   //내가 참여한 북클럽 조회
+  myJoined: async (params?: MyProfileParams) => {
+    const response = await apiClient.get('/book-clubs/my-joined', { params });
+    return response.data;
+  },
 
   //내가 만든 북클럽 조회
+  myCreated: async (params?: MyProfileParams) => {
+    const response = await apiClient.get('/book-clubs/my-created', { params });
+    return response.data;
+  },
 
   //북클럽 생성
   create: async (formData: FormData) => {

src/api/book-club/bookClubReviewAPI.ts

@@ -1,21 +1,47 @@
 import apiClient from '@/lib/utils/apiClient';
 import { WriteReviewParams, DetailClubReviewParams } from './types';
+import { MyProfileParams } from '@/types/bookclubs';
 
 export const bookClubReviewAPI = {
   //리뷰 삭제하기
 
   //단일 북클럽 리뷰 목록 조회
   getReviews: async ({
     bookClubId,
-    params,
+    params = { order: 'DESC' },
   }: {
     bookClubId: number;
     params?: DetailClubReviewParams;
   }) => {
-    await apiClient.get(`book-clubs/${bookClubId}/reviews`, { params });
+    return await apiClient.get(`book-clubs/${bookClubId}/reviews`, {
+      params,
+    });
+  },
+
+  //특정 유저의 리뷰 조회
+  userReviews: async ({
+    userId,
+    params = { order: 'DESC' },
+  }: {
+    userId: number;
+    params?: MyProfileParams;
+  }) => {
+    const response = await apiClient.get(
+      `/book-clubs/users/${userId}/reviews`,
+      {
+        params,
+      },
+    );
+    return response.data;
   },
 
   //내가 작성한 리뷰 조회
+  myReviews: async (params?: MyProfileParams) => {
+    const response = await apiClient.get('/book-clubs/my-reviews', {
+      params,
+    });
+    return response.data;
+  },
 
   //리뷰 작성하기
   write: async ({ bookClubId, rating, content }: WriteReviewParams) => {

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

@@ -17,14 +17,12 @@ export function useBookClubCreateMutation() {
     mutationFn: (formData: FormData) => bookClubMainAPI.create(formData),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: bookClubs.all().queryKey,
+        queryKey: bookClubs.list().queryKey,
       });
       queryClient.invalidateQueries({
-        queryKey: bookClubs.myCreated().queryKey,
-      });
-      queryClient.invalidateQueries({
-        queryKey: bookClubs.myJoined().queryKey,
+        queryKey: bookClubs.my().queryKey,
       });
+
       showToast({
         message: '북클럽이 성공적으로 생성되었습니다.',
         type: 'success',
@@ -41,12 +39,9 @@ export function useJoinBookClub() {
 
   return useMutation<void, AxiosError<{ message: string }>, number>({
     mutationFn: (id: number) => bookClubMemberAPI.join(id),
-    onSuccess: (_, id) => {
-      queryClient.invalidateQueries({
-        queryKey: bookClubs.detail(id).queryKey,
-      });
+    onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: bookClubs.myJoined().queryKey,
+        queryKey: bookClubs._def,
       });
     },
   });
@@ -57,12 +52,9 @@ export function useLeaveBookClub() {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (id: number) => bookClubMemberAPI.leave(id),
-    onSuccess: (_, id) => {
-      queryClient.invalidateQueries({
-        queryKey: bookClubs.detail(id).queryKey,
-      });
+    onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: bookClubs.myJoined().queryKey,
+        queryKey: bookClubs._def,
       });
     },
   });
@@ -84,7 +76,7 @@ export function useWriteReview() {
       });
 
       queryClient.invalidateQueries({
-        queryKey: bookClubs.myReviews().queryKey,
+        queryKey: bookClubs.my()._ctx.reviews().queryKey,
       });
       showToast({ message: '리뷰 작성을 완료하였습니다', type: 'success' });
     },
@@ -103,10 +95,10 @@ export function useCancelBookClub() {
     mutationFn: (id: number) => bookClubMainAPI.cancel(id),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: bookClubs.myCreated().queryKey,
+        queryKey: bookClubs.my()._ctx.created().queryKey,
       });
       queryClient.invalidateQueries({
-        queryKey: bookClubs.myJoined().queryKey,
+        queryKey: bookClubs.my()._ctx.joined().queryKey,
       });
     },
   });
@@ -119,7 +111,7 @@ export function useLikeBookClub() {
     mutationFn: (id: number) => bookClubLikeAPI.like(id),
     onSuccess: (_, id) => {
       queryClient.invalidateQueries({
-        queryKey: bookClubs.all().queryKey,
+        queryKey: bookClubs.list().queryKey,
       });
       queryClient.invalidateQueries({
         queryKey: bookClubs.detail(id).queryKey,
@@ -135,7 +127,7 @@ export function useUnLikeBookClub() {
     mutationFn: (id: number) => bookClubLikeAPI.unlike(id),
     onSuccess: (_, id) => {
       queryClient.invalidateQueries({
-        queryKey: bookClubs.all().queryKey,
+        queryKey: bookClubs.list().queryKey,
       });
       queryClient.invalidateQueries({
         queryKey: bookClubs.detail(id).queryKey,

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

@@ -1,116 +1,63 @@
 import { createQueryKeys } from '@lukemorales/query-key-factory';
-import apiClient from '@/lib/utils/apiClient';
 import { BookClubParams, MyProfileParams } from '@/types/bookclubs';
-
 import { ClubDetailReviewFilters } from '@/types/review';
-// TODO: 추후 각자 구현하는 api 명세에 맞게 filter 타입 정의해주세요
+import { bookClubReviewAPI } from '@/api/book-club/bookClubReviewAPI';
+import { bookClubMainAPI } from '@/api/book-club/bookClubMainAPI';
 
 export const bookClubs = createQueryKeys('bookClubs', {
-  all: (filters?: BookClubParams) => ({
+  list: (filters?: BookClubParams) => ({
     queryKey: [{ filters: filters || {} }],
-    queryFn: (ctx) =>
-      apiClient.get('/book-clubs', {
-        params: {
-          ...filters,
-          page: ctx.pageParam ?? 1,
-          size: 10,
-        },
-      }),
+    queryFn: () => bookClubMainAPI.getBookClubs(filters),
   }),
 
   detail: (bookClubId: number) => ({
     queryKey: [bookClubId],
-    queryFn: () => apiClient.get(`/book-clubs/${bookClubId}`),
+    queryFn: () => bookClubMainAPI.getBookClubDetail(bookClubId),
     contextQueries: {
       reviews: (filters?: ClubDetailReviewFilters) => ({
         queryKey: [{ filters: filters || {} }],
-        queryFn: (ctx) =>
-          apiClient.get(`/book-clubs/${bookClubId}/reviews`, {
-            params: {
-              ...filters,
-              page: ctx.pageParam ?? 1,
-              size: 10,
-            },
-          }),
+        queryFn: () =>
+          bookClubReviewAPI.getReviews({ bookClubId, params: filters }),
       }),
     },
   }),
 
-  //유저가 참여한 북클럽 조회
-  userJoined: (userId: number, filters?: MyProfileParams) => ({
-    queryKey: [userId, { filter: filters || {} }],
-    queryFn: (ctx) =>
-      apiClient.get(`/book-clubs/user/${userId}/joined`, {
-        params: {
-          ...filters,
-          page: ctx.pageParam ?? 1,
-          size: 10,
-        },
+  my: () => ({
+    queryKey: [{}],
+    queryFn: () => ({}),
+    contextQueries: {
+      joined: (filters?: MyProfileParams) => ({
+        queryKey: [{ filters: filters || {} }],
+        queryFn: () => bookClubMainAPI.myJoined(filters),
       }),
-  }),
-
-  //유저가 만든 북클럽 조회
-  userCreated: (userId: number, filters?: MyProfileParams) => ({
-    queryKey: [userId, { filter: filters || {} }],
-    queryFn: (ctx) =>
-      apiClient.get(`/book-clubs/user/${userId}/created`, {
-        params: {
-          ...filters,
-          page: ctx.pageParam ?? 1,
-          size: 10,
-        },
+      created: (filters?: MyProfileParams) => ({
+        queryKey: [{ filters: filters || {} }],
+        queryFn: () => bookClubMainAPI.myCreated(filters),
       }),
-  }),
-
-  //유저가 작성한 리뷰 조회
-  userReviewd: (userId: number, filters?: MyProfileParams) => ({
-    queryKey: [userId, { filter: filters || {} }],
-    queryFn: (ctx) =>
-      apiClient.get(`/book-clubs/users/${userId}/reviews`, {
-        params: {
-          ...filters,
-          page: ctx.pageParam ?? 1,
-          size: 10,
-        },
+      reviews: (filters?: MyProfileParams) => ({
+        queryKey: [{ filters: filters || {} }],
+        queryFn: () => bookClubReviewAPI.myReviews(filters),
       }),
+    },
   }),
 
-  //내가 참여한 북클럽 조회
-  myJoined: (filters?: MyProfileParams) => ({
-    queryKey: [{ filters: filters || {} }],
-    queryFn: (ctx) =>
-      apiClient.get('/book-clubs/my-joined', {
-        params: {
-          ...filters,
-          page: ctx.pageParam ?? 1,
-          size: 10,
-        },
+  user: (userId: number) => ({
+    queryKey: [userId],
+    queryFn: () => ({}),
+    contextQueries: {
+      joined: (filters?: MyProfileParams) => ({
+        queryKey: [{ filters: filters || {} }],
+        queryFn: () => bookClubMainAPI.userJoined(userId, filters),
       }),
-  }),
-
-  //내가 만든 북클럽 조회
-  myCreated: (filters?: MyProfileParams) => ({
-    queryKey: [{ filters: filters || {} }],
-    queryFn: (ctx) =>
-      apiClient.get('/book-clubs/my-created', {
-        params: {
-          ...filters,
-          page: ctx.pageParam ?? 1,
-          size: 10,
-        },
+      created: (filters?: MyProfileParams) => ({
+        queryKey: [{ filters: filters || {} }],
+        queryFn: () => bookClubMainAPI.userCreated(userId, filters),
       }),
-  }),
-
-  //내가 작성한 리뷰 조회
-  myReviews: (filters?: MyProfileParams) => ({
-    queryKey: [{ filters: filters || {} }],
-    queryFn: (ctx) =>
-      apiClient.get('/book-clubs/my-reviews', {
-        params: {
-          ...filters,
-          page: ctx.pageParam ?? 1,
-          size: 10,
-        },
+      reviews: (filters?: MyProfileParams) => ({
+        queryKey: [{ filters: filters || {} }],
+        queryFn: () =>
+          bookClubReviewAPI.userReviews({ userId, params: filters }),
       }),
+    },
   }),
 });

src/api/book-club/types.ts

@@ -1,5 +1,5 @@
 export interface DetailClubReviewParams {
-  bookClubId: number;
+  // bookClubId: number;
   order?: 'DESC' | 'RATE_DESC' | 'RATE_ASC';
   size?: number;
   page?: number;

src/features/auth/api/auth.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import apiClient from '@/lib/utils/apiClient';
 import { LoginFormData } from '../types/loginFormSchema';
 import { useAuthStore } from '@/store/authStore';
@@ -6,6 +8,7 @@ import { showToast } from '@/components/toast/toast';
 import { getCookie } from '@/features/auth/utils/cookies';
 import { SignUpFormData } from '../types/sign-up.schema';
 import { User } from '@/types/user';
+import { queryClient } from '@/lib/utils/reactQueryProvider';
 
 export const login = async (data: LoginFormData) => {
   try {
@@ -16,6 +19,8 @@ export const login = async (data: LoginFormData) => {
       throw new Error(response.error);
     }
 
+    queryClient.clear();
+
     const { setIsLoggedIn } = useAuthStore.getState();
     setIsLoggedIn(true);
     await getUserInfo();

src/features/bookclub/components/ClubListSection.tsx

@@ -25,7 +25,7 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) {
   };
 
   return (
-    <main className="flex w-full min-w-[336px] flex-1 flex-col items-center gap-y-[26px] bg-gray-light-01 px-[20px] pt-[18px] sm:justify-between md:px-[24px] lg:px-[102px]">
+    <main className="flex w-full min-w-[336px] flex-1 flex-col items-center gap-y-[26px] bg-gray-light-01 px-[20px] pt-[18px] md:px-[24px] lg:px-[102px]">
       {bookClubs?.length > 0 ? (
         bookClubs.map((club) => (
           <Card

src/features/bookclub/hooks/useFetchBookClubList.ts

@@ -17,10 +17,10 @@ const useBookClubList = () => {
   });
 
   const { data, isLoading, error } = useQuery({
-    ...bookClubs.all(filters),
+    ...bookClubs.list(filters),
   });
 
-  const clubInfo = data?.data.bookClubs;
+  const clubInfo = data?.bookClubs;
 
   // TODO: param 추가시, useEffect 대신 clubInfo 직접 사용
   useEffect(() => {