React - 로그인 / 회원가입 유효성 검사

• email 주소에 @ 와 . 포함되어 있어야 할 것
• password 가 8자 이상, 소문자, 대문자, 특수문자 포함
• phone_number 가 010-0000-000 형식일 것
• 각 input 창에 1글자 이상 적을 것
  
  

const isValidEmail = email.includes('@') && email.includes('.');
  const specialLetter = password.search(
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}$/
  );
  const isValidPassword = password.length >= 8;

  const checkPhonenumber = phone_number.search(
    /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/
  );

  const isValidInput =
    first_name.length >= 1 &&
    last_name.length >= 1 &&
    date_of_birth.length >= 1;

  const getIsActive =
    isValidEmail &&
    specialLetter === 0 &&
    isValidPassword &&
    checkPhonenumber === 0 &&
    isValidInput;

  const handleButtonValid = () => {
    if (!isValidEmail) {
      alert('이메일 형식이 맞지 않습니다.');
      return false;
    } else if (specialLetter === -1) {
      alert('비밀번호에 대문자, 소문자, 특수문자를 포함해주세요.');
      return false;
    } else if (!isValidPassword) {
      alert('비밀번호 8자 이상으로 적어주세요');
      return false;
    } else if (checkPhonenumber === -1) {
      alert('핸드폰번호 형식은 010-0000-0000 입니다.');
      return false;
    } else {
      return true;
    }
  };


// 하단 html 부분
<button
      className={getIsActive ? 'signUpButtonActive' : 'signUpButton'}
      type="button"
      onClick={goToLogin}
>
 Create Account
</button>