[Project] 회원가입 메일 인증 기능구현

보안성을 높이기 위해 회원가입시 사용되는 메일을 통해 인증번호를 받고 그 인증번호를 이용해 회원가입 기능을 추가했다.

state추가

const [certification, setCertification] = useState(false);
const [confirm, setConfirm] = useState({
    number: "",
    value: "",
    check: false,
  });

• certification의 값에 따라 인증번호를 확인하는 칸이 나오게 하기위해 boolean값을 넣어줬다.
• number : 서버에서 유저에게 보내줄 인증번호를 받는다.
• value : 유저가 인증번호 확인을 위해입력하는 input의 값이 들어온다.
• check : 서버에서 보내준 인증번호와 유저가 입력한 인증번호가 같으면 true값으로 변환한다.

handleConfirmNumber()

이메일 인증번호 받기 버튼을 눌렀을때 실행되야하는 함수를 만들어줬다. hadleCheckConfirmNumber()

 const handleConfirmNumber = () => {
    if (isValid.isEmail && form.email !== "") {
      setCertification(true);
      axios.post(`/user/emailConfirm?email=${form.email}`).then((res) => {
        setConfirm({ ...confirm, number: res.data });
      });
    }
  };

유효성검사의 값이 true이고 emil입력 칸이 빈칸이 아닐때 함수를 실행한다.
조건문을 통과하면 setCertification값을 true로, post요청의 쿼리 파람으로 메일을 보내줬다. 그 후 서버에서 유저가 입력한 인증번호의 비교를위해 보내주는 인증번호를 저장한다.

hadleCheckConfirmNumber()

confirm.check의 값에 따라 가입하기 버튼 활성화를 만들어준다.

const hadleCheckConfirmNumber = () => {
    if (String(confirm.number) === String(confirm.value) && confirm.value !== "") {
      setConfirm({ ...confirm, check: true });
    } else if (String(confirm.number) !== String(confirm.value)) {
      setConfirm({ ...confirm, check: false });
    }
  };

타입을 하나로 맞춰주기 위해 String타입으로 변경 해줬고 인증번호와 유저가입력한 인증번호가 일치할 때 confirm.ckeck의 값을 true로 변경 해주고 아닐경우에는 false로 만들어준다.

가입완료 버튼

<AddButton backgroundcolor="yellow" width={75} height={10} borderRadius={10} marginBottom={10} disabled={confirm.check === false} onClick={handleSignUp}>
          가입 완료
        </AddButton>

기존 속성에 disabled속성을 추가해 confirm.check의 값이 false일 때는 비활성화 되게 만들어 준다.