From 75a07453427e2ec929c2883e6b139192864fa4f6 Mon Sep 17 00:00:00 2001
From: koreacomp5 <comp5@pluxity.com>
Date: Thu, 9 Oct 2025 15:36:13 +0900
Subject: [PATCH] =?UTF-8?q?5.4=20=ED=85=8C=EB=A7=88/=EB=8B=A4=ED=81=AC?=
 =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EB=B0=8F=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/AppHeader.tsx   |  3 +++
 src/app/components/ThemeToggle.tsx | 21 +++++++++++++++++++++
 todolist.txt                       |  2 +-
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/ThemeToggle.tsx

diff --git a/src/app/components/AppHeader.tsx b/src/app/components/AppHeader.tsx
index 818dfb3..e81e371 100644
--- a/src/app/components/AppHeader.tsx
+++ b/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>
   );
diff --git a/src/app/components/ThemeToggle.tsx b/src/app/components/ThemeToggle.tsx
new file mode 100644
index 0000000..8233a2d
--- /dev/null
+++ b/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>
+  );
+}
+
+
diff --git a/todolist.txt b/todolist.txt
index ad0c713..3d7c76c 100644
--- a/todolist.txt
+++ b/todolist.txt
@@ -30,7 +30,7 @@
 5.1 앱 레이아웃/헤더/푸터/사이드바 구성 o
 5.2 공통 컴포넌트(버튼/입력/모달/토스트) 제작 o
 5.3 글로벌 로딩/스켈레톤/에러 경계 패턴 정립 o
-5.4 테마/다크모드 및 반응형 설정
+5.4 테마/다크모드 및 반응형 설정 o
 
 [메인 화면]
 6.1 Hero/공지 배너 컴포넌트(자동/수동 슬라이드)