From 85dffbd5cacd3405050d2f1d061a045e93bd1213 Mon Sep 17 00:00:00 2001
From: Jungu Lee <100949102+jobkaeHenry@users.noreply.github.com>
Date: Sun, 26 Nov 2023 21:39:08 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EA=B8=80-=EC=A1=B0=ED=9A=8C?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5-=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1=20(#46)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Minor : Box 컴포넌트 Stack컴포넌트로 교체

* New : 댓글 컴포넌트 제작

* New : 댓글 리스트 컴포넌트 제작

* New : 댓글 리스트 컴포넌트 반영
---
 client/src/components/post/PostCard.tsx       | 15 +++----
 client/src/components/post/PostComment.tsx    | 45 +++++++++++++++++++
 .../src/components/post/PostCommentList.tsx   | 40 +++++++++++++++++
 client/src/components/post/PostDetail.tsx     | 10 ++++-
 4 files changed, 101 insertions(+), 9 deletions(-)
 create mode 100644 client/src/components/post/PostComment.tsx
 create mode 100644 client/src/components/post/PostCommentList.tsx

diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx
index dfff357..7818bc2 100644
--- a/client/src/components/post/PostCard.tsx
+++ b/client/src/components/post/PostCard.tsx
@@ -10,6 +10,7 @@ import {
   CardMedia,
   Typography,
   ButtonBase,
+  Stack,
 } from "@mui/material";
 import PostHashTagList from "./PostHashtagList";
 import { useOpenPostDetailPage } from "@/hooks/useOpenPostDetailPage";
@@ -76,12 +77,12 @@ const PostCard = ({
             px: 0,
           }}
         >
-          <Box
+          <Stack
+            direction="row"
+            gap={1}
             sx={{
-              display: "flex",
-              flexDirection: "row",
-              gap: 1,
               height: 24,
+              alignItems:'center'
             }}
           >
             {/* 타이틀 */}
@@ -97,11 +98,9 @@ const PostCard = ({
             <Typography variant="label" color={"text.secondary"}>
               {dayjs(lastModifiedDate).format("MM.DD")}
             </Typography>
-          </Box>
+          </Stack>
 
-          {isMyPost && (
-            <PostCardOptionDropdown postId={postNo}/>
-          )}
+          {isMyPost && <PostCardOptionDropdown postId={postNo} />}
         </Box>
 
         {alcoholName && (
diff --git a/client/src/components/post/PostComment.tsx b/client/src/components/post/PostComment.tsx
new file mode 100644
index 0000000..52b4d3e
--- /dev/null
+++ b/client/src/components/post/PostComment.tsx
@@ -0,0 +1,45 @@
+import { USER_PAGE } from "@/const/clientPath";
+import { Stack, Avatar, Typography } from "@mui/material";
+import dayjs from "dayjs";
+import Link from "next/link";
+
+type Props = {
+  content: string;
+  nickname: string;
+  userId: string;
+  userPk: string;
+  createdAt: string;
+};
+
+const PostComment = ({
+  content,
+  nickname,
+  userId,
+  createdAt,
+  userPk,
+}: Props) => {
+  return (
+    <Stack direction="row" gap={1.25}>
+      <Avatar />
+      <Stack gap={1}>
+        <Stack direction="row" gap={1}>
+          <Link href={USER_PAGE(userPk)}>
+            <Typography>{nickname}</Typography>
+          </Link>
+          <Link href={USER_PAGE(userPk)}>
+            <Typography
+              variant="label"
+              color={"text.secondary"}
+            >{`@${userId}`}</Typography>
+          </Link>
+          <Typography variant="label" color={"text.secondary"}>
+            {dayjs(createdAt).format("MM.DD")}
+          </Typography>
+        </Stack>
+        <Typography>{content}</Typography>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default PostComment;
diff --git a/client/src/components/post/PostCommentList.tsx b/client/src/components/post/PostCommentList.tsx
new file mode 100644
index 0000000..75f73dd
--- /dev/null
+++ b/client/src/components/post/PostCommentList.tsx
@@ -0,0 +1,40 @@
+import PostComment from "./PostComment";
+import { Card, Stack } from "@mui/material";
+
+type Props = {
+  postNo: string;
+};
+
+const PostCommentList = ({ postNo }: Props) => {
+  const comments = Array.from(new Array(4)).map((_e, i) => ({
+    commentNo: i,
+    comment:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus laudantium enim veritatis minus excepturi. Quidem iusto, velit facilis corporis at suscipit minima sed, cumque nostrum fugiat ad natus? Voluptatum, odio?",
+    createdAt: new Date(),
+    nickname: "유저이름",
+    userId: "유저유저아이디",
+  }));
+  return (
+    comments &&
+    comments.length > 0 && (
+      <Card sx={{ display: "flex", gap: 2, p: 2 }}>
+        <Stack gap={2}>
+          {comments.map(
+            ({ commentNo, comment, createdAt, nickname, userId }, i) => (
+              <PostComment
+                content={comment}
+                createdAt={String(createdAt)}
+                nickname={nickname}
+                userId={userId}
+                userPk={String(i)}
+                key={commentNo}
+              />
+            )
+          )}
+        </Stack>
+      </Card>
+    )
+  );
+};
+
+export default PostCommentList;
diff --git a/client/src/components/post/PostDetail.tsx b/client/src/components/post/PostDetail.tsx
index 07750fc..a6e4b16 100644
--- a/client/src/components/post/PostDetail.tsx
+++ b/client/src/components/post/PostDetail.tsx
@@ -4,6 +4,7 @@ import useGetPostDetailQuery from "@/queries/post/useGetPostDetailQuery";
 import PostCard from "./PostCard";
 import { PostInterface } from "@/types/post/PostInterface";
 import { CircularProgress } from "@mui/material";
+import PostCommentList from "@/components/post/PostCommentList";
 interface PostDetailInterface {
   postNo: string;
   initialData: PostInterface;
@@ -11,6 +12,13 @@ interface PostDetailInterface {
 const PostDetail = async ({ postNo, initialData }: PostDetailInterface) => {
   const { data } = useGetPostDetailQuery(postNo, { initialData });
   //FIXME 포스트의 좋아요갯수가 업데이트 되지않음
-  return data ? <PostCard {...data} /> : <CircularProgress />;
+  return data ? (
+    <>
+      <PostCard {...data} />
+      <PostCommentList postNo={postNo}/>
+    </>
+  ) : (
+    <CircularProgress />
+  );
 };
 export default PostDetail;