Merge branch 'comment/#113' into comment/113

components/common/Header.tsx

@@ -29,7 +29,7 @@ export default function Header() {
         </p>
       </StTopLink>
       <StHeaderContents>
-        <Link href="/main">
+        <Link href="/">
           <a>
             <IcNoriHeaderLogo />
           </a>

components/community/CommunityList.tsx

@@ -15,6 +15,7 @@ export default function CommunityList(props: CommunityListProps) {
     <StCommunityListWrapper>
       {contentsList.map((content, idx) => (
         <ContentCard
+          id={content.id}
           key={idx}
           category={content.category}
           title={content.title}

components/community/ContentsCard.tsx

@@ -1,8 +1,12 @@
 import styled from '@emotion/styled';
 import { IcReply, IcHeart, IcDot } from '../../public/assets/icons';
 import CommunityCategory from './CommunityCategory';
+import Router from 'next/router';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
 
 interface ContentInfoProps {
+  id: string;
   category: string;
   title: string;
   content: string;
@@ -13,15 +17,27 @@ interface ContentInfoProps {
 }
 
 export default function ContentCard(props: ContentInfoProps) {
-  const { category, title, content, userNickname, replyCount, createdAt, img } =
-    props;
+  const {
+    id,
+    category,
+    title,
+    content,
+    userNickname,
+    replyCount,
+    createdAt,
+    img,
+  } = props;
 
   return (
     <StContentsCardWrapper>
       <StContentInfo>
         <CommunityCategory category={category} />
-        <h1>{title}</h1>
-        <p>{content}</p>
+        <StMainInfo
+          onClick={() => Router.push({ pathname: `/community/${id}` })}
+        >
+          <h1>{title}</h1>
+          <p>{content}</p>
+        </StMainInfo>
         <StWriteInfo>
           <span>{userNickname}</span>
           <IcDot />
@@ -56,6 +72,8 @@ const StContentsCardWrapper = styled.div`
     margin-bottom: 0.7rem;
 
     ${({ theme }) => theme.fonts.b9_24_medium_150}
+
+    cursor: pointer;
   }
 
   p {
@@ -68,8 +86,11 @@ const StContentsCardWrapper = styled.div`
 
     color: ${({ theme }) => theme.colors.gray009};
     ${({ theme }) => theme.fonts.t6_17_regular_140}
+
+    cursor: pointer;
   }
 `;
+const StMainInfo = styled.article``;
 const StContentInfo = styled.section`
   margin-right: 4.9rem;
 
@@ -79,10 +100,10 @@ const StContentImg = styled.img`
   width: 21.6rem;
   height: 21.6rem;
 
-  object-fit: cover;
-
   border: 0.1rem solid ${({ theme }) => theme.colors.gray005};
   border-radius: 0.5rem;
+
+  object-fit: cover;
 `;
 const StWriteInfo = styled.div`
   display: flex;

components/community/ReplyContent.tsx

@@ -1,21 +1,28 @@
 import styled from '@emotion/styled';
+import { IcReplyWriteIcon } from '../../public/assets/icons';
+import { useState } from 'react';
 
 interface ReplyContentProps {
+  author: boolean;
   userNickname?: string;
   content: string;
   createdAt: string;
 }
 
 export default function ReplyContent(props: ReplyContentProps) {
-  const { userNickname, content, createdAt } = props;
+  const { userNickname, content, createdAt, author } = props;
+
   return (
     <StReplyContentWrapper>
       <StReplyInfo>
         <p>{userNickname}</p>
+        {author && <IcReplyWriteIcon />}
       </StReplyInfo>
       <StReplyContents>
         <p>{content}</p>
-        <span>{createdAt} · 신고</span>
+        <span>
+          {createdAt} · {author ? '삭제' : '신고'}
+        </span>
       </StReplyContents>
     </StReplyContentWrapper>
   );

components/community/Reply.tsx → components/community/ReplyList.tsx

@@ -1,21 +1,55 @@
 import styled from '@emotion/styled';
-import ReplyContent from '../community/ReplyContent';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { postReply } from '../../core/api/community';
+import {
+  CommunityData,
+  PostCommentBody,
+  ReplyData,
+} from '../../types/community';
+import ReplyContent from './ReplyContent';
+import { useRouter } from 'next/router';
+
+interface ReplyListProps {
+  cid: string;
+  replyList: ReplyData[];
+}
 
-export default function Reply() {
+export default function ReplyList(props: ReplyListProps) {
+  const router = useRouter();
+  const { replyList, cid } = props;
   const [inputColor, setInputColor] = useState<boolean>(false);
   const [replyText, setReplyText] = useState<string>('');
+  const [newReplyInfo, setNewReplyInfo] = useState<PostCommentBody>({
+    boardId: '',
+    content: '',
+  });
 
   const handleInputText = (e: React.ChangeEvent<HTMLInputElement>) => {
     setReplyText(e.target.value);
+    setNewReplyInfo({ ...newReplyInfo, content: e.target.value });
   };
 
   const handleInputColor = () => {
     setInputColor(replyText.length !== 0);
   };
 
+  const handleReplyregister = async () => {
+    const { content } = newReplyInfo;
+    if (content === '') {
+      alert('내용을 입력해주세요.');
+      return;
+    }
+
+    const data = await postReply(newReplyInfo);
+    setNewReplyInfo({
+      boardId: `${cid}`,
+      content: replyText,
+    });
+    router.push(`/community/${data.id}`);
+  };
+
   return (
-    <StReplyWrapper>
+    <>
       <StReplyTitle>
         <h1>댓글</h1>
         <p>23</p>
@@ -29,37 +63,25 @@ export default function Reply() {
             onChange={handleInputText}
           />
         </StInputContent>
-        <StInputBtn inputColor={inputColor}>입력</StInputBtn>
+        <StInputBtn inputColor={inputColor} onClick={handleReplyregister}>
+          입력
+        </StInputBtn>
       </StInputForm>
-      <ReplyContent
-        userNickname="희지맘"
-        createdAt="2022.07.13"
-        content="저희는 4개월 때부터 학습용 완구 썼어요!"
-      />
-      <ReplyContent
-        userNickname="희지맘"
-        createdAt="2022.07.13"
-        content="저희는 4개월 때부터 학습용 완구 썼어요!"
-      />
-      <ReplyContent
-        userNickname="희지맘"
-        createdAt="2022.07.13"
-        content="저희는 4개월 때부터 학습용 완구 썼어요!"
-      />
-      <ReplyContent
-        userNickname="희지맘"
-        createdAt="2022.07.13"
-        content="저희는 4개월 때부터 학습용 완구 썼어요!"
-      />
-    </StReplyWrapper>
+      <StReplyWrapper>
+        {replyList.map((reply, idx) => (
+          <ReplyContent
+            key={idx}
+            author={reply.author}
+            userNickname={reply.userNickname}
+            content={reply.content}
+            createdAt={reply.createdAt}
+          />
+        ))}
+      </StReplyWrapper>
+    </>
   );
 }
 
-const StReplyWrapper = styled.section`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-`;
 const StReplyTitle = styled.article`
   display: flex;
   flex-direction: row;
@@ -136,3 +158,8 @@ const StInputBtn = styled.span<{ inputColor: boolean }>`
 
   cursor: pointer;
 `;
+const StReplyWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+`;

components/community/index.ts

@@ -1,4 +1,4 @@
 export { default as ReplyContent } from './ReplyContent';
 export { default as CommunityList } from './CommunityList';
-export { default as Reply } from './Reply';
 export { default as CommunityFloatingBtn } from './CommunityFloatingBtn';
+export { default as replyList } from './ReplyList';

core/api/community.ts

@@ -1,5 +1,5 @@
 import useSWR from 'swr';
-import { PostCommunityBody } from '../../types/community';
+import { PostCommentBody, PostCommunityBody } from '../../types/community';
 import { baseInstance } from '../axios';
 
 export const useGetCollectionProduct = (key: string) => {
@@ -47,3 +47,12 @@ export const deleteCommunity = async (id: string) => {
     console.log(e);
   }
 };
+
+export const postReply = async (body: PostCommentBody) => {
+  try {
+    const { data } = await baseInstance.post('/board/comment', body);
+    return data;
+  } catch (e) {
+    console.log(e);
+  }
+};

pages/community/[cid].tsx

@@ -5,9 +5,9 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { ParsedUrlQuery } from 'querystring';
 import { useState } from 'react';
-import { Reply } from '../../components/community';
 import CommunityCategory from '../../components/community/CommunityCategory';
 import DetailFloatingBtn from '../../components/community/DetailFloatingBtn';
+import ReplyList from '../../components/community/ReplyList';
 import { deleteCommunity, getCommunityDetail } from '../../core/api/community';
 import { IcExpandImg, IcMenu, IcWriter } from '../../public/assets/icons';
 import { CommunityData } from '../../types/community';
@@ -109,7 +109,7 @@ export default function CommunityDetail({
             </StCommunityContent>
           </StCommunityArticle>
         </StCommunitySection>
-        <Reply />
+        <ReplyList replyList={replyList} cid={cid} />
       </StDetailSection>
       <DetailFloatingBtn heartNum={0} replyNum={replyCount} />
       {isExpanded && (
@@ -156,61 +156,73 @@ export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
             userNickname: '희지맘',
             content: '와 정말 좋은 글 입니다.',
             createdAt: '2022.06.23',
+            author: true,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 공감가는 글 입니다.',
             createdAt: '2022.06.23',
+            author: false,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 좋은 글 입니다.',
             createdAt: '2022.06.23',
+            author: false,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 공감가는 글 입니다.',
             createdAt: '2022.06.23',
+            author: true,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 좋은 글 입니다.',
             createdAt: '2022.06.23',
+            author: true,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 공감가는 글 입니다.',
             createdAt: '2022.06.23',
+            author: false,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 좋은 글 입니다.',
             createdAt: '2022.06.23',
+            author: true,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 공감가는 글 입니다.',
             createdAt: '2022.06.23',
+            author: false,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 좋은 글 입니다.',
             createdAt: '2022.06.23',
+            author: true,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 공감가는 글 입니다.',
             createdAt: '2022.06.23',
+            author: false,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 좋은 글 입니다.',
             createdAt: '2022.06.23',
+            author: true,
           },
           {
             userNickname: '희지맘',
             content: '와 정말 공감가는 글 입니다.',
             createdAt: '2022.06.23',
+            author: false,
           },
         ],
       },

public/assets/icons/index.ts

@@ -44,3 +44,4 @@ export { default as IcGoogleBtn } from './btn_social_login_google.svg';
 export { default as IcNaverBtn } from './btn_social_login_naver.svg';
 export { default as IcSignupCheckboxUnselected } from './ic_checkbox_unselected_black_20.svg';
 export { default as IcSignupCheckboxSelected } from './ic_checkbox_selected_green_20.svg';
+export { default as IcReplyWriteIcon } from './replyWriterIcon.svg';