Login.tsx 3.67 KB
Newer Older
Yoon, Daeki's avatar
Yoon, Daeki committed
1
import React, { ChangeEvent, FormEvent, useState } from "react";
Jiwon Yoon's avatar
Jiwon Yoon committed
2
import { Link, useLocation, useNavigate } from "react-router-dom";
Yoon, Daeki's avatar
Yoon, Daeki committed
3
4
5
import { catchErrors } from "../helpers";
import { SpinnerIcon } from "../icons";
import { useAuth } from "./auth.context";
6
7
8
import { REST_API_KEY, REDIRECT_URI } from "../auth";
// import { authApi } from "../apis";
import KakaoLoginImg from "../icons/kakao_login_medium_wide.png";
9

10
11
12
13
interface LocationState {
  state: { from: string };
}

Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
14
export const Login = () => {
Yoon, Daeki's avatar
Yoon, Daeki committed
15
16
17
18
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [loginData, setLoginData] = useState({ email: "", password: "" });
  const navigate = useNavigate();
19
  const location = useLocation() as LocationState;
Yoon, Daeki's avatar
Yoon, Daeki committed
20
  const { login } = useAuth();
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
21

Yoon, Daeki's avatar
Yoon, Daeki committed
22
  const from = location.state?.from || "/";
23

Yoon, Daeki's avatar
Yoon, Daeki committed
24
25
26
27
  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    const { name, value } = e.currentTarget;
    setLoginData({ ...loginData, [name]: value });
  }
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
28

Yoon, Daeki's avatar
Yoon, Daeki committed
29
30
31
32
33
  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    const { email, password } = loginData;
    try {
      setLoading(true);
34
      await login(email, password, () => navigate(from, { replace: true }));
Yoon, Daeki's avatar
Yoon, Daeki committed
35
36
37
38
39
    } catch (error) {
      setLoading(false);
      catchErrors(error, setError);
    }
  }
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
40

41
42
43
44
45
46
47
48
49
50
51
52
53
54
  // async function kakaoLogin() {
  //   try {
  //     // await authApi.kakaoLogin();
  //     console.log("성공?");
  //   } catch (error) {
  //     setLoading(false);
  //     catchErrors(error, setError);
  //   }
  // }

  const kakaoLogin = () => {
    window.location.href = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
  };

Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
55
  return (
Jiwon Yoon's avatar
Jiwon Yoon committed
56
    <div className="flex flex-col items-center">
Lee SeoYeon's avatar
Lee SeoYeon committed
57
      <div className="text-2xl mt-20">로그인</div>
Lee SeoYeon's avatar
0708    
Lee SeoYeon committed
58
      <form onSubmit={handleSubmit} className="flex flex-col mt-3 w-80">
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
59
60
61
62
        <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
          이메일
        </label>
        <input
Yoon, Daeki's avatar
Yoon, Daeki committed
63
          onChange={handleChange}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
64
          className="shadow appearance-none border rounded  py-2 px-3 text-gray-70"
Yoon, Daeki's avatar
Yoon, Daeki committed
65
          name="email"
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
66
          type="email"
Yoon, Daeki's avatar
Yoon, Daeki committed
67
          autoComplete="username"
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
68
          placeholder="이메일을 입력하세요"
Yoon, Daeki's avatar
Yoon, Daeki committed
69
          value={loginData.email}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
70
71
72
73
74
75
        />

        <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
          비밀번호
        </label>
        <input
Yoon, Daeki's avatar
Yoon, Daeki committed
76
          onChange={handleChange}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
77
          className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
Yoon, Daeki's avatar
Yoon, Daeki committed
78
          name="password"
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
79
          type="password"
Yoon, Daeki's avatar
Yoon, Daeki committed
80
          autoComplete="current-password"
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
81
          placeholder="비밀번호를 입력하세요"
Yoon, Daeki's avatar
Yoon, Daeki committed
82
          value={loginData.password}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
83
        />
Yoon, Daeki's avatar
Yoon, Daeki committed
84
        {error && (
85
          <div className="text-red-500 text-sm mt-3">
Yoon, Daeki's avatar
Yoon, Daeki committed
86
87
88
            <p>{error}</p>
          </div>
        )}
Jiwon Yoon's avatar
Jiwon Yoon committed
89
90
91
92
        <div className="flex justify-center items-center mt-3">
          {loading && (
            <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-themeColor" />
          )}
Yoon, Daeki's avatar
Yoon, Daeki committed
93
94
95
          <button
            type="submit"
            disabled={loading ? true : false}
Jiwon Yoon's avatar
Jiwon Yoon committed
96
            className="bg-themeColor text-white border rounded w-full py-2 px-3"
Yoon, Daeki's avatar
Yoon, Daeki committed
97
          >
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
98
99
100
            로그인
          </button>
        </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
101
102
103
104
105
106
        <div className="flex justify-between mt-4">
          <p className="text-sm">회원이 아니십니까?</p>
          <Link to={"/signup"} className="text-sm text-themeColor">
            회원가입 →
          </Link>
        </div>
Yoon, Daeki's avatar
Yoon, Daeki committed
107
      </form>
108
109
110
111
112
      <div>
        <button type="button" onClick={kakaoLogin}>
          <img src={KakaoLoginImg} className="my-2"></img>
        </button>
      </div>
Jiwon Yoon's avatar
Jiwon Yoon committed
113
    </div>
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
114
115
  );
};