feat: 바뀐 useInfiniteScroll interface 적용

Author: constantly-dev

apps/client/src/pages/jobPins/JobPins.tsx

@@ -13,7 +13,7 @@ const JobPins = () => {
   const { scrollContainerRef, isBottomNoticeVisible, handleBottomWheel } =
     useJobPinsBottomNotice();
 
-  const { data, isPending, fetchNextPage, hasNextPage } =
+  const { data, isPending, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useGetJobPinsArticles();
   const {
     mutate: getJobPinDetail,
@@ -22,9 +22,10 @@ const JobPins = () => {
   } = useGetJobPinsArticleDetail();
 
   const observerRef = useInfiniteScroll({
-    fetchNextPage,
-    hasNextPage,
-    root: scrollContainerRef,
+    loadMore: fetchNextPage,
+    hasMore: hasNextPage,
+    isLoadingMore: isFetchingNextPage,
+    rootRef: scrollContainerRef,
   });
 
   const articlesToDisplay =

apps/client/src/pages/myBookmark/hooks/useMyBookmarkContentData.ts

@@ -27,16 +27,18 @@ export const useMyBookmarkContentData = ({
     data: bookmarkArticlesData,
     fetchNextPage: fetchNextBookmarkArticles,
     hasNextPage: hasNextBookmarkArticles,
+    isFetchingNextPage: isFetchingNextBookmarkArticles,
   } = useGetBookmarkArticles(readStatus);
+
   const { data: bookmarkCountData } = useGetBookmarkArticlesCount();
-  const { data: categoryCountData } = useGetCategoryBookmarkArticlesCount(
-    categoryId
-  );
+  const { data: categoryCountData } =
+    useGetCategoryBookmarkArticlesCount(categoryId);
 
   const {
     data: categoryArticlesData,
     fetchNextPage: fetchNextCategoryArticles,
     hasNextPage: hasNextCategoryArticles,
+    isFetchingNextPage: isFetchingNextCategoryArticles,
   } = useGetCategoryBookmarkArticles(categoryId, readStatus);
 
   const categoryList =
@@ -62,14 +64,20 @@ export const useMyBookmarkContentData = ({
   const hasNextPage = isCategoryView
     ? hasNextCategoryArticles
     : hasNextBookmarkArticles;
+
   const fetchNextPage = isCategoryView
     ? fetchNextCategoryArticles
     : fetchNextBookmarkArticles;
 
+  const isFetchingNextPage = isCategoryView
+    ? isFetchingNextCategoryArticles
+    : isFetchingNextBookmarkArticles;
+
   const sentinelRef = useInfiniteScroll({
-    fetchNextPage,
-    hasNextPage,
-    root: scrollContainerRef,
+    loadMore: fetchNextPage,
+    hasMore: hasNextPage,
+    isLoadingMore: isFetchingNextPage,
+    rootRef: scrollContainerRef,
   });
 
   return {

apps/client/src/pages/remind/Remind.tsx

@@ -46,15 +46,14 @@ const Remind = () => {
     useGetArticleDetail();
   const { mutate: updateToReadStatus } = usePutArticleReadStatus();
   const { mutate: deleteArticle } = useDeleteRemindArticle();
-  const { data, isPending, fetchNextPage, hasNextPage } = useGetRemindArticles(
-    formattedDate,
-    activeBadge === 'read'
-  );
+  const { data, isPending, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useGetRemindArticles(formattedDate, activeBadge === 'read');
 
   const observerRef = useInfiniteScroll({
-    fetchNextPage,
-    hasNextPage,
-    root: scrollContainerRef,
+    loadMore: fetchNextPage,
+    hasMore: hasNextPage,
+    isLoadingMore: isFetchingNextPage,
+    rootRef: scrollContainerRef,
   });
 
   const {