카테고리 무한 스크롤 구현

frontend/hooks/useInfiniteScroll.ts

@@ -0,0 +1,107 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useMemo, useCallback } from "react";
+
+export interface InfiniteScrollConfig<TData, TParams = Record<string, any>> {
+  queryKey: any[];
+  queryFn: (params: { pageParam: number } & TParams) => Promise<{
+    data: TData[];
+    total?: number;
+    hasMore?: boolean;
+  }>;
+  initialPageParam?: number;
+  getNextPageParam?: (lastPage: any, allPages: any[], lastPageParam: number) => number | undefined;
+  pageSize?: number;
+  enabled?: boolean;
+  staleTime?: number;
+  params?: TParams;
+}
+
+export function useInfiniteScroll<TData, TParams = Record<string, any>>({
+  queryKey,
+  queryFn,
+  initialPageParam = 1,
+  getNextPageParam,
+  pageSize = 20,
+  enabled = true,
+  staleTime = 5 * 60 * 1000, // 5분
+  params = {} as TParams,
+}: InfiniteScrollConfig<TData, TParams>) {
+  // React Query의 useInfiniteQuery 사용
+  const infiniteQuery = useInfiniteQuery({
+    queryKey: [...queryKey, params],
+    queryFn: ({ pageParam }) => queryFn({ pageParam, ...params }),
+    initialPageParam,
+    getNextPageParam:
+      getNextPageParam ||
+      ((lastPage, allPages, lastPageParam) => {
+        // 기본 페이지네이션 로직
+        if (lastPage.data.length < pageSize) {
+          return undefined; // 더 이상 페이지 없음
+        }
+        return lastPageParam + 1;
+      }),
+    enabled,
+    staleTime,
+  });
+
+  // 모든 페이지의 데이터를 평탄화
+  const flatData = useMemo(() => {
+    return infiniteQuery.data?.pages.flatMap((page) => page.data) || [];
+  }, [infiniteQuery.data]);
+
+  // 총 개수 계산 (첫 번째 페이지의 total 사용)
+  const totalCount = useMemo(() => {
+    return infiniteQuery.data?.pages[0]?.total || 0;
+  }, [infiniteQuery.data]);
+
+  // 다음 페이지 로드 함수
+  const loadMore = useCallback(() => {
+    if (infiniteQuery.hasNextPage && !infiniteQuery.isFetchingNextPage) {
+      infiniteQuery.fetchNextPage();
+    }
+  }, [infiniteQuery]);
+
+  // 스크롤 이벤트 핸들러
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+
+      // 스크롤이 하단에서 100px 이내에 도달하면 다음 페이지 로드
+      if (scrollHeight - scrollTop <= clientHeight + 100) {
+        loadMore();
+      }
+    },
+    [loadMore],
+  );
+
+  // 무한 스크롤 상태 정보
+  const infiniteScrollState = {
+    // 데이터
+    data: flatData,
+    totalCount,
+
+    // 로딩 상태
+    isLoading: infiniteQuery.isLoading,
+    isFetchingNextPage: infiniteQuery.isFetchingNextPage,
+    hasNextPage: infiniteQuery.hasNextPage,
+
+    // 에러 상태
+    error: infiniteQuery.error,
+    isError: infiniteQuery.isError,
+
+    // 기타 상태
+    isSuccess: infiniteQuery.isSuccess,
+    isFetching: infiniteQuery.isFetching,
+  };
+
+  return {
+    ...infiniteScrollState,
+    loadMore,
+    handleScroll,
+    refetch: infiniteQuery.refetch,
+    invalidate: infiniteQuery.refetch,
+  };
+}
+
+// 편의를 위한 타입 정의
+export type InfiniteScrollReturn<TData> = ReturnType<typeof useInfiniteScroll<TData>>;