import { useState } from "react"; import { Redirect } from "react-router-dom"; import authApi from "../../apis/auth.api.js"; import catchErrors from "../../utils/catchErrors.js"; import styles from "./signup.module.scss"; const Signup = () => { //회원정보 const [user, setUser] = useState({ userId: "", userName: "", userEmail: "", userNickName: "", userBirthday: "", userMbnum: "", userPassword: "", userRePassword: "" }) const [startTime, setStartTime] = useState(""); const [number, setNumber] = useState(null); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(false); const [mbError, setMbError] = useState(false); const [error, setError] = useState(""); const [errorMsg, setErrorMsg] = useState({ errorId: false, errorName: false, errorEmail: false, errorNickName: false, errorBirthday: false, errorMbnum: false, errorPassword: false, }) const [confirmMb, setConfirmMb] = useState(false); const handleUserOnChange = (e) => { setUser({ ...user, [e.target.name]: e.target.value }) if (e.target.name === "userBirthday" || e.target.name === "userMbum") { setUser({ ...user, [e.target.name]: String(e.target.value) }) } } const handleOnClickMbnum = async (e) => { e.preventDefault(); try { setStartTime(""); setError(""); setLoading(true) const phone = user.userMbnum; const message = await authApi.confirmMbnum(phone); if (message.isSuccess) { setMbError("보냄"); setStartTime(message.startTime); } } catch (error) { catchErrors(error, setError); } finally { setLoading(false); } } const handleOnChangeMb = (e) => { setNumber(String(e.target.value)); } const handleOnClickMbConfirm = async (e) => { e.preventDefault(); try { setError(""); setLoading(true); const confirmNum = { userMbnum: user.userMbnum, number: number, startTime: startTime }; const message = await authApi.confirmNum(confirmNum); setMbError(message); if (message === "성공") { setConfirmMb(true); } } catch (error) { catchErrors(error, setError); } finally { setLoading(false); } } const validationPw = () => { if (user.userPassword !== user.userRePassword) return false; else return true; } const handleOnSummit = async (e) => { e.preventDefault(); try { setError(""); setLoading(true); let validPw = validationPw(); if (confirmMb) { if (validPw) { const userData = user; const error = await authApi.signup(userData); if (error === "성공") setSuccess(true); else { setErrorMsg(error); alert("형식에 맞게 다시 작성해주세요"); } } else throw new Error("비밀번호가 일치하지 않습니다."); } else throw new Error("핸드폰 번호를 인증해주세요."); } catch (error) { catchErrors(error, setError); } finally { setLoading(false); } } if (success) { return ; } return (
회원가입
{errorMsg.errorId &&

5~10자리 사이로 입력해주세요.

}
{errorMsg.errorName &&

이름을 입력해주세요

}
{errorMsg.errorEmail &&

이메일을 입력해주세요

}
{errorMsg.errorNickName &&

10자 이내로 입력해주세요.

}
{errorMsg.errorBirthday &&

숫자 6자리를 입력해주세요.

}
{errorMsg.errorMbnum &&

-없이 숫자 11자리를 입력해주세요.

}
{(mbError === "재전송") &&

유효시간이 만료되었습니다. 재전송해주세요.

} {(mbError === "보냄") &&

5분이내에 입력해주세요.

} {(mbError === "성공") &&

인증되었습니다.

} {(mbError === "실패") &&

인증번호를 다시 입력해주세요.

}
{errorMsg.errorPassword &&

8~11자리 사이로 입력해주세요.

}
) } export default Signup