fix: 댓글 작성 시 업데이트가 바로 되지 않는 문제 수정 (#128)

* fix: 댓글 작성 시 업데이트가 바로 되지 않는 문제 수정

- 화면에 intersection-ref가 보이지 않으면 invalidate를 해도 업데이트가 되지 않음 (이유는 아직 모름)
- 따라서 margin을 400px(휴리스틱)줘서 ref가 보이도록 수정

* fix: 댓글 작성 invalidate와 useInfiniteFetch의 충돌문제 해결

src/pages/FeedDetail/components/Comments.tsx

@@ -18,7 +18,7 @@ const Comments = ({ feedId }: Props) => {
   const { profileImageUrl: myImageUrl, nickname: myNickname } = useMemberInfoQuery(getUserId());
 
   const intersectionRef = useRef(null);
-  useCommentInfiniteFetch(intersectionRef, fetchNextPage);
+  useCommentInfiniteFetch(intersectionRef, fetchNextPage, feedId);
 
   return (
     <Box padding="20px 22px">
@@ -31,13 +31,9 @@ const Comments = ({ feedId }: Props) => {
           </Fragment>
         ))
       ) : (
-        <>
-          <div ref={intersectionRef}></div>
-          <EmptyTabContentSection svg={SVGProfileMessageDots} textList={['', '아직 작성된 댓글이 없어요.']} />
-        </>
+        <EmptyTabContentSection svg={SVGProfileMessageDots} textList={['', '아직 작성된 댓글이 없어요.']} />
       )}
-      {/* 무한 스크롤이 간헐적으로 되지 않는 문제 때문에 생긴 중복 분기 처리 로직입니다. 문제 해결시 리팩토링 예정 */}
-      {comments.length > 0 && <div ref={intersectionRef}></div>}
+      <div ref={intersectionRef} id="comment-intersection-ref"></div>
     </Box>
   );
 };

src/pages/FeedDetail/hooks/queries/useCommentsQuery.ts

@@ -20,8 +20,17 @@ const useCommentsQuery = (feedId: string) => {
     getNextPageParam: (lastPage, allPages, lastPageParam) => {
       const nextPageParam = { page: lastPageParam.page + 1, size: sizePerPage };
 
-      // 대댓글 또한 댓글로 간주되어 lastPage.length < sizePerPage 조건문이 정상적으로 동작하지 않아 제거했습니다.
-      return lastPage.length === 0 ? undefined : nextPageParam;
+      const commentsCount = allPages.reduce(
+        (acc, commentParents) =>
+          acc +
+          commentParents.reduce(
+            (acc, { commentChildResponses }) => acc + commentChildResponses.length,
+            commentParents.length,
+          ),
+        0,
+      );
+
+      return commentsCount < sizePerPage * (lastPageParam.page + 1) ? undefined : nextPageParam;
     },
   });
 

src/pages/FeedDetail/hooks/useCommentInfiniteFetch.ts

@@ -1,18 +1,26 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { MutableRefObject, useEffect } from 'react';
 import { useIntersection } from 'react-use';
 
-const useCommentInfiniteFetch = (intersectionRef: MutableRefObject<null>, fetchCallback: () => void) => {
+const useCommentInfiniteFetch = (
+  intersectionRef: MutableRefObject<HTMLDivElement | null>,
+  fetchCallback: () => void,
+  feedId: string,
+) => {
+  const queryClient = useQueryClient();
   const intersection = useIntersection(intersectionRef, {
     root: null,
-    rootMargin: `0px`,
+    rootMargin: '0px',
     threshold: 1,
   });
 
   useEffect(() => {
-    if (intersection?.isIntersecting) {
+    const commentState = queryClient.getQueryState(['comments', feedId]);
+
+    if (intersection?.isIntersecting && commentState?.fetchStatus !== 'fetching') {
       fetchCallback();
     }
-  }, [intersection, fetchCallback]);
+  }, [intersection, queryClient, feedId, fetchCallback]);
 };
 
 export default useCommentInfiniteFetch;