@taeopia/react-table/src/hooks/useTheme.ts

This is a table library for use in React.

import type { ChangeEvent } from "react";
import { useEffect, useState } from "react";

import type { ClassName, Theme } from "@/types";

/**
 * @Refactors
 *
 * @goals
 * 1. localStorage 접근 최소화: 초기화 시와 테마 변경 시에만 접근하도록 최적화.
 * 2. useEffect와 초기화 분리: useEffect의 역할을 테마 설정으로 제한하고 초기화 작업을 useState 내부에서 처리.
 * 3. 중복 코드 제거: setMode와 관련된 코드 최적화.
 * 4. 타입 안정성 강화: theme 값 검증 추가.
 */

interface UseThemeOptions {
  targetClass?: ClassName;
}

export function useTheme(themeKey: string = "taeopia-theme", options: UseThemeOptions) {
  const { targetClass } = options;

  const [theme, setTheme] = useState<Theme>(() => {
    const storedTheme = localStorage.getItem(themeKey) as Theme;
    return storedTheme === "dark" || storedTheme === "light" ? storedTheme : "light";
  });

  useEffect(() => {
    if (targetClass) {
      const $el = document.getElementsByClassName(targetClass);

      Array.from($el).forEach((element) => {
        element.setAttribute("data-theme", theme);
      });
    } else {
      document.documentElement.setAttribute("data-theme", theme);
    }

    localStorage.setItem(themeKey, theme);
  }, [theme, themeKey, targetClass]);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    setTheme(e.target.checked ? "dark" : "light");
  };

  return {
    theme,
    toggleTheme,
    onChange,
  } as const;
}