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

src/app/components/AppHeader.tsx

@@ -1,3 +1,5 @@
+import { ThemeToggle } from "@/app/components/ThemeToggle";
+
 export function AppHeader() {
   return (
     <header style={{ display: "flex", justifyContent: "space-between", padding: 12 }}>
@@ -5,6 +7,7 @@ export function AppHeader() {
       <nav style={{ display: "flex", gap: 12 }}>
         <a href="/">홈</a>
         <a href="/boards">게시판</a>
+        <ThemeToggle />
       </nav>
     </header>
   );

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>
+  );
+}
+
+