FE-13-mobile-airquality-badge-card

[FE-13] 모바일 대기질 배지·카드 컴포넌트

작업 내용 (설계 의도)

근거: design-fe-app.md FR-12 — 대기질 배지·카드(프레젠테이션, useTheme 소비, 4상태).

변경 사항

• 신규 mobile/components/AirQualityBadge.tsx — grade prop → 라벨(FE-11 매핑) + useTheme(FE-10) 등급 토큰 색. UNKNOWN 미표시. accessibilityLabel·accessibilityRole 부여. 색 하드코딩 0.
• 신규 mobile/components/AirQualityCard.tsx — props { status, data }. success면 PM10/PM2.5 + AirQualityBadge + 측정소·시각. loading이면 “대기질 정보를 불러오는 중…”. error/UNKNOWN/pm 모두 null이면 “대기질 정보를 불러올 수 없습니다”(textSecondary). pm 일부 null이면 가용 값만. StyleSheet + useTheme 토큰.
• components/**는 커버리지 수집 대상 — 로직을 컴포넌트로 추출.

의존

• FE-10 (useTheme), FE-11 (등급 매핑·타입)

다이어그램

클래스 의존

flowchart LR
    Theme[useTheme] --> Badge[AirQualityBadge]
    Format[air-quality-format] --> Badge
    Badge --> Card[AirQualityCard]
    Theme --> Card

테스트 케이스

• success에서 PM10/PM2.5 수치와 대표 등급 배지, 측정소·시각이 표시된다
• loading에서 “대기질 정보를 불러오는 중” 문구가 표시된다
• error/UNKNOWN에서 “대기질 정보를 불러올 수 없습니다” 폴백이 표시되고 배지는 숨겨진다
• pm10만 있을 때 pm10만 표시되고 크래시하지 않는다
• 배지에 접근성 라벨이 부여된다