From e19c5adb42324987fca689bb4a2908f425767c37 Mon Sep 17 00:00:00 2001
From: eeseung <seunghee9941@gmail.com>
Date: Fri, 3 Nov 2023 12:09:09 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20#32=20-=20Comment=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/Comment.tsx | 89 ++++++++++++++++++++++++++++++
 src/components/index.ts            |  1 +
 2 files changed, 90 insertions(+)
 create mode 100644 src/components/Comment/Comment.tsx

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
new file mode 100644
index 00000000..e8df5865
--- /dev/null
+++ b/src/components/Comment/Comment.tsx
@@ -0,0 +1,89 @@
+import { PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline'
+import Link from 'next/link'
+import { Avatar } from '..'
+import Button from '../common/Button/Button'
+
+export interface CommentProps {
+  commentId: string
+  user: { id: string; name: string; profile: string }
+  comment: string
+  date: Date
+  auth?: boolean
+  firstDepth?: boolean
+  replyCount?: number
+  onEdit?: (commentId: string) => void
+  onDelete?: (commentId: string) => void
+  onOpen?: (commentId: string) => void
+  onReply?: (commentId: string, userName: string) => void
+}
+
+const Comment = ({
+  commentId,
+  user,
+  comment,
+  date,
+  auth = false,
+  firstDepth = true,
+  replyCount = 0,
+  onEdit,
+  onDelete,
+  onOpen,
+  onReply,
+}: CommentProps) => {
+  return (
+    <article className="flex gap-x-2 p-3">
+      <Avatar
+        src={user.profile}
+        width={30}
+        height={30}
+        alt={user.name}
+      />
+      <div className="flex w-full flex-col gap-y-1">
+        <div className="flex items-center justify-between">
+          <Link
+            href={`/user/${user.id}`}
+            className="text-sm font-semibold text-gray9">
+            {user.name}
+          </Link>
+          {auth && onEdit && onDelete && (
+            <div className="flex gap-x-1.5">
+              <Button
+                className="p-0.5"
+                onClick={() => onDelete(commentId)}>
+                <TrashIcon className="h-5 w-5 text-slate6" />
+              </Button>
+              <Button
+                className="p-0.5"
+                onClick={() => onEdit(commentId)}>
+                <PencilSquareIcon className="h-5 w-5 text-slate6" />
+              </Button>
+            </div>
+          )}
+        </div>
+        <p className="py-1 text-sm text-gray9">{comment}</p>
+        <div className="pt-1 text-xs text-gray6">
+          {date.getFullYear().toString()}.{date.getMonth().toString()}.
+          {date.getDate().toString()}
+          {firstDepth && (
+            <>
+              {' • '}
+              <Button
+                className="font-medium"
+                onClick={() => replyCount > 0 && onOpen && onOpen(commentId)}>
+                {replyCount}개의 답글
+              </Button>
+              {' • '}
+              <Button
+                className="font-medium"
+                onClick={() => onReply && onReply(commentId, user.name)}>
+                답글 달기
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export default Comment
diff --git a/src/components/index.ts b/src/components/index.ts
index 9209ce39..83af2a67 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,3 +14,4 @@ export { default as CategoryList } from './common/CategoryList/CategoryList'
 export { default as DropdownItem } from './common/Dropdown/DropdownItem'
 export { default as Dropdown } from './common/Dropdown/Dropdown'
 export { default as SpaceMemberList } from './common/SpaceMemberList/SpaceMemberList'
+export { default as Comment } from './Comment/Comment'