Merge pull request #61 from epigram5-9/feat/FE-15

FE-15 ✨ 오늘의 에피그램 조회 기능 구현

src/apis/getTodayEpigram.ts

@@ -0,0 +1,9 @@
+import type { EpigramType } from '@/schema/todayepigram';
+import httpClient from './index';
+
+const getTodayEpigram = async (): Promise<EpigramType> => {
+  const response = await httpClient.get('/epigrams/today');
+  return response.data;
+};
+
+export default getTodayEpigram;

src/components/Card/EpigramCard.tsx

@@ -1,9 +1,18 @@
 import React from 'react';
 
-// figma 상으로는 sm ~ 3xl 사이즈로 구현되어 있는데, tailwind 환경을 반영해
-// base ~ 2xl 으로 정의했습니다.
+interface Tag {
+  name: string;
+  id: number;
+}
+
+interface EpigramCardProps {
+  content: string;
+  author: string;
+  tags: Tag[];
+}
+
 const sizeStyles = {
-  base: 'w-[286px] max-h-[132px]',
+  xs: 'w-[286px] max-h-[132px]',
   sm: 'sm:w-[312px] sm:max-h-[152px]',
   md: 'md:w-[384px] md:max-h-[180px]',
   lg: 'lg:w-[540px] lg:max-h-[160px]',
@@ -12,46 +21,44 @@ const sizeStyles = {
 };
 
 const textSizeStyles = {
-  base: 'text-xs',
+  xs: 'text-xs',
   sm: 'sm:text-sm',
   md: 'md:text-base',
   lg: 'lg:text-xl',
   xl: 'xl:text-2xl',
   '2xl': '2xl:text-2xl',
 };
 
-function EpigramCard() {
+function EpigramCard({ content, author, tags }: EpigramCardProps) {
   return (
-    <div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.base} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl} ${sizeStyles['2xl']}`}>
+    <div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl} ${sizeStyles['2xl']}`}>
       <div className='w-full p-[22px] bg-white rounded-[14.67px] shadow border border-zinc-100 flex-col justify-start items-start flex relative overflow-hidden'>
         {/* eslint-disable-next-line */}
         <div className='absolute inset-0 bg-stripes w-full h-full'></div> {/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
         <div className='relative w-full z-10 flex flex-col justify-start items-start flex-1'>
           <div className='self-stretch flex-col justify-start items-start gap-2 flex'>
             <div
-              className={`self-stretch ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
+              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
             >
-              오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아 간다.
+              {content}
             </div>
             <div
-              className={`self-stretch ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
+              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
             >
-              - 앙드레 말로 -
+              - {author} -
             </div>
           </div>
         </div>
       </div>
       <div className='justify-start items-start gap-2 inline-flex'>
-        <div
-          className={`text-right ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
-        >
-          #나아가야할때
-        </div>
-        <div
-          className={`text-right ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
-        >
-          #꿈을이루고싶을때
-        </div>
+        {tags.map((tag) => (
+          <div
+            key={tag.id}
+            className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
+          >
+            #{tag.name}
+          </div>
+        ))}
       </div>
     </div>
   );

src/components/main/TodayEpigram.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import useGetTodayEpigram from '@/hooks/useGetTodayEpigram';
+import EpigramCard from '@/components/Card/EpigramCard';
+
+function TodayEpigram() {
+  const { data: epigram, error, isLoading } = useGetTodayEpigram();
+
+  if (isLoading) return <p>로딩 중...</p>;
+  if (error) return <p>{error.message}</p>;
+  if (!epigram) return <p>오늘의 에피그램이 없습니다.</p>;
+
+  return <EpigramCard content={epigram.content} author={epigram.author} tags={epigram.tags} />;
+}
+
+export default TodayEpigram;

src/hooks/useGetTodayEpigram.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import getTodayEpigram from '@/apis/getTodayEpigram';
+import { EpigramType } from '@/schema/todayepigram';
+
+const useGetTodayEpigram = () =>
+  useQuery<EpigramType, Error>({
+    queryKey: ['epigram'],
+    queryFn: getTodayEpigram,
+  });
+
+export default useGetTodayEpigram;

src/schema/todayepigram.ts

@@ -0,0 +1,21 @@
+import * as z from 'zod';
+
+const TagSchema = z.object({
+  name: z.string(),
+  id: z.number(),
+});
+
+export const EpigramSchema = 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(),
+  isLiked: z.boolean(),
+});
+
+export type TagType = z.infer<typeof TagSchema>;
+export type EpigramType = z.infer<typeof EpigramSchema>;