feat: 투표자 헤더 캘린더 추가 아이콘 변경 및 링크 생성 바텀 시트 구현

Author: jaeml06

src/app/meet/[meetingId]/ParticipantHeader.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-
 import { useDisclosure } from '@/shared/hooks/useDisclosure';
 import LinkShareBottomSheet from '@/shared/ui/bottom-sheet/LinkShareBottomSheet';
-import { Menu } from '@/shared/ui/menu';
+import RegisterSequenceBottomSheet from '@/shared/ui/bottom-sheet/RegisterSequenceBottomSheet';
 import { TopBar } from '@/shared/ui/top-bar';
 
 interface ParticipantHeaderProps {
@@ -18,40 +16,40 @@ export default function ParticipantHeader({
   url,
   className,
 }: ParticipantHeaderProps) {
-  const router = useRouter();
   const {
     isOpen: isShareOpen,
     open: openShare,
     close: closeShare,
   } = useDisclosure();
 
   const {
-    isOpen: isMenuOpen,
-    open: openMenu,
-    close: closeMenu,
+    isOpen: isRegisterOpen,
+    open: openRegister,
+    close: closeRegister,
   } = useDisclosure();
 
   return (
     <>
       <div className={`relative ${className}`}>
         <TopBar
           title={title}
-          leftIcon='ic_hamburger'
-          onLeftClick={openMenu}
+          leftIcon='ic_calendar_add'
+          onLeftClick={openRegister}
           rightIcon='ic_other_share'
           onRightClick={openShare}
         />
-
-        <Menu isOpen={isMenuOpen} onClose={closeMenu} className='top-12 left-4'>
-          <Menu.Item onClick={() => router.push('/')}>모임 생성하기</Menu.Item>
-        </Menu>
       </div>
 
       <LinkShareBottomSheet
         isOpen={isShareOpen}
         onClose={closeShare}
         url={url}
       />
+
+      <RegisterSequenceBottomSheet
+        isOpen={isRegisterOpen}
+        onClose={closeRegister}
+      />
     </>
   );
 }

src/shared/ui/bottom-sheet/RegisterSequenceBottomSheet.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import BottomSheet from '@/shared/ui/bottom-sheet/BottomSheet';
+import Button from '@/shared/ui/button/Button';
+
+interface RegisterSequenceBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function RegisterSequenceBottomSheet({
+  isOpen,
+  onClose,
+}: RegisterSequenceBottomSheetProps) {
+  const router = useRouter();
+
+  const handleCreateNewLink = () => {
+    router.push('/');
+  };
+
+  return (
+    <BottomSheet isOpen={isOpen} onClose={onClose}>
+      <div className='flex flex-col items-center px-5 pt-2 pb-5 text-center'>
+        <h2 className='text-headline-5 mb-1 text-gray-900'>
+          새로운 투표 링크를 만드시겠어요?
+        </h2>
+        <p className='text-body-2 mb-8 text-gray-500'>
+          다른 모임 투표 링크가 생성돼요
+        </p>
+
+        <div className='flex w-full gap-3'>
+          <Button
+            fullWidth
+            onClick={onClose}
+            className='border border-gray-200 bg-white text-gray-600 hover:bg-gray-50'
+          >
+            취소
+          </Button>
+          <Button
+            fullWidth
+            onClick={handleCreateNewLink}
+            className='bg-gray-800 text-white hover:bg-gray-700'
+          >
+            새 링크 만들기
+          </Button>
+        </div>
+      </div>
+    </BottomSheet>
+  );
+}