From 563ea777735481a9d9dc4cc032eacde214eaefa6 Mon Sep 17 00:00:00 2001
From: minkyung00 <mksin00@naver.com>
Date: Sun, 26 Feb 2023 20:38:55 +0900
Subject: [PATCH] refactor: comment edit, delete button

---
 domain/comment/components/Comment/index.tsx | 44 ++++++++++-----------
 types/comment.d.ts                          |  1 +
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/domain/comment/components/Comment/index.tsx b/domain/comment/components/Comment/index.tsx
index 3400d7a..57da4b4 100644
--- a/domain/comment/components/Comment/index.tsx
+++ b/domain/comment/components/Comment/index.tsx
@@ -2,12 +2,13 @@ import { useState } from "react";
 
 import { useNextRouter } from "@/hooks/useNextRouter";
 import { Button, Text, Profile } from "@/components";
+import { getDateDiffTextFromNow } from "@/utils/date";
+import { useAuth } from "@/domain/auth/hooks/useAuth";
 import { CommentForm } from "../CommentForm";
 import {
   useDeleteCommentMutation,
   useEditCommentMutation,
 } from "../../hooks/query";
-import { getDateDiffTextFromNow } from "@/utils/date";
 
 type CommentProps = {
   comment: _Comment;
@@ -17,7 +18,8 @@ export function Comment({ comment }: CommentProps) {
   const {
     query: { reviewId },
   } = useNextRouter();
-  const { id, nickname, content, updatedAt, likeAmount } = comment;
+  const { user } = useAuth();
+  const { id, nickname, content, updatedAt, userId } = comment;
 
   const [isEditMode, setIsEditMode] = useState(false);
 
@@ -31,32 +33,28 @@ export function Comment({ comment }: CommentProps) {
   };
 
   return (
-    <article className="rounded-lg">
-      <header className="flex justify-between items-center mb-2">
+    <article className="rounded-lg mb-2">
+      <header className="flex justify-between items-center mb-2 py-2">
         <Profile
           nickname={nickname}
           updatedAt={`${getDateDiffTextFromNow(updatedAt)} 전`}
         />
-        <ul className="flex">
-          <li>
-            <Button
-              onClick={() => setIsEditMode(true)}
-              className="bg-transparent dark:bg-transparent"
-            >
-              편집
-            </Button>
-          </li>
-          <li>
-            <Button
-              onClick={handleDeleteButtonClick}
-              className="bg-transparent dark:bg-transparent"
-            >
-              삭제
-            </Button>
-          </li>
-        </ul>
+        {user?.userId === String(userId) && (
+          <ul className="flex gap-4">
+            <li>
+              <Button as="icon" onClick={() => setIsEditMode(true)}>
+                편집
+              </Button>
+            </li>
+            <li>
+              <Button as="icon" onClick={handleDeleteButtonClick}>
+                삭제
+              </Button>
+            </li>
+          </ul>
+        )}
       </header>
-      <Text>{content}</Text>
+      <Text className="py-2">{content}</Text>
       {isEditMode && <CommentForm comment={comment} onSubmit={editComment} />}
     </article>
   );
diff --git a/types/comment.d.ts b/types/comment.d.ts
index 31129ab..3991736 100644
--- a/types/comment.d.ts
+++ b/types/comment.d.ts
@@ -2,6 +2,7 @@ type _Comment = {
   id: number;
   content: string;
   updatedAt: string;
+  userId: number;
   nickname: string;
   likeAmount: number;
 };