dpdpdndn 블로그

FE-16-mobile-booking-airquality-warning

NEW3 min read

[FE-16] 모바일 예약 생성 대기질 경고·확인 게이트

작업 내용 (설계 의도)

근거: design-fe-app.md FR-13/FR-14 — 예약 확정 전 BAD 이상 경고 + 확인, 실패 시 폴백 정상 진행. 예약 화면 단일 writer.

변경 사항

  • mobile/app/booking/new.tsx:
    • 좌표 확보용 useFacilityDetail(facilityId) 재사용 → lat/lng → useAirQuality(lat, lng)(FE-12).
    • isBadOrWorse(representativeGrade)이고 대기질 조회 success면 AirQualityWarning(FE-14) 배너를 슬롯 섹션 위에 렌더.
    • 예약 버튼 게이트: BAD 이상이고 아직 미확인이면 버튼 라벨 “확인하고 예약”, 첫 탭에서 confirmed=true(useState)로 전환하며 경고 인지, 두 번째(또는 확인 후) 탭에서 createBooking 실행. BAD 미만/UNKNOWN/조회 실패면 기존 “예약 진행” 흐름 그대로(경고 없이, FR-14).
    • 대기질·좌표 유무와 무관하게 예약 자체는 차단하지 않음.

의존

  • FE-12 (useAirQuality), FE-14 (AirQualityWarning), FE-11 (isBadOrWorse·좌표 필드)

롤백

  • 경고 게이트는 조건부 렌더·플래그 제거로 즉시 비활성. 예약 mutation은 대기질과 무결합이라 무영향.

다이어그램

처리 흐름

sequenceDiagram
    participant U as 이용자
    participant B as 예약 화면
    participant Q as useAirQuality
    U->>B: 예약 버튼 탭
    B->>Q: representativeGrade 조회
    alt BAD 이상 & 미확인
        B-->>U: 경고 표시·"확인하고 예약"
        U->>B: 재탭(확인)
    end
    B->>B: createBooking 실행

테스트 케이스

  • 대기질 BAD면 경고 배너가 표시되고 첫 탭에서 예약이 즉시 실행되지 않는다(확인 게이트)
  • 확인 후 탭하면 createBooking이 호출된다
  • 대기질 UNKNOWN이면 경고 없이 예약이 정상 진행된다
  • 대기질 조회 실패 시 경고 없이 예약이 정상 진행된다(FR-14)
  • 좌표를 확보하지 못하면 경고 없이 예약이 진행된다
  • 대기질이 나빠도 예약이 차단되지 않는다(확인 후 진행)

그래프 뷰