Feat: Modal 컴포넌트 구현

[winchoose]

📌 Summary

• [Feature]: modal 컴포넌트 구현 #45

• use-modal-context.ts 생성
• input 'ssm' 사이즈 추가
• 기존 location-search.tsx 파일명 변경 및 오타 수정
• modal 컨텐츠 생성

📚 Tasks

카카오맵은 나중에 앱 아이콘 나오면 한번에 하도록 하겠습니다.
공통 Modal 컴포넌트를 Compound Pattern으로 구현했습니다.이전에 구현한 BottomSheet 구조를 참고하여 일관된 사용성을 유지했습니다. 날짜는 미래로 30일까지가 적당한 것 같습니다.

<Modal.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
  <Modal.Overlay />
  <Modal.Container>
    <Modal.Header title="날짜를 설정해주세요" />
    <Modal.Content>
      <DateTimePicker />
    </Modal.Content>
    <Modal.Footer onConfirm={handleConfirm} />
  </Modal.Container>
</Modal.Root>

이런식으로 사용하시면 됩니다.

📸 Screenshot

해당 작업에 대한 스크린샷 및 자료를 첨부해 주세요.