import styles from "./signup.module.scss";
import { useState } from "react";
import authApi from "../../apis/auth.api.js";
import { Redirect } from "react-router-dom";
import catchErrors from "../../utils/catchErrors.js";
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);
//각 타입별 error 유무 state
const [mbError,setMbError] = useState(false);
const [error, setError] = useState("");
const [errorMsg, setErrorMsg] = useState({
errorId: null,
errorName: false,
errorEmail: false,
errorNickName: false,
errorBirthday: false,
errorMbnum: false,
errorPassword: false,
})
// id중복확인 여부 state와 가입하기 누르면 id 임시 저장
const [overlapId, setOverlapId] = useState(false);
const [confirmMb, setConfirmMb] = useState(false);
const [preId, setPreId] = useState("");
//입력할때마다 state에 저장
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)
})
}
}
//id(중복확인 체크, 형식 에러)
const handleOnClickId = async (e) => {
e.preventDefault();
try {
setError("");
if (user.userId.length < 5) {
setErrorMsg(errorMsg => ({
...errorMsg,
[e.target.name]: true
}));
if (overlapId === true) {
setOverlapId(() => (false));
};
} else {
const userId = user.userId;
const overlapId = await authApi.compareId(userId);
if (!overlapId) {
alert("이 아이디는 사용가능합니다.")
setErrorMsg(errorMsg => ({
...errorMsg,
[e.target.name]: false
}));
setOverlapId(() => (true));
} else {
alert("이미 사용중인 아이디입니다.")
setOverlapId(() => (false));
}
}
} catch (error) {
catchErrors(error, setError)
} finally {
setLoading(false);
}
}
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) {
console.log('error'+ error)
}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);
console.log("인증완료");
}
} 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(validPw){
const userData = user;
//서버로 전송
const error = await authApi.signup(userData);
setErrorMsg(error);
if(error === "성공"){
setSuccess(true);
}
}else{
throw new Error("비밀번호가 일치하지 않습니다.");
}
} catch (error) {
//에러전송
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
if(success){
return