5.4 테마/다크모드 및 반응형 설정 o

src/app/components/ThemeToggle.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const [dark, setDark] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    setDark(mql.matches);
+  }, []);
+  useEffect(() => {
+    document.documentElement.style.setProperty("--background", dark ? "#0a0a0a" : "#ffffff");
+    document.documentElement.style.setProperty("--foreground", dark ? "#ededed" : "#171717");
+  }, [dark]);
+  return (
+    <button onClick={() => setDark((v) => !v)} style={{ marginLeft: 12 }}>
+      {dark ? "라이트" : "다크"}
+    </button>
+  );
+}
+
+