세션 종료 UX 정리

apps/web/src/pages/settings/useTheme.ts

@@ -1,44 +1,23 @@
 /* =====================================================================
    useTheme — 라이트/다크 토글 상태.
-   Topbar 의 토글과 동일한 저장소 키(vignette.theme)와 동일한
-   data-theme 속성(documentElement)을 공유한다 → 두 토글이 충돌 없이 동기화.
-   tokens.css 의 [data-theme="dark"] 블록만으로 전환된다.
+   Topbar 와 동일한 lib/theme 단일 경로를 사용한다.
    ===================================================================== */
 import { useCallback, useEffect, useState } from "react";
-
-const THEME_KEY = "vignette.theme";
-
-function readInitial(): boolean {
-  try {
-    const saved = localStorage.getItem(THEME_KEY);
-    if (saved) return saved === "dark";
-  } catch {
-    /* 무시 */
-  }
-  // 기본 라이트 고정. OS 다크선호는 따라가지 않는다(다크는 명시 토글로만).
-  return false;
-}
+import { applyTheme, readInitialTheme } from "../../lib/theme";
 
 /** [dark, setDark] — Topbar 토글과 같은 키/속성을 사용. */
 export function useTheme(): [boolean, (next: boolean) => void] {
   const [dark, setDark] = useState<boolean>(() => {
-    // documentElement 가 이미 dark 면 그것을 우선(다른 토글이 방금 바꿨을 수 있음)
     if (typeof document !== "undefined") {
       const attr = document.documentElement.getAttribute("data-theme");
       if (attr === "dark") return true;
+      if (attr === "light") return false;
     }
-    return readInitial();
+    return readInitialTheme() === "dark";
   });
 
   useEffect(() => {
-    const root = document.documentElement;
-    if (dark) root.setAttribute("data-theme", "dark");
-    else root.removeAttribute("data-theme");
-    try {
-      localStorage.setItem(THEME_KEY, dark ? "dark" : "light");
-    } catch {
-      /* 무시 */
-    }
+    applyTheme(dark ? "dark" : "light");
   }, [dark]);
 
   // 다른 곳(Topbar)에서 속성을 바꾸면 따라잡기 위해 마운트 시 1회 동기화