로딩 스피너 추가

frontend/src/auth/signup.tsx

@@ -2,6 +2,7 @@ import React, { FormEvent, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { authApi } from "../apis";
 import { catchErrors } from "../helpers";
+import { SpinnerIcon } from "../icons";
 import { SignupUser } from "../types";
 
 export default function Signup() {
@@ -24,17 +25,18 @@ export default function Signup() {
 
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     const { name, value } = event.currentTarget;
-    console.log(`name: ${name}, value: ${value}`);
     setUser({ ...user, [name]: value });
   }
 
   async function handleSubmit(event: FormEvent) {
     event.preventDefault();
     try {
+      setError("");
       console.log("checkPassword:", passwordMatch());
       console.log("user data", user);
       if (passwordMatch()) {
         const { password2, ...sUser } = user;
+        setLoading(true);
         const res = await authApi.signup(sUser);
         console.log("서버연결됬나요", res);
         console.log("회원가입");
@@ -51,7 +53,8 @@ export default function Signup() {
 
   function passwordMatch() {
     if (user.password !== user.password2) {
-      alert("비밀번호가 일치하지않습니다");
+      // alert();
+      setError("비밀번호가 일치하지않습니다");
       console.log("password fail");
       return false;
     } else {
@@ -98,7 +101,6 @@ export default function Signup() {
           placeholder="비밀번호"
           type="password"
           name="password"
-          // value={password}
           onChange={handleChange}
         />
 
@@ -110,13 +112,17 @@ export default function Signup() {
           placeholder="비밀번호 확인"
           type="password"
           name="password2"
-          // value={password}
           onChange={handleChange}
         />
-        <button
-          disabled={disabled}
-          className="place-self-center py-3 border-b border-white"
-        >
+        {error && (
+          <div className="text-red-500 text-sm">
+            <p>{error}</p>
+          </div>
+        )}
+        <button disabled={disabled} className="border-b border-white">
+          {loading && (
+            <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
+          )}
           회원가입
         </button>
       </form>

frontend/src/icons/SpinnerIcon.tsx

+import React, { FC, ReactNode } from "react";
+
+export const SpinnerIcon = ({ ...props }) => {
+  return (
+    // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+    //   <path d="M222.7 32.15C227.7 49.08 218.1 66.9 201.1 71.94C121.8 95.55 64 169.1 64 255.1C64 362 149.1 447.1 256 447.1C362 447.1 448 362 448 255.1C448 169.1 390.2 95.55 310.9 71.94C293.9 66.9 284.3 49.08 289.3 32.15C294.4 15.21 312.2 5.562 329.1 10.6C434.9 42.07 512 139.1 512 255.1C512 397.4 397.4 511.1 256 511.1C114.6 511.1 0 397.4 0 255.1C0 139.1 77.15 42.07 182.9 10.6C199.8 5.562 217.6 15.21 222.7 32.15V32.15z" />
+    // </svg>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth={4}
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+};

frontend/src/icons/index.ts

+export { SpinnerIcon } from "./SpinnerIcon";