login page 완성

server/client/src/Components/Menu.js

@@ -3,7 +3,12 @@ import { Link, Redirect } from 'react-router-dom';
 import styled from 'styled-components';
 
 const Nav = styled.nav`
-    background-color: #981e1e;
+    background-color: #7B031D;
+    max-height : 50px;
+
+    a {
+        color: #ffffff;
+    }
 `
 
 function Menu() {
@@ -13,18 +18,21 @@ function Menu() {
 
     function logout() {
         localStorage.removeItem('token');
-        alert("로그아웃 되었습니다.");
+        alert("로그인 화면으로 이동합니다.");
         setState(true);
     }
 
     return (
         <Nav className="navbar sticky-top navbar-expand-md">
-            <Link to="/home" className="navbar-brand">대관 서비스</Link>
+            <a class="navbar-brand" href="#">대관 서비스</a>
             <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar">
                 <span className="navbar-toggler-icon"></span>
             </button>
             <div className="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
                 <ul className="navbar-nav">
+                    <li className="nav-item">
+                        <Link to="/notice" className="nav-link">공지사항</Link>
+                    </li>
                     <li className="nav-item">
                         <Link to="/home" className="nav-link">대관 현황</Link>
                     </li>
@@ -34,13 +42,10 @@ function Menu() {
                     <li className="nav-item">
                         <Link to="/check" className="nav-link">대관 확인/취소</Link>
                     </li>
-                    <li className="nav-item">
-                        <Link to="/notice" className="nav-link">공지사항</Link>
-                    </li>
                 </ul>
                 <div>
+                    <div></div>
                     <button onClick={logout} type="button">로그아웃</button>
-                    <button><Link to="/signup">회원가입</Link></button>
                 </div>
             </div>
         </Nav>

server/client/src/Pages/LoginPage.js

-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { Link, Redirect } from 'react-router-dom';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
 import axios from 'axios';
 import 'bootstrap/dist/css/bootstrap.css';
+import Logo from '../icon.png';
 
-const Log = styled.div`
-    background-color: #981e1e;
-`
-const Logo = styled.div`
-    background-color: #E76A6A;
+const Asd = styled.div`
+    background-color: #7B031D;
+
+    &.web {
+        display : flex;
+        align-items: center;
+    }
+
+    &.mobile {
+        height : 20vh;
+        display : flex;
+
+    }
+    
+    & .mob-head {
+        display: flex;
+        flex-direction: row;
+        height : 100%;
+        width: 100%;
+        justify-content: center;
+        align-content: center;
+    }
+
+    & .mob-img {
+        max-width:100%;
+        max-height:100%;
+        }
 `
 
+const Asdf = styled.div`
+    background-color: rgb(239, 218, 200);
+    a {
+        color : #7B031D;
+    }
+
+    &.mob-formik {
+        height : 80vh;
+        width: 100%;
+        padding: 0;
+        display: flex; 
+        justify-content: center;
+        align-items: center; 
+    }
+
+    &.web-formik {
+        height: 100%;
+        display: flex; 
+        align-items: center; 
+        justify-content: center;
+    }
+
+    & .mobb {
+        height: 30vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+
+    & .qwer {
+        display: flex;
+        justify-content: space-between;
+        height: 12vh;
+        width: 30vw;
+        margin-bottom: 25px;
+    }
+
+    & .web-input-form {
+        width: 80%;
+        justify-content: space-between;
+        align-content: space-around;
+        display: flex;
+        flex-direction: column;
+    }
+
+    & .mob-input-form {
+      
+    }
+`
 
 function Login() {
-    const [state, setState]= useState(false);
+    const [state, setState] = useState(false);
+    const [mobile, setMobile] = useState(false);
+
+    useEffect(() => {
+        if (window.innerWidth < 960) {
+            setMobile(true)
+        } else {
+            setMobile(false)
+        }
+    }, []);
 
     if (state) {
         return <Redirect to="/home" />;
     }
     return (
-        <div className="container-fluid">
-            <div className="row">
-                <Logo className="col-md-5 col-12">
-                    <h2>고려대학교</h2>
-                    <h4>대관 시스템</h4>
-                </Logo>
-                <Log className="col-md-7 col-12">
+        <div className="row vw-100 vh-100">
+            <Asd className={"col-md-4 px-0" + (mobile ? " mobile" : " web")}>
+                <div className={mobile ? " mob-head" : ""}>
+                    <img className={mobile ? " mob-img" : "img-fluid"} src={Logo} />
+                    <div className="d-flex justify-content-center">
+                        <h1 className="font-weight-bold text-white align-self-center">고려대학교<br />대관 서비스</h1>
+                    </div>
+                </div>
+            </Asd>
+            <Asdf className={"col-md-8 col-12" + (mobile ? " mob-formik" : " web-formik")}>
                 <Formik
                     initialValues={{ id: '', password: '' }}
                     validationSchema={Yup.object({
@@ -44,7 +128,6 @@ function Login() {
                             data: values,
                         }).then(res => {
                             if (res.status === 404) return alert(res.data.error)
-                            alert("로그인이 완료되었습니다!")
 
                             localStorage.setItem('token', res.data.token);
                             localStorage.setItem('id', res.data.users._id);
@@ -66,9 +149,10 @@ function Login() {
                         getFieldProps,  // contain values, handleChange, handleBlur
                         isSubmitting,
                     }) => (
-                                <div className="row justify-content-center align-items-center">
-                                    <form onSubmit={handleSubmit} className="col-sm-3">
-                                        <div className="form-group mb-4">
+                            <form onSubmit={handleSubmit} className={mobile ? "w-90 h-50vh" : ""}>
+                                <div className={mobile ? "mobb" : "qwer"}>
+                                    <div className={(mobile ? "mob-" : "web-") + "input-form"}>
+                                        <div className={"form-group m-0" + (mobile ? " mb-3" : "")}>
                                             <input
                                                 className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")}
                                                 type="number"
@@ -76,11 +160,8 @@ function Login() {
                                                 {...getFieldProps('id')}
                                                 placeholder="Input Student Id"
                                             />
-                                            {touched.id && errors.id ? (
-                                                <div className="invalid-feedback text-left">{errors.id}</div>
-                                            ) : null}
                                         </div>
-                                        <div className="form-group mb-4">
+                                        <div className="form-group m-0">
                                             <input
                                                 className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")}
                                                 type="password"
@@ -88,26 +169,19 @@ function Login() {
                                                 {...getFieldProps('password')}
                                                 placeholder="Input Password"
                                             />
-                                            {touched.password && errors.password ? (
-                                                <div className="invalid-feedback text-left">{errors.password}</div>
-                                            ) : null}
                                         </div>
-                                        <button type="submit" className="btn btn-dark" disabled={isSubmitting}>
-                                            Login
-                                        </button>
-                                        <button><Link to="/home">홈</Link></button>
-                                        <div></div>
-                                        <Link to="/signup">비밀번호를 잊으셨나요?</Link>
-                                        <div></div>
-                                        <Link to="/signup">회원이 아니신가요?</Link>
-                                    </form>
                                     </div>
-                            )}
-                    </Formik>
-
-                </Log>
+                                    <button type="submit" className={"btn btn-dark" + (mobile ? " w-100" : " w-20")} disabled={isSubmitting}> Login </button>
                                 </div>
+                                <div className="">
+                                    <Link to="/signup">비밀번호를 잊으셨나요? </Link> /
+                                            <Link to="/signup">  회원이 아니신가요?</Link>
                                 </div>
+                            </form>
+                        )}
+                </Formik>
+            </Asdf>
+        </div >
     )
 }