예약 캘린더 구현 방식

[99minji]

작업 진행 중이라 내용 수정 예정

라이브러리 : fullcalendar

요구 사항

• 캘린더에서 특정 날짜를 선택하면 체크박스로 예약 가능한 시간을 선택 가능
• 한 번의 예약에는 한 타임만 예약이 가능
• 예약 가능한 시간을 선택하지 않으면 '예약하기' 버튼 비활성화
• 참여 인원 기본 값은 1명
• 예약 가능한 시간을 선택하고 참여 인원수를 골라서 '예약하기' 버튼을 클릭하면 “예약이 완료 모달?토스트? 띄우기

작업 방식

1. 부모 컴포넌트에서 activityId, schedules , price를 props 로 받음
2. schedules 데이터는 아래와 같은 형식으로 전달

{
    id: 12314,
    date: '2024-12-01',
    startTime: '12:00',
    endTime: '13:00'
  },

3. 받은 schedules 들을 Calendar 컴포넌트에 전달하여 schedules 즉 이벤트가 있는 날짜를 FullCalendar 라이브러리에 적용
4. 이벤트 있는 날짜를 클릭하면 해당 startTime과 endTime이 표시되도록 작업
   Calendar,.tsx

{schedules.some((schedule) => schedule.date === selectedDate) ? (
  <ul className={s.selectedDate}>
    {schedules
      .filter((schedule) => schedule.date === selectedDate)
      .map((schedule) => (
        <li key={schedule.id}>
          <button
            type="button"
            onClick={() => handleTimeSelect(schedule.id, schedule.date, schedule.startTime)}
            className={activeScheduleId === schedule.id ? s.active : ""}
          >
            {schedule.startTime} ~ {schedule.endTime}
          </button>
        </li>
      ))}
  </ul>
) : (
  <p className={s["not-possible"]}>선택한 날짜에 예약 가능한 시간이 없습니다.</p>
)}

5. Calendar에서 날짜와 시간을 선택하면 onTimeSelect가 호출되어, 선택된 정보를 ScheduleDetail 컴포넌트에서 selectedScheduleId와 selectedDateTime` 상태로 업데이트함. 이후, 예약하기 버튼을 통해 선택된 정보와 함께 예약 요청을 서버로 전송

공유 사항

• 반응형 구현을 위해 react-responsive 설치했음
• 반응형에서 버튼 노출 설정으로 인해 클라이언트에서만 렌더링되도록 설정

const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient) {
    return null;
  }