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

todolist.txt

@@ -30,7 +30,7 @@
 5.1 앱 레이아웃/헤더/푸터/사이드바 구성 o
 5.2 공통 컴포넌트(버튼/입력/모달/토스트) 제작 o
 5.3 글로벌 로딩/스켈레톤/에러 경계 패턴 정립 o
-5.4 테마/다크모드 및 반응형 설정
+5.4 테마/다크모드 및 반응형 설정 o
 
 [메인 화면]
 6.1 Hero/공지 배너 컴포넌트(자동/수동 슬라이드)