|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { useEffect, useState } from 'react'; |
| 4 | +import { useAtom } from 'jotai'; |
| 5 | +import { darkModeAtom } from '@/atoms/authAtoms'; |
| 6 | +import { initializeUserSettings } from '@/lib/indexedDB'; |
| 7 | + |
| 8 | +interface DarkModeInitializerProps { |
| 9 | + initialUser?: User | null; |
| 10 | +} |
| 11 | + |
| 12 | +export default function DarkModeInitializer({ initialUser }: DarkModeInitializerProps) { |
| 13 | + const [isDarkMode, setIsDarkMode] = useAtom(darkModeAtom); |
| 14 | + const [isInitialized, setIsInitialized] = useState(false); |
| 15 | + |
| 16 | + // 사용자 프로필에서 다크모드 설정 로드 |
| 17 | + useEffect(() => { |
| 18 | + const loadDarkModeSettingFromDB = async () => { |
| 19 | + console.log('DarkModeInitializer: Loading dark mode setting for user:', initialUser); |
| 20 | + |
| 21 | + if (initialUser?.userId) { |
| 22 | + try { |
| 23 | + // 설정 초기화 (기존 설정이 있으면 로드, 없으면 기본값으로 초기화) |
| 24 | + const settings = await initializeUserSettings(initialUser.userId); |
| 25 | + console.log('DarkModeInitializer: Initialized settings:', settings); |
| 26 | + |
| 27 | + const isDarkMode = settings.theme === 'dark'; |
| 28 | + console.log('DarkModeInitializer: Setting dark mode to:', isDarkMode); |
| 29 | + setIsDarkMode(isDarkMode); |
| 30 | + } catch (error) { |
| 31 | + console.error('DarkModeInitializer: Failed to initialize settings:', error); |
| 32 | + setIsDarkMode(false); |
| 33 | + } |
| 34 | + } else { |
| 35 | + console.log('DarkModeInitializer: No user ID, using default false'); |
| 36 | + setIsDarkMode(false); |
| 37 | + } |
| 38 | + setIsInitialized(true); |
| 39 | + }; |
| 40 | + |
| 41 | + loadDarkModeSettingFromDB(); |
| 42 | + }, [initialUser, setIsDarkMode]); |
| 43 | + |
| 44 | + // 다크모드 상태에 따라 HTML 클래스 적용 |
| 45 | + useEffect(() => { |
| 46 | + if (isInitialized) { |
| 47 | + console.log('DarkModeInitializer: Applying dark mode to HTML:', isDarkMode); |
| 48 | + if (isDarkMode) { |
| 49 | + document.documentElement.classList.add('dark'); |
| 50 | + } else { |
| 51 | + document.documentElement.classList.remove('dark'); |
| 52 | + } |
| 53 | + } |
| 54 | + }, [isDarkMode, isInitialized]); |
| 55 | + |
| 56 | + return null; // 렌더링하지 않음 |
| 57 | +} |
0 commit comments