로그인 스타일 변경

frontend/src/auth/login.tsx

@@ -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,54 +52,66 @@ 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 ">
-              <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 
+      <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 rounded-2xl
+                py-3 md:py-2 pl-9 pr-3 
                 focus:border-black
                 "
-                placeholder="이메일"
-                type="email"
-                name="email"
-                onChange={handleChange}
-              />
+              placeholder="이메일"
+              type="email"
+              name="email"
+              onChange={handleChange}
+            />
 
-              <input
-                className="placeholder:italic placeholder:text-slate-300
-                bg-white border border-slate-500 md:rounded-2xl
+            <input
+              className="placeholder:italic placeholder:text-slate-300
+                bg-white border border-slate-500 rounded-2xl
                 py-3 md:py-2 pl-9 pr-3 
                 focus:border-black
                 "
-                placeholder="Password"
-                type="password"
-                name="password"
-                onChange={handleChange}
-              />
-            </div>
-            <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"
-            >
-              login
-            </button>
+              placeholder="Password"
+              type="password"
+              name="password"
+              onChange={handleChange}
+            />
           </div>
-        </form>
-        <div className="flex justify-around m-4">
-          <button className="bg-white ">
-            <Link to="/signup">회원가입</Link>
+          <button
+            disabled={disabled}
+            type="submit"
+            className="my-4 md:my-0 bg-sky-600 hover:bg-sky-700 rounded-xl text-xl py-4 md:px-4"
+          >
+            {" "}
+            {loading && (
+              <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
+            )}
+            로그인
           </button>
-          <div className="grid grid-cols-2 divide-x-2">
-            <div></div>
-            <div></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>
+            </button>
+            <div className="grid grid-cols-2 divide-x-2">
+              <div></div>
+              <div></div>
+            </div>
+            <button className="bg-white">
+              <Link to="/forgot">비밀번호 찾기</Link>
+            </button>
           </div>
-          <button className="bg-white">
-            <Link to="/forgot">비밀번호 찾기</Link>
-          </button>
         </div>
       </div>
     </div>