FE-43✨ 에피그램 상세페이지 더보기 드롭다운 추가

epigram5-9 · Jul 14, 2024 · 8cde498 · 8cde498
1 parent 657d74d
commit 8cde498
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/components/epigram/MoreOptionMenu.tsx b/src/components/epigram/MoreOptionMenu.tsx
@@ -0,0 +1,20 @@
+import Image from 'next/image';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
+
+function MoreOptionsMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button type='button'>
+          <Image src='/meatballIcon.svg' alt='더 보기 아이콘' width={36} height={36} />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>수정</DropdownMenuItem>
+        <DropdownMenuItem>삭제</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export default MoreOptionsMenu;
diff --git a/src/pageLayout/Epigram/EpigramFigure.tsx b/src/pageLayout/Epigram/EpigramFigure.tsx
@@ -1,5 +1,6 @@
-import { EpigramFigureProps } from '@/types/epigram.types';
 import Image from 'next/image';
+import MoreOptionsMenu from '@/components/epigram/MoreOptionMenu';
+import { EpigramFigureProps } from '@/types/epigram.types';
 
 function EpigramFigure({ epigram, currentUserId }: EpigramFigureProps) {
   const isAuthor = currentUserId === epigram.writerId;
@@ -12,7 +13,7 @@ function EpigramFigure({ epigram, currentUserId }: EpigramFigureProps) {
               #{tag.name}
             </p>
           ))}
-          {isAuthor && <Image src='/meatballIcon.svg' alt='더 보기 아이콘' width={36} height={36} />}
+          {isAuthor && <MoreOptionsMenu />}
         </div>
         <blockquote className=''>
           <p className='text-2xl lg:text-3xl font-normal'>{epigram.content}</p>