SignUpPage.js 5.57 KB
Newer Older
우지원's avatar
우지원 committed
1
import React, { useState, useEffect } from 'react';
우지원's avatar
01_06    
우지원 committed
2
import axios from 'axios'
3
import { Button, Form, Container, Alert, Navbar } from 'react-bootstrap';
우지원's avatar
01_06    
우지원 committed
4
import catchErrors from '../utils/catchErrors';
우지원's avatar
우지원 committed
5
import { Redirect } from 'react-router-dom';
우지원's avatar
우지원 committed
6
import Menu from '../Components/Menu';
우지원's avatar
우지원 committed
7
8
9
10
11
12
13

const INIT_USER = {
    username: '',
    nickname: '',
    email: '',
    password: '',
}
우지원's avatar
ul    
우지원 committed
14
15

function SingUp() {
우지원's avatar
우지원 committed
16
    //const [validated, setValidated] = useState(false);
우지원's avatar
우지원 committed
17
18
19
    const [user, setUser] = useState(INIT_USER)
    const [error, setError] = useState('')
    const [disabled, setDisabled] = useState(true)
우지원's avatar
수정    
우지원 committed
20
    const [success, setSuccess] = useState(false)
우지원's avatar
우지원 committed
21
22
23
24
25
26
27
28
29
30
31
32
33

    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();
우지원's avatar
ul    
우지원 committed
34

우지원's avatar
01_06    
우지원 committed
35
        //빈문자열 입력 시 오류 문자 출력
우지원's avatar
우지원 committed
36
37
38
39
40
41
42
        //const form = event.currentTarget;
        //if (form.checkValidity() === false) {
        //    event.preventDefault();
        //    event.stopPropagation();
        //    //event.stopPropagation() : 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.
        //}
        //setValidated(true);
43
        // console.log(user)
우지원's avatar
우지원 committed
44
45
46

        try {
            setError('')
우지원's avatar
01_06    
우지원 committed
47
            await axios.post('/users/signup', user)
우지원's avatar
수정    
우지원 committed
48
            setSuccess(true)
우지원's avatar
우지원 committed
49
        } catch (error) {
우지원's avatar
01_06    
우지원 committed
50
            catchErrors(error, setError)
우지원's avatar
a    
우지원 committed
51
52
53
        }
    }

우지원's avatar
우지원 committed
54
55
    if (success) {
        console.log('success', success)
우지원's avatar
우지원 committed
56
        alert('회원가입이 완료되었습니다!')
우지원's avatar
우지원 committed
57
58
        return <Redirect to='/login' />
    }
우지원's avatar
01_06    
우지원 committed
59
60


우지원's avatar
ul    
우지원 committed
61
    return (
62
        <>
우지원's avatar
우지원 committed
63
            <Menu />
우지원's avatar
01_06    
우지원 committed
64

우지원's avatar
우지원 committed
65
            <Form onSubmit={handleSubmit} className='vh-100 flex-column align-items-center justify-content-center mt-2'>
우지원's avatar
01_06    
우지원 committed
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
                <Container className="d-flex justify-content-center">
                    <div className="mt-5 p-5 shadow w-75">

                        <h2 className="text-center ">회원가입</h2>

                        <Form.Group controlId="formGroupUsername">
                            <Form.Label>이름</Form.Label>
                            <Form.Control
                                required
                                type="text"
                                name="username"
                                onChange={handleChange}
                                value={user.username}
                                placeholder="이름을 입력해주세요" />
                            <Form.Control.Feedback type="invalid">
                                필수 정보입니다! 이름을 입력해주세요!
우지원's avatar
ul    
우지원 committed
82
                            </Form.Control.Feedback>
우지원's avatar
01_06    
우지원 committed
83
84
85
86
87
88
89
90
91
92
93
94
95
                        </Form.Group>

                        <Form.Group controlId="formGroupNickname">
                            <Form.Label>별명</Form.Label>
                            <Form.Control
                                required
                                type="text"
                                name="nickname"
                                onChange={handleChange}
                                value={user.nickname}
                                placeholder="별명을 입력해주세요" />
                            <Form.Control.Feedback type="invalid">
                                필수 정보입니다! 별명을 입력해주세요!
우지원's avatar
ul    
우지원 committed
96
                            </Form.Control.Feedback>
우지원's avatar
01_06    
우지원 committed
97
98
99
100
101
102
103
104
105
106
107
108
109
                        </Form.Group>

                        <Form.Group controlId="formGroupEmail">
                            <Form.Label>이메일</Form.Label>
                            <Form.Control
                                required
                                type="email"
                                name="email"
                                onChange={handleChange}
                                value={user.email}
                                placeholder="이메일을 입력해주세요" />
                            <Form.Control.Feedback type="invalid">
                                필수 정보입니다! 이메일을 입력해주세요!
우지원's avatar
a    
우지원 committed
110
                            </Form.Control.Feedback>
우지원's avatar
01_06    
우지원 committed
111
112
113
114
115
116
117
118
119
120
121
122
123
                        </Form.Group>

                        <Form.Group controlId="formGroupPassword">
                            <Form.Label>비밀번호</Form.Label>
                            <Form.Control
                                required
                                type="password"
                                name="password"
                                onChange={handleChange}
                                value={user.password}
                                placeholder="비밀번호를 입력해주세요" />
                            <Form.Control.Feedback type="invalid">
                                필수 정보입니다! 비밀번호를 입력해주세요!
우지원's avatar
ul    
우지원 committed
124
                            </Form.Control.Feedback>
우지원's avatar
01_06    
우지원 committed
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
                        </Form.Group>

                        <Button
                            disabled={disabled}
                            type='submit'
                            variant="outline-success"
                            size="lg"
                            className="mr-4"
                            block>가입</Button>
                        {error && <Alert variant='danger'>
                            {error}
                        </Alert>}
                    </div>
                </Container>
            </Form>
140
        </>
우지원's avatar
ul    
우지원 committed
141
142
143
144
    )
}

export default SingUp