[FEAT] 투표자 헤더 새 링크 만들기 기능 구현 및 UI 변경

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/assets/icons/IcCalendarAdd.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+
+export default function IcCalendarAdd(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className='relative h-full w-full'
+      data-name='ic_calendar_add'
+      {...props}
+    >
+      <div className='absolute top-[12.5%] right-[8.33%] bottom-[8.33%] left-[16.67%]'>
+        <div
+          className='absolute inset-[-3.95%_-4.17%]'
+          style={{ '--stroke-0': 'currentColor' } as React.CSSProperties}
+        >
+          <svg
+            preserveAspectRatio='none'
+            width='100%'
+            height='100%'
+            viewBox='0 0 19.5 20.5'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+            className='block size-full max-w-none'
+          >
+            <path
+              id='Vector'
+              d='M9.25 18.75H2.75C2.21957 18.75 1.71086 18.5393 1.33579 18.1642C0.960714 17.7891 0.75 17.2804 0.75 16.75V4.75C0.75 4.21957 0.960714 3.71086 1.33579 3.33579C1.71086 2.96071 2.21957 2.75 2.75 2.75H14.75C15.2804 2.75 15.7891 2.96071 16.1642 3.33579C16.5393 3.71086 16.75 4.21957 16.75 4.75V9.75M12.75 0.75V4.75M4.75 0.75V4.75M0.75 8.75H16.75M12.75 16.75H18.75M15.75 13.75V19.75'
+              stroke='var(--stroke-0, #191F28)'
+              strokeWidth='1.5'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/assets/icons/index.ts

@@ -2,6 +2,7 @@ import ArrowDown from './ArrowDown';
 import ArrowNext from './ArrowNext';
 import ArrowPrev from './ArrowPrev';
 import ArrowUp from './ArrowUp';
+import IcCalendarAdd from './IcCalendarAdd';
 import IcCheckboxChecked from './IcCheckboxChecked';
 import IcCheckboxDefault from './IcCheckboxDefault';
 import IcCircleCheckFilled from './IcCircleCheckFilled';
@@ -22,6 +23,7 @@ export const icons = {
   arrow_next: ArrowNext,
   arrow_prev: ArrowPrev,
   arrow_up: ArrowUp,
+  ic_calendar_add: IcCalendarAdd,
   ic_circle_check_filled: IcCircleCheckFilled,
   ic_circle_check_outline: IcCircleCheckOutline,
   ic_circle_x_filled: IcCircleXFilled,

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