From fa8d9bbd5644e88cbea6d7db4148974f3ab0a6d7 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Tue, 23 Jul 2024 19:46:03 +0900 Subject: [PATCH 1/5] =?UTF-8?q?FE-18=20:sparkles:=20=EC=B5=9C=EA=B7=BC=20?= =?UTF-8?q?=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 2/5] =?UTF-8?q?FE-18=20:sparkles:=20=EC=B5=9C=EA=B7=BC=20?= =?UTF-8?q?=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 3/5] =?UTF-8?q?FE-18=20:sparkles:=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=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 4/5] =?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 5/5] =?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'; }