디시인사이드 갤러리

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

갤러리 본문 영역

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

프갤러(58.140) 2024.09.05 13:09:18
조회 95 추천 0 댓글 9

에러는 안뜸




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;


추천 비추천

0

고정닉 0

0

댓글 영역

전체 댓글 0
등록순정렬 기준선택
본문 보기

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

갤러리 리스트
번호 제목 글쓴이 작성일 조회 추천
설문 지금 결혼하면 스타 하객 많이 올 것 같은 '인맥왕' 스타는? 운영자 24/10/28 - -
2769020 내일 볼꺼 피에로가르뎅갤로그로 이동합니다. 11.02 28 0
2769019 '차별 기도'로 쪼개진 개신교 [요즘 종교] 발명도둑잡기갤로그로 이동합니다. 11.02 33 0
2769018 포큐씨는 완전탐색을 주먹구구라고 하네 [9] 헬마스터갤로그로 이동합니다. 11.02 76 0
2769017 후후 [2] 재현갤로그로 이동합니다. 11.02 29 0
2769016 포큐씨 a별 알고리듬 떴노 [2] 헬마스터갤로그로 이동합니다. 11.02 60 0
2769015 내님입니다 피에로가르뎅갤로그로 이동합니다. 11.02 22 0
2769014 오늘의 연구 주제: 미국이나 미연방 해체와 GPL라이센스의 유효성 발명도둑잡기갤로그로 이동합니다. 11.02 23 0
2769010 Ai 현실 [7] ㅇㅇ(120.18) 11.02 101 1
2769009 메시급 축구 실력 vs 정신병 안걸리는 선에서 이 항목 패러다임바꾸기 ㅇㅇ(118.235) 11.02 34 0
2769007 크롤링 <- 이거 어케 잡는거임? [5] 프갤러(58.237) 11.02 92 0
2769004 금연껌 사오긴 사왔는데 슈발 ㅋㅋ.. 걍 담배가 피고싶은데 ㅇㅇ(123.213) 11.02 38 1
2769003 우리 fis 아카데미 어때? ㅇㅇ(211.36) 11.02 24 0
2769002 라이브코딩 개빡세네.. 왜이리 어렵지 [2] ㅇㅇ(221.138) 11.02 69 0
2768999 코딩뉴비 질문받아라 [4] 프갤러(218.50) 11.02 72 0
2768998 사수가 사용자 정의 예외를 만들어서 처리하라는데 [1] 프갤러(49.163) 11.02 47 0
2768996 아니 근데 진짜 아이러니하네 코드 난이도만보면 3D가 훨 어려운데 ㅆㅇㅆ(124.216) 11.02 31 0
2768995 10살 여자아이랑 임신 출산시키고 싶은게 본능임 류류(118.235) 11.02 25 0
2768994 이 미친새끼들은 빨갱이 세상을 만들어놓고서 [4] ㅇㅇ(118.235) 11.02 38 0
2768992 감옥에서 제일 존경받는 사람들은 국가보안법 위반한 양심수들 [2] 발명도둑잡기갤로그로 이동합니다. 11.02 38 0
2768991 이미징파일에 아이피로거 심는 방법 급급 프갤러(123.140) 11.02 26 0
2768990 2D 게임 만들면서 느끼는데 아이러니하게 3D 만드는게 더 쉽다 [1] ㅆㅇㅆ(124.216) 11.02 59 0
2768989 거지북 + srgb100 ntsc72 노트북 어디 없나 프갤러(45.94) 11.02 24 0
2768988 내컴퓨터에 정리된 외장쏘드 볼떄마다 든든하노 [2] 헬마스터갤로그로 이동합니다. 11.02 36 0
2768987 며칠 전부터 인스타그램 뒷장 그림들이 로딩이 안되고 있다. 발명도둑잡기갤로그로 이동합니다. 11.02 26 0
2768985 아래 개발 취준방 발명도둑잡기갤로그로 이동합니다. 11.02 54 0
2768982 황민우-오빠 발명도둑잡기갤로그로 이동합니다. 11.02 17 0
2768981 리액트도 재밋네 후후 귀여운와따시갤로그로 이동합니다. 11.02 24 0
2768976 [단독] '노벨평화상' 日피폭자단체, 시상식에 한국인 피해자 초대 발명도둑잡기갤로그로 이동합니다. 11.02 16 0
2768971 밀리의 서재 윈도우로 보니까 완전 별로인데 [4] 프갤러(14.39) 11.02 34 0
2768970 자격증 공부하다 빡쳐서 코드 짜봤는데 [1] 프갤러(211.199) 11.02 60 0
2768969 컴퓨터는 무한대 처리 어케함? [13] ㅇㅇ(61.255) 11.02 100 0
2768968 국비선발할때 정처기 좋아하네 [1] 프갤러(210.126) 11.02 85 0
2768967 컴퓨터의 유일한 한계가 [3] ㅇㅇ(61.255) 11.01 65 0
2768965 드론 맥주 서빙 발명도둑잡기갤로그로 이동합니다. 11.01 15 0
2768964 야 자기가 오타쿠다 하는 애들 들어와봐 [5] ㅆㅇㅆ찡갤로그로 이동합니다. 11.01 58 0
2768963 성병관리소 철거반대에 함께해주세요 발명도둑잡기갤로그로 이동합니다. 11.01 15 0
2768961 게임이고 뭐고 그냥 잠이나 자야겠다. [1] 멋진형(58.236) 11.01 27 0
2768960 도와주세요 발명도둑잡기갤로그로 이동합니다. 11.01 22 0
2768959 금일 p의거짓을 재개 합니다. 멋진형(58.236) 11.01 20 0
2768958 국비지원 안하고 독학으로 프론트 취업 가능? [2] 프갤러(211.235) 11.01 62 0
2768957 APT. 반지하 패로디 발명도둑잡기갤로그로 이동합니다. 11.01 30 0
2768956 오늘 밤 샐거야 재현갤로그로 이동합니다. 11.01 18 0
2768955 자기가 능력없다 싶으면 선퇴사 하지말아야됨 ㄹㅇ [2] 프갤러(118.235) 11.01 67 0
2768954 따끈따근한 신작 단편 무협소설 멋진형(58.236) 11.01 19 0
2768953 오늘의 음악 기획 실마리: APT 노래 가사를 GPT로 바꾼 패러디 발명도둑잡기갤로그로 이동합니다. 11.01 14 0
2768952 님들 보도방은 장점 없음? [7] 프갤러(211.62) 11.01 73 0
2768950 WSJ “패밀리 레스토랑 대명사 TGIF ‘챕터11’ 신청 임박” 발명도둑잡기갤로그로 이동합니다. 11.01 18 0
2768949 솔까 IT분야에서 기본지식까지는 모르겠고 [3] 프갤러(210.126) 11.01 77 0
2768948 문어발 비리 발명도둑잡기갤로그로 이동합니다. 11.01 21 0
2768947 내가 생각한것과는 차원이 다른 ㅇㅇ(118.235) 11.01 24 0
갤러리 내부 검색
제목+내용게시물 정렬 옵션

오른쪽 컨텐츠 영역

실시간 베스트

1/8

뉴스

디시미디어

디시이슈

1/2