firebase sms 문자가 안오는데 도와주세요 ㅠㅠㅠㅠ

프갤러 · 2024.09.06 13:21:16

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
import { app } from "../firebase"; // Firebase 설정 파일에서 가져오기

function Signup() {
  const navigate = useNavigate();
  const [error, setError] = useState({});
  const [handleSubmited, setHandleSubmited] = useState(false);
  const [formData, setFormData] = useState({});
  const [confirmationResult, setConfirmationResult] = useState(null); // 인증 결과를 저장할 상태

  const auth = getAuth(app);
  auth.languageCode = 'ko';

  const goBack = () => {
    navigate(-1);
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.id]: e.target.value,
    });
    setError({});
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setHandleSubmited(true);

    if (
      !formData.id ||
      !formData.password ||
      !formData.reconfirmpassword ||
      !formData.phonenumber ||
      !formData.nickname
    ) {
      return;
    }

    const res = await fetch("http://localhost:8080/api/auth/signup", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    });
    const data = await res.json();
    setError(data);

    if (data.success === false) {
      navigate("/signup");
    } else {
      navigate("/");
    }
  };



  const handleSendCode = () => {
    if (!formData.phonenumber) {
      setError({ ...error, message: "휴대폰 번호를 입력해 주세요" });
      return;
    }

    const phoneNumber = `+82${formData.phonenumber.replace(/^0/, '')}`;
    console.log(phoneNumber)

    const recaptchaVerifier = new RecaptchaVerifier(auth,
      'recaptcha-container', 
      {
        size : 'invisible',
        callback : (response) => {
          // ReCAPTCHA가 성공적으로 완료되었을 때 호출됩니다.
          console.log('ReCAPTCHA 성공');
        },
        'expired-callback': () => {
          // ReCAPTCHA가 만료되었을 때 호출됩니다.
          console.log('ReCAPTCHA 만료');
        }
      }, 
    );

    signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier)
      .then((confirmationResult) => {
        // SMS 인증 코드 발송 성공
        setConfirmationResult(confirmationResult);
        console.log('SMS 발송 성공');
      })
      .catch((error) => {
        // SMS 인증 코드 발송 실패
        console.error('SMS 발송 실패', error);
        setError({ ...error, message: "SMS 발송에 실패했습니다." });
      });
  };
  
  return (
    <div className="signup-container">
      <div className="signup-nav-container">
        <img onClick={goBack} src="back.svg" className="backicon" />
        <div className="signup-text">회원가입</div>
      </div>

      <form onSubmit={handleSubmit}>
        <div className="signup-box">
          <input
            type="text"
            placeholder="아이디"
            className={
              handleSubmited &&
              (error.message === "이미 존재하는 아이디입니다." || !formData.id)
                ? "signup-id-error"
                : "signup-id"
            }
            id="id"
            onChange={handleChange}
          />
          {error.message === "이미 존재하는 아이디입니다." ? (
            <span className="signup-id-error-message">{error.message}</span>
          ) : null}
          {handleSubmited && !formData.id ? (
            <span className="signup-id-error-message">
              아이디를 입력해 주세요
            </span>
          ) : null}

          <input
            type="password"
            placeholder="비밀번호"
            className={
              handleSubmited &&
              (error.message === "비밀번호가 일치하지 않습니다." || !formData.password)
                ? "signup-password-error"
                : "signup-password"
            }
            id="password"
            onChange={handleChange}
          />
          {handleSubmited && !formData.password ? (
            <span className="signup-password-error-message">
              비밀번호를 입력해 주세요
            </span>
          ) : null}

          <input
            type="password"
            placeholder="비밀번호 재확인"
            className={
              handleSubmited &&
              (error.message === "비밀번호가 일치하지 않습니다." || !formData.reconfirmpassword)
                ? "reconfirm-password-error"
                : "reconfirm-password"
            }
            id="reconfirmpassword"
            onChange={handleChange}
          />
          {error.message === "비밀번호가 일치하지 않습니다." ? (
            <span className="signup-password-error-message">
              {error.message}
            </span>
          ) : null}
          {handleSubmited && !formData.reconfirmpassword ? (
            <span className="signup-password-error-message">
              비밀번호 재확인을 입력해 주세요
            </span>
          ) : null}

          <button type="button" onClick={handleSendCode}>SMS 전송</button>

          <input
            type="tel"
            placeholder="휴대폰 번호"
            className={
              handleSubmited &&
              (error.message === "이미 존재하는 휴대폰 번호입니다." || !formData.phonenumber)
                ? "phone-number-error"
                : "phone-number"
            }
            id="phonenumber"
            onChange={handleChange}
          />
          {error.message === "이미 존재하는 휴대폰 번호입니다." ? (
            <span className="signup-phonenumber-error-message">
              {error.message}
            </span>
          ) : null}
          {handleSubmited && !formData.phonenumber ? (
            <span className="signup-phonenumber-error-message">
              휴대폰 번호를 입력해 주세요
            </span>
          ) : null}

          <input
            type="text"
            placeholder="닉네임"
            className={
              handleSubmited &&
              (error.message === "이미 존재하는 닉네임입니다." || !formData.nickname)
                ? "nickname-error"
                : "nickname"
            }
            id="nickname"
            onChange={handleChange}
          />
          {error.message === "이미 존재하는 닉네임입니다." ? (
            <span className="signup-nickname-error-message">
              {error.message}
            </span>
          ) : null}
          {handleSubmited && !formData.nickname ? (
            <span className="signup-nickname-error-message">
              닉네임을 입력해 주세요
            </span>
          ) : null}
        </div>
        <button type="submit" className="complete-btn">
          완료
        </button>
        <div id="recaptcha-container"></div> {/* ReCAPTCHA 컨테이너 */}

      </form>
    </div>
  );
}

export default Signup;

1.SMS전송 클릭시

2.recaptcha 실행

3.인증번호 발송됨

- 콘솔창

ReCAPTCHA 성공

Signup.js:89 SMS 발송 성공

이렇게 나옴, 근데 문자는 안옴

번호	제목	글쓴이	작성일	조회	추천
설문	지금 결혼하면 스타 하객 많이 올 것 같은 '인맥왕' 스타는?	운영자	24/10/28	-	-
2769426	프갤가수 ㅡ 가을의 전설	멋진형(58.236)	11.02	14	0
2769424	KBS 다큐 엑소더스를 봤음 ㅇㅅㅇ [1]	아스카영원히사랑해	11.02	34	0
2769423	프갤가수 ㅡ 월하의 야상곡	멋진형(58.236)	11.02	11	0
2769422	민중의 노래	발명도둑잡기	11.02	13	0
2769421	미래의 어느 역사학자들의 대화라는데 (에필로그)	아갤러(121.129)	11.02	28	0
2769420	프갤가수 ㅡ 잔혹한 천사의 태제 [1]	멋진형(58.236)	11.02	19	0
2769419	이거 동의 하냐? [1]	발광견	11.02	48	1
2769418	띠로로로로롱 ㅇㅅㅇ	나트륨찡	11.02	15	0
2769417	한녀랑 결혼한 외남의 최후...	프갤러(113.192)	11.02	25	1
2769416	이제 잘시간입니다. 해가 지면 자고 해가 뜨면 일어나는 습관을 들입시다.	ㅇㅇ(123.213)	11.02	13	0
2769415	미래의 어느 역사학자들의 대화라는데 (요약편)	아갤러(121.129)	11.02	29	0
2769414	미래의 어느 역사학자들의 대화라는데	아갤러(121.129)	11.02	27	0
2769413	프갤가수 ㅡ STAY WITH ME	멋진형(58.236)	11.02	12	0
2769411	세상은 우주는 매튜릭스얌 얘두라 ㅇㅅㅇ [4]	나트륨찡	11.02	30	0
2769410	윤석열 퇴진 국민투표 시민들의 호응이 뜨겁습니다	발명도둑잡기	11.02	13	0
2769407	OOP 는 C++ 이지. 자바 따위가 어딜... [2]	프갤러(59.16)	11.02	48	0
2769406	난테는 왜 안덤비지? ㅇㅅㅇ [2]	프갤러(49.165)	11.02	39	0
2769405	오란다-맛동산, 소라과자-짱구	발명도둑잡기	11.02	14	0
2769403	ㅆㅇㅆ은 혹시 김유식이 만든 게임이 아닐까?	멋진형(58.236)	11.02	30	0
2769402	어떻게 게임보다 더 재밌지? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ	멋진형(58.236)	11.02	32	0
2769401	김동률 (Kim Dong Ryul) - 산책 (Stroll)	발명도둑잡기	11.02	15	0
2769400	강남 판교 취업하기 빡셈?? [1]	프갤러(118.235)	11.02	59	0
2769399	궁금한거 118.235 이 사람은 누군데 왜 맨날 ㅆㅇㅆ 옹호글 밖에 [2]	멋진형(58.236)	11.02	49	4
2769398	자바 인생 40 년 갈아 넣었습니다.	프갤러(59.16)	11.02	27	0
2769397	참지 못하고 또 왔다.	멋진형(58.236)	11.02	21	0
2769396	Object.getPrototypeOf() 질문점	프갤러(122.43)	11.02	24	0
2769395	나도 게임 만들고 싶은데 [3]	노력	11.02	42	0
2769394	개발능력이랑 보안이랑 연관있냐???	ㅇㅇ(106.101)	11.02	22	0
2769392	디씨에서는 보기 어려운 정상적인 청년들 주말 모습	발명도둑잡기	11.02	23	0
2769391	그래 내일 또 와라 ㅇㅅㅇ	나트륨찡	11.02	31	3
2769389	근데 또 올듯 [2]	프갤러(211.43)	11.02	35	0
2769388	농담한걸로 저 냥반 왜 그래?	멋진형(58.236)	11.02	26	0
2769387	크롤링도 되게 복잡하네 [1]	프갤러(58.237)	11.02	29	0
2769386	버스에서 이쁜여자가 자꾸머리긁음 [5]	ㅇㅇ(118.235)	11.02	44	0
2769385	커뮤니티 재밌노 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 차단 푼다.	멋진형(58.236)	11.02	26	0
2769384	아!! 광야의 예수가 나다!!	ㅇㅇ(118.235)	11.02	20	0
2769383	내가 나가는게 맞겠다 정신병자 새끼들한테 시달려서 안되겠다 [15]	ㅆㅇㅆ(124.216)	11.02	259	8
2769382	님들아 이거 어떻게 해야함?? [1]	프갤러(14.40)	11.02	28	1
2769381	윤석열 탄핵 집회에 군인이 참석 불가능한 이유는? [3]	발명도둑잡기	11.02	19	0
2769380	우리 서로 이해하고 용납하자	프갤러(118.218)	11.02	26	1
2769379	믿어라 믿어라	ㅇㅇ(118.235)	11.02	20	0
2769378	로로디로로디로로 ㅇㅅㅇ	나트륨찡	11.02	21	0
2769377	아니, 하지도 않은짓을 했다 그러면 누구나 빡치지. [4]	ㅆㅇㅆ(124.216)	11.02	44	0
2769376	자바의 풍부한 생태계는 오히려 단점이다. [2]	프갤러(118.218)	11.02	33	0
2769375	커뮤보다 사회가 정확하누?? 그래서 노인들도 커뮤하기시작한거누?? [1]	뒷통수한방(1.213)	11.02	28	0
2769374	나는 웹개발을 비하한적도 없고, 자바를 비하한적 없음 [3]	ㅆㅇㅆ(124.216)	11.02	63	1
2769373	저 사람이랑 다른 어그로들이랑 결정적인 차이는 [1]	프갤러(177.54)	11.02	55	8
2769372	그냥 좇센에서태어나면 인생접어라 니가 뭘해도 200충인건	뒷통수한방(1.213)	11.02	16	0
2769371	ㅆㅇㅆ가 욕먹는 이유는 찐따들이 처맞는 이유랑 비슷함. [3]	프갤러(210.57)	11.02	84	8
2769370	조별과제로 게임 만들자고 해놓고 [1]	프갤러(106.241)	11.02	27	0

최근 방문

즐겨찾기

즐겨찾기 갤러리

갤러리 이슈박스, 최근방문 갤러리

연관 갤러리

개념글 리스트

차단하기

[프로그래밍 갤러리]

갤러리 본문 영역

게시물을 간편하게 NFT로 만들어 보세요!

NFT 발행 방법

NFT 발행

비회원 글삭제,수정

추천 비추천

댓글 영역

① NFT 발행

② NFT 구매

파워링크 광고

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

페이지 이동

오른쪽 컨텐츠 영역

알림 설정

알림

파워링크 광고

디시콘 리스트

디시콘

디시콘 검색결과(0)

인기 디시콘

지갑 연결