Refactor: 무한 스크롤 리팩토링 나머지 #65

Author: jiyeeeah

hooks/common/useInfiniteScroll.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';

hooks/queries/useGetMyBoardList.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import getMyBoardList from '@/service/myPage';
 import { MyBoardList } from '@/types/types';
 import useInfiniteScroll from '../common/useInfiniteScroll';

hooks/queries/useGetMyBookmarkedBoardList.tsx

@@ -1,34 +1,15 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useInView } from 'react-intersection-observer';
-import { useInfiniteQuery } from '@tanstack/react-query';
 import getMyBoardList from '@/service/myPage';
 import { BookmarkedBoardList } from '@/types/types';
+import useInfiniteScroll from '../common/useInfiniteScroll';
 
 export default function useGetBookmarkedBoardList() {
-  const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
-    useInfiniteQuery({
-      queryKey: ['bookmarkedBoards'],
-      queryFn: ({ pageParam = 0 }): Promise<BookmarkedBoardList> =>
-        getMyBoardList(pageParam),
-      getNextPageParam: (boardlist) =>
-        boardlist.last ? undefined : boardlist.number + 1,
-    });
-
-  // 무한 스크롤 화면 가장 아래 부분 탐지하는 observer
-  function Observer({ children }: { children: React.ReactNode }) {
-    const { ref, inView } = useInView({ threshold: 1 });
-    useEffect(() => {
-      if (inView && hasNextPage) {
-        fetchNextPage();
-      }
-    }, [inView]);
-    if (!hasNextPage || !data) return null;
-    return (
-      <div ref={ref}>{isLoading || isFetchingNextPage ? children : null}</div>
-    );
-  }
+  const { data, isLoading, Observer } = useInfiniteScroll<BookmarkedBoardList>({
+    queryKey: 'myBookmarkedBoards',
+    firstPageParam: 0,
+    queryFn: getMyBoardList,
+    getNextPageParamFn: (boardlist) =>
+      boardlist.last ? undefined : boardlist.number + 1,
+  });
 
   return {
     Observer,