[FE] Feat #133: 댓글 더보기 버튼 컴포넌트 작성

Change-Id: Ib3da46b9b68f05af495f582f2365c677bd2fe614

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>
 	)
 }

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