CalendarSection
예약 가능한 날짜를 표시하고, 사용자가 날짜를 선택할 수 있도록 도와주는 캘린더 UI 컴포넌트입니다.
react-calendar 라이브러리를 기반으로 하며, 예약 가능한 날짜에는 스타일이 별도로 적용됩니다.
| 이름 | 타입 | 필수 | 설명 |
|---|---|---|---|
selectedDate |
Date | null |
✅ | 현재 선택된 날짜 |
onChange |
(date: Date) => void |
✅ | 날짜 선택 시 호출되는 콜백 함수 |
scheduledDates |
Set<string> |
✅ | 예약 가능한 날짜 목록 (YYYY-MM-DD 형식 문자열) |
-
react-calendar라이브러리를 사용하여 달력을 표시합니다. -
selectedDate값에 따라 현재 선택된 날짜가 강조됩니다. -
scheduledDates에 포함된 날짜는.scheduledDate클래스를 통해 강조됩니다. - 요일 라벨은
"S", "M", "T", "W", "T", "F", "S"형식으로 표시됩니다.
-
반응형 스타일
768px,1200px기준으로 미디어 쿼리를 적용하여 UI 구조 및 여백 등이 달라집니다.
<CalendarSection
selectedDate={new Date('2025-06-08')}
onChange={handleDateChange}}
scheduledDates={new Set(['2025-06-08', '2025-06-11', '2025-06-20'])}
/>