From aacb8b2394de91a222097ad8e36a95888bf89453 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=EC=A0=95=EC=9A=B0?= <evencoding@gmail.com>
Date: Mon, 23 Dec 2024 17:04:01 +0900
Subject: [PATCH] feat: collection info dropdown ui

---
 .../collections/[id]/@header/default.tsx      | 20 +++++++++-
 .../collection-info-dropdown-menu.tsx         | 29 ++++++++++++++
 .../my-collection-info-dropdown-menu.tsx      | 38 +++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/features/collection/components/collection-info-dropdown-menu.tsx
 create mode 100644 src/features/collection/components/my-collection-info-dropdown-menu.tsx

diff --git a/src/app/(routes)/collections/[id]/@header/default.tsx b/src/app/(routes)/collections/[id]/@header/default.tsx
index f65086ab..04194000 100644
--- a/src/app/(routes)/collections/[id]/@header/default.tsx
+++ b/src/app/(routes)/collections/[id]/@header/default.tsx
@@ -1,14 +1,32 @@
+'use client'
+
+import CollectionInfoDropdownMenu from '@/features/collection/components/collection-info-dropdown-menu'
+import MyCollectionInfoDropdownMenu from '@/features/collection/components/my-collection-info-dropdown-menu'
+import { useCollectionInfo } from '@/requests/collection/hooks'
 import GoBackButton from '@/shared/components/custom/go-back-button'
 import Icon from '@/shared/components/custom/icon'
+import { useUser } from '@/shared/hooks/use-user'
+import { useParams } from 'next/navigation'
 
 const Header = () => {
+  const { id } = useParams()
+  const { user } = useUser()
+  const { data } = useCollectionInfo(Number(id))
+
+  if (!data) return null
+  const isMine = user?.id === data.member.creatorId
+
   return (
     <header className="sticky top-0 h-[54px] shrink-0 bg-white">
       <div className="flex h-full items-center justify-between px-[16px] text-icon-system">
         <GoBackButton />
         <div className="flex items-center gap-[16px]">
           <Icon name="share" className="size-[24px]" />
-          <Icon name="menu-dots" className="size-[24px]" />
+          {isMine ? (
+            <MyCollectionInfoDropdownMenu collectionId={data.id} />
+          ) : (
+            <CollectionInfoDropdownMenu collectionId={data.id} />
+          )}
         </div>
       </div>
     </header>
diff --git a/src/features/collection/components/collection-info-dropdown-menu.tsx b/src/features/collection/components/collection-info-dropdown-menu.tsx
new file mode 100644
index 00000000..2eef33f7
--- /dev/null
+++ b/src/features/collection/components/collection-info-dropdown-menu.tsx
@@ -0,0 +1,29 @@
+import Icon from '@/shared/components/custom/icon'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/shared/components/ui/dropdown-menu'
+import Text from '@/shared/components/ui/text'
+
+interface Props {
+  collectionId: number
+}
+
+const CollectionInfoDropdownMenu = ({ collectionId }: Props) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Icon name="menu-dots" className="size-[24px]" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="min-w-[240px] bg-white p-0 *:cursor-pointer">
+        <DropdownMenuItem className="flex justify-between px-5 py-4 hover:bg-gray-100">
+          <Text typography="subtitle2-medium">컬렉션 신고</Text>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default CollectionInfoDropdownMenu
diff --git a/src/features/collection/components/my-collection-info-dropdown-menu.tsx b/src/features/collection/components/my-collection-info-dropdown-menu.tsx
new file mode 100644
index 00000000..1187e08d
--- /dev/null
+++ b/src/features/collection/components/my-collection-info-dropdown-menu.tsx
@@ -0,0 +1,38 @@
+import Icon from '@/shared/components/custom/icon'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/shared/components/ui/dropdown-menu'
+import Text from '@/shared/components/ui/text'
+
+interface Props {
+  collectionId: number
+}
+
+const MyCollectionInfoDropdownMenu = ({ collectionId }: Props) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Icon name="menu-dots" className="size-[24px]" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="min-w-[240px] bg-white p-0 *:cursor-pointer">
+        <DropdownMenuItem className="flex justify-between px-5 py-4 hover:bg-gray-100">
+          <Text typography="subtitle2-medium">컬렉션 정보 수정</Text>
+          <Icon name="write-line" className="size-[20px]" />
+        </DropdownMenuItem>
+        <DropdownMenuItem className="flex justify-between px-5 py-4 hover:bg-gray-100">
+          <Text typography="subtitle2-medium">문제 편집</Text>
+          <Icon name="write-line" className="size-[20px]" />
+        </DropdownMenuItem>
+        <DropdownMenuItem className="flex justify-between px-5 py-4 text-text-critical hover:bg-gray-100">
+          <Text typography="subtitle2-medium">컬렉션 삭제</Text>
+          <Icon name="bin" className="size-[20px]" />
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default MyCollectionInfoDropdownMenu