diff --git a/package-lock.json b/package-lock.json
index 8a39a42..9e1ecd2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,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"
       }
     },
@@ -12870,6 +12870,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
       "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
diff --git a/package.json b/package.json
index f9f04fe..3142568 100644
--- a/package.json
+++ b/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": {
diff --git a/src/App.js b/src/App.js
index 9571c20..d0d2a34 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,7 @@ import LoginPage from "./page/LoginPage";
 function App() {
   return (
     <div>
-      <LoginPage />
+      <LoginPage/>
     </div>
   );
 }
diff --git a/src/components/Darkmode/Darkmode.jsx b/src/components/Darkmode/Darkmode.jsx
index cdb4e78..19c53bd 100644
--- a/src/components/Darkmode/Darkmode.jsx
+++ b/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;
diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
index 6fa5a06..eb319e0 100644
--- a/src/components/LoginForm/LoginForm.jsx
+++ b/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>
   );