feat :: Comment #44

src/app/community/[id]/page.tsx

@@ -1,11 +1,7 @@
 import PostDetail from "@/components/home/community/postDetail/index";
 import React from "react";
 
-type PageParams = {
-  id: string;
-};
-
-const Page = ({ params }: { params: PageParams }) => {
+const Page = () => {
   return (
     <div>
       <PostDetail />

src/components/home/community/comment/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import * as S from "../postDetail/style";
+import Image from "next/image";
+import MoreImg from "@/asset/MoreImg.svg";
+import Profile from "@/asset/Profile.svg";
+import { useGetCommentById } from "@/queries/community/comment/comment.query";
+
+const Comment = ({ id }: { id: number }) => {
+  const { data: commentList } = useGetCommentById(id);
+
+  return (
+    <S.CommentWrap>
+      <S.CommentWrapTitle>댓글</S.CommentWrapTitle>
+      <S.CommentContentWrap>
+        <S.Comment>
+          {/* <div>
+            <Image src={Profile} alt="프로필" width={50} height={50} />
+            <div>
+              <h1>김가영</h1>
+              <span>제가 알려드리겠습니다~ 시급 10만원!</span>
+              <div>
+                <span>2024.10.08. 오후 17:25</span>
+                <span>답글 달기</span>
+              </div>
+            </div>
+          </div> */}
+          {Array.isArray(commentList?.data) &&
+            commentList?.data.map((comment) => (
+              <div key={comment.commentId}>
+                <Image src={Profile} alt="프로필 이미지" width={50} height={50} />
+                <div>
+                    <h1>{comment.commentor}</h1>
+                    <span>{comment.content}</span>
+                    <div>
+                        <span></span>
+                    </div>
+                </div>
+              </div>
+            ))}
+          <Image src={MoreImg} alt="더보기" />
+        </S.Comment>
+      </S.CommentContentWrap>
+    </S.CommentWrap>
+  );
+};
+
+export default Comment;

src/components/home/community/postDetail/index.tsx

@@ -4,9 +4,9 @@ import * as S from "./style";
 import Image from "next/image";
 import Profile from "src/asset/Profile.svg";
 import { useParams } from "next/navigation";
-import usePost from "@/hooks/community/post/usePost";
 import { convertPostDetailDate } from "@/utils/transform/date/convertDate";
 import { useGetCommunityById } from "@/queries/community/community.query";
+import Comment from "../comment";
 
 const PostDetail = () => {
   const { id } = useParams();
@@ -35,12 +35,7 @@ const PostDetail = () => {
           ))}
         </S.ContentWrap>
       </S.PostWrap>
-      <S.CommentWrap>
-        <S.CommentWrapTitle>댓글</S.CommentWrapTitle>
-        <S.CommentContentWrap>
-          <S.Comment></S.Comment>
-        </S.CommentContentWrap>
-      </S.CommentWrap>
+      <Comment id={+id} />
     </S.PostDetail>
   );
 };

src/components/home/community/postDetail/style.ts

@@ -111,9 +111,57 @@ export const CommentContentWrap = styled.div`
 
 export const Comment = styled.div`
   width: calc(100% - 44px);
-  height: calc(20% - 36px);
+  height: calc(20% - 20px);
 
-  padding: 18px 22px;
+  padding: 10px 22px;
 
-  border: 1px solid #000;
+  display: flex;
+
+  div {
+    display: flex;
+
+    width: 80%;
+    height: 100%;
+
+    div {
+      display: flex;
+      flex-direction: column;
+
+      gap: 5px;
+
+      h1 {
+        color: ${theme.colors.black};
+        font-size: 16px;
+        font-weight: ${theme.fontWeight.semibold};
+      }
+
+      span {
+        color: ${theme.colors.gray700};
+        font-size: 15px;
+        font-weight: ${theme.fontWeight.medium};
+      }
+
+      div {
+        display: flex;
+        flex-direction: row;
+        width: 70%;
+
+        justify-content: space-between;
+        align-items: center;
+
+        span {
+          color: ${theme.colors.gray600};
+          font-size: 11px;
+          font-weight: ${theme.fontWeight.medium};
+        }
+      }
+    }
+  }
+
+  img {
+    scale: 0.7;
+  }
+
+  justify-content: flex-end;
+  gap: 30px;
 `;

src/queries/community/comment/comment.query.ts

@@ -1,7 +1,9 @@
-import { useMutation, useQueries } from "react-query";
+import { UseQueryOptions, UseQueryResult, useMutation, useQueries, useQuery } from "react-query";
 import { CommentParams } from "../../../repositories/community/comment/commentRepository";
 import { QUERY_KEYS } from "../../QueryKey";
 import commentRepositoryImpl from "../../../repositories/community/comment/commentRepositoryImpl";
+import { CommentByIdResponse } from "@/types/community/comment/comment.types";
+import { AxiosError } from "axios";
 
 export const usePostComment = () => {
   const mutation = useMutation((commentParams: CommentParams) => commentRepositoryImpl.postComment(commentParams));
@@ -13,14 +15,15 @@ export const usePostSubComoment = () => {
   return mutation;
 };
 
-export const useGetCommentById = (idParams: number) =>
-  useQueries([
-    {
-      queryKey: [QUERY_KEYS.community.comment.comment],
-      queryFn: () => commentRepositoryImpl.getCommentById(idParams),
-      suspense: true,
-    },
-  ]);
+export const useGetCommentById = (
+  idParams: number,
+  options?: UseQueryOptions<CommentByIdResponse, AxiosError, CommentByIdResponse, string>,
+): UseQueryResult<CommentByIdResponse, AxiosError> =>
+  useQuery(QUERY_KEYS.community.comment.comment, () => commentRepositoryImpl.getCommentById(idParams), {
+    staleTime: 1000 * 60 * 60,
+    cacheTime: 1000 * 60 * 60,
+    ...options,
+  });
 
 export const useDeleteComoment = () => {
   const mutation = useMutation((idParams: number) => commentRepositoryImpl.deleteComment(idParams));

src/types/community/comment/comment.types.ts

@@ -4,13 +4,13 @@ export interface CommentById {
   commentId: number;
   content: string;
   commentor: string;
-  subComments: [
-    {
-      commentId: number;
-      content: string;
-      commentor: string;
-    },
-  ];
+  subComment: SubComment[];
+}
+
+interface SubComment {
+  commentId: number;
+  content: string;
+  commentor: string;
 }
 
 export interface CommentByIdResponse extends Response {