[FE-14] 모바일 대기질 경고 컴포넌트
작업 내용 (설계 의도)
근거: design-fe-app.md FR-13 — 예약 전 대기질 경고 + 확인(토스식 인라인 확인).
변경 사항
- 신규
mobile/components/AirQualityWarning.tsx— props{ grade, pm10, onConfirm, confirmed }.isBadOrWorse(grade)(FE-11)가 true일 때만 경고 배너 렌더(“현재 대기질이 나쁨입니다 (PM10 N). 야외 활동에 유의하세요”). useTheme(FE-10)의danger/airBad토큰 색. GOOD/MODERATE/UNKNOWN이면 아무것도 렌더하지 않음(null).accessibilityRole="alert". 확인 인터랙션은 부모(예약 화면)가 버튼 라벨 전환으로 처리 — 이 컴포넌트는 경고 표시 전담(단순화).
의존
- FE-10 (useTheme), FE-11 (isBadOrWorse)
다이어그램
클래스 의존
flowchart LR Theme[useTheme] --> Warn[AirQualityWarning] Format[isBadOrWorse] --> Warn Warn --> Booking[booking/new 후행]
테스트 케이스
- grade가 BAD면 경고 문구와 PM10 값이 표시된다
- grade가 VERY_BAD면 경고가 표시된다
- grade가 GOOD·MODERATE·UNKNOWN이면 아무것도 렌더하지 않는다
- 경고 배너에 alert 접근성 역할이 부여된다