[Project] 회원가입 기능 구현

로그인 로직에 이어 회원가입 페이지 기능구현을 하였다. 최초 계획은 회원가입이 되었을때 바로 로그인이 되는 구조로 생각을 하고 구현을 했지만 중간에 조금 내용이 수정되서 조금 더 간단하게 구현이 가능하게 되었다. 다시 로그인을 해야했기 때문에 '최초에 회원가입 시에도 토큰을 받을것이다' 라는 로직을 삭제하고 유효성 검사의 결과에 맞으면 데이터를 보내주는 형식으로 수정하게 되었다.

변수 설정

// 비교와 서버에 보낼 데이터를 저장할 from state.
const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
    passwordConfirm: "",
  });

// 유효성 검사의 결과를 반환할 isValid state.
  const [isValid, setIsValid] = useState({
    isEmail: false,
    isPassword: false,
    isPasswordConfirm: false,
  });

// useNavigate를 담은 navigate변수
  const navigate = useNavigate();

handleSignUp

유효성 검사를 거쳐 true값이 됬을때 데이터를 서버에 보내줄 것이기 때문에 if문을 사용해 조건을 만들어 줬다.

const handleSignUp: React.MouseEventHandler<HTMLButtonElement> = (e) => {
    e.preventDefault();
  
  // isValid의 값이 모두 true였을때 post요청을 보내준다.
    if (isValid.isEmail && isValid.isPassword && isValid.isPasswordConfirm) {
      axios
        .post("/user/sign-up", {
          name: form.name,
          email: form.email,
          password: form.password,
        })
        .then(() => {
          navigate("/users/login");
        })
        .catch((err) => {
          const errMessage = (err.response as AxiosResponse<{ message: string }>)?.data.message;
          window.alert(errMessage);
        });
    } else {
      window.alert("회원가입에 실패하였습니다.");
    }
  };

유효성 검사

팀에서 정한 요구사항 명세서의 기준으로 유효성 검사 기준을 만들어 조건식을 만들어 줬다.

useEffect(() => {
  // email 유효성 검사
    const exp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
  
  // 빈 공백이었을때 에러 메시지가 나오지않게 해주기 위해 빈 공백이었을 시 true값을 줬다.
    if (form.email === "") {
      setIsValid((prevIsValid) => ({ ...prevIsValid, isEmail: true }));
    } else if (exp.test(form.email)) {
      setIsValid((prevIsValid) => ({ ...prevIsValid, isEmail: true }));
    } else {
      setIsValid((prevIsValid) => ({ ...prevIsValid, isEmail: false }));
    }
  }, [form.email]);

  useEffect(() => {
    // 우리 팀에서 정해놓은 비밀번호 기준은 알파벳과 숫자로 6자 이상 15자 이하로 설정 하였다.
    const exp = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,15}$/; 

    if (form.password === "") {
      setIsValid((prevIsValid) => ({ ...prevIsValid, isPassword: true }));
    } else if (exp.test(form.password)) {
      setIsValid((prevIsValid) => ({ ...prevIsValid, isPassword: true }));
    } else {
      setIsValid((prevIsValid) => ({ ...prevIsValid, isPassword: false }));
    }
  }, [form.password]);

  useEffect(() => {
    if (form.passwordConfirm === "") {
      setIsValid((prevIsValid) => ({ ...prevIsValid, isPasswordConfirm: true }));
    } else if (form.password === form.passwordConfirm) {
      setIsValid((prevIsValid) => ({ ...prevIsValid, isPasswordConfirm: true }));
    } else {
      setIsValid((prevIsValid) => ({ ...prevIsValid, isPasswordConfirm: false }));
    }
  }, [form.passwordConfirm, form.password]);