From a600c3201c17e7b77cacaaddd5ef2320701811a6 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 17:32:54 +0900 Subject: [PATCH 1/6] =?UTF-8?q?FE-15=20:sparkles:=20=EC=98=A4=EB=8A=98?= =?UTF-8?q?=EC=9D=98=20=EC=97=90=ED=94=BC=EA=B7=B8=EB=9E=A8=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=EC=9A=A9=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=8A=A4?= =?UTF-8?q?=ED=82=A4=EB=A7=88=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/schema/todayepigram.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/schema/todayepigram.ts diff --git a/src/schema/todayepigram.ts b/src/schema/todayepigram.ts new file mode 100644 index 00000000..2e8fbb0b --- /dev/null +++ b/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; +export type EpigramType = z.infer; From 5994bb1fa0ced33a9c62c14b64d12d54a0ab0ef6 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 18:24:10 +0900 Subject: [PATCH 2/6] =?UTF-8?q?FE-15=20:sparkles:=20=EC=98=A4=EB=8A=98?= =?UTF-8?q?=EC=9D=98=20=EC=97=90=ED=94=BC=EA=B7=B8=EB=9E=A8=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20api=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/getTodayEpigram.ts | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/apis/getTodayEpigram.ts diff --git a/src/apis/getTodayEpigram.ts b/src/apis/getTodayEpigram.ts new file mode 100644 index 00000000..67a3e67a --- /dev/null +++ b/src/apis/getTodayEpigram.ts @@ -0,0 +1,24 @@ +import { EpigramType } from '@/schema/todayepigram'; +import { AxiosError } from 'axios'; +import httpClient from './index'; + +const getTodayEpigram = async (): Promise => { + try { + const response = await httpClient.get('/epigrams/today'); + return response.data; + } catch (error) { + if (error instanceof AxiosError) { + if (error.response) { + throw new Error('에피그램 조회 요청 처리 중 문제가 발생했습니다.'); + } else if (error.request) { + throw new Error('서버 응답을 받지 못했습니다. 잠시 후 다시 시도해 주세요.'); + } else { + throw new Error('에피그램 조회 요청을 처리하는 동안 문제가 발생했습니다.'); + } + } else { + throw new Error('알 수 없는 오류가 발생했습니다.'); + } + } +}; + +export default getTodayEpigram; From 158b42c0cbb284798f14f914cfb4b16850255bc5 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 18:31:44 +0900 Subject: [PATCH 3/6] =?UTF-8?q?FE-15=20:sparkles:=20=EC=98=A4=EB=8A=98?= =?UTF-8?q?=EC=9D=98=20=EC=97=90=ED=94=BC=EA=B7=B8=EB=9E=A8=20useQuery=20?= =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useGetTodayEpigram.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/hooks/useGetTodayEpigram.ts diff --git a/src/hooks/useGetTodayEpigram.ts b/src/hooks/useGetTodayEpigram.ts new file mode 100644 index 00000000..e40c5aac --- /dev/null +++ b/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({ + queryKey: ['epigram'], + queryFn: getTodayEpigram, + }); + +export default useGetTodayEpigram; From 30b2985392e8a01d6ccef1de0d3470d2aded5481 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 18:44:22 +0900 Subject: [PATCH 4/6] =?UTF-8?q?FE-15=20:hammer:=20EpigramCard=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 테스트 데이터 제거 props 생성 --- src/components/Card/EpigramCard.tsx | 47 +++++++++++++++++------------ 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/src/components/Card/EpigramCard.tsx b/src/components/Card/EpigramCard.tsx index 6fb71f86..48d5ae56 100644 --- a/src/components/Card/EpigramCard.tsx +++ b/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,7 +21,7 @@ const sizeStyles = { }; const textSizeStyles = { - base: 'text-xs', + xs: 'text-xs', sm: 'sm:text-sm', md: 'md:text-base', lg: 'lg:text-xl', @@ -20,38 +29,36 @@ const textSizeStyles = { '2xl': '2xl:text-2xl', }; -function EpigramCard() { +function EpigramCard({ content, author, tags }: EpigramCardProps) { return ( -
+
{/* eslint-disable-next-line */}
{/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
- 오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아 간다. + {content}
- - 앙드레 말로 - + - {author} -
-
- #나아가야할때 -
-
- #꿈을이루고싶을때 -
+ {tags.map((tag) => ( +
+ #{tag.name} +
+ ))}
); From b27c8811d2a499890fa2891a53fea2abfbaadc40 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 18:45:59 +0900 Subject: [PATCH 5/6] =?UTF-8?q?FE-15=20:sparkles:=20=EC=98=A4=EB=8A=98?= =?UTF-8?q?=EC=9D=98=20=EC=97=90=ED=94=BC=EA=B7=B8=EB=9E=A8=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main/TodayEpigram.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/components/main/TodayEpigram.tsx diff --git a/src/components/main/TodayEpigram.tsx b/src/components/main/TodayEpigram.tsx new file mode 100644 index 00000000..f9b49b0b --- /dev/null +++ b/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

로딩 중...

; + if (error) return

{error.message}

; + if (!epigram) return

오늘의 에피그램이 없습니다.

; + + return ; +} + +export default TodayEpigram; From 96520cedd3dfee49b42d5b3bef5c334fbb036103 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 18:53:44 +0900 Subject: [PATCH 6/6] =?UTF-8?q?FE-15=20:fire:=20api=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/getTodayEpigram.ts | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/src/apis/getTodayEpigram.ts b/src/apis/getTodayEpigram.ts index 67a3e67a..17eb6aa0 100644 --- a/src/apis/getTodayEpigram.ts +++ b/src/apis/getTodayEpigram.ts @@ -1,24 +1,9 @@ -import { EpigramType } from '@/schema/todayepigram'; -import { AxiosError } from 'axios'; +import type { EpigramType } from '@/schema/todayepigram'; import httpClient from './index'; const getTodayEpigram = async (): Promise => { - try { - const response = await httpClient.get('/epigrams/today'); - return response.data; - } catch (error) { - if (error instanceof AxiosError) { - if (error.response) { - throw new Error('에피그램 조회 요청 처리 중 문제가 발생했습니다.'); - } else if (error.request) { - throw new Error('서버 응답을 받지 못했습니다. 잠시 후 다시 시도해 주세요.'); - } else { - throw new Error('에피그램 조회 요청을 처리하는 동안 문제가 발생했습니다.'); - } - } else { - throw new Error('알 수 없는 오류가 발생했습니다.'); - } - } + const response = await httpClient.get('/epigrams/today'); + return response.data; }; export default getTodayEpigram;