과제 제출합니다

src/App.js

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

src/components/Darkmode/Darkmode.jsx

@@ -1,7 +1,20 @@
 import { useState } from "react";
 import "./Darkmode.css";
+
 const Darkmode = () => {
-  return <div></div>;
+  const [isDark, setIsDark] = useState(false);
+  const toggleMode = () => {
+    setIsDark(prevMode => !prevMode);
+  };
+
+  return (
+    <div className={isDark ? "dark-mode" : "no"}>
+      <h1>{isDark ? "다크 모드" : "라이트 모드"}</h1>
+      <button onClick={toggleMode}>
+        {isDark ? "라이트 모드로 변경" : "다크 모드로 변경"}
+      </button>
+    </div>
+  );
 };
 
 export default Darkmode;

src/components/LoginForm/LoginForm.jsx

@@ -7,11 +7,40 @@ const LoginForm = ({ validUser }) => {
   const [message, setMessage] = useState("");
   const inputRef = useRef(null);
 
+  const handleLogin = () => {
+    if (userid === validUser.id && userpw === validUser.pw) {
+      setMessage("로그인 되었습니다!");
+    } else {
+      setMessage("아이디와 비밀번호를 다시 확인해주세요!");
+      setUserid("");
+      setUserpw("");
+      inputRef.current.focus();}
+  };
+  useEffect(() => {
+    if (message) {
+      const timer = setTimeout(() => setMessage(""), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [message]);
+
   return (
     <div>
-      <input />
-      <input />
-      <button className="button">로그인</button>
+      <input
+        ref={inputRef}
+        type="text"
+        placeholder="아이디 입력"
+        value={userid}
+        onChange={(e) => setUserid(e.target.value)}
+      />
+      <input
+        type="password"
+        placeholder="비밀번호 입력"
+        value={userpw}
+        onChange={(e) => setUserpw(e.target.value)}
+      />
+      <button className="button" onClick={handleLogin}>
+        로그인
+      </button>
       {message && <p className="message">{message}</p>}
     </div>
   );