파이어베이스 문자인증 왜 문자안오는지 알려주세요 ㅠㅠ....

프갤러 · 2024.09.05 13:09:18

에러는 안뜸

import React, { 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);

  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/, '')}`;

    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>
      </form>
      <div id="recaptcha-container"></div> {/* ReCAPTCHA 컨테이너 */}
    </div>
  );
}

export default Signup;

번호	제목	글쓴이	작성일	조회	추천
설문	기 세보여도 실제로는 멘탈 약할 것 같은 스타는?	운영자	24/11/04	-	-
2768403	아 버그잡아야하는데	ㅆㅇㅆ(124.216)	10.31	19	0
2768402	멍유야 담에 붙겠지 [3]	ㅆㅇㅆ(124.216)	10.31	56	0
2768401	이븐하게 구운 토끼고기❤+ [1]	♥냥덩이♥	10.31	64	0
2768400	금일 소설 집필을 마칩니다.	사업의신(58.236)	10.31	22	0
2768399	ssd 용어 표준화 투표 [6]	헬마스터	10.31	61	0
2768398	언어 안쓴지 3년만되도 완전 잊어버림 [2]	ㅆㅇㅆ(124.216)	10.31	37	0
2768397	어쩌다가 common lisp 관련 동영상을 봤는데 [1]	프갤러(172.225)	10.31	35	0
2768396	사실 컴퓨터는 공부한다는 느낌보다는 [1]	아스카영원히사랑해	10.31	70	0
2768395	프로그래밍이 카드게임하는거 같다. 내 카드 목록 [2]	딱국(61.99)	10.31	107	5
2768394	신작 단편 무협소설 썼다. [2]	사업의신(58.236)	10.31	33	0
2768392	외국 유튜브에 누가 한국음식 컨텐츠라도 하면	헬마스터	10.31	32	0
2768391	cpp 유니크포인터쓰면 c#이랑다를게없네 [1]	프갤러(116.40)	10.31	68	0
2768390	컴공 학교 수업 왤케 하나도 귀에 안들어옴? [2]	ㅇㅇ(118.235)	10.31	71	0
2768389	프로젝트 이렇게 하는거 맞아? [8]	프갤러(223.33)	10.31	105	0
2768388	금연한답시고 돈만 따따블로 들어가네 시발 진짜	ㅇㅇ(223.62)	10.31	35	1
2768384	이태원참사는 똑똑히 기억하고 있는 날 중 하나입니다 [7]	아스카영원히사랑해	10.31	99	0
2768383	3개월만에 퇴사 합당해? [4]	프갤러(49.169)	10.31	86	0
2768382	ssd를 레거시용어 하드로 부르는데 새로운 애칭이 필요하지않냐? [4]	헬마스터	10.31	49	0
2768381	나님의 작고 소중한 자료 이중화중♥	헬마스터	10.31	33	0
2768380	금연껌 혹시 효과있냐?? 흡연 이라는 행위 자체를 그만두는게 중요한거같은	ㅇㅇ(223.62)	10.31	44	0
2768379	금일 무협소설 집필을 시작합니다.	사업의신(58.236)	10.31	26	0
2768378	회사에서 chatgpt 쓴다고 부정적으로보나? [1]	ㅇㅇ(59.12)	10.31	53	0
2768376	쉘스크립트 씨발 애미 뒤지게 어렵네 [8]	Snob	10.31	93	0
2768375	요즘 삶이 너무 힘들고 지친다. 빛이 보이지 않는 혼돈이다. [2]	ㅇㅇ(223.62)	10.31	57	0
2768374	금일 보비지원을 마칩니다.	사업의신(58.236)	10.31	26	0
2768373	✨☀⭐❤♡냥님 냥냥합니냥♡❤⭐☀✨	♥냥덩이♥	10.31	16	0
2768372	프스릭스 선생님의 교정 2	사업의신(58.236)	10.31	24	0
2768371	참고 인내하고 공부하는건 왜이렇게 어려울까 너무 힘들고 우울해 [1]	ㅇㅇ(223.62)	10.31	35	0
2768370	날이따숩다 [8]	멍청한유라ㅋ	10.31	68	0
2768369	[보비지원] 왕초보! 보컬로 따먹기 ㅡ 32강 어2형 자유발성	사업의신(58.236)	10.31	22	0
2768368	안드는 버전올릴때마다 소스 갈아엎게 시키는데 [2]	헬마스터	10.31	37	0
2768367	[보비지원] 왕초보! 보컬로 따먹기 ㅡ 31강 어1형 자유발성	사업의신(58.236)	10.31	25	0
2768366	금연 2일차 진짜 미치겠다 어떡하냐 자꾸 합리화하게됨	ㅇㅇ(223.62)	10.31	37	0
2768365	교수 이어 초등교사 ‘윤정부 훈장’ 거부…“받으면 뭐가 좋겠나”	발명도둑잡기	10.31	23	0
2768364	보비지원 1교시를 마칩니다.	사업의신(58.236)	10.31	29	0
2768362	현대오토에버 모빌리티SW 스쿨 임베디드 4기(~11/25)	프갤러(14.32)	10.31	77	0
2768361	프스릭스 선생님의 교정 1	사업의신(58.236)	10.31	26	0
2768359	개발군주 물상	발명도둑잡기	10.31	52	0
2768358	[보비지원] 왕초보! 보컬로 따먹기 ㅡ 30강 네이 스케일	사업의신(58.236)	10.31	20	0
2768357	[보비지원] 왕초보! 보컬로 따먹기 ㅡ 29강 텅2형 스케일	사업의신(58.236)	10.31	29	0
2768356	담배가 뇌에 가득차서 생활이 안됨 ㅅㅂ 어떡하지 [1]	ㅇㅇ(123.213)	10.31	44	0
2768355	왜 자꾸 난 커뮤니티에 기술 질문을 하는거지?? [2]	창업게이(218.235)	10.31	56	0
2768354	[보비지원] 왕초보! 보컬로 따먹기 ㅡ 28강 립2형 스케일	사업의신(58.236)	10.31	25	0
2768352	공천비리 위헌 파쇼정당 국민의힘 해산시키자	발명도둑잡기	10.31	26	0
2768351	교수가 예뻐서 고백했더니 그만둠	프갤러(218.234)	10.31	48	0
2768350	[보비지원] 왕초보! 보컬로 따먹기 ㅡ 27강 립1형 스케일	사업의신(58.236)	10.31	27	0
2768349	금일 보비지원을 시작합니다.	사업의신(58.236)	10.31	29	0
2768347	순순희, 오늘 신곡 '아는오빠' 발매…포스트맨 곡 리메이크	발명도둑잡기	10.31	42	0
2768345	정신 못 차린 공군, 남성 대령이 강간미수…“꽃뱀 몰아 2차가해”	발명도둑잡기	10.31	24	0
2768344	[시선집중] 북한 대남방송 24시간 소음 피해 심각...지자체는 무대책	발명도둑잡기	10.31	32	0

최근 방문

즐겨찾기

즐겨찾기 갤러리

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

연관 갤러리

개념글 리스트

차단하기

[프로그래밍 갤러리]

갤러리 본문 영역

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

NFT 발행 방법

NFT 발행

비회원 글삭제,수정

추천 비추천

댓글 영역

① NFT 발행

② NFT 구매

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

페이지 이동

오른쪽 컨텐츠 영역

알림 설정

알림

파워링크 광고

디시콘 리스트

디시콘

디시콘 검색결과(0)

인기 디시콘

지갑 연결