FE-18 ✨ 최근 댓글 더보기 기능 구현

src/apis/getRecentComments.ts

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

src/components/main/RecentComment.tsx

@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { useState } from 'react';
 import useGetRecentComments from '@/hooks/useGetRecentComments';
 import CommentCard from '@/components/Card/CommentCard';
+import type { CommentType } from '@/schema/recentcomment';
+import LoadMoreButton from './LoadMoreButton';
 
 function RecentComments() {
-  const { data, error, isLoading } = useGetRecentComments();
+  const [comments, setComments] = useState<CommentType[]>([]);
+  const [limit, setLimit] = useState(3);
+  const { data, error, isLoading } = useGetRecentComments(limit);
+
+  React.useEffect(() => {
+    if (data?.list) {
+      setComments(data.list);
+    }
+  }, [data]);
+
+  const handleLoadMore = () => {
+    setLimit((prevLimit) => prevLimit + 4);
+  };
 
   if (isLoading) return <p>로딩 중...</p>;
   if (error) return <p>{error.message}</p>;
 
   return (
     <div>
       <h1>최신 댓글</h1>
-      {data?.list.map((comment) => <CommentCard key={comment.id} writer={comment.writer} content={comment.content} createdAt={new Date(comment.createdAt)} status='view' />)}
+      {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 && <LoadMoreButton onClick={handleLoadMore} />}
     </div>
   );
 }

src/hooks/useGetRecentComments.ts

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