마이페이지 유효성 검사

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번 input 활성화

-두번째 새 비밀번호 

• 새 비밀번호가 유효성검사에서 걸렸다. => 3번 비활성화
• 만약 현재 비밀번호와 일치한 새 비밀번호를 적었다. => 3번 비활성화
• 새 비밀번호가 적절하다 => 3번 활성화   , 여기까지는 아직 저장 버튼 비활성화

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