과제 완료

src/App.js

@@ -1,13 +1,12 @@
-import logo from "./logo.svg";
-import "./App.css";
-import Darkmode from "./components/Darkmode/Darkmode";
+import React from "react";
 import LoginPage from "./page/LoginPage";
+import Darkmode from "./components/Darkmode/Darkmode";
 
 function App() {
   return (
-    <div>
+    <Darkmode>
       <LoginPage />
-    </div>
+    </Darkmode>
   );
 }
 

src/components/Darkmode/Darkmode.jsx

@@ -1,7 +1,30 @@
-import { useState } from "react";
-import "./Darkmode.css";
-const Darkmode = () => {
-  return <div></div>;
+import React, { useState } from "react";
+
+const Darkmode = ({ children }) => {
+  const [isDark, setIsDark] = useState(false);
+
+  const toggleMode = () => {
+    setIsDark(!isDark);
+  };
+
+  const modeStyle = {
+    backgroundColor: isDark ? "#333" : "#fff",
+    color: isDark ? "#fff" : "#000",
+    minHeight: "100vh",
+    padding: "2rem",
+    transition: "0.3s",
+  };
+
+  return (
+    <div style={modeStyle}>
+      <h1>{isDark ? "다크 모드" : "라이트 모드"}</h1>
+      <button onClick={toggleMode}>
+        {isDark ? "라이트 모드로 변경" : "다크 모드로 변경"}
+      </button>
+      <hr style={{ margin: "1rem 0" }} />
+      {children}
+    </div>
+  );
 };
 
 export default Darkmode;

src/components/LoginForm/LoginForm.jsx

@@ -1,20 +1,41 @@
-import React, { useEffect, useRef, useState } from "react";
-import "./LoginForm.css";
+import React, { useState } from "react";
 
-const LoginForm = ({ validUser }) => {
-  const [userid, setUserid] = useState("");
-  const [userpw, setUserpw] = useState("");
+const LoginPage = () => {
+  const user = {
+    id: "likeLion",
+    pw: "1234",
+  };
+
+  const [inputId, setInputId] = useState("");
+  const [inputPw, setInputPw] = useState("");
   const [message, setMessage] = useState("");
-  const inputRef = useRef(null);
+
+  const handleLogin = () => {
+    if (inputId === user.id && inputPw === user.pw) {
+      setMessage("로그인 성공!");
+    } else {
+      setMessage("아이디 또는 비밀번호가 틀렸어요.");
+    }
+  };
 
   return (
     <div>
-      <input />
-      <input />
-      <button className="button">로그인</button>
-      {message && <p className="message">{message}</p>}
+      <h2>로그인</h2>
+      <input
+        placeholder="아이디 입력"
+        value={inputId}
+        onChange={(e) => setInputId(e.target.value)}
+      />
+      <input
+        placeholder="비밀번호 입력"
+        type="password"
+        value={inputPw}
+        onChange={(e) => setInputPw(e.target.value)}
+      />
+      <button onClick={handleLogin}>로그인</button>
+      <p>{message}</p>
     </div>
   );
 };
 
-export default LoginForm;
+export default LoginPage;