React Signup Page 정리

유효성 검사 전

유효성 검사 후

구현 기능

회원가입 시 유효성 검사를 진행하며 유효성 검사에 한 가지라도 맞지 않으면 회원가입 버튼이 활성화되지 않습니다.

첫 프로젝트 후 느낀점

1차 프로젝트에서 회원가입과 로그인 페이지를 담당하여 만들면서 Front-End와 Back-End간 보내주는 값과 받는 값을 해야하는 것과 서로의 진행사항을 공유하며 맞춰가는 방법을 배웠습니다. 또한 Front-End간 진행사항도 공유하여 Blocker를 최대한 혼자 해결해보다가 시간을 필요 이상으로 소모하면 진행에 문제가 될 수 있기에 팀원들에게 설명과 도움을 요청하는 부분이 필요하다는 것도 느꼈습니다.

Signup.jsx

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

const Signup = () => {
  const [formInput, setFormInput] = useState({
    userName: '',
    id: '',
    email: '',
    firstpassword: '',
    lastpassword: '',
    checkPassword: '패스워드 입력',
  });

  const navigate = useNavigate();

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

  const isIdValid = formInput.id.length >= 4 && formInput.id.length < 16;
  const isPasswordValid = formInput.firstpassword.length >= 8;
  const isEmailValid = formInput.email.includes('@');
  const isSamePassword = formInput.firstpassword === formInput.lastpassword;
  const isFormValid =
    isIdValid && isEmailValid && isPasswordValid && isSamePassword;

  const submitUserInfo = () => {
    const {
      userName: name,
      id: username,
      email,
      firstpassword: password,
    } = formInput;

    fetch(api.signup, {
      method: 'POST',
      body: JSON.stringify({ name, username, email, password }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.message === 'CREATE ACCOUNT SUCCESS') {
          alert('회원가입을 축하합니다');
          navigate('/login');
          return;
        }

        if (result.message === 'ALREADY_EXIST_USERNAME') {
          alert('아이디를 확인해 주세요');
          return;
        } else if (result.message === 'ALREADY_EXIST_EMAIL') {
          alert('이메일을 확인해 주세요');
          return;
        }
      });
  };

  return (
    <div className="mainSignUpContainer">
      <div className="signUpLogo">
        <h1>Join</h1>
        <span>회원가입</span>
      </div>
      <div className="signUpContainer">
        <div className="signUpInfo">
          <div className="infoTitle">기본정보 입력</div>
          <div className="user">
            <label className="innerTitle">이름</label>
            <input type="text" name="userName" onChange={handleInput} />
          </div>
          <div className="userInfo">
            <label className="innerTitle">아이디</label>
            <div className="userInner">
              <input
                name="id"
                type="text"
                onChange={handleInput}
                value={formInput.id}
              />
              <span>(4자~16자)</span>
            </div>
          </div>
          <div className="user">
            <label className="innerTitle">이메일</label>
            <input type="text" name="email" onChange={handleInput} />
            <span>(@ 포함)</span>
          </div>
          <div className="userInfo">
            <label className="innerTitle">비밀번호</label>
            <div className="userInner">
              <input
                name="firstpassword"
                type="password"
                onChange={handleInput}
                value={formInput.firstpassword}
              />
              <span>(8자 이상, 특수문자 포함)</span>
            </div>
          </div>
          <div className="user">
            <label className="innerTitle" name="lastpassword">
              비밀번호 확인
            </label>
            <input
              name="lastpassword"
              type="password"
              onChange={handleInput}
              value={formInput.lastPassword}
            />
          </div>
          <div className="buttonSetting">
            <button
              className={`btn ${isFormValid ? '' : 'invalid'}`}
              type="submit"
              onClick={submitUserInfo}
              disabled={!isFormValid}
            >
              회원가입
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Signup;

Signup.scss

@import 'styles';

@mixin innerTitle {
  display: flex;
  align-items: center;
  width: 120px;
  height: 100%;
  padding: 10px;
  background-color: #f8f8f8;
  color: #5f5f5f;
}

@mixin input {
  text-align: left;
  margin: 20px;
  width: 400px;
  height: 40px;
  border: 1px solid gray;
  opacity: 0.5;
}

@mixin user {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d7d5d5;
  width: 100%;
  height: 70px;
}

.mainSignUpContainer {
  margin-top: 200px;
  width: 100%;
  height: 100%;

  .signUpLogo {
    text-align: center;
    padding: 50px;
    h1 {
      font-size: 38px;
      font-family: 'Open Sans Condensed', sans-serif;
    }

    span {
      font-size: 19px;
      font-family: 'Noto Sans KR', sans-serif;
    }
  }

  .infoTitle {
    width: 100%;
    height: 30px;
    font-size: 19px;
    margin-bottom: 5px;
    border-bottom: 2px solid #000000;
  }

  .signUpContainer {
    @include flexbox(center, center);
    width: 100%;
    height: 100%;

    .signUpInfo {
      width: 0 auto;
      height: 90%;

      span {
        font-size: 13px;
        color: #808080;
      }

      .user {
        @include user;

        .innerTitle {
          @include innerTitle;
        }

        input {
          @include input;
        }
      }

      .userInfo {
        @include user;

        .innerTitle {
          @include innerTitle;
        }

        .userInner {
          width: 1000px;
          input {
            @include input;
          }
        }
      }

      .buttonSetting {
        @include flexbox(center, center);
      }

      button {
        @include flexbox(center, center);
        margin: 100px 100px 100px 100px;
        padding: 30px;
        width: 500px;
        height: 50px;
        font-size: 25px;
        font-weight: bold;
        color: white;
        background-color: $black;

        &.invalid {
          background-color: $black;
          opacity: 0.3;
          cursor: disabled;
        }
      }
    }
  }
}