Commit 4ff854ff authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

로그인에 로직 적용

parent a8cb6867
import React, { useState } from "react"; import React, { ChangeEvent, FormEvent, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { catchErrors } from "../helpers";
// type LoginProps = { import { SpinnerIcon } from "../icons";
import { useAuth } from "./auth.context";
// };
export const Login = () => { export const Login = () => {
// interface IUSER { const [error, setError] = useState("");
// email: string; const [loading, setLoading] = useState(false);
// password: string; const [loginData, setLoginData] = useState({ email: "", password: "" });
// } const navigate = useNavigate();
const { login } = useAuth();
// const [error, setError] = useState("");
// const [disabled, setDisabled] = useState(false);
// const [success, setSuccess] = useState(false);
// const navigate = useNavigate();
// function handleChange(event: type) {}
// function handleSubmit(params: type) {} function handleChange(e: ChangeEvent<HTMLInputElement>) {
const { name, value } = e.currentTarget;
setLoginData({ ...loginData, [name]: value });
}
// if (success) { async function handleSubmit(e: FormEvent) {
// alert("회원가입 되었습니다"); e.preventDefault();
// navigate(`../`); console.log(loginData);
// } const { email, password } = loginData;
try {
setLoading(true);
await login(email, password, () => navigate("/", { replace: true }));
} catch (error) {
setLoading(false);
catchErrors(error, setError);
}
}
return ( return (
<div className="flex justify-center mt-3"> <div className="flex justify-center mt-3">
<div className="flex flex-col space-y-4 mt-5 text-xl font-bold"> <form
onSubmit={handleSubmit}
className="flex flex-col space-y-4 mt-5 text-xl font-bold"
>
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3"> <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
이메일 이메일
</label> </label>
<input <input
onChange={handleChange}
className="shadow appearance-none border rounded py-2 px-3 text-gray-70" className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="email" name="email"
type="email" type="email"
autoComplete="username"
placeholder="이메일을 입력하세요" placeholder="이메일을 입력하세요"
value={loginData.email}
/> />
<label className="block text-gray-700 text-sm font-bold mb-2 mt-3"> <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
비밀번호 비밀번호
</label> </label>
<input <input
onChange={handleChange}
className="shadow appearance-none border rounded py-2 px-3 text-gray-70" className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
id="username" name="password"
type="password" type="password"
autoComplete="current-password"
placeholder="비밀번호를 입력하세요" placeholder="비밀번호를 입력하세요"
value={loginData.password}
/> />
{error && (
<div className="text-red-500 text-sm mb-6">
<p>{error}</p>
</div>
)}
<div className="text-center"> <div className="text-center">
<button className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"> <button
type="submit"
disabled={loading ? true : false}
className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-3"
>
{loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-white" />
)}
로그인 로그인
</button> </button>
</div> </div>
</div> </form>
</div> </div>
); );
}; };
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment