게시글-조회기능-퍼블리싱 (#46)

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

* New : 댓글 컴포넌트 제작

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

* New : 댓글 리스트 컴포넌트 반영

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 && (

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;

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;

client/src/components/post/PostDetail.tsx

@@ -4,13 +4,21 @@ 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;
 }
 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;