홍수진과제제출

src/App.js

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

src/components/Darkmode/Darkmode.jsx

@@ -1,7 +1,28 @@
 import { useState } from "react";
 import "./Darkmode.css";
+
+{/* <div className="darkmode"> */}
 const Darkmode = () => {
-  return <div></div>;
+  const [isDark,setDark] = useState(false);
+
+
+  const changeMod=()=>{
+    setDark(!isDark);
+  };
+
+  return(
+    <div className={isDark ? "dark-mode" : ""}>
+      <p>{isDark ? "다크모드" : "라이트모드"}</p>
+      <button onClick={changeMod}>
+        {isDark ? "라이트모드로 전환" : "다크모드로 전환"}
+      </button>
+    </div>
+  );
+
+
+
+
 };
 
+
 export default Darkmode;

src/components/LoginForm/LoginForm.jsx

@@ -1,20 +1,44 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
 import "./LoginForm.css";
 
 const LoginForm = ({ validUser }) => {
-  const [userid, setUserid] = useState("");
-  const [userpw, setUserpw] = useState("");
+  const [id, setId] = useState("");
+  const [pw, setPw] = useState("");
   const [message, setMessage] = useState("");
-  const inputRef = useRef(null);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (id === validUser.id && pw === validUser.pw) {
+      setMessage("로그인 되었습니다!");
+    } else {
+      setMessage("아이디와 비밀번호를 다시 확인해주세요!");
+    }
+  };
 
   return (
     <div>
-      <input />
-      <input />
-      <button className="button">로그인</button>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <input
+            type="text"
+            value={id}
+            placeholder="아이디 입력"
+            onChange={(e) => setId(e.target.value)}
+          />
+        </div>
+        <div>
+          <input
+            type="password"
+            value={pw}
+            placeholder="비밀번호 입력"
+            onChange={(e) => setPw(e.target.value)}
+          />
+        </div>
+        <button type="submit" className="button">로그인</button>
+      </form>
       {message && <p className="message">{message}</p>}
     </div>
   );
 };
 
-export default LoginForm;
+export default LoginForm;