Login.js 3 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
6
import { Alert, Col, Container, Form, Row, Button, Spinner } from "react-bootstrap"
import axios from "axios"
import catchErrors from '../utils/catchErrors'
import { Redirect } from 'react-router-dom'
import { handleLogin } from '../utils/auth'
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
7
8
9
10
11


const INIT_USER = {
    email: '',
    password: ''
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
12
}  //초기 유저에 이메일 비밀번호 설정
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
13
14

function Login() {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
15
    //const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
16
17
18
19
20
21
    const [user, setUser] = useState(INIT_USER)
    const [disabled, setDisabled] = useState(true)
    const [error, setError] = useState('')
    const [success, setSuccess] = useState(false)
    const [loading, setLoading] = useState(false)

Lee SeoYeon's avatar
.    
Lee SeoYeon committed
22
    useEffect(() => { //참거짓 판단 값들의 원소들이 element로 들어간다 
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
23
        const isUser = Object.values(user).every(el => Boolean(el))
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
24
        isUser ? setDisabled(false) : setDisabled(true) 
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
25
26
27
    }, [user])

    function handleChange(event) {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
28
29
        const {name, value} = event.target //{}안에 값을 이벤트.타겟에 지정?한다
        setUser({...user, [name]: value}) 
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
30
31
32
    }

    async function handleSubmit(event) {
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
33
        event.preventDefault() //리셋을 막는다
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
34
35
        try {
            setLoading(true)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
36
            setError('') //값을 배열로 설정
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
37
38
            const response = await axios.post('/api/auth/login', user)
            console.log(response.data)
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
39
            handleLogin(response.data.userId)//로그인했을때 userid data를 넣는다
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
40
41
42
43
44
45
46
47
48
            setSuccess(true)
        } catch (error) {
            catchErrors(error, setError)
        } finally {
            setLoading(false)
        }
    }

    if (success) {
baesangjune's avatar
baesangjune committed
49
        alert("로그인되었습니다.")
Lee SeoYeon's avatar
.    
Lee SeoYeon committed
50
        return <Redirect to= '/'/> //성공하면 홈화면으로 간다
Lee SeoYeon's avatar
0111    
Lee SeoYeon committed
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
78
79
80
81
    }

    return (
        <Container>
            <Row className= 'vh-100 flex-column align-items-center justify-content-center'>
            <h2>로그인</h2>
                <Col md={6}>
            {error && <Alert variant='danger'>
                {error}
            </Alert>}
                <Form onSubmit={handleSubmit}>
                    <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 || setLoading} type='submit' 
                    block>
                        {loading && <Spinner as= 'span' animation= 'border' size='sm' 
                        role= 'status' aria-hidden=  'true' />}{' '}확인</Button>
                </Form>
                </Col>
            </Row>
        </Container>
    )
}

export default Login