diff --git a/frontend/src/auth/signup.tsx b/frontend/src/auth/signup.tsx
index 4f5473d0b3f2a5fad5908c9f06504df930f34210..3919dc2c328a759bea93607a040bf37d05f59516 100644
--- a/frontend/src/auth/signup.tsx
+++ b/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>
diff --git a/frontend/src/icons/SpinnerIcon.tsx b/frontend/src/icons/SpinnerIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9a38b25c68694e18cc9836f2b80193e1731a4c05
--- /dev/null
+++ b/frontend/src/icons/SpinnerIcon.tsx
@@ -0,0 +1,29 @@
+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>
+  );
+};
diff --git a/frontend/src/icons/index.ts b/frontend/src/icons/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e2f0b97a3dc371dcbe7d55a8bd4cb039b824088
--- /dev/null
+++ b/frontend/src/icons/index.ts
@@ -0,0 +1 @@
+export { SpinnerIcon } from "./SpinnerIcon";