[Add] Check ID/PW

-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 
 
 import { dataForage } from "../utils/LocalForage";
 import { dataForage } from "../utils/LocalForage";
+import "../styles/Login.css";
+import axios from "axios";
 
 
 const Login = () => {
 const Login = () => {
   console.log("visit Login");
   console.log("visit Login");
+  const [state, setState] = useState({
+    id: "",
+    pw: "",
+  });
+
+  const handleChangeState = (e) => {
+    setState({
+      ...state,
+      [e.target.name]: e.target.value,
+    });
+  };
 
 
   const navigate = useNavigate();
   const navigate = useNavigate();
   const login = async () => {
   const login = async () => {
-    if (true) {
-      //login success
-      await dataForage.setItem("session", true);
+    const res = await axios.post("http://localhost:3001/login/", {
+      id: state.id,
+      pw: state.pw,
+    });
 
 
+    if (res.data === "login failed") alert("ID/PW를 확인해주세요");
+    else {
+      await dataForage.setItem("session", true);
       navigate("/");
       navigate("/");
     }
     }
   };
   };
 
 
   useEffect(() => {
   useEffect(() => {
-    async function render() {
+    async function ifAlreadyLogined() {
       if (await dataForage.getItem("session")) navigate("/");
       if (await dataForage.getItem("session")) navigate("/");
     }
     }
-    render();
+    ifAlreadyLogined();
   }, [navigate]);
   }, [navigate]);
 
 
   return (
   return (
     <div className="Login">
     <div className="Login">
-      <button onClick={login}>로그인</button>
+      <div className="idpw">
+        <input
+          className="id"
+          name="id"
+          value={state.id}
+          onChange={handleChangeState}
+          onFocus={(e) => e.target.select()}
+          placeholder="E-Campus ID"
+        />
+        <input
+          className="pw"
+          name="pw"
+          value={state.pw}
+          onChange={handleChangeState}
+          onFocus={(e) => e.target.select()}
+          placeholder="E-Campus Password"
+          type="password"
+        />
+      </div>
+      <button onClick={login}>Login</button>
     </div>
     </div>
   );
   );
 };
 };

+.Login {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 3px;
+  display: flex;
+}
+
+.Login > button {
+  padding: 0 30px 0 30px;
+  font-size: x-large;
+}
+
+.idpw {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  margin-right: 3px;
+}
+
+.idpw > input {
+  height: 30px;
+  padding: 5px 10px 5px 10px;
+}