Reservation

Reservation

예약 UI를 구성하는 컴포넌트입니다.
날짜 선택, 시간 선택, 인원 수 입력 및 예약 버튼을 포함하여 PC, 태블릿, 모바일에서 각각 반응형으로 동작합니다.

---

✅ Props

이름	타입	필수	설명
price	number	✅	인당 가격 정보
schedules	ScheduleSlot[]	✅	예약 가능한 날짜/시간 배열
onReserve	() => void	✅	예약 버튼 클릭 시 실행 함수

---

🔄 동작 방식

• 사용자가 날짜를 선택하면, 해당 날짜의 예약 가능한 시간 목록이 표시됩니다.
• 데스크탑에서는 모든 UI가 한 번에 표시되고, 테블릿/모바일에서는 단계적으로 노출됩니다.

---

🎨 스타일

• 반응형 스타일
  768px, 1200px 기준으로 미디어 쿼리를 적용하여 UI 구조 및 여백 등이 달라집니다.

---

🧾 사용예시

PC

Tablet

Mobile

<Reservation
          price={1000}
          schedules={[
            { id: 1, date: '2025-06-08', startTime: '14:00', endTime: '15:00' },
            { id: 2, date: '2025-06-11', startTime: '13:00', endTime: '14:00' },
            { id: 3, date: '2025-06-11', startTime: '14:00', endTime: '15:00' },
            { id: 4, date: '2025-06-20', startTime: '13:00', endTime: '14:00' },         
          ]}
          onReserve={() => {
            console.log('예약하기 버튼이 눌렸습니다!');
            alert('임시 예약 함수 호출됨');
          }}
        />
`