dpdpdndn 블로그

FE-23-app-program-reservation-booking

NEW2 min read

[FE-23] 앱 시설상품 회차 예약 (A-F2, booking/new 재사용 확장)

작업 내용 (설계 의도)

변경 사항

기존 mobile/app/booking/new.tsx(MO-04)를 확장해 program 회차 예약을 지원한다.

  • ?programId= 파라미터가 오면 슬롯 목록을 programId로 필터(useSlots 확장 or 클라 필터 — §design Open Questions). CLOSED 슬롯 제외.
  • 결제 amount는 program.price 사용(기존 10,000 고정 대신 — program 예약 시). POST /bookings + /payment?orderType=BOOKING 기존 흐름 재사용(신규 결제 접점 없음, FR-12).
  • 하드코딩 색 → useTheme() 토큰 리트로핏(기존 화면). 기존 대기질 경고 게이트·일반 시설 예약 경로 무변경(programId 없으면 기존 동작).

근거: design-fe-app A-F2, FR-12/16. 롤백: programId 분기 제거(기존 booking 무영향).

의존

  • FE-07 (usePrograms/슬롯 programId), FE-04 (OrderType)

다이어그램

클래스 의존

flowchart LR
    Screen["booking/new?programId"] --> Slots["useSlots (programId 필터)"]
    Screen --> Create["useCreateBooking (기존)"]
    Screen --> Pay["payment/new?orderType=BOOKING"]

테스트 케이스

  • programId 파라미터가 있으면 해당 program 회차만 슬롯으로 노출된다
  • program 예약 결제 amount가 program.price로 설정된다
  • programId 없으면 기존 시설 예약 동작이 유지된다(회귀)
  • CLOSED/정원초과 슬롯 예약 시 409 안내가 노출된다
  • 슬롯 0건 시 “예약 가능한 회차가 없어요”
  • 하드코딩 색 0건, 라이트/다크 렌더

그래프 뷰