스파르타코딩클럽 내일배움캠프 TIL72

로그인 인증 구현, 네비게이션 바 구현, 디테일 데이터 가져오기 state useLocation()으로

  // 인증번호 보내는 이벤트
  const phoneNumberPostHandler = (
    event: React.MouseEvent<HTMLButtonElement>,
  ) => {
    event.preventDefault();
    // 언어 선택
    // console.log('error!!!!!!');
    auth.languageCode = 'ko';
    // 리캡챠, 1번째 인수는 클릭한 버튼의 아이디와 같아야 한다.
    // 리캡챠가 실행되지 않았을 때만 리캡챠를 실행

    if (!window.recaptchaVerifier) {
      window.recaptchaVerifier = new RecaptchaVerifier(
        're-container',
        {
          size: 'invisible',
          callback: (response: any) => {
            console.log('recaptchaVerifier response', response);
            // setRecaptcha(grecaptcha);
          },
          'expired-callback': (data: any) => {
            console.log('reCAPTCHA expired, refreshing...');
            window.recaptchaVerifier.reset();
          },
        },
        auth,
      );
    }

    const appVerifier = window.recaptchaVerifier;

    // 인증번호를 보내는 메서드, 2번째 인수는 휴대폰 번호
    signInWithPhoneNumber(auth, '+82' + signUpInput.phoneNumber, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;
        setDataId(confirmationResult.verificationId);
        setRequestedPV(true);
      })
      .catch((error) => {
        if (error.message.includes('invalid-phone-number'))
          return alert('알맞은 휴대폰 번호를 입력해 주세요.');
      });
  };

  const phoneVerifyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();

   const code = signUpInput.phoneCode;
    window.confirmationResult
      .confirm(code)
      .then(() => {
        deleteUser(auth.currentUser!);
        signOut(auth);
        setPhoneVerify(true);
        setRequestedPV(false);
        alert('인증이 완료되었습니다.');
      })
      .catch((error: any) => {
        if (error.message.includes('invalid-verification-code'))
          return alert('인증번호를 입력해 주세요.');
        if (error.message.includes('code-expired'))
          return alert('인증번호가 틀립니다. 다시 입력해 주세요.');
      });
  };