React Login Page 정리

Login.jsx

import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { api } from 'config';
import './Login.scss';

const Login = () => {
  const [userInfo, setUserInfo] = useState({
    id: '',
    pw: '',
  });
  const navigate = useNavigate();

  const handleInput = event => {
    const { name, value } = event.target;
    setUserInfo({ ...userInfo, [name]: value });
  };

  const handleLogin = () => {
    const { id: username, pw: password } = userInfo;

    fetch(api.login, {
      method: 'POST',
      body: JSON.stringify({
        username,
        password,
      }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.message === 'INVALID_USER') {
          alert('아이디 또는 비밀번호를 확인해주세요.');
        } else if (result.message === 'LOGIN SUCCESS') {
          localStorage.setItem('token', result.token);
          alert('환영합니다!');
          navigate('/');
        }
      });
  };

  return (
    <section className="loginMainContainer">
      <div className="wrapper">
        <div className="logo">
          <h1>Login</h1>
          <h2>로그인</h2>
          <div className="loginBox">
            <div className="login">
              <span className="loginSpan">회원 조회</span>
              <div className="userInfo">
                <form>
                  <label>
                    <input
                      type="text"
                      name="id"
                      placeholder="아이디"
                      onChange={handleInput}
                      value={userInfo.id}
                    />
                    <input
                      type="password"
                      name="pw"
                      placeholder="비밀번호"
                      onChange={handleInput}
                      value={userInfo.pw}
                    />
                  </label>
                </form>
                <button
                  className="loginBtn"
                  type="button"
                  onClick={handleLogin}
                >
                  로그인
                </button>
                <div className="signUpPageInfo">
                  <p>
                    아직 회원이 아니신가요?
                    <span className="signUpSpan">
                      테라로사에 가입하시면 더 많은 혜택을 누리실 수 있습니다.
                    </span>
                  </p>
                  <Link to="/signup">
                    <button className="signUpBtn" type="button" id="signUp">
                      신규회원가입
                    </button>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Login;

Login.scss

@import 'styles';

.loginMainContainer {
  @include flexbox(center, center);
  width: 100vw;
  height: 100vh;

  .wrapper {
    width: 100%;
    height: 100%;
    padding-top: 100px;

    .logo {
      text-align: center;
      width: 100%;
      height: 50px;

      h1 {
        width: 100%;
        height: 100%;
        font-size: 38px;
        font-weight: 300;
        font-family: 'Open Sans Condensed', sans-serif;
      }

      h2 {
        margin-bottom: 50px;
        width: 100%;
        height: 100%;
        font-size: 16px;
        font-weight: 400;
        font-family: 'Noto Sans KR', 'Malgun Gothic', Verdana, Dotum,
          AppleGothic, sans-serif;
      }

      .loginBox {
        @include flexbox(center, center);

        .login {
          padding: 25px;
          border-top: 3px solid black;
          border-left: 1px solid #808080;
          border-right: 1px solid #808080;
          border-bottom: 1px solid #808080;
          width: 30%;
          height: 100%;
          text-align: left;

          .loginSpan {
            width: 30%;
            text-align: left;
            padding-left: 40px;
          }

          .userInfo {
            width: 100%;
            height: 100%;
            text-align: center;

            form {
              margin-top: 20px;

              label {
                display: flex;
                flex-direction: column;
                align-items: center;

                input {
                  padding: 5px;
                  margin: 3px;
                  width: 85%;
                  height: 40px;
                  border: 1px solid #808080;
                  opacity: 0.7;
                }
              }
            }

            .loginBtn {
              background: #d02d28;
              color: white;
              width: 85%;
              height: 40px;
              margin: 40px;
              font-size: 20px;
            }
          }

          .signUpPageInfo {
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid #808080;
            margin: 0 auto;
            padding-top: 30px;
            width: 85%;
            height: 100%;

            p {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              text-align: left;
              width: 100%;
              height: 100%;
              font-size: 15px;

              .signUpSpan {
                width: 100%;
                height: 100%;
                font-size: 9px;
              }
            }

            .signUpBtn {
              width: 200px;
              height: 40px;
              font-size: 19px;
              font-weight: 500;
              background-color: white;
              color: black;
              border: 1px solid black;
            }
          }
        }
      }
    }
  }
}