From a1b8be32c44b90e211114375febc683ad0914ed4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9A=B0=EC=A7=80=EC=84=9D?= Date: Tue, 16 Jul 2024 11:41:53 +0900 Subject: [PATCH 01/12] =?UTF-8?q?FE-42=F0=9F=92=84=20EpigramComment?= =?UTF-8?q?=EC=95=88=EC=97=90=20CommentCard=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/constants.ts | 2 +- src/pageLayout/Epigram/EpigramComment.tsx | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 415bd875..486140ee 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,4 +1,4 @@ const TOKEN = - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIwODc2OTg5LCJleHAiOjE3MjA4Nzg3ODksImlzcyI6InNwLWVwaWdyYW0ifQ.cKo4iplziBvVxnCVAYi0rA213R-6w2iHCu-Z9bukUhA'; + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxMDk2ODQ4LCJleHAiOjE3MjEwOTg2NDgsImlzcyI6InNwLWVwaWdyYW0ifQ.xhOnlXIsO5VSuytGTbRbY55lG7W2jtSSmk_AoZeakPc'; export default TOKEN; diff --git a/src/pageLayout/Epigram/EpigramComment.tsx b/src/pageLayout/Epigram/EpigramComment.tsx index 230bb568..edbbcba1 100644 --- a/src/pageLayout/Epigram/EpigramComment.tsx +++ b/src/pageLayout/Epigram/EpigramComment.tsx @@ -1,11 +1,13 @@ +import CommentCard from '@/components/Card/CommentCard'; import { Textarea } from '@/components/ui/textarea'; +import { paddingStyles } from '@/styles/CommentCardStyles'; import Image from 'next/image'; function EpigramComment() { return (
-
-
+
+

댓글(3)

@@ -17,6 +19,9 @@ function EpigramComment() { />
+ + +
); From 12a5eb2f79491f13d1ab1b5d131f24fb20ead9d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9A=B0=EC=A7=80=EC=84=9D?= Date: Tue, 16 Jul 2024 13:38:23 +0900 Subject: [PATCH 02/12] =?UTF-8?q?FE-42=E2=9C=A8=20=EC=83=81=EC=84=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=8C=93=EA=B8=80=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20api=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/epigram.ts | 11 +----- src/apis/epigramComment.ts | 32 ++++++++++++++++ src/apis/queries.ts | 8 ++++ src/components/Card/CommentCard.tsx | 19 +++++++--- .../epigram/Comment/CommentList.tsx | 25 ++++++++++++ src/hooks/useEpigramComment.ts | 0 ...ramQueryHook.ts => useEpigramQueryHook.ts} | 5 ++- src/lib/constants.ts | 2 +- src/pageLayout/Epigram/EpigramComment.tsx | 13 +++---- src/pages/epigram/[id].tsx | 7 ++-- src/schema/comment.ts | 38 +++++++++++++++++++ src/types/epigram.types.ts | 4 ++ 12 files changed, 136 insertions(+), 28 deletions(-) create mode 100644 src/apis/epigramComment.ts create mode 100644 src/components/epigram/Comment/CommentList.tsx create mode 100644 src/hooks/useEpigramComment.ts rename src/hooks/{epigramQueryHook.ts => useEpigramQueryHook.ts} (50%) create mode 100644 src/schema/comment.ts diff --git a/src/apis/epigram.ts b/src/apis/epigram.ts index d7b962df..2448efc3 100644 --- a/src/apis/epigram.ts +++ b/src/apis/epigram.ts @@ -1,13 +1,11 @@ import axios, { AxiosError } from 'axios'; import { GetEpigramResponseType, GetEpigramRequestType } from '@/schema/epigram'; import TOKEN from '@/lib/constants'; - -const BASE_URL = 'https://fe-project-epigram-api.vercel.app/5-9'; +import httpClient from '.'; const getEpigram = async (request: GetEpigramRequestType): Promise => { const { id } = request; - // id가 undefined인 경우 에러 throw if (id === undefined) { throw new Error('Epigram ID가 제공되지 않았습니다.'); } @@ -15,7 +13,7 @@ const getEpigram = async (request: GetEpigramRequestType): Promise => { + try { + // 요청 파라미터 유효성 검사 + const validatedParams = CommentRequestSchema.parse(params); + + const { id, limit, cursor } = validatedParams; + + // NOTE: URL의 쿼리 문자열을 사용 + // NOTE : cursor값이 있다면 ?limit=3&cursor=100, 없다면 ?limit=3,(숫자는 임의로 지정한 것) + const queryParams = new URLSearchParams({ + limit: limit.toString(), + ...(cursor !== undefined && { cursor: cursor.toString() }), + }); + + const response = await httpClient.get(`/epigrams/${id}/comments?${queryParams.toString()}`); + + // 응답 데이터 유효성 검사 + const validatedData = CommentResponseSchema.parse(response.data); + + return validatedData; + } catch (error) { + if (error instanceof Error) { + throw new Error(`댓글을 불러오는데 실패했습니다: ${error.message}`); + } + throw error; + } +}; + +export default getEpigramComments; diff --git a/src/apis/queries.ts b/src/apis/queries.ts index 9d0d23d8..1a0299ec 100644 --- a/src/apis/queries.ts +++ b/src/apis/queries.ts @@ -1,8 +1,10 @@ import { createQueryKeyStore } from '@lukemorales/query-key-factory'; import { GetUserRequestType } from '@/schema/user'; import { GetEpigramRequestType } from '@/schema/epigram'; +import { CommentRequestType } from '@/schema/comment'; import { getMe, getUser } from './user'; import getEpigram from './epigram'; +import getEpigramComments from './epigramComment'; const queries = createQueryKeyStore({ user: { @@ -28,6 +30,12 @@ const queries = createQueryKeyStore({ enabled: request.id !== undefined, }), }, + epigramComment: { + getComments: (request: CommentRequestType) => ({ + queryKey: ['epigramComments', request], + queryFn: () => getEpigramComments(request), + }), + }, }); export default queries; diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx index 3975f828..fb8944f1 100644 --- a/src/components/Card/CommentCard.tsx +++ b/src/components/Card/CommentCard.tsx @@ -1,9 +1,14 @@ import React from 'react'; import Image from 'next/image'; -import { CommentCardProps } from '@/types/CommentCardTypes'; +import { CommentType } from '@/schema/comment'; import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles'; -function CommentCard({ status }: CommentCardProps) { +interface CommentCardProps { + comment: CommentType; + status: 'edit' | 'complete'; +} + +function CommentCard({ comment, status }: CommentCardProps) { return (
- 프로필 이미지{' '} + 프로필 이미지
-
지킬과 하이드
-
1시간 전
+
{comment.writer.nickname}
+
+ {new Date(comment.createdAt).toLocaleString()} +
{status === 'edit' && (
@@ -30,7 +37,7 @@ function CommentCard({ status }: CommentCardProps) {
- 오늘 하루 우울했었는데 덕분에 많은 힘 얻고 갑니다. 연금술사 책 다시 사서 오랜만에 읽어봐야겠어요! + {comment.content}
diff --git a/src/components/epigram/Comment/CommentList.tsx b/src/components/epigram/Comment/CommentList.tsx new file mode 100644 index 00000000..763a5cbd --- /dev/null +++ b/src/components/epigram/Comment/CommentList.tsx @@ -0,0 +1,25 @@ +import CommentCard from '@/components/Card/CommentCard'; +import { useEpigramCommentsQuery } from '@/hooks/useEpigramQueryHook'; +import { EpigramCommentProps } from '@/types/epigram.types'; + +function CommentList({ epigramId }: EpigramCommentProps) { + const { + data: comments, + isLoading, + error, + } = useEpigramCommentsQuery({ + id: epigramId, + limit: 3, + }); + + if (isLoading) return
댓글을 불러오는 중...
; + if (error) return
에러: {(error as Error).message}
; + + return ( +
+

댓글({comments?.list.length || 0})

+ {comments?.list.map((comment) => )} +
+ ); +} +export default CommentList; diff --git a/src/hooks/useEpigramComment.ts b/src/hooks/useEpigramComment.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/hooks/epigramQueryHook.ts b/src/hooks/useEpigramQueryHook.ts similarity index 50% rename from src/hooks/epigramQueryHook.ts rename to src/hooks/useEpigramQueryHook.ts index 5bd0067c..8c199a00 100644 --- a/src/hooks/epigramQueryHook.ts +++ b/src/hooks/useEpigramQueryHook.ts @@ -1,11 +1,12 @@ import { useQuery } from '@tanstack/react-query'; import queries from '@/apis/queries'; import { GetEpigramRequestType } from '@/schema/epigram'; +import { CommentRequestType } from '@/schema/comment'; -const useEpigramQuery = (request: GetEpigramRequestType | undefined, enabled = true) => +export const useEpigramQuery = (request: GetEpigramRequestType | undefined, enabled = true) => useQuery({ ...queries.epigram.getEpigram(request ?? { id: undefined }), enabled: enabled && request?.id !== undefined, }); -export default useEpigramQuery; +export const useEpigramCommentsQuery = (request: CommentRequestType) => useQuery(queries.epigramComment.getComments(request)); diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 486140ee..a026bb82 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,4 +1,4 @@ const TOKEN = - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxMDk2ODQ4LCJleHAiOjE3MjEwOTg2NDgsImlzcyI6InNwLWVwaWdyYW0ifQ.xhOnlXIsO5VSuytGTbRbY55lG7W2jtSSmk_AoZeakPc'; + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxMTA0MjQ3LCJleHAiOjE3MjExMDYwNDcsImlzcyI6InNwLWVwaWdyYW0ifQ.yTjkdAJ30RjA14r_rC4-aTZjWZVA92szkPcQQmC4Djs'; export default TOKEN; diff --git a/src/pageLayout/Epigram/EpigramComment.tsx b/src/pageLayout/Epigram/EpigramComment.tsx index edbbcba1..5957268c 100644 --- a/src/pageLayout/Epigram/EpigramComment.tsx +++ b/src/pageLayout/Epigram/EpigramComment.tsx @@ -1,14 +1,15 @@ -import CommentCard from '@/components/Card/CommentCard'; +import CommentList from '@/components/epigram/Comment/CommentList'; import { Textarea } from '@/components/ui/textarea'; import { paddingStyles } from '@/styles/CommentCardStyles'; +import { EpigramCommentProps } from '@/types/epigram.types'; import Image from 'next/image'; -function EpigramComment() { +function EpigramComment({ epigramId }: EpigramCommentProps) { return ( -
+
-

댓글(3)

+

내 댓글 작성

프로필 사진 @@ -19,9 +20,7 @@ function EpigramComment() { />
- - - +
); diff --git a/src/pages/epigram/[id].tsx b/src/pages/epigram/[id].tsx index c947b12b..2ef518c7 100644 --- a/src/pages/epigram/[id].tsx +++ b/src/pages/epigram/[id].tsx @@ -1,6 +1,6 @@ import { GetEpigramRequestSchema } from '@/schema/epigram'; -import useEpigramQuery from '@/hooks/epigramQueryHook'; -import CommentSection from '@/pageLayout/Epigram/EpigramComment'; +import { useEpigramQuery } from '@/hooks/useEpigramQueryHook'; +import EpigramComment from '@/pageLayout/Epigram/EpigramComment'; import EpigramFigure from '@/pageLayout/Epigram/EpigramFigure'; import Image from 'next/image'; import { useRouter } from 'next/router'; @@ -27,7 +27,8 @@ function DetailPage() { Epigram 로고 공유 버튼 - + +
); } diff --git a/src/schema/comment.ts b/src/schema/comment.ts new file mode 100644 index 00000000..781239f9 --- /dev/null +++ b/src/schema/comment.ts @@ -0,0 +1,38 @@ +import { z } from 'zod'; + +const WriterSchema = z.object({ + image: z.string().nullable(), + nickname: z.string(), + id: z.number(), +}); + +const CommentContentSchema = z.string().min(1); + +const CommentSchema = z.object({ + epigramId: z.number(), + writer: WriterSchema, + updatedAt: z.string().datetime(), + createdAt: z.string().datetime(), + isPrivate: z.boolean(), + content: CommentContentSchema, + id: z.number(), +}); + +const CommentResponseSchema = z.object({ + totalCount: z.number(), + nextCursor: z.number().nullable(), + list: z.array(CommentSchema), +}); + +const CommentRequestSchema = z.object({ + id: z.number().int().positive(), + limit: z.number().int().positive().max(100), + cursor: z.number().optional(), +}); + +export type CommentRequestType = z.infer; +export type CommentResponseType = z.infer; +export type CommentType = z.infer; +export type Writer = z.infer; + +export { CommentRequestSchema, CommentResponseSchema, CommentSchema, WriterSchema }; diff --git a/src/types/epigram.types.ts b/src/types/epigram.types.ts index 4c6939b1..414b78ad 100644 --- a/src/types/epigram.types.ts +++ b/src/types/epigram.types.ts @@ -5,3 +5,7 @@ export interface EpigramFigureProps { epigram: GetEpigramResponseType; currentUserId: GetUserResponseType['id'] | undefined; } + +export interface EpigramCommentProps { + epigramId: number; +} From 4bbcaccffb7faf2ae1036a9b7005e2b6ff1c2cc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9A=B0=EC=A7=80=EC=84=9D?= Date: Tue, 16 Jul 2024 17:29:40 +0900 Subject: [PATCH 03/12] =?UTF-8?q?FE-42=E2=9C=A8=20dateUtil=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80,=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 10 +++++++ package.json | 1 + src/components/Card/CommentCard.tsx | 3 +- src/lib/constants.ts | 2 +- src/lib/dateUtils.ts | 36 +++++++++++++++++++++++ src/pageLayout/Epigram/EpigramComment.tsx | 2 +- 6 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 src/lib/dateUtils.ts diff --git a/package-lock.json b/package-lock.json index 561da0f2..054ac693 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "axios": "^1.7.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", "lucide-react": "^0.402.0", "next": "14.2.4", "qs": "^6.12.2", @@ -2901,6 +2902,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", diff --git a/package.json b/package.json index 66aa1a4e..2113a29d 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "axios": "^1.7.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", "lucide-react": "^0.402.0", "next": "14.2.4", "qs": "^6.12.2", diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx index fb8944f1..1cf1fd7e 100644 --- a/src/components/Card/CommentCard.tsx +++ b/src/components/Card/CommentCard.tsx @@ -2,6 +2,7 @@ import React from 'react'; import Image from 'next/image'; import { CommentType } from '@/schema/comment'; import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles'; +import { getCustomRelativeTime } from '@/lib/dateUtils'; interface CommentCardProps { comment: CommentType; @@ -24,7 +25,7 @@ function CommentCard({ comment, status }: CommentCardProps) {
{comment.writer.nickname}
- {new Date(comment.createdAt).toLocaleString()} + {getCustomRelativeTime(comment.createdAt)}
{status === 'edit' && ( diff --git a/src/lib/constants.ts b/src/lib/constants.ts index a026bb82..6a7c0114 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,4 +1,4 @@ const TOKEN = - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxMTA0MjQ3LCJleHAiOjE3MjExMDYwNDcsImlzcyI6InNwLWVwaWdyYW0ifQ.yTjkdAJ30RjA14r_rC4-aTZjWZVA92szkPcQQmC4Djs'; + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxMTE4MjcyLCJleHAiOjE3MjExMjAwNzIsImlzcyI6InNwLWVwaWdyYW0ifQ.bVG8xRa-q-DWn1hKFr3g6-0XekajZqXpYMzad3EuznA'; export default TOKEN; diff --git a/src/lib/dateUtils.ts b/src/lib/dateUtils.ts new file mode 100644 index 00000000..a611e840 --- /dev/null +++ b/src/lib/dateUtils.ts @@ -0,0 +1,36 @@ +import { formatDistanceToNow, parseISO } from 'date-fns'; +import { ko } from 'date-fns/locale/ko'; + +/** + * @param date - 날짜 문자열 또는 Date 객체 + * @returns 시간을 나타내는 문자열 (예: "3일 전", "2시간 전") + */ +export function getRelativeTimeString(date: string | Date): string { + const dateToUse = typeof date === 'string' ? parseISO(date) : date; + + // NOTE: formatDistanceToNow는 현재시각을 기준으로 단어를 사용해 시간을 나타내주는 함수 + return formatDistanceToNow(dateToUse, { + addSuffix: true, + locale: ko, + }); +} + +export function getCustomRelativeTime(date: string | Date): string { + const dateToUse = typeof date === 'string' ? parseISO(date) : date; + const now = new Date(); + const diffInSeconds = Math.floor((now.getTime() - dateToUse.getTime()) / 1000); + + if (diffInSeconds < 60) { + return '방금 전'; + } + if (diffInSeconds < 3600) { + const minutes = Math.floor(diffInSeconds / 60); + return `${minutes}분 전`; + } + if (diffInSeconds < 86400) { + const hours = Math.floor(diffInSeconds / 3600); + return `${hours}시간 전`; + } + // 1일 이상 차이나는 경우 date-fns의 formatDistanceToNow 사용 + return formatDistanceToNow(dateToUse, { addSuffix: true, locale: ko }); +} diff --git a/src/pageLayout/Epigram/EpigramComment.tsx b/src/pageLayout/Epigram/EpigramComment.tsx index 5957268c..75a06eb9 100644 --- a/src/pageLayout/Epigram/EpigramComment.tsx +++ b/src/pageLayout/Epigram/EpigramComment.tsx @@ -8,8 +8,8 @@ function EpigramComment({ epigramId }: EpigramCommentProps) { return (
+

댓글 작성

-

내 댓글 작성

프로필 사진 From 0625a25241dcd8919302cbefaa9be961b5b01f87 Mon Sep 17 00:00:00 2001 From: Woojiseok Date: Tue, 16 Jul 2024 18:55:28 +0900 Subject: [PATCH 04/12] =?UTF-8?q?FE-42=E2=9C=A8=20=EB=8C=93=EA=B8=80?= =?UTF-8?q?=EC=9E=91=EC=84=B1=EC=9E=90=EA=B0=80=20=EB=B3=B8=EC=9D=B8?= =?UTF-8?q?=EC=9D=B8=EC=A7=80=20=ED=8C=90=EB=B3=84=ED=95=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=EC=82=AD=EC=A0=9C=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/epigram/Comment/CommentList.tsx | 4 ++-- src/pageLayout/Epigram/EpigramComment.tsx | 4 ++-- src/pages/epigram/[id].tsx | 2 +- src/types/epigram.types.ts | 1 + 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/epigram/Comment/CommentList.tsx b/src/components/epigram/Comment/CommentList.tsx index 763a5cbd..388dcc7e 100644 --- a/src/components/epigram/Comment/CommentList.tsx +++ b/src/components/epigram/Comment/CommentList.tsx @@ -2,7 +2,7 @@ import CommentCard from '@/components/Card/CommentCard'; import { useEpigramCommentsQuery } from '@/hooks/useEpigramQueryHook'; import { EpigramCommentProps } from '@/types/epigram.types'; -function CommentList({ epigramId }: EpigramCommentProps) { +function CommentList({ epigramId, currentUserId }: EpigramCommentProps) { const { data: comments, isLoading, @@ -18,7 +18,7 @@ function CommentList({ epigramId }: EpigramCommentProps) { return (

댓글({comments?.list.length || 0})

- {comments?.list.map((comment) => )} + {comments?.list.map((comment) => )}
); } diff --git a/src/pageLayout/Epigram/EpigramComment.tsx b/src/pageLayout/Epigram/EpigramComment.tsx index 75a06eb9..b18120a3 100644 --- a/src/pageLayout/Epigram/EpigramComment.tsx +++ b/src/pageLayout/Epigram/EpigramComment.tsx @@ -4,7 +4,7 @@ import { paddingStyles } from '@/styles/CommentCardStyles'; import { EpigramCommentProps } from '@/types/epigram.types'; import Image from 'next/image'; -function EpigramComment({ epigramId }: EpigramCommentProps) { +function EpigramComment({ epigramId, currentUserId }: EpigramCommentProps) { return (
@@ -20,7 +20,7 @@ function EpigramComment({ epigramId }: EpigramCommentProps) { />
- +
); diff --git a/src/pages/epigram/[id].tsx b/src/pages/epigram/[id].tsx index 2ef518c7..61034cbe 100644 --- a/src/pages/epigram/[id].tsx +++ b/src/pages/epigram/[id].tsx @@ -28,7 +28,7 @@ function DetailPage() { 공유 버튼 - +
); } diff --git a/src/types/epigram.types.ts b/src/types/epigram.types.ts index 414b78ad..f8951fd2 100644 --- a/src/types/epigram.types.ts +++ b/src/types/epigram.types.ts @@ -8,4 +8,5 @@ export interface EpigramFigureProps { export interface EpigramCommentProps { epigramId: number; + currentUserId: GetUserResponseType['id'] | undefined; } From c1f338183da7a0bff58b26b5560f9e631dc7486c Mon Sep 17 00:00:00 2001 From: Woojiseok Date: Tue, 16 Jul 2024 21:27:03 +0900 Subject: [PATCH 05/12] =?UTF-8?q?FE-42=F0=9F=94=A5=20=EC=95=88=EC=93=B0?= =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/CommentCard.tsx | 2 +- src/lib/dateUtils.ts | 20 ++++++-------------- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx index 1cf1fd7e..52b18da7 100644 --- a/src/components/Card/CommentCard.tsx +++ b/src/components/Card/CommentCard.tsx @@ -2,7 +2,7 @@ import React from 'react'; import Image from 'next/image'; import { CommentType } from '@/schema/comment'; import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles'; -import { getCustomRelativeTime } from '@/lib/dateUtils'; +import getCustomRelativeTime from '@/lib/dateUtils'; interface CommentCardProps { comment: CommentType; diff --git a/src/lib/dateUtils.ts b/src/lib/dateUtils.ts index a611e840..4b8eecc5 100644 --- a/src/lib/dateUtils.ts +++ b/src/lib/dateUtils.ts @@ -2,20 +2,10 @@ import { formatDistanceToNow, parseISO } from 'date-fns'; import { ko } from 'date-fns/locale/ko'; /** - * @param date - 날짜 문자열 또는 Date 객체 - * @returns 시간을 나타내는 문자열 (예: "3일 전", "2시간 전") + * @param date 날짜 문자열 또는 Date 객체 + * @return 시간을 나타내는 문자열 (예: "3일 전", "2시간 전") */ -export function getRelativeTimeString(date: string | Date): string { - const dateToUse = typeof date === 'string' ? parseISO(date) : date; - - // NOTE: formatDistanceToNow는 현재시각을 기준으로 단어를 사용해 시간을 나타내주는 함수 - return formatDistanceToNow(dateToUse, { - addSuffix: true, - locale: ko, - }); -} - -export function getCustomRelativeTime(date: string | Date): string { +function getCustomRelativeTime(date: string | Date): string { const dateToUse = typeof date === 'string' ? parseISO(date) : date; const now = new Date(); const diffInSeconds = Math.floor((now.getTime() - dateToUse.getTime()) / 1000); @@ -31,6 +21,8 @@ export function getCustomRelativeTime(date: string | Date): string { const hours = Math.floor(diffInSeconds / 3600); return `${hours}시간 전`; } - // 1일 이상 차이나는 경우 date-fns의 formatDistanceToNow 사용 + // 1일(date-fns에선 23시59분30초) 이상 차이나는 경우 date-fns의 formatDistanceToNow 사용 return formatDistanceToNow(dateToUse, { addSuffix: true, locale: ko }); } + +export default getCustomRelativeTime; From f420186efc2d61fed5fc83cb1e238783b853e7be Mon Sep 17 00:00:00 2001 From: Woojiseok Date: Tue, 16 Jul 2024 21:29:51 +0900 Subject: [PATCH 06/12] =?UTF-8?q?FE-42=F0=9F=92=84=20EpigramComment=20?= =?UTF-8?q?=EB=B0=B0=EA=B2=BD=EC=83=89=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/constants.ts | 2 +- src/pageLayout/Epigram/EpigramComment.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 6a7c0114..c0be0435 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,4 +1,4 @@ const TOKEN = - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxMTE4MjcyLCJleHAiOjE3MjExMjAwNzIsImlzcyI6InNwLWVwaWdyYW0ifQ.bVG8xRa-q-DWn1hKFr3g6-0XekajZqXpYMzad3EuznA'; + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjUsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxMTMyNDI5LCJleHAiOjE3MjExMzQyMjksImlzcyI6InNwLWVwaWdyYW0ifQ.HixtvSoIHbGCwXiJV4zGToLmHXeW5FHG0kt5-59fGJs'; export default TOKEN; diff --git a/src/pageLayout/Epigram/EpigramComment.tsx b/src/pageLayout/Epigram/EpigramComment.tsx index b18120a3..36d50ac3 100644 --- a/src/pageLayout/Epigram/EpigramComment.tsx +++ b/src/pageLayout/Epigram/EpigramComment.tsx @@ -6,7 +6,7 @@ import Image from 'next/image'; function EpigramComment({ epigramId, currentUserId }: EpigramCommentProps) { return ( -
+

댓글 작성

@@ -15,7 +15,7 @@ function EpigramComment({ epigramId, currentUserId }: EpigramCommentProps) { 프로필 사진