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";
import { LoginUser } from "../types";
import { catchErrors } from "../helpers";
import { useAuth } from "./auth.context";
import { SpinnerIcon } from "../icons";
export default function Login() {
const [user, setUser] = useState<LoginUser>({
......@@ -32,17 +33,14 @@ export default function Login() {
setError("");
console.log("user data", user);
// setLoading(true);
setLoading(true);
await login(user.email, user.password, () => {
navigate("/", { replace: true });
});
// console.log("서버연결됬나요", res);
// console.log("로그인");
// setSuccess(true);
// setError("");
} catch (error) {
console.log("에러발생");
// setError("이메일 혹은 비밀번호를 다시 입력해주세요.");
catchErrors(error, setError);
} finally {
setLoading(false);
......@@ -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">
<Link to="/">Travel Report</Link>
</div>
<div className="flex flex-col w-full md:w-1/3 p-8 md:p-4 md:p-0">
<form onSubmit={handleSubmit}>
<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">
<div className="flex flex-col md:w-2/3 md:gap-2 ">
<div className="flex flex-col w-full md:w-2/5 p-8 md:p-4">
<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 md:rounded-2xl
my-2 py-3 md:py-2 pl-9 pr-3
bg-white border border-slate-500 rounded-2xl
py-3 md:py-2 pl-9 pr-3
focus:border-black
"
placeholder="이메일"
......@@ -72,7 +72,7 @@ export default function Login() {
<input
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
focus:border-black
"
......@@ -85,12 +85,21 @@ export default function Login() {
<button
disabled={disabled}
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>
</div>
</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>
......@@ -105,5 +114,6 @@ export default function Login() {
</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