// /hooks/useTheme.ts
import { useState, useEffect, useMemo, useCallback } from "react";

type ThemeKey = 'light' | 'dark';

type ReturnType = {
  theme: ThemeKey;
  isDarkMode: boolean;
  setTheme: (theme: ThemeKey) => void;
  toggleTheme: () => void;
};

const useTheme = (): ReturnType => {
  const [theme, setTheme] = useState<ThemeKey>('light');
  const isDarkMode = useMemo(() => theme === 'dark', [theme]);

  const initTheme = useCallback(() => {
    const preferDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const initalTheme = (localStorage?.getItem('theme') || (preferDarkMode ? 'dark' : 'light')) as ThemeKey;
    setTheme(initalTheme);
	
  }, []);

  useEffect(() => {
    initTheme();
  }, []);

  useEffect(() => {

		// 새로고침하면 이곳에 
		// setTheme(initalTheme) 초기 설정된 theme이 넘어오질 못함.
    localStorage.setItem("theme", theme);
    document.body.dataset.theme = theme;
  }, [theme]);

  const toggleTheme = useCallback(() => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  }, []);

  return { theme, isDarkMode, setTheme, toggleTheme };
};

export default useTheme;

import { useState, useEffect, useMemo, useCallback } from "react";

type ThemeKey = 'light' | 'dark' | 'init';

type ReturnType = {
  theme: ThemeKey;
  isDarkMode: boolean;
  setTheme: (theme: ThemeKey) => void;
  toggleTheme: () => void;
};

const useTheme = (): ReturnType => {
  const [theme, setTheme] = useState<ThemeKey>('init');
  const isDarkMode = useMemo(() => theme === 'dark', [theme]);

  useEffect(() => {
    const preferDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const initalTheme = (localStorage?.getItem('theme') || (preferDarkMode ? 'dark' : 'light')) as ThemeKey;
    localStorage.setItem("theme", initalTheme);
    document.body.dataset.theme = initalTheme;
    console.log('init',initalTheme, '1');
    setTheme(initalTheme);
  }, []);

  useEffect(() => {
    if(theme === 'init') return 
    console.log(theme, '2');
    localStorage.setItem("theme", theme);
    document.body.dataset.theme = theme;
  }, [theme]);

  const toggleTheme = useCallback(() => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  }, []);

  return { theme, isDarkMode, setTheme, toggleTheme };
};

export default useTheme;