로그인 컴포넌트 기능 구현하기

로그인 컴포넌트 기능 구현

미리보기

 

 

소스 코드

login.jsx

import { useState } from "react";
import "./Login.css";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const nav = useNavigate();
  const [formData, setFormData] = useState({ id: "", password: "" });

  const onChangeForm = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const onSubmitForm = (e) => {
    e.preventDefault();

    const { id, password } = JSON.parse(sessionStorage.getItem("user"));

    if (formData.id === id && formData.password === password) {
      alert("로그인 성공!!!");
    } else {
      alert("로그인 실패!");
    }
  };

  return (
    <div className="Login">
      <form className="login_form" onSubmit={onSubmitForm}>
        <h4>로그인</h4>
        <input
          type="text"
          name="id"
          placeholder="아이디"
          onChange={onChangeForm}
        />
        <input
          type="password"
          name="password"
          placeholder="비밀번호"
          onChange={onChangeForm}
        />
        <button type="submit">로그인</button>
        <div className="login_nav">
          <button
            type="button"
            onClick={() => {
              nav("/signup");
            }}
          >
            회원가입
          </button>
        </div>
      </form>
    </div>
  );
};

export default Login;

login.css

.Login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login_form {
  display: flex;
  flex-direction: column;

  background-color: rgb(236, 236, 236);
  min-width: 400px;
  padding: 30px;
  border: 1px solid rgb(232, 232, 232);
  box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px;
  border-radius: 5px;
}

.login_form > h4 {
  font-size: 20px;
}

.login_form > input {
  font-size: 15px;

  background-color: #f8fafc;
  color: #0d0c22;

  line-height: 30px;
  margin: 4px 0px;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 5px;
  outline: none;

  transition: 0.5s ease;
}

.login_form > input::placeholder {
  color: #94a3b8;
}

.login_form > input:focus,
.login_form > input:hover {
  outline: none;
  border-color: rgba(129, 140, 248);
  background-color: #fff;
  box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);
}

.login_form button {
  background-color: rgb(169, 169, 240);
  padding: 12px;
  border-radius: 5px;
  border: 2.5px solid #e0e1e4;
  box-shadow: 0px 0px 0px 0px;
  cursor: pointer;
  transition: all 0.2s ease-in-out 0ms;
  user-select: none;
}

.login_form button:hover {
  background-color: rgb(203, 203, 245);
}
.login_form button:active {
  transform: scale(0.95);
}

.login_nav {
  display: flex;
  justify-content: end;
}

회원가입 페이지 이동 버튼 추가

먼저 기능을 구현하기 전에 회원가입 페이지로 이동하는 버튼을 하나 만들어 주도록 하겠습니다.

로그인 버튼 아래에 회원가입 버튼을 가지는 div 태그를 생성해 두겠습니다.

 

div 태그에 클래스이름을 설정한 후 css로 display에 flex 속성을 주고 하위 항목들이 끝에서부터 시작될 수 있도록 justify-content에 end 값을 주도록 합니다.

 

또한 기존 login_form 클래스의 바로 아래 하위 버튼들만 스타일을 주도록 했는데 login_form 안에 모든 버튼들을 스타일이 가능하도록 변경해줍니다.

 

회원가입 페이지 이동 기능 추가

회원가입 페이지로 이동하기 위해 useNavigate 훅을 사용해 줍니다.

회원가입 버튼에 버튼 클릭 이벤트 함수를 추가해 주고 useNavigate로 signup 페이지로 이동할 수 있게 변경해줍니다.

 

로그인 기능 구현

회원가입 기능 구현과 마찬가지로 onChangeForm 함수를 구현해주고 ID, PASSWORD input 필드에 onChange 이벤트 함수를 설정해 줍니다.

 

onSubmitForm 함수를 구현해주겠습니다. 

먼저 submit 이벤트가 진행되지 않도록 e.preventDefault() 메서드를 사용해 페이지가 새로고침 안되게 해줍니다.

다음으로 회원가입 시 세션 스토리지에 저장한 "user" 객체를 json 형태로 파싱해 저장된 id, password 값을 받고 현재 입력된 formData의 id, password 의 상태 값이 맞으면 로그인 성공!! 알림창을 아니면 로그인 실패! 알림창이 뜨도록 구현해줍니다.