[FE-07] 웹 대기질 배지·카드 컴포넌트
작업 내용 (설계 의도)
근거: design-fe-web.md FR-12 — 대기질 배지·카드(프레젠테이션, 4상태).
변경 사항
- 신규
web/components/ui/AirQualityBadge.tsx—gradeprop → 라벨·토큰 배지(FE-02 매핑 사용). UNKNOWN은 배지 미표시. 색은 aq 토큰 클래스만(하드코딩 0). - 신규
web/app/portal/facilities/_components/AirQualityCard.tsx— props{ status, data }. success면 PM10/PM2.5 수치 +AirQualityBadge+ 측정소·측정시각. loading이면 “대기질 정보를 불러오는 중…”. error 또는 (pm10·pm25 모두 null / representativeGrade UNKNOWN)이면 “대기질 정보를 불러올 수 없습니다”(muted). pm 일부 null이면 가용 값만 표시. 데이터 페칭 없음(프레젠테이션).
의존
- FE-02 (등급 토큰·타입·매핑)
다이어그램
클래스 의존
flowchart LR Mapping[air-quality.ts] --> Badge[AirQualityBadge] Badge --> Card[AirQualityCard] Mapping --> Card
테스트 케이스
- success 상태에서 PM10/PM2.5 수치와 대표 등급 배지, 측정소·시각이 표시된다
- loading 상태에서 “대기질 정보를 불러오는 중” 문구가 표시된다
- error 또는 UNKNOWN 응답에서 “대기질 정보를 불러올 수 없습니다” 폴백이 표시되고 배지는 숨겨진다
- pm2.5만 null일 때 pm10 값만 표시되고 크래시하지 않는다
- 배지에 등급별 aq 토큰 클래스가 적용된다