From fa09daf885d7e5cfb379dcd9bb7b3b1b7d92dd1b Mon Sep 17 00:00:00 2001
From: Oh9yu <kog6148@gmail.com>
Date: Thu, 22 Dec 2022 15:27:09 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Add=20:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EA=B5=AC=ED=98=84=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Frontend/git-rebase-test/src/Router.js        |  4 +-
 .../git-rebase-test/src/pages/Login/Login.css | 49 +++++++++++++++++++
 .../git-rebase-test/src/pages/Login/Login.js  | 30 +++++++++---
 3 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/Frontend/git-rebase-test/src/Router.js b/Frontend/git-rebase-test/src/Router.js
index 72c1945..49b8b5e 100644
--- a/Frontend/git-rebase-test/src/Router.js
+++ b/Frontend/git-rebase-test/src/Router.js
@@ -7,8 +7,8 @@ export default function Router() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path='/' element={<Main />} />
-        <Route path='/login' element={<Login />} />
+        <Route path="/" element={<Main />} />
+        <Route path="/signin" element={<Login />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/Frontend/git-rebase-test/src/pages/Login/Login.css b/Frontend/git-rebase-test/src/pages/Login/Login.css
index e69de29..de5d7c4 100644
--- a/Frontend/git-rebase-test/src/pages/Login/Login.css
+++ b/Frontend/git-rebase-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;
+}
diff --git a/Frontend/git-rebase-test/src/pages/Login/Login.js b/Frontend/git-rebase-test/src/pages/Login/Login.js
index a214888..133d7d8 100644
--- a/Frontend/git-rebase-test/src/pages/Login/Login.js
+++ b/Frontend/git-rebase-test/src/pages/Login/Login.js
@@ -1,9 +1,27 @@
-import React from 'react'
+import React, { useState } from "react";
+import "./Login.css";
 
-function Login() {
+export default function Login() {
   return (
-    <div>Login</div>
-  )
+    <div className="login">
+      <main className="loginContainer">
+        <h1 className="title">Git Rebase Test</h1>
+        <form className="loginForm">
+          <input
+            className="userId"
+            type="text"
+            placeholder="이메일을 입력해 주세요."
+          />
+          <input
+            className="userPassword"
+            type="password"
+            placeholder="비밀번호를 입력해 주세요."
+          />
+          <button className="loginButton" type="button">
+            로그인
+          </button>
+        </form>
+      </main>
+    </div>
+  );
 }
-
-export default Login
\ No newline at end of file

From 074bf997cc49edf1c2e50ff152cd8bd43c15f189 Mon Sep 17 00:00:00 2001
From: Oh9yu <kog6148@gmail.com>
Date: Thu, 22 Dec 2022 15:27:36 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Add=20:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../git-rebase-test/src/pages/Login/Login.js  | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/Frontend/git-rebase-test/src/pages/Login/Login.js b/Frontend/git-rebase-test/src/pages/Login/Login.js
index 133d7d8..f710022 100644
--- a/Frontend/git-rebase-test/src/pages/Login/Login.js
+++ b/Frontend/git-rebase-test/src/pages/Login/Login.js
@@ -1,23 +1,45 @@
 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 Rebase Test</h1>
-        <form className="loginForm">
+        <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="button">
+          <button className="loginButton" type="button" disabled={!isValid}>
             로그인
           </button>
         </form>