login page 완성

server/client/src/Components/Menu.js

@@ -3,28 +3,36 @@ 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() {
     const [state, setState] = useState()
-    
+
     if (state) return <Redirect to="/" />;
 
     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" />;
-  }
+    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">
-                    <Formik
-                        initialValues={{ id: '', password: '' }}
-                        validationSchema={Yup.object({
-                            id: Yup.string()
-                        .required('학번을 입력해주세요.'),
-                            password: Yup.string()
-                                .required('비밀번호를 입력해주세요.')
-                                .min(8, '8자 이상 입력해주세요.'),
-                        })}
-                        onSubmit={(values, { setSubmitting }) => {
-                            axios({
-                              method: 'post',
-                              url: '/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);
-                              setState(true);
-                            })
-                              .catch(err => {
+        <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({
+                        id: Yup.string()
+                            .required('학번을 입력해주세요.'),
+                        password: Yup.string()
+                            .required('비밀번호를 입력해주세요.')
+                            .min(8, '8자 이상 입력해주세요.'),
+                    })}
+                    onSubmit={(values, { setSubmitting }) => {
+                        axios({
+                            method: 'post',
+                            url: '/login',
+                            data: values,
+                        }).then(res => {
+                            if (res.status === 404) return alert(res.data.error)
+
+                            localStorage.setItem('token', res.data.token);
+                            localStorage.setItem('id', res.data.users._id);
+                            setState(true);
+                        })
+                            .catch(err => {
                                 alert(err.error)
-                              });
-
-                            setTimeout(() => {
-                                setSubmitting(false);
-                            }, 400);  // finish the cycle in handler
-                        }}
-                    >
-                        {({
-                            errors,
-                            touched,
-                            handleSubmit,
-                            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">
+                            });
+
+                        setTimeout(() => {
+                            setSubmitting(false);
+                        }, 400);  // finish the cycle in handler
+                    }}
+                >
+                    {({
+                        errors,
+                        touched,
+                        handleSubmit,
+                        getFieldProps,  // contain values, handleChange, handleBlur
+                        isSubmitting,
+                    }) => (
+                            <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>
+                                    <button type="submit" className={"btn btn-dark" + (mobile ? " w-100" : " w-20")} disabled={isSubmitting}> Login </button>
                                 </div>
-                            )}
-                    </Formik>
-
-                </Log>
-            </div>
-        </div>
+                                <div className="">
+                                    <Link to="/signup">비밀번호를 잊으셨나요? </Link> /
+                                            <Link to="/signup">  회원이 아니신가요?</Link>
+                                </div>
+                            </form>
+                        )}
+                </Formik>
+            </Asdf>
+        </div >
     )
 }