[채부경] react-hooks 과제

src/App.js

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

src/components/Darkmode/Darkmode.jsx

@@ -1,7 +1,19 @@
 import { useState } from "react";
 import "./Darkmode.css";
+
 const Darkmode = () => {
-  return <div></div>;
+  const [Dark, setDark] = useState(true);
+
+  const changeMode = () => {
+    setDark(!Dark)
+  }
+
+  return (
+    <div className={Dark ? "dark-mode": "light-mode"}>
+      <h1>{Dark ? "다크 모드" : "라이트 모드"}</h1>
+      <button onClick={changeMode}> {Dark ? "라이트 모드로 변경 ": "다크 모드로 변경" }</button> 
+    </div>
+  );
 };
 
 export default Darkmode;

src/components/LoginForm/LoginForm.jsx

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