From 504a0444ec0ebab81a597896c478b8046baae170 Mon Sep 17 00:00:00 2001
From: NEWJIN <winniepooh00@naver.com>
Date: Wed, 24 Jul 2024 18:17:35 +0900
Subject: [PATCH] =?UTF-8?q?FE-18=20:sparkles:=20=EC=B5=9C=EA=B7=BC=20?=
 =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/getRecentComments.ts         |  4 ++--
 src/components/main/RecentComment.tsx | 23 ++++++++++++++++++++---
 src/hooks/useGetRecentComments.ts     |  6 +++---
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/apis/getRecentComments.ts b/src/apis/getRecentComments.ts
index c563173b..5f83fcca 100644
--- a/src/apis/getRecentComments.ts
+++ b/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;
diff --git a/src/components/main/RecentComment.tsx b/src/components/main/RecentComment.tsx
index 85d18022..ad54549c 100644
--- a/src/components/main/RecentComment.tsx
+++ b/src/components/main/RecentComment.tsx
@@ -1,9 +1,23 @@
-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>;
@@ -11,7 +25,10 @@ function RecentComments() {
   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>
   );
 }
diff --git a/src/hooks/useGetRecentComments.ts b/src/hooks/useGetRecentComments.ts
index 45362e38..443938a9 100644
--- a/src/hooks/useGetRecentComments.ts
+++ b/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;