Fix(client): 직무 아티클 무한 스크롤 중복 호출 버그 해결 (#298)

* setting: add react-intersection-observer

* refactor: useInfiniteScroll 내부 useInView 사용하도록 변경

* feat: 바뀐 useInfiniteScroll interface 적용

* fix: getNextPageParam 실행 조건 수정

* chore: 불필요 코드 제거

* fix(client): pass scroll root directly to useInView in useInfiniteScroll

Author: constantly-dev

apps/client/package.json

@@ -15,11 +15,12 @@
     "class-variance-authority": "^0.7.1",
     "firebase": "^12.2.1",
     "framer-motion": "^12.23.12",
+    "lottie-react": "^2.4.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-error-boundary": "^6.0.0",
-    "react-router-dom": "^7.8.2",
-    "lottie-react": "^2.4.1"
+    "react-intersection-observer": "^10.0.3",
+    "react-router-dom": "^7.8.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

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/jobPins/apis/queries.ts

@@ -6,13 +6,15 @@ import {
   JobPinsDetailResponse,
 } from './axios';
 
+const PAGE_SIZE = 20;
+
 export const useGetJobPinsArticles = () => {
   return useInfiniteQuery<JobPinsResponse>({
     queryKey: ['jobPinsArticles'],
     queryFn: ({ pageParam = 0 }) => getJobPinsArticles(pageParam as number, 20),
     initialPageParam: 0,
     getNextPageParam: (lastPage, allPages) => {
-      if (lastPage.articles.length === 0) {
+      if (lastPage.articles.length < PAGE_SIZE) {
         return undefined;
       }
 

apps/client/src/pages/myBookmark/apis/queries.ts

@@ -3,15 +3,15 @@ import {
   useSuspenseInfiniteQuery,
   useSuspenseQuery,
 } from '@tanstack/react-query';
+import { CategoryBookmarkArticleResponse } from '../types/api';
 import {
   getBookmarkArticles,
   getBookmarkArticlesCount,
   getCategoryBookmarkArticles,
   getCategoryBookmarkArticlesCount,
 } from './axios';
-import {
-  CategoryBookmarkArticleResponse,
-} from '../types/api';
+
+const PAGE_SIZE = 20;
 
 export const useGetBookmarkArticles = (readStatus: boolean | null) => {
   return useSuspenseInfiniteQuery({
@@ -20,7 +20,7 @@ export const useGetBookmarkArticles = (readStatus: boolean | null) => {
       getBookmarkArticles(readStatus, Number(pageParam), 20),
     initialPageParam: 0,
     getNextPageParam: (lastPage, allPages) =>
-      lastPage.articles.length === 0 ? undefined : allPages.length,
+      lastPage.articles.length < PAGE_SIZE ? undefined : allPages.length,
   });
 };
 
@@ -55,8 +55,8 @@ export const useGetCategoryBookmarkArticles = (
 
     initialPageParam: 0,
     getNextPageParam: (lastPage, allPages) => {
-      if (!lastPage || lastPage.articles.length === 0) return undefined;
-      return allPages.length;
+      if (!lastPage) return undefined;
+      return lastPage.articles.length < PAGE_SIZE ? undefined : allPages.length;
     },
   });
 };

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 {

apps/client/src/shared/hooks/useInfiniteScroll.ts

@@ -1,51 +1,52 @@
 import { useEffect, useRef } from 'react';
+import { useInView } from 'react-intersection-observer';
 
-interface UseInfiniteScrollProps {
-  fetchNextPage: () => void;
-  hasNextPage?: boolean;
-  root?: React.RefObject<HTMLElement | null>;
-  threshold?: number;
-}
+type UseInfiniteScrollProps = {
+  /** 더 불러올 데이터가 있는지 */
+  hasMore?: boolean;
+  /** 추가 로딩 중인지 (중복 호출 방지용) */
+  isLoadingMore?: boolean;
+  /** 다음 데이터를 불러오는 함수 */
+  loadMore: () => void | Promise<unknown>;
 
-/**
- * Intersection Observer를 사용하여 무한 스크롤을 구현하는 커스텀 훅
- * @returns observer가 감지할 엘리먼트에 연결할 ref 객체
- */
+  /** 내부 스크롤 컨테이너를 root로 쓰고 싶을 때 */
+  rootRef?: React.RefObject<HTMLElement | null>;
+
+  /** 바닥에 닿기 전에 미리 불러오기 (ex: '200px 0px') */
+  rootMargin?: string;
+
+  /** 무한 스크롤을 일시적으로 끄기 */
+  enabled?: boolean;
+};
 
 export const useInfiniteScroll = ({
-  fetchNextPage,
-  hasNextPage,
-  root,
-  threshold = 0.5,
+  hasMore,
+  isLoadingMore = false,
+  loadMore,
+  rootRef,
+  rootMargin = '200px 0px',
+  enabled = true,
 }: UseInfiniteScrollProps) => {
-  const targetRef = useRef<HTMLDivElement>(null);
+  const lockRef = useRef(false);
+
+  const { ref, inView } = useInView({
+    root: rootRef?.current ?? null,
+    threshold: 0,
+    rootMargin,
+  });
 
   useEffect(() => {
-    if (!hasNextPage) return;
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          fetchNextPage();
-        }
-      },
-      {
-        root: root?.current,
-        threshold,
-      }
-    );
-
-    const currentTarget = targetRef.current;
-    if (currentTarget) {
-      observer.observe(currentTarget);
-    }
-
-    return () => {
-      if (currentTarget) {
-        observer.unobserve(currentTarget);
-      }
-    };
-  }, [fetchNextPage, hasNextPage, root, threshold]);
-
-  return targetRef;
+    if (!enabled) return;
+    if (!inView) return;
+    if (!hasMore) return;
+    if (isLoadingMore) return;
+    if (lockRef.current) return;
+
+    lockRef.current = true;
+    Promise.resolve(loadMore()).finally(() => {
+      lockRef.current = false;
+    });
+  }, [enabled, inView, hasMore, isLoadingMore, loadMore]);
+
+  return ref;
 };