Signup.js 2.85 KB
Newer Older
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
1
import React, { useState, useEffect } from 'react'
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
2
3
4
5
import {  Col, Container, Form, Row, Button, Alert } from "react-bootstrap"
import axios from "axios"
import catchErrors from '../utils/catchErrors'
import { Redirect } from 'react-router-dom'
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
6
7
8
9
10

const INIT_USER = {
    name: '',
    email: '',
    password: ''
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
11
} // 초기유저에 이름, 이메일, 비밀번호를 빈배열로 지정한다.
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
12
13

function Signup() {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
14
    const [user, setUser] = useState(INIT_USER) 
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
15
16
17
18
19
20
21
22
    const [disabled, setDisabled] = useState(true)
    const [error, setError] = useState('')
    const [success, setSuccess] = useState(false)

    useEffect(() => {
        const isUser = Object.values(user).every(el => Boolean(el))
        isUser ? setDisabled(false) : setDisabled(true)
    }, [user])
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
23
    //바뀌는것이 있을때 이벤트가 발생하는 함수?
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
24
25
26
27
28
29
    function handleChange(event) {
        const {name, value} = event.target
        setUser({...user, [name]: value})
    }

    async function handleSubmit(event) {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
30
        event.preventDefault() //submit을 누르면 이벤트가 실행
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
31
        try {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
32
            setError('') //post로 경로를 지정해서 서버에서 값을 받는다
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
33
34
            const response = await axios.post('/api/users/signup', user)
            console.log(response.data)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
35
36
37
            console.log(user)
            // setUser(INIT_USER)
            setSuccess(true)
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
38
        } catch (error) {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
39
            console.log(error)
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
40
41
42
            catchErrors(error, setError)
        }
    }
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
43
    //성공시 알림창이 뜨고 원래 페이지로 돌아간다
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
44
    if (success) {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
45
        alert('회원가입 되었습니다.')
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
46
        return <Redirect to='/'/>
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
47
    } 
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

    return (
        <Container>
            <Row className= 'vh-100 flex-column align-items-center justify-content-center'>
            <h2>회원가입</h2>
                <Col md={5}>
            {error && <Alert variant='danger'>
                {error}
            </Alert>}
                <Form onSubmit={handleSubmit}>
                    <Form.Group>
                        <Form.Label>이름</Form.Label>              
                        <Form.Control name='name' value={user.name} onChange={handleChange}/>
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>이메일</Form.Label>
                        <Form.Control name='email' type='email'value={user.email} onChange={handleChange}/>
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>비밀번호</Form.Label>
                        <Form.Control name='password' type='password' value={user.password} onChange={handleChange}/>
                    </Form.Group>
                    <Button disabled={disabled} type='submit' block>확인</Button>
                </Form>
                </Col>
            </Row>
        </Container>
    )
}

Lee SeoYeon's avatar
0113    
Lee SeoYeon committed
78
export default Signup