From fdcd7ba5edbacef7832dfc270973afbdba04e07b Mon Sep 17 00:00:00 2001
From: NEWJIN <109906670+newjinlee@users.noreply.github.com>
Date: Fri, 2 Aug 2024 01:13:46 +0900
Subject: [PATCH] =?UTF-8?q?FE-18=20:bug:=20=EC=B5=9C=EC=8B=A0=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EC=A1=B0=ED=9A=8C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95=20(#154)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* FE-18 :bug: 댓글 프로필 사진 출력 버그 수정
---
 src/apis/getRecentComments.ts         |  3 +-
 src/components/Card/CommentCard.tsx   |  2 +-
 src/components/main/RecentComment.tsx | 42 +++++++++++++++++++--------
 src/hooks/useGetRecentComments.ts     |  7 +++--
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/apis/getRecentComments.ts b/src/apis/getRecentComments.ts
index 5f83fcca..53b48b40 100644
--- a/src/apis/getRecentComments.ts
+++ b/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,
     },
   });
diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx
index 45368d72..9dbdea2e 100644
--- a/src/components/Card/CommentCard.tsx
+++ b/src/components/Card/CommentCard.tsx
@@ -13,7 +13,7 @@ function CommentCard({ writer, content, createdAt, status }: CommentCardProps) {
       <div className='justify-start items-start gap-4 inline-flex'>
         <div className='w-12 h-12 relative'>
           <div className='w-12 h-12 bg-zinc-300 rounded-full overflow-hidden flex items-center justify-center'>
-            <Image src='/ProfileTestImage.jpg' alt='프로필 이미지' layout='fill' objectFit='cover' className='rounded-full' />
+            <Image src={writer.image || '/ProfileTestImage.jpg'} alt={`${writer.nickname}의 프로필 이미지`} layout='fill' objectFit='cover' className='rounded-full' />{' '}
           </div>
         </div>
         <div className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}>
diff --git a/src/components/main/RecentComment.tsx b/src/components/main/RecentComment.tsx
index eefdad42..868b710b 100644
--- a/src/components/main/RecentComment.tsx
+++ b/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>
diff --git a/src/hooks/useGetRecentComments.ts b/src/hooks/useGetRecentComments.ts
index 443938a9..40ce3824 100644
--- a/src/hooks/useGetRecentComments.ts
+++ b/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;