[FE-10] 모바일 경량 테마 모듈 (light/dark 토큰 + useTheme)
작업 내용 (설계 의도)
근거: design-fe-app.md — 모바일 테마 전무(색 하드코딩) → 신규 컴포넌트가 소비할 경량 테마 도입. no-single-mode 준수(라이트/다크 둘 다).
변경 사항
- 신규
mobile/theme/tokens.ts—light·dark두 토큰 객체. 시맨틱 키(background,surface,textPrimary,textSecondary,border,accent,danger) + 대기질 등급 배지 키(airGoodBg/airGoodFg…airUnknownBg/airUnknownFg). 값은 설계 문서 “테마 토큰” 표 그대로. - 신규
mobile/theme/useTheme.ts—useColorScheme()기준으로light/dark토큰 객체 반환. 기존 화면은 이번 범위에서 리팩터하지 않음(신규 컴포넌트만 소비).
의존
- 없음 (wave 1)
다이어그램
클래스 의존
flowchart LR Scheme[useColorScheme] --> Hook[useTheme] Tokens[tokens light/dark] --> Hook Hook --> Badge[AirQuality 컴포넌트 후행]
테스트 케이스
- useTheme가 라이트 스킴에서 light 토큰 객체를 반환한다
- useTheme가 다크 스킴에서 dark 토큰 객체를 반환한다
- 반환 토큰에 대기질 등급 배지 키(airBadBg 등)가 모두 존재한다
- 시맨틱 키(background/surface/textPrimary/danger)가 두 모드에 모두 정의된다