[#126] 코멘트 삭제 기능 (#130)

* [#111] Feat: 코멘트 생성 시 새로고침 안 해도 화면에 렌더링 되도록 atom 추가 * [#126] Feat: login user id와 comment author id 비교해서 삭제 버튼 렌더링 * [#126] Feat: 코멘트 삭제 기능 구현
kyupid · Jun 30, 2021 · 3e9cd41 · 3e9cd41
1 parent a02d5f1
commit 3e9cd41
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 6 deletions.
diff --git a/fe/src/components/issue-detail/Comment.tsx b/fe/src/components/issue-detail/Comment.tsx
@@ -1,17 +1,36 @@
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Box, Button } from '@material-ui/core';
-import AuthorAvatar from 'components/common/AuthorAvatar';
 import styled from 'styled-components';
+
+import AuthorAvatar from 'components/common/AuthorAvatar';
 import { ReactComponent as EditSvg } from 'icons/edit.svg';
+import { ReactComponent as DeleteSvg } from 'icons/delete.svg';
 import { ReactComponent as EmojiSvg } from 'icons/emoji.svg';
+import { instanceWithAuth } from 'api';
+
 import { CommentType } from 'types/issueType';
-import { useRecoilValue } from 'recoil';
 import { decodedUserDataAtom } from 'stores/userStore';
-import { detailIssueAuthorIdAtom } from 'stores/detailIssueStore';
+import { clickedIssueIdAtom } from 'stores/issueStore';
+import {
+  commentUpdateAtom,
+  detailIssueAuthorIdAtom,
+} from 'stores/detailIssueStore';
 
 const Comment = ({ commentData }: { commentData: CommentType }) => {
   const { id, description, createdTime, author } = commentData;
   const issueAuthorId = useRecoilValue(detailIssueAuthorIdAtom);
   const loginUser = useRecoilValue(decodedUserDataAtom);
+  const clickedIssueId = useRecoilValue(clickedIssueIdAtom);
+  const setCommentUpdate = useSetRecoilState(commentUpdateAtom);
+
+  const clickDeleteHandler = () => {
+    (async () => {
+      await instanceWithAuth.delete(
+        `${process.env.REACT_APP_API_URL}/api/issues/${clickedIssueId}/comments/${id}`
+      );
+      setCommentUpdate((cur) => ++cur);
+    })();
+  };
 
   return (
     <Box display="flex">
@@ -23,7 +42,7 @@ const Comment = ({ commentData }: { commentData: CommentType }) => {
             <div className="comment-created-time">{createdTime}분 전</div>
           </Box>
           <Box display="flex" alignItems="center">
-            {issueAuthorId === id && (
+            {issueAuthorId === author.id && (
               <IssueAuthorLabel
                 display="flex"
                 alignItems="center"
@@ -35,6 +54,15 @@ const Comment = ({ commentData }: { commentData: CommentType }) => {
             {loginUser && loginUser.id === author.id && (
               <Button startIcon={<EditIcon />}>편집</Button>
             )}
+            {loginUser && loginUser.id === author.id && (
+              <Button
+                onClick={clickDeleteHandler}
+                startIcon={<DeleteIcon />}
+                color="secondary"
+              >
+                삭제
+              </Button>
+            )}
             <EmojiButton>
               <EmojiSvg />
             </EmojiButton>
@@ -92,6 +120,8 @@ const IssueAuthorLabel = styled(Box)`
 
 const EditIcon = styled(EditSvg)``;
 
+const DeleteIcon = styled(DeleteSvg)``;
+
 const EmojiButton = styled.button`
   all: unset;
   margin-left: 1rem;

diff --git a/fe/src/components/issue-detail/IssueDetailBody.tsx b/fe/src/components/issue-detail/IssueDetailBody.tsx
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Box } from '@material-ui/core';
 import styled from 'styled-components';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import AuthorAvatar from 'components/common/AuthorAvatar';
 import CreateButton from 'components/buttons/CreateButton';
@@ -14,6 +14,7 @@ import { decodedUserDataAtom } from 'stores/userStore';
 import {
   commentDesctiptionAtom,
   commentsQuery,
+  commentUpdateAtom,
   detailIssueAuthorIdAtom,
   issueDetailQuery,
 } from 'stores/detailIssueStore';
@@ -28,6 +29,7 @@ const IssueDetailBody = () => {
   const [commentDesctiption, setCommentDesctiption] = useRecoilState(
     commentDesctiptionAtom
   );
+  const setCommentUpdate = useSetRecoilState(commentUpdateAtom);
 
   const issueDescription = {
     // 코멘트처럼 생겼지만 사실 이슈의 본문
@@ -44,7 +46,7 @@ const IssueDetailBody = () => {
   const newCommentHandler = () => {
     const token = localStorage.getItem('jwt');
     (async function () {
-      axios.post(
+      await axios.post(
         `${process.env.REACT_APP_API_URL}/api/issues/${clickedIssueId}/comments`,
         {
           description: commentDesctiption,
@@ -55,6 +57,8 @@ const IssueDetailBody = () => {
           },
         }
       );
+      setCommentUpdate((cur) => ++cur);
+      setCommentDesctiption('');
     })();
   };
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>

diff --git a/fe/src/stores/detailIssueStore.ts b/fe/src/stores/detailIssueStore.ts
@@ -14,6 +14,11 @@ export const commentDesctiptionAtom = atom<string>({
   default: '',
 });
 
+export const commentUpdateAtom = atom<number>({
+  key: 'commentUpdateAtom',
+  default: 0,
+});
+
 export const issueDetailQuery = selector<IssueDetailType>({
   key: 'issueDetailQuery',
   get: async ({ get }) => {
@@ -77,6 +82,8 @@ export const commentsQuery = selector({
   get: async ({ get }) => {
     const token = localStorage.getItem('jwt');
     const clickedIssueId = get(clickedIssueIdAtom);
+    get(commentUpdateAtom);
+
     try {
       const { data } = await axios.get(
         `${process.env.REACT_APP_API_URL}/api/issues/${clickedIssueId}/comments`,