nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-19
fix: 테마를 라이트로 고정 — 전환 기획이 아직 없다 
``로 못박는다. @fox 토큰은 `color-scheme` + `light-dark()`로 갈리므로
(`@fox/styles/_root.scss`) 이 속성 하나가 OS 다크 설정까지 덮는다 — 앱 CSS에는
`prefers-color-scheme` 분기가 없어 다른 경로가 없다.

첫 페인트 전 localStorage를 읽어 data-theme을 부여하던 부트스트랩 스크립트를 지웠다. 남겨 두면
예전에 다크를 골라 둔 기기에서 그 값이 고정값을 덮어쓴다.

`_hooks/use-theme-preference`와 `_components/theme-toggle-button`은 지우지 않고 둔다 — 이미
어디서도 렌더되지 않아(헤더가 붙이지 않는다) 번들에 들어가지 않고, 전환이 기획되면 그대로 다시
붙이면 된다. 되돌리는 방법은 layout 주석에 적어 두었다.

검증 — OS를 dark로 두고 확인: html data-theme="light", color-scheme "light", 화면도 라이트.
localStorage에 "dark"가 남아 있는 상태로 새로고침해도 라이트를 유지한다(종전에는 다크로 갔다).

Co-Authored-By: Claude Opus 5
@7d2f7449f38096f642e1b81189415cf39fc1747d
be86fe0
7d2f744
app/layout.tsx
--- app/layout.tsx
+++ app/layout.tsx
@@ -2,27 +2,7 @@
 
 import { Geist_Mono } from "next/font/google";
 
 import { FeedbackHost } from "@/app/_components/feedback-host";
 
 import { FeedbackProvider } from "@/app/_components/feedback-provider";
 
-import {
 
-  THEME_ATTRIBUTE_NAME,
 
-  THEME_STORAGE_KEY,
 
-} from "@/lib/constants/theme";
 
 import "./globals.scss";
 
-
 
-// 첫 페인트 전 테마 적용 — <head>는 <body>보다 먼저 파싱되므로 <html>만 조작 가능하다
 
-// (preventing-flash-before-hydration.md의 Themes 패턴). localStorage에 명시 선택("light"
 
-// /"dark")이 저장돼 있으면 첫 페인트 전에 <html data-theme>을 부여해 FOUC를 막는다. 저장값이
 
-// 없거나("system") 손상된 값이면 속성을 부여하지 않는다 — globals.css의
 
-// `prefers-color-scheme` 미디어 쿼리가 그대로 OS 설정을 따르는 fail-safe 경로다.
 
-//
 
-// THEME_STORAGE_KEY/THEME_ATTRIBUTE_NAME은 반드시 'use client' 파일이 아닌
 
-// lib/constants/theme에서 import한다 — 'use client' 모듈의 일반 값(문자열) export를
 
-// Server Component가 직접 import하면 클라이언트 레퍼런스 프록시 특성상 undefined로 평가된다
 
-// (컴포넌트 export만 정상적으로 프록시된다).
 
-const THEME_BOOTSTRAP_SCRIPT = `(function(){try{var t=localStorage.getItem(${JSON.stringify(
 
-  THEME_STORAGE_KEY
 
-)});if(t==="light"||t==="dark")document.documentElement.setAttribute(${JSON.stringify(
 
-  THEME_ATTRIBUTE_NAME
 
-)},t)}catch(e){}})()`;
 
 
 // 앱 기본 서체는 여기서 선언하지 않는다 — @fox 토큰이 패밀리명을 리터럴 `Pretendard`로 못
 
 // 박고 있어 `next/font`(패밀리명을 해시로 바꾼다)를 쓸 수 없고, globals.scss의 `@font-face`가
@@ -63,11 +43,15 @@
 
   return (
 
     <html
 
       lang="ko"
 
+      // 테마를 바꾸는 기획이 아직 없어 라이트로 못박는다. @fox 토큰은 `color-scheme`으로
 
+      // 갈리므로(`@fox/styles/_root.scss`) 이 속성 하나가 OS 다크 설정까지 덮는다.
 
+      // 전환이 기획되면 이 값을 저장된 선택으로 되돌리고 `_hooks/use-theme-preference`와
 
+      // `_components/theme-toggle-button`을 헤더에 다시 붙이면 된다(둘 다 그대로 남아 있다).
 
+      data-theme="light"
 
       suppressHydrationWarning
 
       className={geistMono.variable}
 
     >
 
       <head>
 
-        <script dangerouslySetInnerHTML={{ __html: THEME_BOOTSTRAP_SCRIPT }} />
 
         {/* @font-face는 CSS를 다 읽은 뒤에야 발견돼 본문이 한 번 폴백 서체로 그려진다.
 
             거의 모든 화면이 쓰는 regular만 미리 받아 그 깜빡임을 없앤다 — 나머지 굵기는
 
             빈도가 낮아 선점 비용이 이득보다 크다. */}
Add a comment
List