+++ lib/constants/theme.ts
... | ... | @@ -0,0 +1,28 @@ |
| 1 | +/** | |
| 2 | + * 테마 설정(3상태: system/light/dark)의 저장 키·DOM 속성명·허용값·기본값 SSOT. | |
| 3 | + * | |
| 4 | + * `app/layout.tsx`(Server Component — `<head>` inline script 문자열 생성)와 | |
| 5 | + * `_hooks/use-theme-preference.ts`('use client') 양쪽이 같은 값을 참조해야 한다. 'use client' | |
| 6 | + * 모듈의 export는 컴포넌트가 아닌 일반 값(문자열 등)일 경우 Server Component에서 import 시 | |
| 7 | + * `undefined`로 평가된다(lib/constants/splash.ts와 동일한 이유) — 그래서 이 상수도 'use client'가 | |
| 8 | + * 없는 순수 모듈로 분리한다. | |
| 9 | + */ | |
| 10 | + | |
| 11 | +/** 테마 선택값. "system"은 OS 설정을 따르며 `<html>`에 속성을 부여하지 않는 것으로 표현한다. */ | |
| 12 | +export type ThemePreference = "system" | "light" | "dark"; | |
| 13 | + | |
| 14 | +/** 선택된 테마를 기기에 영속화하는 localStorage 키. */ | |
| 15 | +export const THEME_STORAGE_KEY = "edupay-admin-theme"; | |
| 16 | + | |
| 17 | +/** 선택된 테마를 `<html>`에 표시하는 속성명. "system"일 때는 속성 자체가 없다(fail-safe). */ | |
| 18 | +export const THEME_ATTRIBUTE_NAME = "data-theme"; | |
| 19 | + | |
| 20 | +/** 토글 버튼이 순환하는 순서. */ | |
| 21 | +export const THEME_PREFERENCE_CYCLE: readonly ThemePreference[] = [ | |
| 22 | + "system", | |
| 23 | + "light", | |
| 24 | + "dark", | |
| 25 | +]; | |
| 26 | + | |
| 27 | +/** 저장값이 없거나 손상됐을 때의 기본 테마 — 속성 부재 상태와 대응한다. */ | |
| 28 | +export const DEFAULT_THEME_PREFERENCE: ThemePreference = "system"; |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?