FE-17 ✨ 최근 에피그램 조회 기능 구현

src/apis/getRecentEpigrams.ts

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

src/components/main/RecentEpigram.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import useGetRecentEpigrams from '@/hooks/useGetRecentEpigrams';
+import EpigramCard from '@/components/Card/EpigramCard';
+
+function RecentEpigrams() {
+  const { data, error, isLoading } = useGetRecentEpigrams();
+
+  if (isLoading) return <p>로딩 중...</p>;
+  if (error) return <p>{error.message}</p>;
+
+  return (
+    <div>
+      <h1>최신 에피그램</h1>
+      {data?.list.map((epigram) => <EpigramCard key={epigram.id} content={epigram.content} author={epigram.author} tags={epigram.tags} />)}
+    </div>
+  );
+}
+
+export default RecentEpigrams;

src/hooks/useGetRecentEpigrams.ts

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

src/schema/recentEpigram.ts

@@ -0,0 +1,27 @@
+import * as z from 'zod';
+
+const TagSchema = z.object({
+  name: z.string(),
+  id: z.number(),
+});
+
+const RecentEpigramSchema = z.object({
+  likeCount: z.number(),
+  tags: z.array(TagSchema),
+  writerId: z.number(),
+  referenceUrl: z.string().url(),
+  referenceTitle: z.string(),
+  author: z.string(),
+  content: z.string(),
+  id: z.number(),
+});
+
+export const GetRecentEpigramsResponseSchema = z.object({
+  totalCount: z.number(),
+  nextCursor: z.number(),
+  list: z.array(RecentEpigramSchema),
+});
+
+export type TagType = z.infer<typeof TagSchema>;
+export type RecentEpigramType = z.infer<typeof RecentEpigramSchema>;
+export type GetRecentEpigramsResponseType = z.infer<typeof GetRecentEpigramsResponseSchema>;