FE-42✨ 댓글 목록에 무한스크롤 적용

src/components/epigram/Comment/CommentList.tsx

@@ -1,27 +1,66 @@
-import useEpigramCommentsQuery from '@/hooks/useEpigramCommentHook';
+import React, { useEffect, useRef, useCallback } from 'react';
 import { EpigramCommentProps } from '@/types/epigram.types';
+import useEpigramCommentsQuery from '@/hooks/useEpigramCommentsQueryHook';
 import CommentItem from './CommentItem';
 import NoComment from './NoComment';
 
 function CommentList({ epigramId, currentUserId }: EpigramCommentProps) {
-  const {
-    data: comments,
-    isLoading,
-    error,
-  } = useEpigramCommentsQuery({
-    id: epigramId,
-    limit: 3,
-  });
-
-  if (isLoading) return <div>댓글을 불러오는 중...</div>;
-  if (error) return <div>에러: {(error as Error).message}</div>;
-  const commentCount = comments?.list.length || 0;
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } = useEpigramCommentsQuery(epigramId);
+
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const lastCommentRef = useRef<HTMLDivElement | null>(null);
+
+  const handleObserver = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      const [target] = entries;
+      if (target.isIntersecting && hasNextPage) {
+        fetchNextPage();
+      }
+    },
+    [fetchNextPage, hasNextPage],
+  );
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '20px',
+      threshold: 1.0,
+    };
+
+    observerRef.current = new IntersectionObserver(handleObserver, options);
+
+    if (lastCommentRef.current) {
+      observerRef.current.observe(lastCommentRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [handleObserver]);
+
+  if (status === 'pending') return <div>댓글을 불러오는 중...</div>;
+  if (status === 'error') return <div>에러: 댓글을 불러오는데 실패했습니다.</div>;
+
+  const allComments = data?.pages.flatMap((page) => page.list) || [];
+  const totalCount = data?.pages[0]?.totalCount || 0;
 
   return (
     <div className='flex flex-col gap-4'>
-      <h3 className='text-base lg:text-xl font-semibold'>댓글({comments?.totalCount})</h3>
-      {commentCount > 0 ? comments?.list.map((comment) => <CommentItem key={comment.id} comment={comment} status={comment.writer.id === currentUserId ? 'edit' : 'complete'} />) : <NoComment />}
+      <h3 className='text-base lg:text-xl font-semibold'>댓글({totalCount})</h3>
+      {allComments.length > 0 ? (
+        <>
+          {allComments.map((comment) => (
+            <CommentItem key={comment.id} comment={comment} status={comment.writer.id === currentUserId ? 'edit' : 'complete'} />
+          ))}
+          <div ref={lastCommentRef}>{isFetchingNextPage && <div>더 많은 댓글을 불러오는 중...</div>}</div>
+        </>
+      ) : (
+        <NoComment />
+      )}
     </div>
   );
 }
+
 export default CommentList;

src/hooks/useEpigramCommentsQueryHook.ts

@@ -0,0 +1,13 @@
+import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
+import { CommentResponseType } from '@/schema/comment';
+import getEpigramComments from '@/apis/epigramComment';
+
+const useEpigramCommentsQuery = (epigramId: number) =>
+  useInfiniteQuery<CommentResponseType, Error, InfiniteData<CommentResponseType>, [string, number], number | undefined>({
+    queryKey: ['epigramComments', epigramId],
+    queryFn: ({ pageParam }) => getEpigramComments({ id: epigramId, limit: 3, cursor: pageParam }),
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+  });
+
+export default useEpigramCommentsQuery;

src/lib/constants.ts

@@ -1,4 +1,4 @@
 const TOKEN =
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxMTg3NDgyLCJleHAiOjE3MjExODkyODIsImlzcyI6InNwLWVwaWdyYW0ifQ.Qpw2ByeGF-rkQ1wwJ2c7OtjyVXBevOsZhMeyuzZjosM';
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxMjAwMTI0LCJleHAiOjE3MjEyMDE5MjQsImlzcyI6InNwLWVwaWdyYW0ifQ.BUQ4EAR04HMIg5YMAJI8Rd7aa6_GyAoZs89YL0TuCgg';
 
 export default TOKEN;