12차시 react 3 과제

package.json

@@ -9,7 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

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

src/components/Darkmode/Darkmode.jsx

@@ -1,7 +1,21 @@
-import { useState } from "react";
-import "./Darkmode.css";
-const Darkmode = () => {
-  return <div></div>;
+import React, { useState } from "react";
+import "./Darkmode.css"; 
+
+const DarkMode = () => {
+  const [itDark, setItDark] = useState(false); // 기본이 Dark니까 false=light모드
+
+  const changeMode = () => {
+    setItDark(!itDark); //!는 반대로 하라는 뜻, chagemode가 되면 바뀌게 됨됨
+  };
+
+  return (
+    <div className={itDark ? "dark-mode" : ""}> 
+      <h1>{itDark ? "다크 모드" : "라이트 모드"}</h1>
+      <button onClick={changeMode}>
+        {itDark ? "라이트 모드로 변경" : "다크 모드로 변경"}
+      </button>
+    </div>
+  ); //조건 ? (참일 때 실행하는 거) : (거짓일 때 실행하는 거) 라고 줄여서 표현현
 };
 
-export default Darkmode;
+export default DarkMode;

src/components/LoginForm/LoginForm.jsx

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