Login.js 3.28 KB
Newer Older
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
1
import { useEffect, useState } from 'react'
2
import { Link, Redirect } from 'react-router-dom'
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
3
import userApi from '../apis/user.api'
Kim, Chaerin's avatar
Kim, Chaerin committed
4
5
import catchErrors from '../context/catchError'
import { handleLogin } from '../context/auth'
Kim, Chaerin's avatar
Kim, Chaerin committed
6
const INIT_USER = {
Kim, Chaerin's avatar
Kim, Chaerin committed
7
  userId: '9999',
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
8
9
10
  email: '',
  password: '',
}
Kim, Chaerin's avatar
Kim, Chaerin committed
11

Kim, Chaerin's avatar
Kim, Chaerin committed
12
const Login = () => {
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
13
14
15
16
  const [user, setUser] = useState(INIT_USER)
  const [disabled, setDisabled] = useState(true)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState(false)
Kim, Chaerin's avatar
Kim, Chaerin committed
17
  const [id, setId] = useState('')
Kim, Chaerin's avatar
Kim, Chaerin committed
18
19

  useEffect(() => {
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
20
21
22
    const isUser = Object.values(user).every((el) => Boolean(el))
    isUser ? setDisabled(false) : setDisabled(true)
  }, [user])
Kim, Chaerin's avatar
Kim, Chaerin committed
23
24

  function handleChange(event) {
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
25
26
    const { name, value } = event.target
    setUser({ ...user, [name]: value })
Kim, Chaerin's avatar
Kim, Chaerin committed
27
28
  }

Kim, Chaerin's avatar
.    
Kim, Chaerin committed
29
  async function handleSubmit(e) {
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
30
    e.preventDefault()
Kim, Chaerin's avatar
Kim, Chaerin committed
31
32
33
    try {
      // setLoading(true);
      // setError("");
Kim, Chaerin's avatar
Kim, Chaerin committed
34
      console.log('user정보:', user)
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
35
36
      const data = await userApi.login(user)
      console.log(data)
Kim, Chaerin's avatar
Kim, Chaerin committed
37
      setId(data.id)
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
38
39
      handleLogin(data.id)
      setSuccess(true)
Kim, Chaerin's avatar
Kim, Chaerin committed
40
    } catch (error) {
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
41
42
      console.log('error in login', error)
      catchErrors(error, setError)
Kim, Chaerin's avatar
Kim, Chaerin committed
43
44
45
46
    } finally {
      // setLoading(false);
    }
  }
seoyeon's avatar
0716    
seoyeon committed
47
  if (success) {
seoyeon's avatar
0804    
seoyeon committed
48
    alert('로그인 되었습니다')
49
    return <Redirect to={`/user/${id}`} />;
seoyeon's avatar
0716    
seoyeon committed
50
51
  }

Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
52
  const { email, password } = user
Kim, Chaerin's avatar
Kim, Chaerin committed
53
54

  return (
seoyeon's avatar
0804    
seoyeon committed
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
    <div>
      <div>
        <form
          style={{ backgroundColor: '#FCF4FF' }}
          className="flex-column align-items-center justify-content-center p-2"
        >
          <div className="d-flex justify-content-center">
            <Link to="/">
              <img src="/BORA.png" style={{ width: '160px' }} />
            </Link>
          </div>
        </form>
      </div>
      <div
        style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
      ></div>
      <div className="container">
        <form onSubmit={handleSubmit}>
Kim, Chaerin's avatar
Kim, Chaerin committed
73
        <div className="row mt-5 d-flex align-items-center">
seoyeon's avatar
0804    
seoyeon committed
74
          <h5 style={{ textAlign: 'center' }}>로그인</h5>
Kim, Chaerin's avatar
Kim, Chaerin committed
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
          {error && <div className="alert alert-danger">{error}</div>}
          <div className="form-group">
            <div className="mt-5">
              <label>아이디</label>
              <input
                className="form-control"
                id="email"
                type="text"
                name="email"
                placeholder="아이디를 입력하세요"
                value={email}
                onChange={handleChange}
              />
            </div>
            <div className="mt-3">
              <label>비밀번호</label>
              <input
                className="form-control"
                id="password"
                type="password"
                name="password"
                placeholder="비밀번호를 입력하세요"
                value={password}
                onChange={handleChange}
              />
            </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
101
          </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
102
103
104
105
106
107
108
109
          <div className="mt-4 d-flex justify-content-center">
            <button
              type="submit"
              className="btn btn-primary"
              disabled={disabled}
            >
              로그인
            </button>
Kim, Chaerin's avatar
Kim, Chaerin committed
110
111
112
          </div>
        </div>
      </form>
seoyeon's avatar
0804    
seoyeon committed
113
      </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
114
    </div>
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
115
116
  )
}
Kim, Chaerin's avatar
Kim, Chaerin committed
117

Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
118
export default Login