FE-17 🐛 최신 에피그램 더보기 조회 파라미터 추가

src/apis/getRecentEpigrams.ts

@@ -1,9 +1,10 @@
 import type { GetRecentEpigramsResponseType } from '@/schema/recentEpigram';
 import httpClient from './index';
 
-const getRecentEpigrams = async (limit: number): Promise<GetRecentEpigramsResponseType> => {
+const getRecentEpigrams = async (cursor: number | null, limit: number): Promise<GetRecentEpigramsResponseType> => {
   const response = await httpClient.get('/epigrams', {
     params: {
+      cursor,
       limit,
     },
   });

src/components/main/RecentEpigram.tsx

@@ -1,31 +1,52 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import useGetRecentEpigrams from '@/hooks/useGetRecentEpigrams';
 import EpigramCard from '@/components/Card/EpigramCard';
 import { RecentEpigramType } from '@/schema/recentEpigram';
+import Image from 'next/image';
 import LoadMoreButton from './LoadMoreButton';
+import spinner from '../../../public/spinner.svg';
 
 function RecentEpigrams() {
   const router = useRouter();
-  const [limit, setLimit] = useState(3);
-  const { data, error, isLoading } = useGetRecentEpigrams(limit);
+  const [epigrams, setEpigrams] = useState<RecentEpigramType[]>([]);
+  const [cursor, setCursor] = useState<number>(0);
+  const [limit, setLimit] = useState<number>(3); // Initial limit is 3
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [shouldFetch, setShouldFetch] = useState<boolean>(true); // Trigger fetching manually
+
+  const { data, error, isLoading } = useGetRecentEpigrams({ cursor, limit, enabled: shouldFetch });
+
+  useEffect(() => {
+    if (data) {
+      setEpigrams((prevEpigrams) => [...prevEpigrams, ...data.list]); // Append new data to the existing list
+      if (data.list.length > 0) {
+        // Update cursor to the ID of the last item in the current list
+        setCursor(data.list[data.list.length - 1].id);
+      }
+      setIsLoadingMore(false); // Ensure loading stops when data is fetched
+      setShouldFetch(false); // Reset fetch trigger after fetching
+    }
+  }, [data]);
 
   const handleEpigramClick = (id: number) => {
     router.push(`/epigrams/${id}`);
   };
 
   const loadMore = () => {
-    setLimit((prevLimit) => prevLimit + 5);
+    setIsLoadingMore(true); // Set loading state
+    setLimit(5); // After initial load, always fetch 5 items
+    setShouldFetch(true); // Trigger fetch
   };
 
-  if (isLoading) return <p>로딩 중...</p>;
+  if (isLoading && epigrams.length === 0) return <p>로딩 중...</p>;
   if (error) return <p>{error.message}</p>;
 
   return (
     <div>
       <h1 className='text-black-600 text-2xl font-semibold font-pretendard leading-loose text-[16px] lg:text-[24px]'>최신 에피그램</h1>
       <div className='mt-[24px] lg:mt-[40px] gap-[16px] flex flex-col items-center'>
-        {data?.list.map((epigram: RecentEpigramType) => (
+        {epigrams.map((epigram: RecentEpigramType) => (
           <div
             key={epigram.id}
             onClick={() => handleEpigramClick(epigram.id)}
@@ -40,7 +61,12 @@ function RecentEpigrams() {
             <EpigramCard content={epigram.content} author={epigram.author} tags={epigram.tags} />
           </div>
         ))}
-        {data && limit < data.totalCount && (
+        {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>

src/hooks/useGetRecentEpigrams.ts

@@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 import getRecentEpigrams from '@/apis/getRecentEpigrams';
 import { GetRecentEpigramsResponseType } from '@/schema/recentEpigram';
 
-const useGetRecentEpigrams = (limit: number) =>
+const useGetRecentEpigrams = ({ cursor, limit, enabled }: { cursor: number | null; limit: number; enabled: boolean }) =>
   useQuery<GetRecentEpigramsResponseType, Error>({
-    queryKey: ['recentEpigrams', limit],
-    queryFn: () => getRecentEpigrams(limit),
+    queryKey: ['recentEpigrams', cursor, limit],
+    queryFn: () => getRecentEpigrams(cursor, limit),
+    enabled,
   });
 
 export default useGetRecentEpigrams;

src/schema/recentEpigram.ts

@@ -18,7 +18,7 @@ const RecentEpigramSchema = z.object({
 
 export const GetRecentEpigramsResponseSchema = z.object({
   totalCount: z.number(),
-  nextCursor: z.number(),
+  nextCursor: z.number().nullable(),
   list: z.array(RecentEpigramSchema),
 });