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/11/04	-	-
2768911	저는 고능아 나트아륨인데요 ㅇㅅㅇ [2]	나트륨찡	11.01	40	0
2768910	담배 한대 빨고 콘서트 2부 시작합니다.	멋진형(58.236)	11.01	36	0
2768908	그렌라간 소용돌이 공식- [1]	프갤러(121.172)	11.01	42	0
2768907	고졸 좆문대 지잡출신 코더 = 노예 아직도 유효하냐? [1]	프갤러(118.235)	11.01	43	0
2768906	프갤가수 ㅡ DAY BY DAY	멋진형(58.236)	11.01	20	0
2768905	방금 전 인스타그램 켜니 첫 게시물	발명도둑잡기	11.01	23	0
2768904	프갤가수 ㅡ 좋은사람	멋진형(58.236)	11.01	20	0
2768903	프갤가수도 잊혀지고싶지않은거야 [10]	멍청한유라ㅋ	11.01	43	0
2768901	인서울,자바,스프링,jsp, 백엔드 ㅇㅅㅇ	류류(118.235)	11.01	43	0
2768900	프갤가수 ㅡ 이 밤이 지나면	멋진형(58.236)	11.01	22	0
2768899	윤 정권, 국민의 손으로 끝내주십시오	발명도둑잡기	11.01	19	0
2768898	프갤가수 ㅡ 너를 위해	멋진형(58.236)	11.01	13	0
2768897	여권·방심위 “나무위키 접속차단 검토”…비판 통제 의도?	발명도둑잡기	11.01	27	0
2768895	공유기 암호 해킹법	발명도둑잡기	11.01	28	0
2768894	나무위키 왜 안돼 ㅇㅅㅇ [2]	ㅇㅇ(112.157)	11.01	54	0
2768893	국비로 취업이 가능한가요?	프갤러(222.101)	11.01	48	0
2768891	담주에 퇴사네 [5]	프갤러(118.235)	11.01	70	0
2768888	DTO,VO,도메인,Entity,커맨드객체 ㅆㅂ애미업네 [2]	ㅇㅇ(211.234)	11.01	50	0
2768887	부처님이 지구를 떠난 이후로 공백이 느껴진다 ㅇㅅㅇ	나트륨찡	11.01	31	0
2768885	나츠아롱이 갤루리입니다 ㅇㅅㅇ	나트륨찡	11.01	18	0
2768884	싷무에서 디비 마니쓰는거몬가요 ㅇ ㅇ?? [4]	ㅇㅇ(211.234)	11.01	42	0
2768883	나님글에 댓글유령장난 ㄴ	♥엄복동냥덩♥	11.01	21	0
2768881	사민주의의 한계는 의료복지 예산을 제약회사가 빼감	발명도둑잡기	11.01	33	0
2768880	운영체제랑 리눅스 중에 뭐부터 공부해야됨? [3]	프갤러(220.116)	11.01	54	0
2768878	나는 지구를 통치하는 자 ㅇㅅㅇ 관리자다 ㅇㅅㅇ	나트륨찡	11.01	14	0
2768876	나씻주준✨	♥엄복동냥덩♥	11.01	19	0
2768875	나님 매일 매일 발전즁❤+	♥냥덩이♥	11.01	32	0
2768874	내가 나를 인정하는데 어떠캄 ㅇㅅㅇ	나트륨찡	11.01	20	0
2768873	나트륨찡이 조언 부탁해 해봤자... [5]	ㅆㅇㅆ(124.216)	11.01	42	0
2768872	내가 원하는 건 인정이 아니야 ㅇㅅㅇ [2]	나트륨찡	11.01	33	0
2768871	오늘 80만원 썼다 [20]	아스카영원히사랑해	11.01	96	0
2768870	나도 인생 망했다	발명도둑잡기	11.01	28	0
2768869	나는 문과 그 자체가 된다 ㅇㅅㅇ	나트륨찡	11.01	24	0
2768868	ㅆㅇㅆ야 나한테도 조언 해줘어 ㅇㅅㅇ	나트륨찡	11.01	18	3
2768867	모든 사람은 타인에 비해서 우월한 점이 있어. 딱국아 [2]	ㅆㅇㅆ(124.216)	11.01	65	1
2768866	윤 대통령 지지율 17%까지 추락 [문화일보 조사] [2]	발명도둑잡기	11.01	23	0
2768865	나는 뭐에 집착함 얘두라 ㅇㅅㅇ	나트륨찡	11.01	19	0
2768864	나님의 실력은 세계 최강인데 ㅇㅅㅇ	나트륨찡	11.01	19	0
2768863	딱국아 열심히 공부하는거 좋게보고 있긴함. 근데 솔직히 [11]	ㅆㅇㅆ(124.216)	11.01	60	1
2768862	나츠아롱이는 초고수인데 어떠캄 ㅇㅅㅇ	나트륨찡	11.01	20	0
2768861	나츠아롱이는 게임 초고수가 될 거럐 ㅇㅅㅇ	나트륨찡	11.01	21	0
2768860	Rx가 좀 치는 애 같다	주갤대사(211.234)	11.01	33	0
2768859	나는 뭐에 집착함 얘두라????ㅇㅅㅇ	나트륨찡	11.01	21	0
2768858	움마 움마	주갤대사(211.234)	11.01	16	0
2768857	나츠아롱이는요 초해커얌 얘두라 ㅜㅜ	나트륨찡	11.01	24	0
2768856	근데 딱국 한테 진지하게 궁금한게 왜 격차<<이거에 집착하냐 [4]	ㅆㅇㅆ(124.216)	11.01	44	1
2768855	예전에 고급 프로그래머한테 질문하고 돈내고 답변 받는	발명도둑잡기	11.01	26	0
2768854	신기술을 배웠는데 기존 코드랑 충돌될때는 어떻게 해야할까	ㅆㅇㅆ(124.216)	11.01	29	0
2768853	냥덩 만화상 이 만화가 대단하당⭐ 8회 수상작	♥냥덩이♥	11.01	20	0
2768852	근데 rx가 딱국 아님?? [6]	40대프린이(118.235)	11.01	57	2

최근 방문

즐겨찾기

즐겨찾기 갤러리

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

연관 갤러리

개념글 리스트

차단하기

[프로그래밍 갤러리]

갤러리 본문 영역

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

NFT 발행 방법

NFT 발행

비회원 글삭제,수정

추천 비추천

댓글 영역

① NFT 발행

② NFT 구매

파워링크 광고

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

페이지 이동

오른쪽 컨텐츠 영역

알림 설정

알림

파워링크 광고

디시콘 리스트

디시콘

디시콘 검색결과(0)

인기 디시콘

지갑 연결