FE-17 ✨ 최근 에피그램 더보기 버튼 구현

src/apis/getRecentEpigrams.ts

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

src/components/main/LoadMoreButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface LoadMoreButtonProps {
+  onClick: () => void;
+}
+
+function LoadMoreButton({ onClick }: LoadMoreButtonProps) {
+  return (
+    <div
+      onClick={onClick}
+      className='h-12 px-[18px] py-3 rounded-[100px] border border-[#cfdbea] justify-center items-center gap-1 inline-flex cursor-pointer'
+      role='button'
+      tabIndex={0}
+      onKeyPress={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onClick();
+        }
+      }}
+    >
+      <div className='w-6 h-6 relative' />
+      <Image src='/icon/plus-icon.svg' alt='plus icon' layout='fill' objectFit='contain' />
+      <div className='text-#abb8ce text-sm font-normal font-Pretendard leading-normal'>더보기</div>
+    </div>
+  );
+}
+
+export default LoadMoreButton;

src/hooks/useGetRecentEpigrams.ts

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