[40기 권오규] Add : LoginPage

Frontend/git-test/src/Router.js

@@ -1,12 +1,13 @@
-import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import App from './App';
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import App from "./App";
+import Login from "./pages/Login/Login";
 
 export default function Router() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<App />} />
+        <Route path="/" element={<Login />} />
       </Routes>
     </BrowserRouter>
   );

Frontend/git-test/src/pages/Login/Login.css

@@ -0,0 +1,49 @@
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loginContainer {
+  padding: 30px;
+  border: 1px solid gray;
+  border-radius: 15px;
+  text-align: center;
+}
+
+.title {
+  font-size: 40px;
+}
+
+.loginForm {
+  display: flex;
+  flex-direction: column;
+  margin: 40px 0;
+}
+
+.userId,
+.userPassword {
+  width: 280px;
+  margin-bottom: 15px;
+  padding: 15px 0 15px 15px;
+  border: 1px solid gray;
+  border-radius: 5px;
+  background-color: #fafafa;
+  outline: none;
+}
+
+.loginButton {
+  padding: 15px 0;
+  background-color: #0095f6;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  font-weight: 700;
+  outline: none;
+  cursor: default;
+}
+
+.loginButton:disabled {
+  background-color: lightgray;
+}

Frontend/git-test/src/pages/Login/Login.js

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import "./Login.css";
+
+export default function Login() {
+  const [userInfo, setUserInfo] = useState({ id: "", password: "" });
+  const navigate = useNavigate();
+
+  const getUserInfo = (e) => {
+    const { name, value } = e.target;
+    setUserInfo({ ...userInfo, [name]: value });
+  };
+
+  const isValid = userInfo.id.includes("@") && userInfo.password.length >= 5;
+
+  const goToMain = (e) => {
+    e.preventDefault();
+    navigate("/main");
+  };
+
+  return (
+    <div className="login">
+      <main className="loginContainer">
+        <h1 className="title">Git Test</h1>
+        <form className="loginForm" onSubmit={goToMain}>
+          <input
+            className="userId"
+            name="id"
+            type="text"
+            value={userInfo.id}
+            placeholder="이메일을 입력해 주세요."
+            onChange={getUserInfo}
+          />
+          <input
+            className="userPassword"
+            name="password"
+            type="password"
+            value={userInfo.password}
+            placeholder="비밀번호를 입력해 주세요."
+            onChange={getUserInfo}
+          />
+          <button className="loginButton" type="submit" disabled={!isValid}>
+            로그인
+          </button>
+        </form>
+      </main>
+    </div>
+  );
+}