테마 설정 local storage 설정하도록 수정

frontend/src/App.tsx

@@ -89,7 +89,7 @@ import {
   getOrderedSettingsIndicatorTypes,
   sortIndicatorsByTypeOrder,
 } from './utils/indicatorListOrder';
-import { useAppSettings } from './hooks/useAppSettings';
+import { getAppSettingsCache, useAppSettings } from './hooks/useAppSettings';
 import { clampVirtualTargetMax } from './utils/virtualTargetLimits';
 import { resolveTrendSearchAppSettings } from './utils/trendSearchAppSettings';
 import MarketPanel from './components/MarketPanel';
@@ -154,6 +154,11 @@ import SplashScreen from './components/SplashScreen';
 import { getAuthSession, setAuthSession, clearAuthSession, type AuthSession } from './utils/auth';
 import { isAppEntered, setAppEntered, clearAppEntered } from './utils/appEntry';
 import { syncDocumentTheme } from './utils/documentTheme';
+import {
+  loadLocalTheme,
+  migrateDbThemeToLocalIfNeeded,
+  saveLocalTheme,
+} from './utils/localThemeStorage';
 import { useMenuPermissions, invalidateMenuPermissionsCache } from './hooks/useMenuPermissions';
 import { firstAllowedTopMenu, normalizeRole, type SettingsCategoryId } from './utils/permissions';
 import { clearAdminUnlock } from './utils/adminUnlock';
@@ -227,7 +232,7 @@ function App() {
   const [symbol,      setSymbol]      = useState(initial.symbol);
   const [timeframe,   setTimeframe]   = useState<Timeframe>(initial.timeframe);
   const [chartType,   setChartType]   = useState<ChartType>(initial.chartType);
-  const [theme,       setTheme]       = useState<Theme>(initial.theme);
+  const [theme,       setTheme]       = useState<Theme>(loadLocalTheme);
   const [mode,        setMode]        = useState<ChartMode>('chart');
   const [logScale,    setLogScale]    = useState(false);
   const [indicators,  setIndicators]  = useState<IndicatorConfig[]>(initial.indicators ?? []);
@@ -1261,11 +1266,11 @@ function App() {
     syncOptions,
     slots: [{
       slotIndex: 0,
-      symbol, timeframe, chartType, theme, mode, logScale,
+      symbol, timeframe, chartType, mode, logScale,
       indicators, drawings, drawingsLocked, drawingsVisible,
       mainChartStyle,
     }],
-  }), [layoutDef.id, syncOptions, symbol, timeframe, chartType, theme,
+  }), [layoutDef.id, syncOptions, symbol, timeframe, chartType,
        mode, logScale, indicators, drawings, drawingsLocked, drawingsVisible, mainChartStyle]);
 
   const { isLoaded: _wsLoaded } = useWorkspacePersist({
@@ -1285,7 +1290,6 @@ function App() {
           if (slot0.symbol)          setSymbol(slot0.symbol as string);
           if (slot0.timeframe)       setTimeframe(slot0.timeframe as Timeframe);
           if (slot0.chartType)       setChartType(slot0.chartType as ChartType);
-          if (slot0.theme)           setTheme(slot0.theme as Theme);
           if (slot0.mode)            setMode(slot0.mode as ChartMode);
           if (slot0.logScale != null) setLogScale(Boolean(slot0.logScale));
           if (Array.isArray(slot0.indicators)) {
@@ -1677,14 +1681,20 @@ function App() {
     slotRefs.current.forEach(slot => slot?.setCrosshairMagnet(enabled));
   }, [magnetMode]);
 
-  // 테마 순환: dark → blue → light → dark, DB 에 저장
+  // 테마 순환: dark → blue → light → dark (기기별 localStorage)
   const handleThemeToggle = useCallback(() => {
     setTheme(t => {
       const next: Theme = t === 'dark' ? 'blue' : t === 'blue' ? 'light' : 'dark';
-      saveAppDef({ defaultTheme: next });
+      saveLocalTheme(next);
       return next;
     });
-  }, [saveAppDef]);
+  }, []);
+
+  // 최초 이 기기: DB defaultTheme → localStorage 1회만 (이후 기기별 독립)
+  useEffect(() => {
+    if (!appSettingsLoaded) return;
+    setTheme(migrateDbThemeToLocalIfNeeded(getAppSettingsCache().defaultTheme));
+  }, [appSettingsLoaded]);
 
   const handleTimeframe = useCallback((tf: Timeframe) => {
     if (layoutDef.count > 1) {