내일배움캠프 최종 프로젝트 - 로그인과 회원가입 (4)

1. 빈칸에 대한 유효성 검사

• 예를 들어, 이메일 필드가 비어 있거나 유효한 이메일 형식이 아닌 경우, 'setEmailCheck'를 사용해 사용자에게 알려주도록 함

2. 정규 표현식을 이용한 이메일 및 비밀번호 유효성 검사

• 이메일: 'emailValidation' 정규식을 사용해 유효한 이메일 형식 검사.
• 비밀번호: 'passwordValidation' 정규식을 사용해 비밀번호가 숫자, 특수문자를 포함하고, 최소 8자 이상인지 검사

const emailValidation = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
const passwordValidation = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;

const validateInput = (): boolean => {
    // isVaild는 각 단계에서 입력값의 유효성을 나타낼때 사용함
    let isValid = true;

    //* !email은 email이 빈 문자열이거나 undefined일 경우 true가 됨
    if (step === 1) {
      if (!email) {
        setEmailCheck('이메일을 입력해주세요');
        isValid = false;
      } else if (!emailValidation.test(email)) {
        setEmailCheck('유효한 이메일 형식이 아닙니다');
        isValid = false;
      } else if (!isEmailAvailable) {
        setEmailCheck('이메일 중복 확인이 필요합니다');
        isValid = false;
      } else {
        setEmailCheck('');
      }
    }

    if (step === 2) {
      if (!password) {
        setPasswordCheck('비밀번호를 입력해주세요');
        isValid = false;
      } else if (!passwordValidation.test(password)) {
        setPasswordCheck('비밀번호는 8자 이상, 숫자 및 특수문자를 포함해야 합니다');
        isValid = false;
      } else {
        setPasswordCheck('');
      }

      if (!confirmPassword) {
        setConfirmPasswordCheck('비밀번호 확인을 입력해주세요');
        isValid = false;
      } else {
        setConfirmPasswordCheck('');
      }

      if (password !== confirmPassword) {
        setIsPasswordMatch(false);
        setConfirmPasswordCheck('비밀번호가 일치하지 않습니다');
        isValid = false;
      } else {
        setIsPasswordMatch(true);
      }
    }

    if (step === 3 && !birthDate) {
      setBirthDateCheck('생년월일을 입력해주세요');
      isValid = false;
    } else {
      setBirthDateCheck('');
    }

    if (step === 4) {
      if (!nickname) {
        setNicknameCheck('닉네임을 입력해주세요');
        isValid = false;
      } else if (!isNicknameAvailable) {
        setNicknameCheck('닉네임 중복 확인이 필요합니다');
        isValid = false;
      } else {
        setNicknameCheck('');
      }
    }
    return isValid;
  };

3. 이메일 중복 확인

• 'checkEmailAvailability' 함수는 Firebase의 Firestore 데이터베이스에서 이메일이 이미 존재하는지 확인함
• Firestore에서 해당 이메일을 가진 사용자를 찾아 결과에 따라 상태 업데이트

  const checkEmailAvailability = async () => {
    try {
      const usersRef = collection(db, 'users');
      const q = query(usersRef, where('email', '==', email));
      const querySnapshot = await getDocs(q);

      if (querySnapshot.empty) {
        setIsEmailAvailable(true);
        setEmailCheck('사용 가능한 이메일입니다');
        setEmailValidationClass('text-green-500'); // 초록색 텍스트
      } else {
        setIsEmailAvailable(false);
        setEmailCheck('이미 사용 중인 이메일입니다');
        setEmailValidationClass('text-red-500'); // 빨간색 텍스트
      }
    } catch (error) {
      console.error('이메일 중복확인 중 오류: ', error);
    }
  };

4. 닉네임 중복 확인

• 'checkNicknameAvailability' 함수는 Firestore 데이터베이스에서 닉네임이 이미 존재하는지 확인함
• Firestore에서 해당 닉네임을 가진 사용자를 찾아 결과에 따라 상태 업데이트

const checkNicknameAvailability = async (): Promise<void> => {
    try {
      const querySnapshot = await getDocs(query(collection(db, 'users'), where('nickname', '==', nickname)));
      if (querySnapshot.empty) {
        setIsNicknameAvailable(true);
        setNicknameCheck('사용 가능한 닉네임입니다');
        setNicknameValidationClass('text-green-500');
      } else {
        setIsNicknameAvailable(false);
        setNicknameCheck('이미 사용 중인 닉네임입니다');
        setNicknameValidationClass('text-red-500');
      }
    } catch (error) {
      console.error('Error checking nickname availability: ', error);
    }
  };

오늘의 한줄평 : 유효성은 어렵다. 특히 오류를 너무 많이 만나서..힘들었어..그렇지만 해냈지!