FE-02-web-airquality-display-foundation

[FE-02] 웹 대기질 표시 토대 (등급 토큰·타입·매핑)

작업 내용 (설계 의도)

근거: design-fe-web.md — 테마 토큰(등급색 라이트/다크)·등급→라벨/토큰 매핑 (연관 병목: 토큰과 매핑이 서로 참조하므로 한 티켓).

변경 사항

• web/app/globals.css :root/.dark 양쪽에 대기질 등급 시맨틱 토큰(HSL 트리플) 추가: --aq-good(+-foreground), --aq-moderate, --aq-bad, --aq-verybad, --aq-unknown. 값은 설계 문서 “테마 토큰” 표 그대로.
• web/tailwind.config.ts colors에 위 토큰을 hsl(var(--aq-*))로 노출(aq-good, aq-good-foreground …).
• 신규 web/lib/portal/air-quality.ts — AirQualityGrade 유니온 타입, AirQualityResponse 타입(BE 계약: pm10/pm25/pm10Grade/pm25Grade/representativeGrade/stationName/measuredAt, null 허용), 등급→{ label, badgeClass } 매핑 함수. 색 하드코딩 금지, 토큰 클래스만.

의존

• 없음 (wave 1)

다이어그램

클래스 의존

flowchart LR
    Globals[globals.css --aq-*] --> Tw[tailwind.config]
    Tw --> Mapping[air-quality.ts 매핑]
    Mapping --> Badge[AirQualityBadge 후행]
    Mapping --> Card[AirQualityCard 후행]

테스트 케이스

• 등급 매핑이 GOOD/MODERATE/BAD/VERY_BAD/UNKNOWN 각각에 한글 라벨을 반환한다
• 등급 매핑이 각 등급에 대응하는 aq 토큰 배지 클래스를 반환한다
• 알 수 없는 grade 문자열이 들어와도 UNKNOWN(정보없음)으로 폴백한다
• 라이트/다크 각 모드에 대응하는 —aq-* 변수가 globals.css에 정의된다