fix(post): comment, like count 속성명 변경 및 픽스

Team-INSERT · Sep 13, 2023 · 321489a · 321489a
1 parent 2638684
commit 321489a
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 46 deletions.
diff --git a/src/page/forum-post/layouts/PostBody/CountBox.tsx b/src/page/forum-post/layouts/PostBody/CountBox.tsx
@@ -4,20 +4,20 @@ import { font } from "@/styles";
 import { CommentIcon, Like } from "@/assets/icons";
 
 interface ICountBoxProps {
-  totalComments: number;
-  totalLikes: number;
+  commentCount: number;
+  likeCount: number;
 }
 
-const CountBox = ({ totalComments, totalLikes }: ICountBoxProps) => {
+const CountBox = ({ likeCount, commentCount }: ICountBoxProps) => {
   return (
     <Row gap="22px">
       <LikeBox>
         <Like width={18} height={18} />
-        <LikeText>{totalLikes}</LikeText>
+        <LikeText>{likeCount}</LikeText>
       </LikeBox>
       <Row alignItems="center" gap="4px">
         <CommentIcon width={18} height={18} />
-        <CommentText>{totalComments}</CommentText>
+        <CommentText>{commentCount}</CommentText>
       </Row>
     </Row>
   );

diff --git a/src/page/forum-post/layouts/PostBody/index.tsx b/src/page/forum-post/layouts/PostBody/index.tsx
@@ -9,7 +9,7 @@ const PostBody = ({ ...post }: IPost) => {
     <Container>
       <Content dangerouslySetInnerHTML={{ __html: post.content }} />
       <CountBox {...post} />
-      <CommentBox totalComments={post.totalComments} />
+      <CommentBox totalComments={post.commentCount || 0} />
     </Container>
   );
 };

diff --git a/src/page/forum-post/layouts/PostHead/PostTitle.tsx b/src/page/forum-post/layouts/PostHead/PostTitle.tsx
@@ -1,33 +1,33 @@
 import styled from "styled-components";
 import { Column, Row } from "@/components/Flex";
 import color from "@/styles/color";
-import { font } from "@/styles";
-import Link from "next/link";
+import { flex, font } from "@/styles";
 import { Time } from "@/assets/icons";
 import { IPost } from "@/interfaces";
 import { ImageWithFallback } from "@/components/atoms";
 import { defaultProfile } from "@/assets/images";
 import useDate from "@/hooks/useDate";
+import React from "react";
 
 const PostTitle = ({ ...post }: IPost) => {
   const { formatDate } = useDate();
 
   return (
     <Column>
       <Title>{post.title}</Title>
-      <ProfileBox href="/" target="_blank">
+      <ProfileBox>
         <Profile>
           <ImageWithFallback
-            src="/"
+            src={post.user.profileImage}
             alt="profile"
-            width={40}
-            height={36}
+            width={38}
+            height={38}
             fallbackSrc={defaultProfile}
             rounded
           />
         </Profile>
         <Column justifyContent="center">
-          {/* <Author>{post.user.nickname}</Author> */}
+          <Author>{post.user.nickName}</Author>
           <Row gap="4px" alignItems="center">
             <Time width={12} height={12} />
             <Date>{formatDate(post.createdAt)}</Date>
@@ -43,7 +43,7 @@ const Title = styled.h1`
   padding-bottom: 10px;
 `;
 
-const ProfileBox = styled(Link)`
+const ProfileBox = styled.div`
   display: flex;
   gap: 12px;
   align-items: center;
@@ -53,8 +53,11 @@ const ProfileBox = styled(Link)`
 `;
 
 const Profile = styled.div`
+  width: 42px;
+  height: 42px;
   border: 2px solid ${color.on_tertiary};
   border-radius: 50%;
+  ${flex.CENTER};
 `;
 
 const Author = styled.h2`

diff --git a/src/page/forum-post/layouts/PostHead/ReactBox.tsx b/src/page/forum-post/layouts/PostHead/ReactBox.tsx
@@ -4,25 +4,20 @@ import { Row } from "@/components/Flex";
 import { color, font } from "@/styles";
 
 interface IPostReactBoxProps {
-  totalComments: number;
-  totalLikes: number;
-  view: number;
+  commentCount: number;
+  likeCount: number;
 }
 
-const ReactBox = ({ totalComments, totalLikes, view }: IPostReactBoxProps) => {
+const ReactBox = ({ commentCount, likeCount }: IPostReactBoxProps) => {
   return (
     <Container>
-      <Row alignItems="center" gap="4px">
-        <View width={14} height={14} />
-        <ViewText>{view}</ViewText>
-      </Row>
       <Row alignItems="center" gap="4px">
         <Like width={14} height={14} />
-        <LikeText>{totalLikes}</LikeText>
+        <LikeText>{likeCount}</LikeText>
       </Row>
       <Row alignItems="center" gap="4px">
         <CommentIcon width={14} height={14} />
-        <CommentText>{totalComments}</CommentText>
+        <CommentText>{commentCount}</CommentText>
       </Row>
     </Container>
   );

diff --git a/src/page/forum/layouts/PostListItem.tsx b/src/page/forum/layouts/PostListItem.tsx
@@ -6,6 +6,7 @@ import { defaultProfile } from "@/assets/images";
 import { ImageWithFallback } from "@/components/atoms";
 import Link from "next/link";
 import { ROUTER } from "@/constants";
+import { CommentIcon, LikeIcon } from "@/assets/icons";
 
 interface IPostListItemProps {
   post: Omit<IPost, "content">;
@@ -20,23 +21,26 @@ const PostListItem = ({ post }: IPostListItemProps) => {
         <Row alignItems="center" gap="1vw">
           <Row gap="8px" alignItems="center">
             <ImageWithFallback
-              src="/"
+              src={post.user.profileImage}
               alt="profile"
-              width={22}
-              height={22}
+              width={18}
+              height={18}
               fallbackSrc={defaultProfile}
               rounded
             />
-            <PostWriterName>TEST</PostWriterName>
+            <PostWriterName>{post.user.nickName}</PostWriterName>
           </Row>
           <Separator />
-          {/* <Row gap="8px">
-            <PostView>{post.totalComments}</PostView>
+          <Row gap="12px">
             <Row alignItems="center" gap="3px">
-              <LikeIcon />
-              <PostLike>{post.totalLikes}</PostLike>
+              <CommentIcon width={12} />
+              <PostComment>{0}</PostComment>
             </Row>
-          </Row> */}
+            <Row alignItems="center" gap="3px">
+              <LikeIcon width={12} />
+              <PostLike>{post.likeCount}</PostLike>
+            </Row>
+          </Row>
         </Row>
       </Column>
     </Container>
@@ -64,23 +68,12 @@ const PostName = styled.h1`
   ${font.H4};
 `;
 
-const PostView = styled.span`
+const PostComment = styled.span`
   ${font.p3};
   color: ${color.gray};
-
-  &:before {
-    content: "조회수 ";
-  }
-
-  &:after {
-    content: "회";
-  }
 `;
 
-const PostLike = styled.span`
-  ${font.p3};
-  color: ${color.gray};
-`;
+const PostLike = styled(PostComment)``;
 
 const PostWriterName = styled.span`
   ${font.p3};