FE-01-theme-token-system

[FE-01] 테마 토큰 시스템 + useTheme + 테마 프리미티브

작업 내용 (설계 의도)

변경 사항

근거: design-fe-app.md “테마 토큰 정의 표” · “컴포넌트 트리”.

현재 mobile에는 테마 시스템이 없고 전 화면이 iOS 색을 하드코딩한다(convention no-hardcoded-color/no-single-mode 위반 상태). 신규 한정판 화면을 라이트/다크 both로 만들기 위한 공통 선행 산출물을 신설한다.

• theme/tokens.ts: 시맨틱 토큰 → 라이트/다크 값 매핑 객체(설계 문서 표 그대로).
• theme/useTheme.ts: useColorScheme() 기본 + useThemeStore(Zustand) 사용자 오버라이드 → 현재 스킴의 토큰 객체 반환.
• stores/useThemeStore.ts: 스킴 오버라이드(정말 전역인 것만).
• 테마 프리미티브 components/themed/: ThemedView·ThemedText·PrimaryButton — 토큰 소비, 하드코딩 색 0.

이 티켓은 신규 파일만 생성하며 기존 화면을 수정하지 않는다(회귀 0).

의존

• 없음

다이어그램

클래스 의존

flowchart LR
    Tokens["theme/tokens.ts"] --> UseTheme["useTheme()"]
    Store["useThemeStore"] --> UseTheme
    Scheme["useColorScheme()"] --> UseTheme
    UseTheme --> Themed["ThemedView/Text/PrimaryButton"]

테스트 케이스

• useTheme()가 라이트 스킴에서 라이트 토큰 객체를 반환한다.
• useThemeStore로 다크 오버라이드 시 useTheme()가 다크 토큰을 반환한다.
• ThemedText가 textPrimary 토큰 색으로 렌더된다(라이트/다크 각각).
• PrimaryButton disabled 시 disabled 토큰 색 + accessibilityState.disabled=true.
• 토큰 객체에 하드코딩 hex가 화면 컴포넌트에 남지 않는다(토큰 경유만).