login

client/src/App.js

@@ -13,6 +13,7 @@ function App() {
     <Router>
       <Switch>
         <Route exact path="/" component={HomePage} />
+        <Route path="/login" component={LoginPage} />
       </Switch>
     </Router>
   );

client/src/components/Login/Login.js

+import styles from "./login.module.scss";
+
+const Login = ()=>{
+    return(
+        <div className="login">
+            <div class="nav-tabs">
+            <span><a href="loginPage.html" class="login">로그인</a></span>
+            <span><a>|</a></span>
+            <span><a href="guestLoginPage.html" class="nomember">비회원 예매확인</a></span>
+            </div>
+            <input type="text" id="id" name="id" placeholder="ID"></input>
+            <input type="password" name="password" id="password" placeholder="Password" minlength="8" required></input>
+            <input class="loginBtn" type="submit" value="Login"></input>
+            <span><a href="registerPage" class="intoRegisterPage">회원이 아니십니까?</a></span>
+        </div>
+    )
+}
+
+export default Login
\ No newline at end of file

client/src/components/Login/login.module.scss

+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    width: 100%;
+    background: black;
+  }
+  
+//   .loginPage {
+//     padding: 20px;
+//   }
+  
+  .nav-tabs a {
+    padding: 0 10px;
+  }
+  
+  .nav-tabs {
+    display: flex;
+    justify-content: space-between;
+    border: none;
+    padding: 12px 0;
+  }
+  
+    .nav-tabs a {
+    text-decoration: none;
+    color: white;
+  }
+  
+//   .loginPage {
+//     margin: 0 auto;
+//     padding: 20px;
+//     width: 300px;
+//     display: flex;
+//     flex-direction: column;
+//     justify-content: center;
+//   }
+  
+  input {
+    margin: 5px 0;
+    padding: 5px 5px;
+  }
+  
+  .loginBtn {
+    background-color: yellow;
+    border: none;
+    font-size: 15px;
+    font-weight: bold;
+  }
+  
+  .intoRegisterPage {
+    color: white;
+  }
\ No newline at end of file

client/src/pages/LoginPage.js

+import Login from "../components/Login/Login";
+
+
 const LoginPage = () => {
     return (
         <div>
-            
+            <Login />
         </div>
     )
 }