테마 적용

src/app/login/page.tsx

@@ -3,6 +3,7 @@
 import { FormEvent, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { SunMoon } from "lucide-react";
 
 // 로그인 페이지 컴포넌트
 // - 이메일/비밀번호를 입력받아 /api/auth/login 으로 요청을 전송한다.
@@ -16,6 +17,19 @@ export default function LoginPage() {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
+  const handleToggleTheme = () => {
+    if (typeof document === "undefined") {
+      return;
+    }
+
+    const root = document.documentElement;
+    if (!root) {
+      return;
+    }
+
+    root.classList.toggle("dark");
+  };
+
   useEffect(() => {
     let cancelled = false;
 
@@ -71,16 +85,26 @@ export default function LoginPage() {
   };
 
   return (
-    <main className="min-h-screen flex items-center justify-center bg-slate-950 text-slate-50">
-      <div className="w-full max-w-sm rounded-lg border border-slate-800 bg-slate-900/70 p-6 shadow-xl">
-        <h1 className="text-lg font-semibold mb-1">로그인</h1>
-        <p className="text-xs text-slate-400 mb-4">프로젝트를 관리하려면 먼저 계정으로 로그인하세요.</p>
+    <main className="min-h-screen flex items-center justify-center bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
+      <div className="w-full max-w-sm rounded-lg border border-slate-200 bg-white p-6 shadow-xl dark:border-slate-800 dark:bg-slate-900/70">
+        <div className="flex items-center justify-between mb-1">
+          <h1 className="text-lg font-semibold">로그인</h1>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-2 py-1 text-[11px] font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+            onClick={handleToggleTheme}
+          >
+            <SunMoon className="w-4 h-4" aria-hidden="true" />
+            <span>테마 전환</span>
+          </button>
+        </div>
+        <p className="text-xs text-slate-500 mb-4 dark:text-slate-400">프로젝트를 관리하려면 먼저 계정으로 로그인하세요.</p>
 
         {error && <p className="mb-3 text-xs text-red-300">{error}</p>}
 
         <form onSubmit={handleSubmit} className="space-y-3 text-xs">
           <div className="space-y-1">
-            <label htmlFor="email" className="block text-slate-200">
+            <label htmlFor="email" className="block text-slate-800 dark:text-slate-200">
               이메일
             </label>
             <input
@@ -88,13 +112,13 @@ export default function LoginPage() {
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-              className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-50 focus:outline-none focus:ring-1 focus:ring-sky-500"
+              className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
               required
             />
           </div>
 
           <div className="space-y-1">
-            <label htmlFor="password" className="block text-slate-200">
+            <label htmlFor="password" className="block text-slate-800 dark:text-slate-200">
               비밀번호
             </label>
             <input
@@ -102,7 +126,7 @@ export default function LoginPage() {
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-50 focus:outline-none focus:ring-1 focus:ring-sky-500"
+              className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
               required
               minLength={8}
             />
@@ -117,7 +141,7 @@ export default function LoginPage() {
           </button>
         </form>
 
-        <p className="mt-4 text-[11px] text-slate-400">
+        <p className="mt-4 text-[11px] text-slate-500 dark:text-slate-400">
           아직 계정이 없다면
           {" "}
           <Link href="/signup" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">