From 1ccc8dacfcb71c15e2c0a6e6e51c52ff1f0720a0 Mon Sep 17 00:00:00 2001 From: hoon Date: Sat, 15 Jun 2024 17:30:36 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/api.js | 35 +++++++++----------- components/ArticleComments.module.css | 31 ++++++++++++++++++ components/ArticleComments.tsx | 47 ++++++++++++++++++++++----- components/ArticleFeedComments.tsx | 19 +++++++++-- pages/index.tsx | 2 +- 5 files changed, 102 insertions(+), 32 deletions(-) diff --git a/api/api.js b/api/api.js index 5be754f4b..624a6d019 100644 --- 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 index b63520533..218d665d2 100644 --- 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 index cc142a7ca..fc6a9e5bd 100644 --- 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) => { + setKebabButton(!kebabButton); + }; + + const handleDeleteButton = () => { + handleDeleteComment(id); + }; + return (
{content}
- 케밥아이콘 +
+ 케밥아이콘 + {kebabButton ? ( +
+
수정하기
+
+ 삭제하기 +
+
+ ) : ( + "" + )} +
유저이미지 diff --git a/components/ArticleFeedComments.tsx b/components/ArticleFeedComments.tsx index adac41a3c..7f32dc402 100644 --- 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([]); const [isChangeComments, setIsChangeComments] = useState(false); + const isButtonDisabled = content.trim() === "" ? true : false; + const handleInputChange = (e: ChangeEvent) => { 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 }) => {
{comments.length ? comments.map((comment) => ( - + )) : ""}
diff --git a/pages/index.tsx b/pages/index.tsx index bd860b9c2..8dfaeabff 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -97,7 +97,7 @@ const Home = () => {

©codeit - 2024

-