feat: collection info dropdown ui

picktoss · Dec 23, 2024 · aacb8b2 · aacb8b2
1 parent 1167904
commit aacb8b2
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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