로그인 스타일 변경

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,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>
   );
 }