FE-18 🐛 최신 댓글 더보기 조회 파라미터 추가

src/apis/getRecentComments.ts

@@ -1,9 +1,10 @@
 import type { GetRecentCommentsResponseType } from '@/schema/recentcomment';
 import httpClient from './index';
 
-const getRecentComments = async (limit: number): Promise<GetRecentCommentsResponseType> => {
+const getRecentComments = async (cursor: number, limit: number): Promise<GetRecentCommentsResponseType> => {
   const response = await httpClient.get('/comments', {
     params: {
+      cursor,
       limit,
     },
   });

src/components/main/RecentComment.tsx

@@ -1,25 +1,38 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import useGetRecentComments from '@/hooks/useGetRecentComments';
 import CommentCard from '@/components/Card/CommentCard';
 import type { CommentType } from '@/schema/recentcomment';
+import Image from 'next/image';
 import LoadMoreButton from './LoadMoreButton';
+import spinner from '../../../public/spinner.svg';
 
 function RecentComments() {
   const [comments, setComments] = useState<CommentType[]>([]);
-  const [limit, setLimit] = useState(3);
-  const { data, error, isLoading } = useGetRecentComments(limit);
+  const [cursor, setCursor] = useState<number>(0);
+  const [limit, setLimit] = useState<number>(3);
+  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+  const [shouldFetch, setShouldFetch] = useState<boolean>(true);
 
-  React.useEffect(() => {
-    if (data?.list) {
-      setComments(data.list);
+  const { data, error, isLoading } = useGetRecentComments({ cursor, limit, enabled: shouldFetch });
+
+  useEffect(() => {
+    if (data) {
+      setComments((prevComments) => [...prevComments, ...data.list]);
+      if (data.list.length > 0) {
+        setCursor(data.list[data.list.length - 1].id);
+      }
+      setIsLoadingMore(false);
+      setShouldFetch(false);
     }
   }, [data]);
 
-  const handleLoadMore = () => {
-    setLimit((prevLimit) => prevLimit + 4);
+  const loadMore = () => {
+    setIsLoadingMore(true);
+    setLimit(4);
+    setShouldFetch(true);
   };
 
-  if (isLoading) return <p>로딩 중...</p>;
+  if (isLoading && comments.length === 0) return <p>로딩 중...</p>;
   if (error) return <p>{error.message}</p>;
 
   return (
@@ -29,9 +42,14 @@ function RecentComments() {
         {comments.map((comment) => (
           <CommentCard key={comment.id} writer={comment.writer} content={comment.content} createdAt={new Date(comment.createdAt)} status='view' />
         ))}
-        {data?.totalCount && comments.length < data.totalCount && (
-          <div className='mt-10 flex justify-center w-full'>
-            <LoadMoreButton onClick={handleLoadMore} />
+        {isLoadingMore && (
+          <div className='w-full flex items-center justify-center lg:mt-[70px] md:mt-[50px]'>
+            <Image src={spinner} alt='로딩중' width={50} height={50} />
+          </div>
+        )}
+        {!isLoadingMore && data?.nextCursor !== null && (
+          <div className='mt-10 w-full flex justify-center'>
+            <LoadMoreButton onClick={loadMore} />
           </div>
         )}
       </div>

src/hooks/useGetRecentComments.ts

@@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 import getRecentComments from '@/apis/getRecentComments';
 import { GetRecentCommentsResponseType } from '@/schema/recentcomment';
 
-const useGetRecentComments = (limit: number) =>
+const useGetRecentComments = ({ cursor, limit, enabled }: { cursor: number; limit: number; enabled: boolean }) =>
   useQuery<GetRecentCommentsResponseType, Error>({
-    queryKey: ['recentComments', limit],
-    queryFn: () => getRecentComments(limit),
+    queryKey: ['recentComments', cursor, limit],
+    queryFn: () => getRecentComments(cursor, limit),
+    enabled,
   });
 
 export default useGetRecentComments;