마이페이지 유효성 검사

1. 걱정

개인정보를 변경하는 버튼은 하나이기 때문에 비밀번호가 변경되든 닉네임이 변경되든 둘 중 하나만 변경되어도 저장이 완료되어야 합니다.
중간에 수정을 멈추거나(수정이 완료되지 않은 경우) 현재 개인정보와 동일한 정보를 입력하는 경우 버튼을 비활성화해야 합니다.

const onChangePassword = (event) => {
    const currentPassword = event.target.value;
    setEditUserPassword(currentPassword);
    signInWithEmailAndPassword(authService, email, currentPassword)
      .then((userCredential) => {
        const user = userCredential.user;
        // console.log(user);
        const passwordRegex =
          /^(?=.*(a-zA-Z))(?=.*(!@#$%^*+=-))(?=.*(0-9)).{8,25}$/;
        if (!passwordRegex.test(currentPassword)) {
          setPasswordMessage(
            "숫자+영문자+특수문자 조합으로 8자리 이상 입력해주세요!"
          );
          setIsPassword(false);
          setBtnValidation(true);  //버튼 비활성화
        } else {
          setIsPassword(true);
          setInputValidation(false);  //두번째 인풋 활성화
          setPasswordMessage("비밀번호가 일치해요");
        }
      })
      .catch((error) => {
        setInputValidation(true);   //두번째 인풋 비활성화
        setPasswordMessage("비밀번호가 틀렸어요");
      });
  };

(경우의 수)

-현재 비밀번호

• 현재 암호(1)가 일치하지 않아 유효성 검사가 수행되었습니다. => 2번 비활성화로 저장 불가
• 현재 암호(1) 일치 => 입력 2 활성화

-두 번째 새 암호

• 유효성 검사 중에 새 암호가 멈췄습니다. => 3번 비활성화
• 현재 비밀번호와 일치하는 새 비밀번호를 적어둔 경우. => 3번 비활성화
• 새 암호가 좋습니다 => 3x 활성화, 지금까지 저장 버튼 비활성화

const changePassword = (event) => {
    setPassword(event.target.value);
    const passwordRegex =
      /^(?=.*(A-Za-z))(?=.*\d)(?=.*($@$!%*#?&))(A-Za-z\d$@$!%*#?&){8,}$/;
    if (!passwordRegex.test(event.target.value)) {
      setConfirmPasswordMessage(
        "대소문자, 특수문자를 포함하여 8자리 이상 입력해주세요."   //유효성 검사 실행
      );
      setBtnValidation(true);
      setIsPasswordConfirm(false);
    }
    //여기는 혹여나 3번째 활성화 이후 다시 2번째를 고칠 경우 3번째 인풋메세지를 바꿔준다.
    else if (event.target.value === userPassword) { 
      setBtnValidation(true);
      setDoubleCheckPasswordMessage("비밀번호가 일치하지 않습니다.");
    } else if (event.target.value === editUserPassword) {   //현재 비밀번호가 일치 시
      setBtnValidation(true);
      setIsPasswordConfirm(false);
      setInputValidationConfirm(true);
      setConfirmPasswordMessage("현재 비밀번호와 일치해요!");  
    } else {
      setBtnValidation(true);
      setIsPasswordConfirm(true);
      setInputValidationConfirm(false);
      setConfirmPasswordMessage("사용 가능한 비밀번호 형식입니다.");
    }

– 세 번째 비밀번호 확인

• 유효성 검사 시 새 비밀번호가 멈춤 => 버튼이 비활성화됨
• 두 번째 입력의 값을 벗어나는 경우 => 비활성화 버튼
• 두 번째 입력 값과 동일하게 작성했습니다. => 마지막으로 버튼 활성화
• 세 번째 입력의 철자가 올바르고 두 번째 입력이 수정된 경우 => 버튼이 다시 비활성화됨 + 비밀번호가 일치하지 않는다는 문장

  const changeConfirmPassword = (event) => {
    const currentPasswordConfirm = event.target.value;
    setUserPassword(currentPasswordConfirm);
    if (password === currentPasswordConfirm) {
      setBtnValidation(false);
      setIsDoublePasswordConfirm(true);
      setDoubleCheckPasswordMessage("비밀번호가 일치해요.");
    } else if (event.target.value !== password) {
      setBtnValidation(true);
      setDoubleCheckPasswordMessage("비밀번호가 일치하지 않습니다.");
    } else {
      setBtnValidation(true);
      setIsDoublePasswordConfirm(false);
      setDoubleCheckPasswordMessage("비밀번호가 일치하지 않습니다.");
    }
  };

---

닉네임의 경우 닉네임이 현재 닉네임과 일치하면 버튼이 비활성화됩니다.

=> 비밀번호를 변경하지 않고 이렇게 닉네임을 변경하면 버튼이 활성화되고 유효하지 않은 비밀번호가 저장됩니다. 이를 방지하기 위해 함수가 실행되는 동안 암호는 세 번째 입력 값으로 수정됩니다.

화면 녹화 2023-03-03 03.40.09.mov

4.93MB