[FE-01] 테마 토큰 시스템 (라이트/다크) 신설

작업 내용 (설계 의도)

변경 사항

근거: 20260704-채팅시스템고도화-design-fe-app.md “테마 토큰 정의 표”·“상태관리 설계”.

mobile/에 테마 인프라가 전무하다(모든 화면 색 하드코딩, no-hardcoded-color·no-single-mode 위반). 이 티켓은 모든 채팅/커뮤니티 화면 티켓의 선행 병목인 테마 토큰 시스템을 신설한다.

theme/tokens.ts — 시맨틱 토큰 객체(light/dark) 정의. 설계 문서의 토큰→라이트/다크 매핑 표가 SSOT.
theme/useTheme.ts — 현재 모드의 토큰 객체를 반환하는 훅. useColorScheme() 기본 + themeStore 오버라이드 반영.
theme/themeStore.ts — Zustand 스토어(mode: 'system'|'light'|'dark'), MMKV 영속(lib/mmkv-storage 재사용).
theme/ThemeProvider.tsx — 앱 루트 마운트용 프로바이더(정의만, _layout.tsx 와이어업은 FE-15).
스타일 생성 헬퍼: createStyles(theme) 패턴 문서화(각 화면은 함수형 StyleSheet).

_layout.tsx·(tabs)/_layout.tsx는 이 티켓에서 수정하지 않는다(FE-15 통합 티켓 소유). 프로바이더는 정의만 제공한다.

의존

없음 (wave 1)

다이어그램

클래스 의존

flowchart LR
    Screen[화면 컴포넌트] --> useTheme
    useTheme --> themeStore
    useTheme --> ColorScheme[useColorScheme RN]
    themeStore --> MMKV[mmkv-storage]
    useTheme --> tokens[tokens.ts light/dark]

테스트 케이스

시스템이 다크 모드면 useTheme()가 다크 토큰 객체를 반환한다
themeStore.mode='light' 오버라이드 시 시스템이 다크여도 라이트 토큰을 반환한다
mode='system'이면 useColorScheme 값을 따른다
라이트/다크 토큰 객체가 동일한 키 집합을 갖는다(키 누락 없음)
themeStore 변경이 MMKV에 영속되어 재생성 시 유지된다

dpdpdndn 블로그

탐색기

FE-01-theme-token-system