Login.js 2.48 KB
Newer Older
Kim, Chaerin's avatar
Kim, Chaerin committed
1
import { useEffect, useState } from "react";
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
2
import { Redirect } from "react-router-dom";
3
import userApi from "../apis/user.api";
Kim, Chaerin's avatar
Kim, Chaerin committed
4
const INIT_USER = {
Kim, Chaerin's avatar
Kim, Chaerin committed
5
  email: "",
Kim, Chaerin's avatar
Kim, Chaerin committed
6
7
8
  password: "",
};

Kim, Chaerin's avatar
Kim, Chaerin committed
9
const Login = () => {
Kim, Chaerin's avatar
Kim, Chaerin committed
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  //   const { error, loading, login } = useAuth();
  const [user, setUser] = useState(INIT_USER);
  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]);

  function handleChange(event) {
    const { name, value } = event.target;
    setUser({ ...user, [name]: value });
  }

Kim, Chaerin's avatar
.    
Kim, Chaerin committed
26
27
  async function handleSubmit(e) {
    e.preventDefault();
Kim, Chaerin's avatar
Kim, Chaerin committed
28
29
30
    try {
      // setLoading(true);
      // setError("");
31
      const data = await userApi.login(user);
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
32
33
      console.log(data);
      setSuccess(true);
Kim, Chaerin's avatar
Kim, Chaerin committed
34
35
36
37
38
39
    } catch (error) {
      // catchErrors(error, setError);
    } finally {
      // setLoading(false);
    }
  }
Kim, Chaerin's avatar
.    
Kim, Chaerin committed
40
41
42
  if (success) {
    return <Redirect to="/user" />;
  }
Kim, Chaerin's avatar
Kim, Chaerin committed
43

Kim, Chaerin's avatar
Kim, Chaerin committed
44
  const { email, password } = user;
Kim, Chaerin's avatar
Kim, Chaerin committed
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

  return (
    <div className="modal-content">
      <form onSubmit={handleSubmit}>
        <div className="modal-header">
          <h5 className="modal-title" id="loginModalLabel">
            로그인
          </h5>
          <button
            type="button"
            className="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div className="modal-body">
          <div>
            <label>아이디</label>
            <input
              className="form-control"
Kim, Chaerin's avatar
Kim, Chaerin committed
65
              id="email"
Kim, Chaerin's avatar
Kim, Chaerin committed
66
              type="text"
Kim, Chaerin's avatar
Kim, Chaerin committed
67
              name="email"
Kim, Chaerin's avatar
Kim, Chaerin committed
68
              placeholder="아이디를 입력하세요"
Kim, Chaerin's avatar
Kim, Chaerin committed
69
              value={email}
Kim, Chaerin's avatar
Kim, Chaerin committed
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
              onChange={handleChange}
            />
          </div>
          <div>
            <label>비밀번호</label>
            <input
              className="form-control"
              id="password"
              type="password"
              name="password"
              placeholder="비밀번호를 입력하세요"
              value={password}
              onChange={handleChange}
            />
          </div>
        </div>
        <div className="modal-footer">
          <button type="submit" className="btn btn-primary" disabled={disabled}>
            로그인
          </button>
Kim, Chaerin's avatar
Kim, Chaerin committed
90
        </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
91
92
93
      </form>
    </div>
  );
Kim, Chaerin's avatar
Kim, Chaerin committed
94
95
96
};

export default Login;