import React, { useState, useEffect } from 'react'; import axios from 'axios' import { Button, Form, Container, Alert, Navbar } from 'react-bootstrap'; import catchErrors from '../utils/catchErrors'; import { Redirect } from 'react-router-dom'; import Menu from '../Components/Menu'; const INIT_USER = { username: '', nickname: '', email: '', password: '', } function SingUp() { //const [validated, setValidated] = useState(false); const [user, setUser] = useState(INIT_USER) const [error, setError] = useState('') const [disabled, setDisabled] = useState(true) const [success, setSucces] = useState(false) useEffect(() => { const isUser = Object.values(user).every(el => Boolean(el)) isUser ? setDisabled(false) : setDisabled(true) }, [user]) function handleChange(event) { const { name, value } = event.target setUser({ ...user, [name]: value }) } async function handleSubmit(event) { event.preventDefault(); //빈문자열 입력 시 오류 문자 출력 //const form = event.currentTarget; //if (form.checkValidity() === false) { // event.preventDefault(); // event.stopPropagation(); // //event.stopPropagation() : 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다. //} //setValidated(true); // console.log(user) try { setError('') await axios.post('/users/signup', user) alert("회원가입이 완료되었습니다!") setSucces(true) } catch (error) { catchErrors(error, setError) } } if (success) { console.log('success', success) alert('회원가입이 완료되었습니다!') return } return ( <>

회원가입

이름 필수 정보입니다! 이름을 입력해주세요! 별명 필수 정보입니다! 별명을 입력해주세요! 이메일 필수 정보입니다! 이메일을 입력해주세요! 비밀번호 필수 정보입니다! 비밀번호를 입력해주세요! {error && {error} }
) } export default SingUp