From 1c73906f931eeb9b6e56b6bdd91a9da33736807f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9A=B0=EC=84=B1?= <sitpo96@naver.com>
Date: Thu, 8 Feb 2024 04:19:25 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20Feat=20#133:=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change-Id: Ib3da46b9b68f05af495f582f2365c677bd2fe614
---
 .../Bucket/BucketDetail/Comment/Comment.tsx   |  2 +
 .../BucketDetail/Comment/ShowMoreButton.tsx   | 46 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 frontend/src/pages/Bucket/BucketDetail/Comment/ShowMoreButton.tsx

diff --git a/frontend/src/pages/Bucket/BucketDetail/Comment/Comment.tsx b/frontend/src/pages/Bucket/BucketDetail/Comment/Comment.tsx
index df7befcf..ce1f523d 100644
--- a/frontend/src/pages/Bucket/BucketDetail/Comment/Comment.tsx
+++ b/frontend/src/pages/Bucket/BucketDetail/Comment/Comment.tsx
@@ -1,6 +1,7 @@
 import UserProfile from '../../../../components/UserProfile'
 import { ICommentItem, TimeUnitType } from '../../../../interfaces'
 import ActiveLikeButton from './ActiveLikeButton'
+import ShowMoreButton from './ShowMoreButton'
 import UnActiveLikeButton from './UnActiveLikeButton'
 
 const getTime = (time: number, timeUnit: TimeUnitType): string => {
@@ -34,6 +35,7 @@ const Comment = ({ commentInfo }: ICommentProps) => {
 
 			<ActiveLikeButton />
 			<UnActiveLikeButton />
+			<ShowMoreButton />
 		</div>
 	)
 }
diff --git a/frontend/src/pages/Bucket/BucketDetail/Comment/ShowMoreButton.tsx b/frontend/src/pages/Bucket/BucketDetail/Comment/ShowMoreButton.tsx
new file mode 100644
index 00000000..d8ce2212
--- /dev/null
+++ b/frontend/src/pages/Bucket/BucketDetail/Comment/ShowMoreButton.tsx
@@ -0,0 +1,46 @@
+import { Menu, Transition } from '@headlessui/react'
+import { AiOutlineMore } from 'react-icons/ai'
+
+const ShowMoreButton = () => {
+	const handleClickModifyButton = () => {
+		// Todo : 수정 모드로 변경
+	}
+	const handleClickDeleteButton = () => {
+		// Todo : 삭제 요청 Api 적용
+	}
+	return (
+		<div>
+			<Menu as="div" className="absolute top-0 right-0">
+				<Menu.Button>
+					<AiOutlineMore color="#767676" />
+				</Menu.Button>
+				<Transition
+					enter="transition duration-100 ease-out"
+					enterFrom="transform scale-95 opacity-0"
+					enterTo="transform scale-100 opacity-100"
+					leave="transition duration-75 ease-out"
+					leaveFrom="transform scale-100 opacity-100"
+					leaveTo="transform scale-95 opacity-0"
+				>
+					<Menu.Items
+						as="ul"
+						className="absolute z-10 mt-2 origin-top-right translate-x-1/2 bg-white divide-gray-100 rounded-sm shadow-lg right-1/2 ring-1 ring-black ring-opacity-5 focus:outline-none"
+					>
+						<Menu.Item as="li">
+							<button onClick={handleClickModifyButton} className="w-12 p-1 text-sm text-point1">
+								수정
+							</button>
+						</Menu.Item>
+						<Menu.Item as="li">
+							<button onClick={handleClickDeleteButton} className="w-12 p-1 text-sm text-point1">
+								삭제
+							</button>
+						</Menu.Item>
+					</Menu.Items>
+				</Transition>
+			</Menu>
+		</div>
+	)
+}
+
+export default ShowMoreButton