From 7f84712b17176cbd6c67faf2d00e8b1a4e0f348a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EB=AA=85=EA=B8=B0?= Date: Wed, 12 Mar 2025 12:09:02 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=EA=B2=8C=EC=8B=9C?= =?UTF-8?q?=EA=B8=80=20=EC=83=81=EC=84=B8=20=EB=8C=93=EA=B8=80ui=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Card/detail/PostContent.tsx | 63 ++++++++++++++++++- client/src/constants/dummyData.ts | 14 +++++ 2 files changed, 76 insertions(+), 1 deletion(-) diff --git a/client/src/components/common/Card/detail/PostContent.tsx b/client/src/components/common/Card/detail/PostContent.tsx index cc69e3df..080acb81 100644 --- a/client/src/components/common/Card/detail/PostContent.tsx +++ b/client/src/components/common/Card/detail/PostContent.tsx @@ -3,9 +3,12 @@ import Markdown from "react-markdown"; import LikeButton from "@/components/common/Card/detail/LikeButton"; import ShareButton from "@/components/common/Card/detail/ShareButton"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { usePostCardActions } from "@/hooks/common/usePostCardActions"; +import { POST_COMMENT_DATA } from "@/constants/dummyData"; + import { useMediaStore } from "@/store/useMediaStore"; import { Post } from "@/types/post"; @@ -51,10 +54,68 @@ export const PostContent = React.memo(({ post }: PostContentProps) => {

πŸ’‘ 인곡지λŠ₯이 μš”μ•½ν•œ λ‚΄μš©μž…λ‹ˆλ‹€. 였λ₯˜κ°€ 포함될 수 μžˆμœΌλ‹ˆ μ°Έκ³  λ°”λžλ‹ˆλ‹€.

)} -
+
+
+ {/* λŒ“κΈ€ μž…λ ₯ μ˜μ—­ */} +
+
+
+ + + CN + + +
+
+
+ +
+
+ + {/* λŒ“κΈ€ λͺ©λ‘ 헀더 */} +
+

+ λŒ“κΈ€ {POST_COMMENT_DATA.length} +

+
+ + {/* λŒ“κΈ€ λͺ©λ‘ */} +
    + {POST_COMMENT_DATA.map((comment) => ( +
  • +
    + + + {comment.author.substring(0, 2)} + +
    +
    +

    {comment.author}

    +
    +

    {comment.content}

    +
    +
    +
    • + ))} +
+ + {/* 더보기 λ²„νŠΌ */} + {POST_COMMENT_DATA.length > 3 && ( +
+ +
+ )} +
); }); diff --git a/client/src/constants/dummyData.ts b/client/src/constants/dummyData.ts index 17fa3fc6..861d308b 100644 --- a/client/src/constants/dummyData.ts +++ b/client/src/constants/dummyData.ts @@ -151,3 +151,17 @@ export const POST_MODAL_DATA: PostDetailType = { tag: ["JavaScript", "React", "Frontend"], }, }; +export const POST_COMMENT_DATA = [ + { + id: 1, + author: "λ‚˜λ¬΄λ³΄λ‹€ μˆ²μ„", + content: "정말 μœ μ΅ν•œ ν¬μŠ€νŠΈμ—μš”!!", + authorImage: "https://github.com/shadcn.png", + }, + { + id: 2, + author: "μ›”μ„±μ°ΈμΉ˜", + content: "μ—Œγ…‹γ…‹γ…‹ κ°œμΆ”μš”", + authorImage: "https://github.com/shadcn.png", + }, +]; From 452bf4ddd71b0de805dc0f821b670aa99c4585a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EB=AA=85=EA=B8=B0?= Date: Tue, 25 Mar 2025 21:25:01 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=A7=BC=20clean:=20=EC=BD=94=EB=A9=98?= =?UTF-8?q?=ED=8A=B8=20=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?= =?UTF-8?q?=20=EB=8D=94=EB=AF=B8=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/constants/dummyData.ts | 9 ++++++++- client/src/types/post.ts | 9 +++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/client/src/constants/dummyData.ts b/client/src/constants/dummyData.ts index 861d308b..fad9d5ff 100644 --- a/client/src/constants/dummyData.ts +++ b/client/src/constants/dummyData.ts @@ -1,5 +1,6 @@ import { ChatType } from "@/types/chat"; import { PostDetailType } from "@/types/post"; +import { PostCommentType } from "@/types/post"; // export const TRENDING_POSTS: Post[] = [ // { @@ -151,17 +152,23 @@ export const POST_MODAL_DATA: PostDetailType = { tag: ["JavaScript", "React", "Frontend"], }, }; -export const POST_COMMENT_DATA = [ +export const POST_COMMENT_DATA: PostCommentType[] = [ { id: 1, author: "λ‚˜λ¬΄λ³΄λ‹€ μˆ²μ„", content: "정말 μœ μ΅ν•œ ν¬μŠ€νŠΈμ—μš”!!", authorImage: "https://github.com/shadcn.png", + createdAt: "2025-03-23T01:00:00.000Z", + likes: 5, + isLiked: true, }, { id: 2, author: "μ›”μ„±μ°ΈμΉ˜", content: "μ—Œγ…‹γ…‹γ…‹ κ°œμΆ”μš”", authorImage: "https://github.com/shadcn.png", + createdAt: "2025-03-24T01:00:00.000Z", + likes: 10, + isLiked: false, }, ]; diff --git a/client/src/types/post.ts b/client/src/types/post.ts index a561e496..d468fbcd 100644 --- a/client/src/types/post.ts +++ b/client/src/types/post.ts @@ -37,3 +37,12 @@ export interface PostDetailType { message: string; data: Post; } +export interface PostCommentType { + id: number; + author: string; + content: string; + authorImage: string; + createdAt: string; + likes: number; + isLiked: boolean; +} From b42985c28215ecf228f586fab4c8722313169046 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EB=AA=85=EA=B8=B0?= Date: Tue, 25 Mar 2025 21:26:57 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20feat:=20timeAgo=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/utils/timeago.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 client/src/utils/timeago.ts diff --git a/client/src/utils/timeago.ts b/client/src/utils/timeago.ts new file mode 100644 index 00000000..fce18ab4 --- /dev/null +++ b/client/src/utils/timeago.ts @@ -0,0 +1,13 @@ +export function timeAgo(dateString: string) { + const now = new Date(); + const past = new Date(dateString); + const diff = Number(now) - Number(past); + + const diffMin = Math.floor(diff / (1000 * 60)); + const diffHour = Math.floor(diff / (1000 * 60 * 60)); + const diffDay = Math.floor(diff / (1000 * 60 * 60 * 24)); + + if (diffMin < 60) return `${diffMin}λΆ„ μ „`; + if (diffHour < 24) return `${diffHour}μ‹œκ°„ μ „`; + return `${diffDay}일 μ „`; +} From 9773860e7b11a539640c5fa1eaa52dcee23365df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EB=AA=85=EA=B8=B0?= Date: Tue, 25 Mar 2025 21:27:14 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=BD=94=EB=A9=98?= =?UTF-8?q?=ED=8A=B8=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Card/detail/CommentAction.tsx | 36 ++++++ .../common/Card/detail/PostComment.tsx | 108 ++++++++++++++++++ .../common/Card/detail/PostContent.tsx | 61 +--------- 3 files changed, 146 insertions(+), 59 deletions(-) create mode 100644 client/src/components/common/Card/detail/CommentAction.tsx create mode 100644 client/src/components/common/Card/detail/PostComment.tsx diff --git a/client/src/components/common/Card/detail/CommentAction.tsx b/client/src/components/common/Card/detail/CommentAction.tsx new file mode 100644 index 00000000..d6aa6d9a --- /dev/null +++ b/client/src/components/common/Card/detail/CommentAction.tsx @@ -0,0 +1,36 @@ +import { useState } from "react"; + +export default function CommentAction({ id, handleModify }: { id: number; handleModify: (id: number) => void }) { + const [isOpen, setIsOpen] = useState(false); + const handleOpen = () => { + setIsOpen(!isOpen); + }; + return ( +
+ + + {isOpen && } +
+ ); +} + +function DeleteButton({ id, handleOpen }: { id: number; handleOpen: () => void }) { + return ( +
+
+
+ λŒ“κΈ€ μ‚­μ œ +
+
+

λŒ“κΈ€μ„ μ •λ§λ‘œ μ‚­μ œν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?

+
+
+ + +
+
+
+ ); +} diff --git a/client/src/components/common/Card/detail/PostComment.tsx b/client/src/components/common/Card/detail/PostComment.tsx new file mode 100644 index 00000000..b5eb130b --- /dev/null +++ b/client/src/components/common/Card/detail/PostComment.tsx @@ -0,0 +1,108 @@ +import { useState } from "react"; + +import { Heart } from "lucide-react"; + +import CommentAction from "@/components/common/Card/detail/CommentAction"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; + +import { timeAgo } from "@/utils/timeago"; + +import { PostCommentType } from "@/types/post"; + +type PostCommentProps = { + comments: PostCommentType[]; +}; +export default function PostComment({ comments }: PostCommentProps) { + const [modifyId, setModifyId] = useState(null); + const handleModify = (id: number | null) => { + setModifyId(id); + }; + return ( +
+ {/* λŒ“κΈ€ μž…λ ₯ μ˜μ—­ */} +
+
+
+ + + CN + + +
+
+
+ +
+
+ + {/* λŒ“κΈ€ λͺ©λ‘ 헀더 */} +
+

+ λŒ“κΈ€ {comments.length} +

+
+ + {/* λŒ“κΈ€ λͺ©λ‘ */} +
    + {comments + .sort((a, b) => Number(new Date(b.createdAt)) - Number(new Date(a.createdAt))) + .map((comment) => ( +
  • +
    + + + {comment.author.substring(0, 2)} + +
    +
    +
    +
    +

    {comment.author}

    +

    {timeAgo(comment.createdAt)}

    + + + {comment.likes} + +
    + {modifyId !== comment.id && } +
    +
    + {modifyId !== comment.id ? ( +

    {comment.content}

    + ) : ( +
    + +
    + + +
    +
    + )} +
    +
    +
    • + ))} +
+ + {/* 더보기 λ²„νŠΌ */} + {comments.length > 1 && ( +
+ +
+ )} +
+ ); +} diff --git a/client/src/components/common/Card/detail/PostContent.tsx b/client/src/components/common/Card/detail/PostContent.tsx index 080acb81..d8df645b 100644 --- a/client/src/components/common/Card/detail/PostContent.tsx +++ b/client/src/components/common/Card/detail/PostContent.tsx @@ -2,8 +2,8 @@ import React from "react"; import Markdown from "react-markdown"; import LikeButton from "@/components/common/Card/detail/LikeButton"; +import PostComment from "@/components/common/Card/detail/PostComment"; import ShareButton from "@/components/common/Card/detail/ShareButton"; -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { usePostCardActions } from "@/hooks/common/usePostCardActions"; @@ -58,64 +58,7 @@ export const PostContent = React.memo(({ post }: PostContentProps) => { -
- {/* λŒ“κΈ€ μž…λ ₯ μ˜μ—­ */} -
-
-
- - - CN - - -
-
-
- -
-
- - {/* λŒ“κΈ€ λͺ©λ‘ 헀더 */} -
-

- λŒ“κΈ€ {POST_COMMENT_DATA.length} -

-
- - {/* λŒ“κΈ€ λͺ©λ‘ */} -
    - {POST_COMMENT_DATA.map((comment) => ( -
  • -
    - - - {comment.author.substring(0, 2)} - -
    -
    -

    {comment.author}

    -
    -

    {comment.content}

    -
    -
    -
    • - ))} -
- - {/* 더보기 λ²„νŠΌ */} - {POST_COMMENT_DATA.length > 3 && ( -
- -
- )} -
+ ); }); From 8c88ce496a14d02f2832fd4953f6283a906b0a12 Mon Sep 17 00:00:00 2001 From: jungmyunggi Date: Wed, 2 Apr 2025 12:08:53 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=92=84=20style:=20=EB=8C=93=EA=B8=80?= =?UTF-8?q?=20=EC=88=98=EC=A0=95,=20=EC=82=AD=EC=A0=9C,=20=EB=8D=94?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/Card/detail/CommentAction.tsx | 8 ++++++-- client/src/components/common/Card/detail/PostComment.tsx | 2 +- client/src/hooks/common/usePostCardActions.ts | 3 +-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/client/src/components/common/Card/detail/CommentAction.tsx b/client/src/components/common/Card/detail/CommentAction.tsx index d6aa6d9a..e6f46993 100644 --- a/client/src/components/common/Card/detail/CommentAction.tsx +++ b/client/src/components/common/Card/detail/CommentAction.tsx @@ -7,8 +7,12 @@ export default function CommentAction({ id, handleModify }: { id: number; handle }; return (
- - + + {isOpen && }
); diff --git a/client/src/components/common/Card/detail/PostComment.tsx b/client/src/components/common/Card/detail/PostComment.tsx index b5eb130b..0ba5b7f7 100644 --- a/client/src/components/common/Card/detail/PostComment.tsx +++ b/client/src/components/common/Card/detail/PostComment.tsx @@ -98,7 +98,7 @@ export default function PostComment({ comments }: PostCommentProps) { {/* 더보기 λ²„νŠΌ */} {comments.length > 1 && (
-
diff --git a/client/src/hooks/common/usePostCardActions.ts b/client/src/hooks/common/usePostCardActions.ts index 52521dec..5f7cc37f 100644 --- a/client/src/hooks/common/usePostCardActions.ts +++ b/client/src/hooks/common/usePostCardActions.ts @@ -1,6 +1,5 @@ import { usePostViewIncrement } from "@/hooks/queries/usePostViewIncrement"; -// import { pipe } from "@/utils/pipe"; import { Post } from "@/types/post"; interface PostWithState { @@ -24,7 +23,7 @@ export const usePostCardActions = (post: Post) => { if (isWindowOpened) { mutate(undefined, { onSuccess: () => { - console.log("쑰회수 증가 성곡"); + // console.log("쑰회수 증가 성곡"); }, onError: (error) => { console.error("쑰회수 증가 μ‹€νŒ¨", error);