login.tsx 3.66 KB
Newer Older
1
2
3
4
5
import { Link, useNavigate } from "react-router-dom";
import React, { useState, useEffect, FormEvent } from "react";
import { LoginUser } from "../types";
import { catchErrors } from "../helpers";
import { useAuth } from "./auth.context";
Yoon, Daeki's avatar
Yoon, Daeki committed
6
import { SpinnerIcon } from "../icons";
Kim, MinGyu's avatar
처음    
Kim, MinGyu committed
7

8
9
10
11
12
13
14
15
16
17
18
19
export default function Login() {
  const [user, setUser] = useState<LoginUser>({
    email: "",
    password: "",
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [disabled, setDisabled] = useState(false);
  const [success, setSuccess] = useState(false);
  const navigate = useNavigate();
  const { login } = useAuth();
Kim, MinGyu's avatar
signup    
Kim, MinGyu committed
20

21
22
23
  useEffect(() => {
    setDisabled(!(user.email && user.password));
  }, [user]);
Kim, MinGyu's avatar
Kim, MinGyu committed
24

25
26
27
28
  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    const { name, value } = event.currentTarget;
    setUser({ ...user, [name]: value });
  }
Kim, MinGyu's avatar
Kim, MinGyu committed
29

30
31
32
33
34
  async function handleSubmit(event: FormEvent) {
    event.preventDefault();
    try {
      setError("");
      console.log("user data", user);
Kim, MinGyu's avatar
Kim, MinGyu committed
35

Yoon, Daeki's avatar
Yoon, Daeki committed
36
      setLoading(true);
37
      await login(user.email, user.password, () => {
백승민's avatar
백승민 committed
38
39
40

        navigate("/", { replace: true });

41
42
43
44
45
46
47
48
49
      });
      // console.log("서버연결됬나요", res);
      // console.log("로그인");
    } catch (error) {
      console.log("에러발생");
      catchErrors(error, setError);
    } finally {
      setLoading(false);
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
50
  }
51

Kim, MinGyu's avatar
Kim, MinGyu committed
52
  return (
53
54
    <div className="flex flex-col items-center my-10">
      <div className="bg-white w-1/2 md:w-1/3 my-8 text-center text-2xl">
Kim, MinGyu's avatar
Kim, MinGyu committed
55
        <Link to="/">로그인</Link>
56
      </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
57
      <div className="flex flex-col w-full md:w-3/5 p-8 md:p-4">
Yoon, Daeki's avatar
Yoon, Daeki committed
58
59
60
61
62
63
64
65
66
        <form
          onSubmit={handleSubmit}
          className="flex flex-col md:flex-row md:justify-around border-2 border-black rounded-xl p-8 gap-y-4"
        >
          <div className="flex flex-col md:w-2/3 gap-2">
            <input
              className="placeholder:text-slate-300
                bg-white border border-slate-500 rounded-2xl
                py-3 md:py-2 pl-9 pr-3 
Kim, MinGyu's avatar
Kim, MinGyu committed
67
68
                focus:border-black
                "
Yoon, Daeki's avatar
Yoon, Daeki committed
69
70
71
72
73
              placeholder="이메일"
              type="email"
              name="email"
              onChange={handleChange}
            />
74

Yoon, Daeki's avatar
Yoon, Daeki committed
75
76
77
            <input
              className="placeholder:italic placeholder:text-slate-300
                bg-white border border-slate-500 rounded-2xl
78
                py-3 md:py-2 pl-9 pr-3 
Kim, MinGyu's avatar
Kim, MinGyu committed
79
80
                focus:border-black
                "
Yoon, Daeki's avatar
Yoon, Daeki committed
81
82
83
84
85
              placeholder="Password"
              type="password"
              name="password"
              onChange={handleChange}
            />
86
          </div>
Yoon, Daeki's avatar
Yoon, Daeki committed
87
88
89
          <button
            disabled={disabled}
            type="submit"
Kim, MinGyu's avatar
Kim, MinGyu committed
90
            className="my-4 md:my-0 bg-sky-500 hover:bg-sky-400 rounded-xl text-xl py-4 md:px-4 text-white"
Yoon, Daeki's avatar
Yoon, Daeki committed
91
92
93
94
95
96
          >
            {" "}
            {loading && (
              <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
            )}
            로그인
97
          </button>
Yoon, Daeki's avatar
Yoon, Daeki committed
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
        </form>
        <div className="flex flex-col">
          {error && (
            <div className="mt-2 text-center text-red-500 text-sm">
              <p>{error}</p>
            </div>
          )}
          <div className="flex justify-around m-4">
            <button className="bg-white ">
              <Link to="/signup">회원가입</Link>
            </button>
            <div className="grid grid-cols-2 divide-x-2">
              <div></div>
              <div></div>
            </div>
            <button className="bg-white">
              <Link to="/forgot">비밀번호 찾기</Link>
            </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
116
117
118
          </div>
        </div>
      </div>
119
    </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
120
121
  );
}