You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
933 B
TypeScript
27 lines
933 B
TypeScript
// frontend/components/ThemeToggle.tsx
|
|
"use client";
|
|
import { useTheme } from "next-themes";
|
|
import { useEffect, useState } from "react";
|
|
import { Icon } from "./Icon";
|
|
|
|
export function ThemeToggle() {
|
|
const { resolvedTheme, setTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
// 하이드레이션 불일치 방지: 마운트 후에만 실제 테마 아이콘 결정 (next-themes 표준 패턴)
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
useEffect(() => setMounted(true), []);
|
|
|
|
const dark = mounted && resolvedTheme === "dark";
|
|
return (
|
|
<button
|
|
className="t-btn"
|
|
aria-label="테마 전환"
|
|
aria-pressed={dark}
|
|
onClick={() => setTheme(dark ? "light" : "dark")}
|
|
>
|
|
{/* 원본: light면 moon(다크로 가는 버튼), dark면 sun. mounted 전엔 moon 고정으로 SSR 안정화 */}
|
|
<Icon name={dark ? "sun" : "moon"} />
|
|
</button>
|
|
);
|
|
}
|