[feat] 칵테일 정렬기능

Author: mtm-git1018

src/domains/recipe/api/fetchRecipe.ts

@@ -4,6 +4,7 @@ import { useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-quer
 import { Cocktail, Sort } from '../types/types';
 import { useEffect, useRef } from 'react';
 
+
 interface CocktailResponse {
   data: Cocktail[];
 }
@@ -23,6 +24,11 @@ interface CocktailFilter extends SearchFilters {
   sortBy?: Sort;
 }
 
+interface PageParam {
+  lastId: number;
+  lastValue: number | string;
+}
+
 const fetchKeep = async (): Promise<Set<number>> => {
   const res = await fetch(`${getApi}/me/bar`, {
     method: 'GET',
@@ -37,15 +43,15 @@ const fetchKeep = async (): Promise<Set<number>> => {
 };
 
 const fetchRecipe = async (
-  lastId: number | null,
+  pageParam:PageParam|null,
   size: number,
-  sortBy?: Sort
+  sortBy?: Sort,
 ): Promise<Cocktail[]> => {
   const url = new URL(`${getApi}/cocktails`);
   url.searchParams.set('size', String(size));
-  if (lastId !== null) {
-    url.searchParams.set('lastId', String(lastId));
-    url.searchParams.set('lastValue', String(lastId));
+  if (pageParam) {
+    url.searchParams.set('lastId', String(pageParam.lastId));
+    url.searchParams.set('lastValue', String(pageParam.lastValue));
   }
 
   if (sortBy) {
@@ -96,18 +102,18 @@ const hasActiveFilters = (filters: SearchFilters): boolean => {
 
 export const useCocktailsInfiniteQuery = (size: number = 20, sortBy?: Sort) => {
   const user = useAuthStore((state) => state.user);
-  const queryClient = useQueryClient()
-  const prevSortBy = useRef(sortBy)
-  
-    useEffect(() => {
-      if (prevSortBy.current !== undefined && prevSortBy.current !== sortBy) {
-        queryClient.removeQueries({
-          queryKey: ['cocktails', 'infinite'],
-        });
-        prevSortBy.current = sortBy;
-      }
-    }, [sortBy, queryClient]);
-  
+  const queryClient = useQueryClient();
+  const prevSortBy = useRef(sortBy);
+
+  useEffect(() => {
+    if (prevSortBy.current !== undefined && prevSortBy.current !== sortBy) {
+      queryClient.removeQueries({
+        queryKey: ['cocktails', 'infinite', prevSortBy.current],
+      });
+    }
+    prevSortBy.current = sortBy;
+  }, [sortBy, queryClient]);
+
   return useInfiniteQuery({
     queryKey: ['cocktails', 'infinite', sortBy, size, user?.id],
     queryFn: async ({ pageParam }) => {
@@ -123,14 +129,38 @@ export const useCocktailsInfiniteQuery = (size: number = 20, sortBy?: Sort) => {
 
       return cocktails;
     },
-    getNextPageParam: (lastpage) => {
-      if (lastpage.length < size) return undefined;
-      return lastpage[lastpage.length - 1]?.cocktailId ?? undefined;
+    getNextPageParam: (lastPage) => {
+      if (lastPage.length < size) {
+        return undefined;
+      }
+
+      const lastItem = lastPage[lastPage.length - 1];
+      if (!lastItem) return undefined;
+
+
+      let lastValue: number | string;
+
+      switch (sortBy) {
+        case 'keeps':
+          lastValue = lastItem.keepCount ?? lastItem.cocktailId;
+          break;
+        case 'comments':
+          lastValue = lastItem.commentCount ?? lastItem.cocktailId;
+          break;
+        case 'recent':
+        default:
+          lastValue = lastItem.cocktailId;
+          break;
+      }
+
+      return {
+        lastId: lastItem.cocktailId,
+        lastValue: lastValue,
+      };
     },
-    initialPageParam: null as number | null,
-    refetchOnMount: true, // 마운트 시 재요청 (기본값: true)
-    refetchOnWindowFocus: true, // 윈도우 포커스 시 재요청 (기본값: true)
-    refetchOnReconnect: true, // 재연결 시 재요청
+    initialPageParam: null as PageParam | null,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
   });
 };
 

src/domains/recipe/types/types.ts

@@ -5,6 +5,8 @@ export interface Cocktail {
   cocktailImgUrl: string;
   cocktailNameKo: string;
   isKeep: boolean;
+  keepCount?: number;
+  commentCount?: number; 
 }
 
 export interface RecommendCocktail {