import React, { FormEvent, useEffect, useState } from "react"; import { Navigate } from "react-router-dom"; import { authApi } from "../apis"; import { catchErrors } from "../helpers"; import { SpinnerIcon } from "../icons"; import { SignupUser } from "../types"; export const SignUp = () => { const [user, setUser] = useState({ name: "", email: "", password: "", password2: "", }); const [error, setError] = useState(""); const [disabled, setDisabled] = useState(false); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(false); useEffect(() => { setDisabled(!(user.name && user.email && user.password && user.password2)); }, [user]); function handleChange(event: React.ChangeEvent) { const { id, value } = event.target; setUser({ ...user, [id]: value }); } async function handleSubmit(event: FormEvent) { event.preventDefault(); try { setError(""); console.log("checkPassword:", passwordMatch()); console.log("user data", user); if (passwordMatch()) { const { password2, ...sUser } = user; setLoading(true); const res = await authApi.signup(sUser); console.log("서버연결됬나요", res); console.log("회원가입"); setSuccess(true); setError(""); } } catch (error) { console.log("에러발생"); catchErrors(error, setError); } finally { setLoading(false); } } function passwordMatch() { if (user.password !== user.password2) { setError("비밀번호가 일치하지않습니다"); console.log("password fail"); return false; } else { console.log("password match"); return true; } } if (success) { alert("회원가입 되었습니다"); return ; } return (
회원 가입
{error && (

{error}

)}
); };