Commit 7835a992 authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

로그인 스타일 변경

parent 78ff3dc0
...@@ -3,6 +3,7 @@ import React, { useState, useEffect, FormEvent } from "react"; ...@@ -3,6 +3,7 @@ import React, { useState, useEffect, FormEvent } from "react";
import { LoginUser } from "../types"; import { LoginUser } from "../types";
import { catchErrors } from "../helpers"; import { catchErrors } from "../helpers";
import { useAuth } from "./auth.context"; import { useAuth } from "./auth.context";
import { SpinnerIcon } from "../icons";
export default function Login() { export default function Login() {
const [user, setUser] = useState<LoginUser>({ const [user, setUser] = useState<LoginUser>({
...@@ -32,17 +33,14 @@ export default function Login() { ...@@ -32,17 +33,14 @@ export default function Login() {
setError(""); setError("");
console.log("user data", user); console.log("user data", user);
// setLoading(true); setLoading(true);
await login(user.email, user.password, () => { await login(user.email, user.password, () => {
navigate("/", { replace: true }); navigate("/", { replace: true });
}); });
// console.log("서버연결됬나요", res); // console.log("서버연결됬나요", res);
// console.log("로그인"); // console.log("로그인");
// setSuccess(true);
// setError("");
} catch (error) { } catch (error) {
console.log("에러발생"); console.log("에러발생");
// setError("이메일 혹은 비밀번호를 다시 입력해주세요.");
catchErrors(error, setError); catchErrors(error, setError);
} finally { } finally {
setLoading(false); setLoading(false);
...@@ -54,14 +52,16 @@ export default function Login() { ...@@ -54,14 +52,16 @@ export default function Login() {
<div className="bg-white w-1/2 md:w-1/3 my-8 text-center text-2xl"> <div className="bg-white w-1/2 md:w-1/3 my-8 text-center text-2xl">
<Link to="/">Travel Report</Link> <Link to="/">Travel Report</Link>
</div> </div>
<div className="flex flex-col w-full md:w-1/3 p-8 md:p-4 md:p-0"> <div className="flex flex-col w-full md:w-2/5 p-8 md:p-4">
<form onSubmit={handleSubmit}> <form
<div className="flex flex-col md:flex-row border-2 border-black rounded-xl p-8 md:p-12 gap-y-4 md:gap-x-6"> onSubmit={handleSubmit}
<div className="flex flex-col md:w-2/3 md:gap-2 "> 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 <input
className="placeholder:text-slate-300 className="placeholder:text-slate-300
bg-white border border-slate-500 md:rounded-2xl bg-white border border-slate-500 rounded-2xl
my-2 py-3 md:py-2 pl-9 pr-3 py-3 md:py-2 pl-9 pr-3
focus:border-black focus:border-black
" "
placeholder="이메일" placeholder="이메일"
...@@ -72,7 +72,7 @@ export default function Login() { ...@@ -72,7 +72,7 @@ export default function Login() {
<input <input
className="placeholder:italic placeholder:text-slate-300 className="placeholder:italic placeholder:text-slate-300
bg-white border border-slate-500 md:rounded-2xl bg-white border border-slate-500 rounded-2xl
py-3 md:py-2 pl-9 pr-3 py-3 md:py-2 pl-9 pr-3
focus:border-black focus:border-black
" "
...@@ -85,12 +85,21 @@ export default function Login() { ...@@ -85,12 +85,21 @@ export default function Login() {
<button <button
disabled={disabled} disabled={disabled}
type="submit" type="submit"
className="my-4 md:my-0 md:w-1/3 bg-sky-600 hover:bg-sky-700 rounded-xl text-xl py-4" className="my-4 md:my-0 bg-sky-600 hover:bg-sky-700 rounded-xl text-xl py-4 md:px-4"
> >
login {" "}
{loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
)}
로그인
</button> </button>
</div>
</form> </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"> <div className="flex justify-around m-4">
<button className="bg-white "> <button className="bg-white ">
<Link to="/signup">회원가입</Link> <Link to="/signup">회원가입</Link>
...@@ -105,5 +114,6 @@ export default function Login() { ...@@ -105,5 +114,6 @@ export default function Login() {
</div> </div>
</div> </div>
</div> </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