임병윤 과제 제출

src/App.js

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

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 handleToggle = () => {
+    setDarkMode((prev) => !prev);
+  };
+
+  return (
+    <div className={DarkMode ? "dark-mode" : ""}>
+      <h1>{DarkMode ? "다크모드" : "화이트모드"}</h1>
+      <button onClick={handleToggle}>
+        {DarkMode ? "화이트모드로 변경" : "다크모드로 변경"}
+      </button>
+    </div>
+  );
 };
 
 export default Darkmode;

src/components/LoginForm/LoginForm.jsx

@@ -7,11 +7,39 @@ const LoginForm = ({ validUser }) => {
   const [message, setMessage] = useState("");
   const inputRef = useRef(null);
 
+  const handleChange = (e) => {
+    e.preventDefault();
+    if (userid === validUser.id && userpw === validUser.pw) {
+      setMessage("로그인 되었습니다!");
+    } else {
+      setMessage("아이디와 비밀번호를 다시 확인해주세요!");
+      inputRef.current.focus();
+    }
+  };
+
+  useEffect(() => {
+    if (message === "아이디와 비밀번호를 다시 확인해주세요!") {
+      setUserid("");
+      setUserpw("");
+    }
+  }, [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={handleChange}>로그인</button>
       {message && <p className="message">{message}</p>}
     </div>
   );