feat: 댓글 삭제 기능 추가

codeit-bootcamp-frontend · Jun 15, 2024 · 1ccc8da · 1ccc8da
1 parent 43e9962
commit 1ccc8da
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 32 deletions.
diff --git a/api/api.js b/api/api.js
@@ -24,7 +24,7 @@ export async function getArticle(id) {
 export async function getArticleComments({ articleId, limit }) {
   try {
     const res = await fetch(
-      `${BASE_URL}/articles/${articleId}/comments?limit=${limit}`
+      `${BASE_URL}/articles/${articleId}/comments?limit=${limit}`,
     );
     const data = await res.json();
     return data;
@@ -34,7 +34,7 @@ export async function getArticleComments({ articleId, limit }) {
 }
 
 export async function postArticle(values) {
-  const accessToken = await getAccessToken();
+  const accessToken = localStorage.getItem("accessToken");
 
   const res = await fetch(`${BASE_URL}/articles`, {
     method: "POST",
@@ -48,7 +48,7 @@ export async function postArticle(values) {
 }
 
 export async function postFile(file) {
-  const accessToken = await getAccessToken();
+  const accessToken = localStorage.getItem("accessToken");
 
   const res = await fetch(`${BASE_URL}/images/upload`, {
     method: "POST",
@@ -61,7 +61,7 @@ export async function postFile(file) {
 }
 
 export async function postArticleComment({ articleId, content }) {
-  const accessToken = await getAccessToken();
+  const accessToken = localStorage.getItem("accessToken");
   const res = await fetch(`${BASE_URL}/articles/${articleId}/comments`, {
     method: "POST",
     headers: {
@@ -73,22 +73,6 @@ export async function postArticleComment({ articleId, content }) {
   return res;
 }
 
-export async function getAccessToken() {
-  const res = await fetch(`${BASE_URL}/auth/signIn`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      email: "weworkhi@email.com",
-      password: "password",
-    }),
-  });
-  const data = await res.json();
-  const accessToken = data.accessToken;
-  return accessToken;
-}
-
 export async function signUpUser(formValues) {
   const res = await fetch(`${BASE_URL}/auth/signUp`, {
     method: "POST",
@@ -117,3 +101,14 @@ export async function signInUser({ email, password }) {
   localStorage.setItem("accessToken", accessToken);
   return data.user?.id;
 }
+
+export async function deleteComment(commentId) {
+  const accessToken = localStorage.getItem("accessToken");
+
+  const res = await fetch(`${BASE_URL}/comments/${commentId}`, {
+    method: "DELETE",
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+}
diff --git a/components/ArticleComments.module.css b/components/ArticleComments.module.css
@@ -15,6 +15,37 @@
   color: var(--color-gray800);
 }
 
+.kebabButton {
+  display: flex;
+  position: relative;
+}
+
+.kebab {
+  cursor: pointer;
+}
+
+.kebabMenu {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 72px;
+  font-size: 14px;
+  border: 2px solid var(--color-gray200);
+  border-radius: 8px;
+  position: absolute;
+  left: 30px;
+}
+
+.fixButton {
+  cursor: pointer;
+}
+
+.deleteButton {
+  cursor: pointer;
+}
+
 .section_bottom {
   padding-bottom: 24px;
   display: flex;

diff --git a/components/ArticleComments.tsx b/components/ArticleComments.tsx
@@ -2,21 +2,52 @@ import { Comment } from "@/types";
 import styles from "./ArticleComments.module.css";
 import Image from "next/image";
 import getFormattedDate from "@/utils/formatDate";
+import { Dispatch, MouseEvent, SetStateAction, useState } from "react";
 
-const ArticleComments = ({ comment }: { comment: Comment }) => {
-  const { content, createdAt } = comment;
+const ArticleComments = ({
+  comment,
+  handleDeleteComment,
+}: {
+  comment: Comment;
+  handleDeleteComment: (id: number) => void;
+}) => {
+  const [kebabButton, setKebabButton] = useState(false);
+
+  const { id, content, createdAt } = comment;
   const { nickname } = comment.writer;
 
+  const handleMenuChange = (e: MouseEvent<HTMLImageElement>) => {
+    setKebabButton(!kebabButton);
+  };
+
+  const handleDeleteButton = () => {
+    handleDeleteComment(id);
+  };
+
   return (
     <div className={styles.ArticleComments}>
       <div className={styles.section_top}>
         <div className={styles.content}>{content}</div>
-        <Image
-          src="/images/ic_kebab.svg"
-          width={24}
-          height={24}
-          alt="케밥아이콘"
-        />
+        <div className={styles.kebabButton}>
+          <Image
+            className={styles.kebab}
+            src="/images/ic_kebab.svg"
+            width={24}
+            height={24}
+            alt="케밥아이콘"
+            onClick={handleMenuChange}
+          />
+          {kebabButton ? (
+            <div className={styles.kebabMenu}>
+              <div className={styles.fixButton}>수정하기</div>
+              <div className={styles.deleteButton} onClick={handleDeleteButton}>
+                삭제하기
+              </div>
+            </div>
+          ) : (
+            ""
+          )}
+        </div>
       </div>
       <div className={styles.section_bottom}>
         <Image src="/images/logo.svg" width={32} height={32} alt="유저이미지" />

diff --git a/components/ArticleFeedComments.tsx b/components/ArticleFeedComments.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, SyntheticEvent, useEffect, useState } from "react";
 import styles from "./ArticleFeedComments.module.css";
-import { getArticleComments } from "@/api/api";
+import { deleteComment, getArticleComments } from "@/api/api";
 import { postArticleComment } from "@/api/api";
 import ArticleComments from "./ArticleComments";
 import { Comment } from "@/types";
@@ -10,10 +10,19 @@ const ArticleFeedComments = ({ id }: { id: string }) => {
   const [comments, setComments] = useState<Comment[]>([]);
   const [isChangeComments, setIsChangeComments] = useState<boolean>(false);
 
+  const isButtonDisabled = content.trim() === "" ? true : false;
+
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setContent(e.target.value);
   };
-  const isButtonDisabled = content.trim() === "" ? true : false;
+
+  const handleDeleteComment = async (targetId: number) => {
+    const res = await deleteComment(targetId);
+
+    setComments((prevComments) =>
+      prevComments.filter((comment) => comment.id !== targetId),
+    );
+  };
 
   useEffect(() => {
     async function loadArticleComments(articleId: string) {
@@ -63,7 +72,11 @@ const ArticleFeedComments = ({ id }: { id: string }) => {
       <div className={styles.comments}>
         {comments.length
           ? comments.map((comment) => (
-              <ArticleComments comment={comment} key={comment.id} />
+              <ArticleComments
+                comment={comment}
+                key={comment.id}
+                handleDeleteComment={handleDeleteComment}
+              />
             ))
           : ""}
       </div>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -97,7 +97,7 @@ const Home = () => {
         <div className="flex justify-between px-200 pb-104 pt-32">
           <h4>©codeit - 2024</h4>
 
-          <div className="text-gray-100">
+          <div className="flex gap-30 text-gray-100">
             <a href="/privacy">Privacy Policy</a>
             <a href="/faq">FAQ</a>
           </div>