[ CommunityForm ] 댓글 POST 연결

components/community/ContentCard.tsx

@@ -10,7 +10,7 @@ interface ContentInfoProps {
   content: string;
   userNickname?: string;
   replyCount?: number;
-  createdAt?: string;
+  createdAt: string;
   img?: string;
 }
 
@@ -30,16 +30,25 @@ export default function ContentCard(props: ContentInfoProps) {
     <StContentsCardWrapper>
       <StContentInfo>
         <CommunityCategory category={category} />
-        <StMainInfo
-          onClick={() => Router.push({ pathname: `/community/${id}` })}
-        >
-          <h1>{title}</h1>
-          <p>{content}</p>
-        </StMainInfo>
+        {!img ? (
+          <StMainInfo
+            onClick={() => Router.push({ pathname: `/community/${id}` })}
+          >
+            <h1>{title}</h1>
+            <p>{content}</p>
+          </StMainInfo>
+        ) : (
+          <StImgMainInfo
+            onClick={() => Router.push({ pathname: `/community/${id}` })}
+          >
+            <h1>{title}</h1>
+            <p>{content}</p>
+          </StImgMainInfo>
+        )}
         <StWriteInfo>
           <span>{userNickname}</span>
           <IcDot />
-          <span>{createdAt?.split('T')[0]}</span>
+          <span>{createdAt.split('T')[0]}</span>
         </StWriteInfo>
         <StReplyInfo>
           <IcHeart />
@@ -48,9 +57,7 @@ export default function ContentCard(props: ContentInfoProps) {
           <span>{replyCount}</span>
         </StReplyInfo>
       </StContentInfo>
-      {img === undefined ? (
-        <></>
-      ) : (
+      {img && (
         <StContentImg
           src={'https://nori-community.s3.ap-northeast-2.amazonaws.com/' + img}
           alt="리뷰 사진"
@@ -72,7 +79,6 @@ const StContentsCardWrapper = styled.div`
   border-bottom: 0.1rem solid ${({ theme }) => theme.colors.gray005};
 
   h1 {
-    width: 92.3rem;
     margin-top: 1.6rem;
     margin-bottom: 0.7rem;
 
@@ -95,7 +101,13 @@ const StContentsCardWrapper = styled.div`
     cursor: pointer;
   }
 `;
-const StMainInfo = styled.article``;
+const StMainInfo = styled.article`
+  width: 97.6rem;
+`;
+const StImgMainInfo = styled.article`
+  width: 72.5rem;
+  margin-right: 3.3rem;
+`;
 const StContentInfo = styled.section`
   display: flex;
   flex-direction: column;

components/community/ReplyContent.tsx

@@ -6,11 +6,11 @@ interface ReplyContentProps {
   author: boolean;
   userNickname?: string;
   content: string;
-  createdAt: string;
+  createAt: string;
 }
 
 export default function ReplyContent(props: ReplyContentProps) {
-  const { userNickname, content, createdAt, author } = props;
+  const { userNickname, content, createAt, author } = props;
 
   return (
     <StReplyContentWrapper>
@@ -21,7 +21,7 @@ export default function ReplyContent(props: ReplyContentProps) {
       <StReplyContents>
         <p>{content}</p>
         <span>
-          {createdAt} · {author ? '삭제' : '신고'}
+          {createAt.split('T')[0]} · {author ? '삭제' : '신고'}
         </span>
       </StReplyContents>
     </StReplyContentWrapper>

components/community/ReplyList.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, InputHTMLAttributes } from 'react';
 import { postReply } from '../../core/api/community';
 import {
   CommunityData,
@@ -29,12 +29,11 @@ export default function ReplyList(props: ReplyListProps) {
   const [isFirst, setIsFirst] = useState<boolean>(true);
 
   const handleInputText = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setReplyText(e.target.value);
-    setNewReplyInfo({ ...newReplyInfo, content: e.target.value });
+    setNewReplyInfo({ boardId: cid, content: e.target.value });
   };
 
-  const handleInputColor = () => {
-    setInputColor(replyText.length !== 0);
+  const handleInputColor = (e: any) => {
+    setInputColor(e.target.value.length !== 0);
   };
 
   const handleReplyregister = async () => {
@@ -44,12 +43,13 @@ export default function ReplyList(props: ReplyListProps) {
       return;
     }
 
-    const data = await postReply(newReplyInfo);
+    const status = await postReply(newReplyInfo);
     setNewReplyInfo({
-      boardId: `${cid}`,
+      boardId: cid,
       content: replyText,
     });
-    router.push(`/community/${data.id}`);
+    if (status === 200) router.push(`/community/${cid}`);
+    setNewReplyInfo({ boardId: cid, content: '' });
   };
   const handleCurrentPage = (nextPage: number) => {
     setCurrentPage(nextPage);
@@ -89,20 +89,18 @@ export default function ReplyList(props: ReplyListProps) {
         </StInputBtn>
       </StInputForm>
       <StReplyWrapper>
-        {pageReplyList.map(
-          ({ author, userNickname, content, createdAt }, idx) => (
-            <ReplyContent
-              key={idx}
-              author={author}
-              userNickname={userNickname}
-              content={content}
-              createdAt={createdAt}
-            />
-          ),
-        )}
+        {replyList.map(({ author, userNickname, content, createAt }, idx) => (
+          <ReplyContent
+            key={idx}
+            author={author}
+            userNickname={userNickname}
+            content={content}
+            createAt={createAt}
+          />
+        ))}
       </StReplyWrapper>
       <StReplyListNav>
-        {replyList && (
+        {pageReplyList && (
           <PageNavigation
             currentPage={currentPage}
             lastPage={Math.ceil(replyList.length / 10)}

core/api/community.ts

@@ -48,8 +48,8 @@ export const putCommunity = async (id: string, body: PutCommunityBody) => {
 
 export const postReply = async (body: PostCommentBody) => {
   try {
-    const { data } = await baseInstance.post('/board/comment', body);
-    return data;
+    const { status } = await baseInstance.post('/board/comment', body);
+    return status;
   } catch (e) {
     console.log(e);
   }

types/community.ts

@@ -3,7 +3,7 @@ export interface ReplyData {
   author: boolean;
   userNickname?: string;
   content: string;
-  createdAt: string;
+  createAt: string;
 }
 // 커뮤니티 데이터
 export interface CommunityData {
@@ -26,6 +26,7 @@ export interface PostCommunityBody {
   content: string;
   imageList?: ImgData[];
 }
+
 // 커뮤니티 수정 put body
 export interface PutCommunityBody {
   category?: string;
@@ -40,11 +41,13 @@ export interface IsChangeCommunity {
   isChangeContent: boolean;
   isChangeImageList: boolean;
 }
+
 // 커뮤니티 댓글
 export interface PostCommentBody {
   boardId?: string;
   content: string;
 }
+
 export interface GetCommunityList {
   communityList: CommunityData[];
   isLoading: boolean;