From 1797360c3778d640c105e58e2d1367da6532b457 Mon Sep 17 00:00:00 2001
From: yewonee <hyewon8685@naver.com>
Date: Mon, 26 May 2025 01:09:30 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B3=BC=EC=A0=9C=20=EC=A0=9C=EC=B6=9C?=
 =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                             |  3 +-
 src/components/Darkmode/Darkmode.jsx   | 15 +++++++++-
 src/components/LoginForm/LoginForm.jsx | 40 ++++++++++++++++++++++----
 3 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9571c20..cd8c27f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,8 @@ import LoginPage from "./page/LoginPage";
 function App() {
   return (
     <div>
-      <LoginPage />
+      {/* <Darkmode/> */}
+      <LoginPage/>
     </div>
   );
 }
diff --git a/src/components/Darkmode/Darkmode.jsx b/src/components/Darkmode/Darkmode.jsx
index cdb4e78..0aafdb9 100644
--- a/src/components/Darkmode/Darkmode.jsx
+++ b/src/components/Darkmode/Darkmode.jsx
@@ -1,7 +1,20 @@
 import { useState } from "react";
 import "./Darkmode.css";
+
 const Darkmode = () => {
-  return <div></div>;
+  const [darkMode, setDarkMode] = useState(false);
+
+  const changemode = () => {
+    setDarkMode((prevMode) => !prevMode); // 다크모드 on/off 토글
+  };
+
+  return (
+    <div className={darkMode ? "dark-mode" : "light-mode"}>
+      <button onClick={changemode}>
+        {darkMode ? "Light Mode" : "Dark Mode"}
+      </button>
+    </div>
+  );
 };
 
 export default Darkmode;
diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
index 6fa5a06..1f79e5c 100644
--- a/src/components/LoginForm/LoginForm.jsx
+++ b/src/components/LoginForm/LoginForm.jsx
@@ -7,12 +7,42 @@ const LoginForm = ({ validUser }) => {
   const [message, setMessage] = useState("");
   const inputRef = useRef(null);
 
+  const handleLogin = () => {
+    if (userid === validUser.id && userpw === validUser.pw) {
+      setMessage("로그인 되었습니다.");
+    } else {
+      setMessage("아이디 또는 비밀번호가 일치하지 않습니다.");
+      inputRef.current.focus();
+    }
+  };
+
+  useEffect(() => {
+    if (message) {
+      const timer = setTimeout(() => setMessage(""), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [message]);
+
   return (
-    <div>
-      <input />
-      <input />
-      <button className="button">로그인</button>
-      {message && <p className="message">{message}</p>}
+    <div className="login-wrapper">
+      <div className="login-box">
+        <input
+          placeholder="아이디를 입력하세요"
+          value={userid}
+          onChange={(e) => setUserid(e.target.value)}
+        />
+        <input
+          ref={inputRef}
+          placeholder="비밀번호를 입력하세요"
+          type="password"
+          value={userpw}
+          onChange={(e) => setUserpw(e.target.value)}
+        />
+        <button className="button" onClick={handleLogin}>
+          로그인
+        </button>
+        {message && <p className="message">{message}</p>}
+      </div>
     </div>
   );
 };