과제 설명

“회의실 예약” 화면을 구현해주세요.

날짜를 선택해 회의실 예약 현황을 확인하고, 원하는 시간/인원/장비 조건으로 예약을 시도합니다.

본 과제는 약 3시간 정도의 구현 시간을 예상하고 제작되었어요.

요구사항

• /src/pages/RoomBookingPage/index.tsx 파일을 활용해주세요.
• src/pages/components 폴더 아래의 컴포넌트를 활용해주세요. (없다면 자유롭게 생성해도 됩니다.)

기능 요구사항

1. 회의실 목록을 서버에서 불러와 출력해주세요

1. 회의실 목록 API는 회의실 목록 조회 (GET /api/rooms) 를 참고해주세요.
2. 날짜별 예약 현황을 불러와 타임라인으로 보여주세요
   1. 예약 현황 API는 예약 현황 조회 (GET /api/reservations) 를 참고해주세요.
   2. 사용자가 날짜를 변경하면 해당 날짜의 예약 현황을 다시 불러와야 합니다.
3. 링크를 통해 내가 선택한 필터가 포함된 회의실 정보를 공유할 수 있게 해주세요.

2. 예약 조건 입력 UI를 구현해주세요

사용자가 아래 조건을 입력할 수 있어야 합니다.

• 날짜 (기본: 오늘)
• 시작 시간 / 종료 시간
  1. 예약 현황은 “회의실별 타임라인” 형태로 보여주세요.
  2. 타임라인의 시간 범위는 09:00 ~ 20:00로 고정해요.
     1. 30분 간격으로 설정 가능해요. ex) 09:00 ~ 09:30
• 참석 인원
• 필요한 장비(복수 선택 가능)
• 선호 층(옵션)
  • 미선택 시 전체 층 대상
  • 회의실 목록에서 사용하는 층을 선택할 수 있어요.
  • 전체 회의실 목록에 해당하는 층을 선택할 수 있어요.

입력값에 대한 간단한 검증을 해주세요.

• 종료 시간은 시작 시간보다 늦어야 함
• 참석 인원은 1 이상

3. “예약 가능” 회의실만 필터링해서 보여주세요

입력한 조건에 맞춰 예약 가능한 회의실만 “가능 목록”으로 보여주세요.

필터 조건

1. 수용 인원
   • room.capacity >= attendees
2. 장비 포함
   • 선택한 장비가 모두 room.equipment에 포함
3. 층 조건(옵션)
   • 선호 층이 있다면 room.floor === preferredFloor
4. 시간 충돌 없음
   • 같은 날짜에 동일 roomId 예약들과 [start, end)가 겹치면 불가

4. 회의실 선택 & 예약 생성 기능을 구현해주세요

1. 예약 가능 목록에서 회의실을 하나 선택할 수 있어야 합니다.
2. 선택된 회의실은 선택 표시를 해주세요.
3. 예약하기 버튼 클릭 시 예약 생성 API를 호출합니다.

• 예약 생성 API는 예약 생성 (POST /api/reservations) 를 참고해주세요.