From a600c3201c17e7b77cacaaddd5ef2320701811a6 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 17:32:54 +0900 Subject: [PATCH 01/11] =?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 02/11] =?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 03/11] =?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 04/11] =?UTF-8?q?FE-15=20:hammer:=20EpigramCard=20?= =?UTF-8?q?=EC=BB=B4=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 05/11] =?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 06/11] =?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; From fa8d9bbd5644e88cbea6d7db4148974f3ab0a6d7 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 19:46:03 +0900 Subject: [PATCH 07/11] =?UTF-8?q?FE-18=20:sparkles:=20=EC=B5=9C=EA=B7=BC?= =?UTF-8?q?=20=EB=8C=93=EA=B8=80=20=EC=A1=B0=ED=9A=8C=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=8A=A4=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/recentcomment.ts | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/schema/recentcomment.ts diff --git a/src/schema/recentcomment.ts b/src/schema/recentcomment.ts new file mode 100644 index 00000000..524c0473 --- /dev/null +++ b/src/schema/recentcomment.ts @@ -0,0 +1,27 @@ +import * as z from 'zod'; + +const WriterSchema = z.object({ + image: z.string().url(), + nickname: z.string(), + id: z.number(), +}); + +const CommentSchema = z.object({ + epigramId: z.number(), + writer: WriterSchema, + updatedAt: z.coerce.date(), + createdAt: z.coerce.date(), + isPrivate: z.boolean(), + content: z.string(), + id: z.number(), +}); + +export const GetRecentCommentsResponseSchema = z.object({ + totalCount: z.number(), + nextCursor: z.number(), + list: z.array(CommentSchema), +}); + +export type WriterType = z.infer; +export type CommentType = z.infer; +export type GetRecentCommentsResponseType = z.infer; From bd07b63541eafc457b40bf757a974b5344925aba Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 19:46:21 +0900 Subject: [PATCH 08/11] =?UTF-8?q?FE-18=20:sparkles:=20=EC=B5=9C=EA=B7=BC?= =?UTF-8?q?=20=EB=8C=93=EA=B8=80=20=EC=A1=B0=ED=9A=8C=20api=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/getRecentComments.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/apis/getRecentComments.ts diff --git a/src/apis/getRecentComments.ts b/src/apis/getRecentComments.ts new file mode 100644 index 00000000..c563173b --- /dev/null +++ b/src/apis/getRecentComments.ts @@ -0,0 +1,13 @@ +import type { GetRecentCommentsResponseType } from '@/schema/recentcomment'; +import httpClient from './index'; + +const getRecentComments = async (): Promise => { + const response = await httpClient.get('/comments', { + params: { + limit: 3, + }, + }); + return response.data; +}; + +export default getRecentComments; From 39afbd303c0f05a136235c0237af415cf2f9c436 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 19:48:45 +0900 Subject: [PATCH 09/11] =?UTF-8?q?FE-18=20:sparkles:=20=EB=8C=93=EA=B8=80?= =?UTF-8?q?=20=EC=A1=B0=ED=9A=8C=20=EA=B4=80=EB=A6=AC=EC=9A=A9=20=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useGetRecentComments.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/hooks/useGetRecentComments.ts diff --git a/src/hooks/useGetRecentComments.ts b/src/hooks/useGetRecentComments.ts new file mode 100644 index 00000000..45362e38 --- /dev/null +++ b/src/hooks/useGetRecentComments.ts @@ -0,0 +1,11 @@ +import { useQuery } from '@tanstack/react-query'; +import getRecentComments from '@/apis/getRecentComments'; +import { GetRecentCommentsResponseType } from '@/schema/recentcomment'; + +const useGetRecentComments = () => + useQuery({ + queryKey: ['recentComments', 3], + queryFn: getRecentComments, + }); + +export default useGetRecentComments; From af44bf7cf96a00a30c7ae63f365d8bc2d4bb56df Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 19:54:55 +0900 Subject: [PATCH 10/11] =?UTF-8?q?FE-18=20:fire:=20=EA=B3=B5=EC=9A=A9=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 데이터를 props로 받도록 수정 --- src/components/Card/CommentCard.tsx | 12 +++++++----- src/types/CommentCardTypes.ts | 7 ++++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx index 3975f828..9724b941 100644 --- a/src/components/Card/CommentCard.tsx +++ b/src/components/Card/CommentCard.tsx @@ -3,7 +3,7 @@ import Image from 'next/image'; import { CommentCardProps } from '@/types/CommentCardTypes'; import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles'; -function CommentCard({ status }: CommentCardProps) { +function CommentCard({ writer, content, createdAt, status }: CommentCardProps) { return (
- 프로필 이미지{' '} + 프로필 이미지
-
지킬과 하이드
-
1시간 전
+
{writer.nickname}
+
+ {new Date(createdAt).toLocaleString()} +
{status === 'edit' && (
@@ -30,7 +32,7 @@ function CommentCard({ status }: CommentCardProps) {
- 오늘 하루 우울했었는데 덕분에 많은 힘 얻고 갑니다. 연금술사 책 다시 사서 오랜만에 읽어봐야겠어요! + {content}
diff --git a/src/types/CommentCardTypes.ts b/src/types/CommentCardTypes.ts index abb0a28b..89a0f496 100644 --- a/src/types/CommentCardTypes.ts +++ b/src/types/CommentCardTypes.ts @@ -1,3 +1,8 @@ +import { WriterType } from '@/schema/recentcomment'; + export interface CommentCardProps { - status: 'edit' | 'complete'; + writer: WriterType; + content: string; + createdAt: string; + status?: 'view' | 'edit'; } From d4373dab7989c85b81257193b95d4a2ec08ae6aa Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 20:11:30 +0900 Subject: [PATCH 11/11] =?UTF-8?q?FE-18=20:sparkles:=20RecentComment=20?= =?UTF-8?q?=EC=BB=B4=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/Card/CommentCard.tsx | 6 +++--- src/components/main/RecentComment.tsx | 19 +++++++++++++++++++ src/types/CommentCardTypes.ts | 2 +- 3 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 src/components/main/RecentComment.tsx diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx index 9724b941..9c08f6d0 100644 --- a/src/components/Card/CommentCard.tsx +++ b/src/components/Card/CommentCard.tsx @@ -4,6 +4,8 @@ import { CommentCardProps } from '@/types/CommentCardTypes'; import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles'; function CommentCard({ writer, content, createdAt, status }: CommentCardProps) { + const formattedDate = createdAt.toLocaleString(); + return (
{writer.nickname}
-
- {new Date(createdAt).toLocaleString()} -
+
{formattedDate}
{status === 'edit' && (
diff --git a/src/components/main/RecentComment.tsx b/src/components/main/RecentComment.tsx new file mode 100644 index 00000000..85d18022 --- /dev/null +++ b/src/components/main/RecentComment.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import useGetRecentComments from '@/hooks/useGetRecentComments'; +import CommentCard from '@/components/Card/CommentCard'; + +function RecentComments() { + const { data, error, isLoading } = useGetRecentComments(); + + if (isLoading) return

로딩 중...

; + if (error) return

{error.message}

; + + return ( +
+

최신 댓글

+ {data?.list.map((comment) => )} +
+ ); +} + +export default RecentComments; diff --git a/src/types/CommentCardTypes.ts b/src/types/CommentCardTypes.ts index 89a0f496..8d0f1437 100644 --- a/src/types/CommentCardTypes.ts +++ b/src/types/CommentCardTypes.ts @@ -3,6 +3,6 @@ import { WriterType } from '@/schema/recentcomment'; export interface CommentCardProps { writer: WriterType; content: string; - createdAt: string; + createdAt: Date; status?: 'view' | 'edit'; }