From 96bae0b7240934582958ce8e31a53ea7c826e0c7 Mon Sep 17 00:00:00 2001
From: Youngjin Park <youngjin988@gmail.com>
Date: Mon, 29 Apr 2024 20:58:59 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=8C=93=EA=B8=80=20=EC=9E=91=EC=84=B1?=
 =?UTF-8?q?=20=EC=8B=9C=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95=20(#128)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

* fix: 댓글 작성 invalidate와 useInfiniteFetch의 충돌문제 해결
---
 src/pages/FeedDetail/components/Comments.tsx     | 10 +++-------
 .../FeedDetail/hooks/queries/useCommentsQuery.ts | 13 +++++++++++--
 .../FeedDetail/hooks/useCommentInfiniteFetch.ts  | 16 ++++++++++++----
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/pages/FeedDetail/components/Comments.tsx b/src/pages/FeedDetail/components/Comments.tsx
index d4d9ab53..1831d8ea 100644
--- a/src/pages/FeedDetail/components/Comments.tsx
+++ b/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>
   );
 };
diff --git a/src/pages/FeedDetail/hooks/queries/useCommentsQuery.ts b/src/pages/FeedDetail/hooks/queries/useCommentsQuery.ts
index fd7ea608..399600c6 100644
--- a/src/pages/FeedDetail/hooks/queries/useCommentsQuery.ts
+++ b/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;
     },
   });
 
diff --git a/src/pages/FeedDetail/hooks/useCommentInfiniteFetch.ts b/src/pages/FeedDetail/hooks/useCommentInfiniteFetch.ts
index c4e65506..c482914d 100644
--- a/src/pages/FeedDetail/hooks/useCommentInfiniteFetch.ts
+++ b/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;