과제 제출합니다

src/App.js

@@ -6,7 +6,8 @@ import LoginPage from "./page/LoginPage";
 function App() {
   return (
     <div>
-      <LoginPage />
+      {/* <Darkmode/> */}
+      <LoginPage/>
     </div>
   );
 }

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;

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