diff --git a/package-lock.json b/package-lock.json
index 3ac8b7a8..dc5abab8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14739,7 +14739,6 @@
       "version": "1.1.27",
       "resolved": "https://registry.npmjs.org/react-kakao-maps-sdk/-/react-kakao-maps-sdk-1.1.27.tgz",
       "integrity": "sha512-1EwYkYsjTDRFqysKStDasFMrFTXcLx2AyRlqMoWD7ONWhRqpjx9M874hkhEEHrnypP2eSIhhDLe0EiSKp3bd2Q==",
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.22.15",
         "kakao.maps.d.ts": "^0.1.39"
diff --git a/public/loding.json b/public/loding.json
new file mode 100644
index 00000000..1bcf9c6d
--- /dev/null
+++ b/public/loding.json
@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.0.0","a":"","k":"","d":"","tc":""},"fr":60,"ip":0,"op":180,"w":800,"h":600,"nm":"Loading","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Vector 61","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[606.034,164.112,0],"ix":2},"a":{"a":0,"k":[188,-134,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"o":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"v":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.2205,0.7595,0.2385,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 61","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Vector 60","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[380.256,299.511,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"o":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"v":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 60","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Vector 62","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[286.977,397.453,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"o":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"v":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.2144,0.4256,0.2214,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 62","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true}]}],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Union","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[0]},{"i":{"x":[0.708],"y":[1]},"o":{"x":[0.302],"y":[0]},"t":45,"s":[100]},{"i":{"x":[0.78],"y":[1]},"o":{"x":[0.426],"y":[0]},"t":149,"s":[100]},{"t":155,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":36,"s":[134.969,417.489,0],"to":null,"ti":null},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":155,"s":[664.499,417.489,0],"to":null,"ti":null},{"t":188,"s":[933.969,417.489,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[79.082,79.082,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[147.38,147.38],"ix":2},"p":{"a":0,"k":[0,-2.798],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[87.682,87.682],"ix":2},"p":{"a":0,"k":[-89.548,27.051],"ix":3},"nm":"Контур эллипса 2","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[87.682,87.682],"ix":2},"p":{"a":0,"k":[87.682,27.051],"ix":3},"nm":"Контур эллипса 3","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[57.833,57.833],"ix":2},"p":{"a":0,"k":[138.052,47.572],"ix":3},"nm":"Контур эллипса 4","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[46.639,46.639],"ix":2},"p":{"a":0,"k":[-143.649,53.169],"ix":3},"nm":"Контур эллипса 5","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"rc","d":1,"s":{"a":0,"k":[281.702,29.849],"ix":2},"p":{"a":0,"k":[-3.731,61.564],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Контур прямоугольника 1","mn":"ADBE Vector Shape - Rect","hd":false,"_render":true},{"ty":"mm","mm":1,"nm":"Объединить контуры 1","mn":"ADBE Vector Filter - Merge","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.833,0.9514,0.967,1],"ix":4},"o":{"a":0,"k":80,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Union","np":8,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":36,"op":216,"st":36,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":0,"nm":"plain","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.585],"y":[0.813]},"o":{"x":[0.167],"y":[-0.101]},"t":0,"s":[2.766]},{"i":{"x":[0.821],"y":[1]},"o":{"x":[0.239],"y":[0.372]},"t":40,"s":[25.678]},{"i":{"x":[0.657],"y":[0.477]},"o":{"x":[0.265],"y":[0]},"t":78,"s":[32]},{"i":{"x":[0.622],"y":[0.568]},"o":{"x":[0.222],"y":[0.283]},"t":120,"s":[21.309]},{"t":181,"s":[2.766]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.357},"t":0,"s":[432,290.765,0],"to":null,"ti":null},{"i":{"x":0.64,"y":0.863},"o":{"x":0.333,"y":0},"t":36,"s":[432,252,0],"to":null,"ti":null},{"i":{"x":0.711,"y":1},"o":{"x":0.275,"y":0.174},"t":81,"s":[432,341.695,0],"to":null,"ti":null},{"i":{"x":0.606,"y":0.479},"o":{"x":0.171,"y":0},"t":123,"s":[432,392,0],"to":null,"ti":null},{"t":181,"s":[432,290.765,0]}],"ix":2},"a":{"a":0,"k":[432,272,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":800,"h":600,"ip":0,"op":180,"st":0,"bm":0,"completed":true,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Vector 61","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[606.034,164.112,0],"ix":2},"a":{"a":0,"k":[188,-134,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"o":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"v":[[187.024,-138.985],[-187.024,27.984],[-164.637,138.985],[-136.653,59.698]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.2205,0.7595,0.2385,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 61","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Vector 60","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[380.256,299.511,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"o":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"v":[[246.256,-152.511],[-246.256,-40.576],[35.446,152.511]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.7843,0.902,0.7882,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 60","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Vector 62","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[286.977,397.453,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"o":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"v":[[33.58,-10.727],[-33.58,39.643],[-8.395,-39.643]],"c":true},"ix":2},"nm":"Контур 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.2144,0.4256,0.2214,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Vector 62","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true}]},{"ddd":0,"ind":4,"ty":4,"nm":"Union","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":11,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":171,"s":[100]},{"t":179,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[628.969,159.489,0],"to":null,"ti":null},{"t":179,"s":[170.969,159.489,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[147.38,147.38],"ix":2},"p":{"a":0,"k":[0,-2.798],"ix":3},"nm":"Контур эллипса 1","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[87.682,87.682],"ix":2},"p":{"a":0,"k":[-89.548,27.051],"ix":3},"nm":"Контур эллипса 2","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[87.682,87.682],"ix":2},"p":{"a":0,"k":[87.682,27.051],"ix":3},"nm":"Контур эллипса 3","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[57.833,57.833],"ix":2},"p":{"a":0,"k":[138.052,47.572],"ix":3},"nm":"Контур эллипса 4","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"d":1,"ty":"el","s":{"a":0,"k":[46.639,46.639],"ix":2},"p":{"a":0,"k":[-143.649,53.169],"ix":3},"nm":"Контур эллипса 5","mn":"ADBE Vector Shape - Ellipse","hd":false,"_render":true},{"ty":"rc","d":1,"s":{"a":0,"k":[281.702,29.849],"ix":2},"p":{"a":0,"k":[-3.731,61.564],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Контур прямоугольника 1","mn":"ADBE Vector Shape - Rect","hd":false,"_render":true},{"ty":"mm","mm":1,"nm":"Объединить контуры 1","mn":"ADBE Vector Filter - Merge","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.698,0.9216,0.949,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Заливка 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Union","np":8,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":180,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}
\ No newline at end of file
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index c215565b..b1c4d90d 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 import { useLogin } from "@/hooks/queries/auth/useLogin";
 import { type LoginSchema, loginSchema } from "@/schemas/authSchema";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -60,7 +61,7 @@ export default function LoginPage() {
               disabled={isPending}
               className="group relative flex w-full justify-center rounded-lg bg-lime-600 px-4 py-2 text-sm font-medium text-white hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 disabled:bg-lime-300"
             >
-              {isPending ? "로그인 중..." : "로그인"}
+              {isPending ? <DotLoadingSpinner /> : "로그인"}
             </button>
           </div>
           <div className="flex items-center justify-center">
diff --git a/src/app/(auth)/signup/applicant/page.tsx b/src/app/(auth)/signup/applicant/page.tsx
index 85ea941e..24882820 100644
--- a/src/app/(auth)/signup/applicant/page.tsx
+++ b/src/app/(auth)/signup/applicant/page.tsx
@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 import Image from "next/image";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 
 export default function ApplicantSignupPage() {
   const { signup, isPending } = useSignup();
@@ -103,7 +104,7 @@ export default function ApplicantSignupPage() {
               disabled={isPending}
               className="group relative flex w-full justify-center rounded-lg bg-lime-600 px-4 py-2 text-sm font-medium text-white hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 disabled:bg-lime-300"
             >
-              {isPending ? "회원가입 중..." : "회원가입"}
+              {isPending ? <DotLoadingSpinner /> : "회원가입"}
             </button>
           </div>
           <div className="flex items-center justify-center">
diff --git a/src/app/(auth)/signup/owner/page.tsx b/src/app/(auth)/signup/owner/page.tsx
index f79318fd..b4582ac1 100644
--- a/src/app/(auth)/signup/owner/page.tsx
+++ b/src/app/(auth)/signup/owner/page.tsx
@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 import Image from "next/image";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 
 export default function OwnerSignupPage() {
   const { signup, isPending } = useSignup();
@@ -125,7 +126,7 @@ export default function OwnerSignupPage() {
               disabled={isPending}
               className="group relative flex w-full justify-center rounded-lg bg-lime-600 px-4 py-2 text-sm font-medium text-white hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 disabled:bg-lime-300"
             >
-              {isPending ? "회원가입 중..." : "회원가입"}
+              {isPending ? <DotLoadingSpinner /> : "회원가입"}
             </button>
           </div>
           <div className="flex items-center justify-center">
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/edit/components/ApplicationStatus.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/ApplicationStatus.tsx
similarity index 87%
rename from src/app/(pages)/(albaform)/alba/[formId]/edit/components/ApplicationStatus.tsx
rename to src/app/(pages)/(albaform)/alba/[formId]/components/ApplicationStatus.tsx
index 90544cca..19684ff5 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/edit/components/ApplicationStatus.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/ApplicationStatus.tsx
@@ -29,14 +29,18 @@ export default function ApplicationStatus({ formId }: ApplicationStatusProps) {
   //   console.log("지원 현황 불러오기 에러: ", errorMessage);
   // }
 
+  if (!applicationStatusData || applicationStatusData.data.length === 0) {
+    return null;
+  }
+
   return (
-    <div className="mt-20 space-y-6 border-t-2 pt-20 text-2xl">
+    <>
       {applicationStatusData && (
-        <>
+        <div className="mt-20 space-y-6 border-t-2 pt-20 text-2xl">
           <p className="text-3xl font-bold">지원 현황</p>
           <ApplicationStatusCard applicationStatusData={applicationStatusData.data} />
-        </>
+        </div>
       )}
-    </div>
+    </>
   );
 }
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
new file mode 100644
index 00000000..e598eab8
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormActions.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import Button from "@/app/components/button/default/Button";
+import { FcEmptyTrash, FcEditImage, FcFile, FcSearch } from "react-icons/fc";
+import Link from "next/link";
+import { useUser } from "@/hooks/queries/user/me/useUser";
+import { FormDetailResponse } from "@/types/response/form";
+
+interface FormActionsProps {
+  formId: string | number;
+  albaFormDetailData: FormDetailResponse;
+}
+
+export default function FormActions({ formId, albaFormDetailData }: FormActionsProps) {
+  const { user } = useUser();
+  const isMyAlbaForm = user?.id === albaFormDetailData.ownerId;
+  const isOwnerRole = user?.role === "OWNER";
+
+  const buttonStyle = "h-10 lg:h-16";
+  if (!user) return null;
+  // 사장님이 아니면 지원하기/내 지원내역 보기 버튼
+  if (!isOwnerRole) {
+    return (
+      <div className="space-y-4 text-2xl">
+        <Button className={buttonStyle} width="lg" icon={<FcFile />}>
+          지원하기
+        </Button>
+        <Button className={buttonStyle} width="lg" icon={<FcSearch />} variant="outlined">
+          내 지원내역 보기
+        </Button>
+      </div>
+    );
+  }
+
+  // 사장님이면 수정하기/삭제하기 버튼
+  if (isOwnerRole) {
+    if (!isMyAlbaForm) return null;
+    return (
+      <div className="space-y-4 text-2xl">
+        <Link href={`/alba/${formId}/edit`}>
+          <Button className={buttonStyle} width="lg" icon={<FcEditImage />}>
+            수정하기
+          </Button>
+        </Link>
+        <Button className={buttonStyle} width="lg" icon={<FcEmptyTrash />} variant="outlined">
+          삭제하기
+        </Button>
+      </div>
+    );
+  }
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormDetail.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx
similarity index 83%
rename from src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormDetail.tsx
rename to src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx
index 5e63f664..07a68fa8 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormDetail.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx
@@ -15,10 +15,8 @@ export default function FormDetails({ albaFormDetailData }: FormDetailsProps) {
   return (
     <>
       <div className="mb-4 flex items-end gap-4">
-        <span className="text-lg text-black-400 underline sm:text-xl md:text-2xl">
-          {albaFormDetailData.storeName || "가게명"}
-        </span>
-        <span className="text-md text-grayscale-500 sm:text-lg md:text-xl">
+        <span className="text-lg text-black-400 underline lg:text-2xl">{albaFormDetailData.storeName || "가게명"}</span>
+        <span className="text-md text-grayscale-500 lg:text-xl">
           {albaFormDetailData.location || "위치"} ・ {"경력 정보 없음"}
         </span>
       </div>
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormHeader.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormHeader.tsx
similarity index 100%
rename from src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormHeader.tsx
rename to src/app/(pages)/(albaform)/alba/[formId]/components/FormHeader.tsx
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormImage.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormImage.tsx
new file mode 100644
index 00000000..94900de1
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormImage.tsx
@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Indicator from "@/app/components/pagination/Indicator";
+
+interface FormImageProps {
+  imageUrls: string[];
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}
+
+export default function FormImage({ imageUrls, currentPage, onPageChange }: FormImageProps) {
+  return (
+    <div className="relative flex h-[300px] justify-center lg:h-[562px]">
+      {/* 이미지 표시 */}
+      {imageUrls?.map((imageUrl, index) => (
+        <div
+          key={imageUrl}
+          className={`absolute h-full w-auto transition-opacity duration-300 ${
+            index === currentPage ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <Image
+            src={imageUrl}
+            alt={`알바 이미지 ${index + 1}`}
+            width={1200}
+            height={800}
+            className="h-full w-full object-cover"
+            priority={index === 0}
+          />
+        </div>
+      ))}
+
+      {/* 인디케이터 */}
+      <div className="absolute bottom-4 left-1/2 -translate-x-1/2">
+        <Indicator imageCount={imageUrls?.length ?? 0} currentPage={currentPage} onPageChange={onPageChange} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/edit/components/RecruitInfomation.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx
similarity index 79%
rename from src/app/(pages)/(albaform)/alba/[formId]/edit/components/RecruitInfomation.tsx
rename to src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx
index 458bff81..e8dbf311 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/edit/components/RecruitInfomation.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/RecruitInformation.tsx
@@ -4,16 +4,13 @@ import RecruitIcon from "@/app/components/card/cardList/RecruitIcon";
 import RecruitCondition from "@/app/components/card/cardList/RecruitCondition";
 import { FormDetailResponse } from "@/types/response/form";
 import FormActions from "./FormActions";
-import { useUser } from "@/hooks/queries/user/me/useUser";
 
-interface FormDetailsProps {
+interface RecruitInformationProps {
   albaFormDetailData: FormDetailResponse;
+  formId: number;
 }
 
-export default function RecruitInformation({ albaFormDetailData }: FormDetailsProps) {
-  const { user } = useUser();
-  const isOwner = user?.role === "OWNER";
-
+export default function RecruitInformation({ albaFormDetailData, formId }: RecruitInformationProps) {
   const recruitmentDetails = {
     hourlyWage: albaFormDetailData.hourlyWage,
     recruitmentStartDate: new Date(albaFormDetailData.recruitmentStartDate),
@@ -28,8 +25,7 @@ export default function RecruitInformation({ albaFormDetailData }: FormDetailsPr
     <>
       <RecruitIcon {...recruitmentDetails} />
       <RecruitDetail recruitData={albaFormDetailData} />
-      <FormActions isOwner={isOwner} />
-
+      <FormActions formId={formId} albaFormDetailData={albaFormDetailData} />
       <p className="text-3xl font-bold">모집 조건</p>
       <RecruitCondition recruitData={albaFormDetailData} />
     </>
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormActions.tsx b/src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormActions.tsx
deleted file mode 100644
index e66ffe1a..00000000
--- a/src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormActions.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import Button from "@/app/components/button/default/Button";
-import { FcEmptyTrash } from "react-icons/fc";
-import { FcEditImage } from "react-icons/fc";
-import { FcFile } from "react-icons/fc";
-import { FcSearch } from "react-icons/fc";
-
-interface FormActionsProps {
-  isOwner: boolean;
-}
-
-export default function FormActions({ isOwner }: FormActionsProps) {
-  return (
-    <div className="space-y-4 text-2xl">
-      <Button className="h-10 sm:h-12 md:h-16" width="lg" icon={isOwner ? <FcEditImage /> : <FcFile />}>
-        {isOwner ? "수정하기" : "지원하기"}
-      </Button>
-      <Button
-        className="h-10 sm:h-12 md:h-16"
-        width="lg"
-        icon={isOwner ? <FcEmptyTrash /> : <FcSearch />}
-        variant="outlined"
-      >
-        {isOwner ? "삭제하기" : "내 지원내역 보기"}
-      </Button>
-    </div>
-  );
-}
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx b/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx
index 4930677d..353a8ad3 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx
@@ -16,6 +16,7 @@ import WorkConditionSection from "../../../addform/section/WorkConditionSection"
 import { SubmitFormDataType } from "@/types/addform";
 import useEditing from "@/hooks/useEditing";
 import useFormDetail from "@/hooks/queries/form/detail/useFormDetail";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 import formatMoney from "@/utils/formatMoney";
 
 export default function EditFormPage() {
@@ -201,9 +202,12 @@ export default function EditFormPage() {
     }
   };
 
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
+  if (isLoading)
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
 
   if (error) {
     return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/page.tsx b/src/app/(pages)/(albaform)/alba/[formId]/page.tsx
index 7d91483e..b2c9a3d6 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/page.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/page.tsx
@@ -6,10 +6,12 @@ import { useUser } from "@/hooks/queries/user/me/useUser";
 import { useFormDetail } from "@/hooks/queries/form/detail/useFormDetail";
 import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk";
 import Script from "next/script";
-import FormHeader from "./edit/components/FormHeader";
-import FormDetails from "./edit/components/FormDetail";
-import RecruitInformation from "./edit/components/RecruitInfomation";
-import ApplicationStatus from "./edit/components/ApplicationStatus";
+import FormHeader from "./components/FormHeader";
+import FormDetails from "./components/FormDetail";
+import RecruitInformation from "./components/RecruitInformation";
+import ApplicationStatus from "./components/ApplicationStatus";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import FormImage from "./components/FormImage";
 
 interface Coords {
   lat: number;
@@ -19,6 +21,7 @@ interface Coords {
 export default function AlbaFormDetailPage() {
   const { formId } = useParams();
   const [formIdState, setFormIdState] = useState<number>(0);
+  const [currentPage, setCurrentPage] = useState<number>(0);
   const { user } = useUser();
   const isOwner = user?.role === "OWNER";
 
@@ -35,7 +38,7 @@ export default function AlbaFormDetailPage() {
     }
   }, [formId]);
 
-  const { albaFormDetailData, isLoading, error: formError } = useFormDetail({ formId: formIdState });
+  const { albaFormDetailData, isLoading } = useFormDetail({ formId: formIdState });
 
   // 주소로 좌표 검색
   useEffect(() => {
@@ -52,31 +55,44 @@ export default function AlbaFormDetailPage() {
     });
   }, [albaFormDetailData?.location]);
 
-  if (isLoading) return <div>Loading...</div>;
-  if (formError) return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
-  if (!albaFormDetailData) return <div>데이터가 없습니다.</div>;
+  if (isLoading)
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
 
   return (
-    <div className="container flex min-h-screen flex-col px-4 sm:px-6 md:px-0">
+    <div className="container flex min-h-screen flex-col px-4 lg:px-0">
       {/* 사진영역 */}
-      <div className="h-[300px] bg-black-100 sm:h-[400px] md:h-[562px]">사진영역</div>
-      <div className="mt-4 flex flex-col justify-between sm:mt-10 md:mt-20 md:flex-row">
+      {albaFormDetailData && (
+        <FormImage
+          imageUrls={albaFormDetailData.imageUrls}
+          currentPage={currentPage}
+          onPageChange={(page) => setCurrentPage(page)}
+        />
+      )}
+      <div className="mt-4 flex flex-col justify-between lg:mt-20 lg:flex-row">
         {/* 왼쪽 영역 */}
-        <div className="w-full space-y-10 sm:w-[600px] md:w-[770px]">
-          <FormHeader albaFormDetailData={albaFormDetailData} />
-          <FormDetails albaFormDetailData={albaFormDetailData} />
-
+        <div className="w-full space-y-10 lg:w-[770px]">
+          {albaFormDetailData && (
+            <>
+              <FormHeader albaFormDetailData={albaFormDetailData} />
+              <FormDetails albaFormDetailData={albaFormDetailData} />
+            </>
+          )}
           {/* 카카오맵 스크립트 */}
           <Script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" strategy="afterInteractive" />
 
           {/* 지도 영역 */}
-          <div className="h-[280px] md:h-[320px]">
+          <div className="h-[280px] lg:h-[320px]">
             {error && <div className="text-red-500">Map load error: {String(error)}</div>}
-            {loading && <div className="flex h-full items-center justify-center">Loading map...</div>}
-            {!loading && !error && (
+            {!loading && !error && albaFormDetailData && (
               <Map center={coords} style={{ width: "100%", height: "100%" }} level={3}>
                 <MapMarker position={coords}>
-                  <div className="p-2">{albaFormDetailData.title}</div>
+                  <div className="whitespace-nowrap p-2 text-center">
+                    <p className="">{albaFormDetailData.storeName}</p>
+                  </div>
                 </MapMarker>
               </Map>
             )}
@@ -84,8 +100,8 @@ export default function AlbaFormDetailPage() {
         </div>
 
         {/* 오른쪽 영역 */}
-        <div className="flex w-full flex-col space-y-12 sm:w-[400px] md:w-[640px]">
-          <RecruitInformation albaFormDetailData={albaFormDetailData} />
+        <div className="flex w-full flex-col space-y-12 lg:w-[640px]">
+          {albaFormDetailData && <RecruitInformation albaFormDetailData={albaFormDetailData} formId={formIdState} />}
         </div>
       </div>
       {/* 지원 현황 */}
diff --git a/src/app/(pages)/(albaform)/layout.tsx b/src/app/(pages)/(albaform)/layout.tsx
index cac38e98..fb541e0a 100644
--- a/src/app/(pages)/(albaform)/layout.tsx
+++ b/src/app/(pages)/(albaform)/layout.tsx
@@ -4,6 +4,7 @@ import { cn } from "@/lib/tailwindUtil";
 import ApplyHeader from "./component/ApplyHeader";
 import useModalStore from "@/store/modalStore";
 import { usePathname, useRouter } from "next/navigation";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 export default function Layout({ children }: { children: ReactNode }) {
   const { openModal } = useModalStore();
@@ -59,7 +60,13 @@ export default function Layout({ children }: { children: ReactNode }) {
           }
         />
       )}
-      <Suspense fallback={<div className="flex h-[calc(100vh-200px)] items-center justify-center">Loading...</div>}>
+      <Suspense
+        fallback={
+          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+            <LoadingSpinner />
+          </div>
+        }
+      >
         {children}
       </Suspense>
     </div>
diff --git a/src/app/(pages)/albaList/layout.tsx b/src/app/(pages)/albaList/layout.tsx
index 21c3a7e1..d518e62e 100644
--- a/src/app/(pages)/albaList/layout.tsx
+++ b/src/app/(pages)/albaList/layout.tsx
@@ -1,3 +1,4 @@
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 import React, { Suspense } from "react";
 
 export default function AlbaListLayout({ children }: { children: React.ReactNode }) {
@@ -6,7 +7,7 @@ export default function AlbaListLayout({ children }: { children: React.ReactNode
       <Suspense
         fallback={
           <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-            <div>로딩 중...</div>
+            <LoadingSpinner />
           </div>
         }
       >
diff --git a/src/app/(pages)/albaList/page.tsx b/src/app/(pages)/albaList/page.tsx
index 11f0929a..8f719dfb 100644
--- a/src/app/(pages)/albaList/page.tsx
+++ b/src/app/(pages)/albaList/page.tsx
@@ -14,6 +14,7 @@ import Link from "next/link";
 import { IoAdd } from "react-icons/io5";
 import { userRoles } from "@/constants/userRoles";
 import FloatingBtn from "@/app/components/button/default/FloatingBtn";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 const FORMS_PER_PAGE = 10;
 
@@ -91,13 +92,12 @@ export default function AlbaList() {
   }
 
   // 로딩 상태 처리
-  if (isLoading) {
+  if (isLoading)
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-        <div>로딩 중...</div>
+        <LoadingSpinner />
       </div>
     );
-  }
 
   return (
     <div className="flex min-h-screen flex-col items-center">
diff --git a/src/app/(pages)/albaTalk/addTalk/page.tsx b/src/app/(pages)/albaTalk/addTalk/page.tsx
index 71259734..d2b92892 100644
--- a/src/app/(pages)/albaTalk/addTalk/page.tsx
+++ b/src/app/(pages)/albaTalk/addTalk/page.tsx
@@ -8,6 +8,7 @@ import BaseInput from "@/app/components/input/text/BaseInput";
 import ImageInputwithPlaceHolder from "../../../components/input/file/ImageInput/ImageInputwithPlaceHolder";
 import { usePost } from "../../../../hooks/usePost";
 import axios from "axios";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 
 interface FormInputs {
   title: string;
@@ -107,7 +108,7 @@ export default function AddTalk() {
                 onClick={handleSubmit(onSubmit)}
                 disabled={isPending}
               >
-                {isPending ? "등록 중..." : "등록하기"}
+                {isPending ? <DotLoadingSpinner /> : "등록하기"}
               </Button>
             </div>
           </div>
@@ -187,7 +188,7 @@ export default function AddTalk() {
           onClick={handleSubmit(onSubmit)}
           disabled={isPending}
         >
-          {isPending ? "등록 중..." : "등록하기"}
+          {isPending ? <DotLoadingSpinner /> : "등록하기"}
         </button>
       </div>
     </>
diff --git a/src/app/(pages)/albaform-support-detail/layout.tsx b/src/app/(pages)/albaform-support-detail/layout.tsx
index af80a7bd..de4fc447 100644
--- a/src/app/(pages)/albaform-support-detail/layout.tsx
+++ b/src/app/(pages)/albaform-support-detail/layout.tsx
@@ -1,3 +1,4 @@
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 import React, { Suspense } from "react";
 
 export default function AlbaFormDetailLayout({ children }: { children: React.ReactNode }) {
@@ -6,7 +7,7 @@ export default function AlbaFormDetailLayout({ children }: { children: React.Rea
       <Suspense
         fallback={
           <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-            <div>로딩 중...</div>
+            <LoadingSpinner />
           </div>
         }
       >
diff --git a/src/app/(pages)/albax/layout.tsx b/src/app/(pages)/albax/layout.tsx
deleted file mode 100644
index a6039fe0..00000000
--- a/src/app/(pages)/albax/layout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { Suspense } from "react";
-
-export default function AlbaFormDetailLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="mx-auto max-w-screen-2xl px-4 py-4 sm:px-6 md:py-8">
-      <Suspense
-        fallback={
-          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-            <div>로딩 중...</div>
-          </div>
-        }
-      >
-        {children}
-      </Suspense>
-    </div>
-  );
-}
diff --git a/src/app/(pages)/kakao-map/page.tsx b/src/app/(pages)/kakao-map/page.tsx
index 5b72e53a..7e0d4108 100644
--- a/src/app/(pages)/kakao-map/page.tsx
+++ b/src/app/(pages)/kakao-map/page.tsx
@@ -87,9 +87,9 @@ const KakaoMapPage = () => {
 
       <div className="h-96 w-full border">
         {error && <div className="text-red-500">Map load error: {String(error)}</div>}
-        {loading && !error && (
+        {/* {loading && !error && (
           <div className="flex h-full items-center justify-center text-gray-500">Kakao Maps 로딩 중...</div>
-        )}
+        )} */}
         {!loading && !error && (
           <Map center={coords} style={{ width: "100%", height: "100%" }} level={3}>
             <MapMarker position={coords}>현재 위치</MapMarker>
diff --git a/src/app/(pages)/myAlbaform/(role)/applicant/page.tsx b/src/app/(pages)/myAlbaform/(role)/applicant/page.tsx
index 9c7af1f2..03a18567 100644
--- a/src/app/(pages)/myAlbaform/(role)/applicant/page.tsx
+++ b/src/app/(pages)/myAlbaform/(role)/applicant/page.tsx
@@ -10,6 +10,7 @@ import SearchSection from "@/app/components/layout/forms/SearchSection";
 import MyApplicationListItem from "@/app/components/card/cardList/MyApplicationListItem";
 import { useMyApplications } from "@/hooks/queries/user/me/useMyApplications";
 import ApplicantSortSection from "./components/ApplicantSortSection";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 const APPLICATIONS_PER_PAGE = 10;
 
@@ -73,7 +74,7 @@ export default function ApplicantPage() {
   if (isUserLoading || isLoadingData) {
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-        <div>로딩 중...</div>
+        <LoadingSpinner />
       </div>
     );
   }
diff --git a/src/app/(pages)/myAlbaform/(role)/owner/page.tsx b/src/app/(pages)/myAlbaform/(role)/owner/page.tsx
index 5b53baba..16529e55 100644
--- a/src/app/(pages)/myAlbaform/(role)/owner/page.tsx
+++ b/src/app/(pages)/myAlbaform/(role)/owner/page.tsx
@@ -14,6 +14,7 @@ import Link from "next/link";
 import { IoAdd } from "react-icons/io5";
 import { userRoles } from "@/constants/userRoles";
 import FloatingBtn from "@/app/components/button/default/FloatingBtn";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 const FORMS_PER_PAGE = 10;
 
@@ -143,7 +144,7 @@ export default function AlbaList() {
   if (isLoadingData) {
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-        <div>로딩 중...</div>
+        <LoadingSpinner />
       </div>
     );
   }
diff --git a/src/app/(pages)/myAlbaform/layout.tsx b/src/app/(pages)/myAlbaform/layout.tsx
index dd39c942..8e7d7314 100644
--- a/src/app/(pages)/myAlbaform/layout.tsx
+++ b/src/app/(pages)/myAlbaform/layout.tsx
@@ -1,3 +1,4 @@
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 import React, { Suspense } from "react";
 
 export default function MyAlbaFormLayout({ children }: { children: React.ReactNode }) {
@@ -6,7 +7,7 @@ export default function MyAlbaFormLayout({ children }: { children: React.ReactNo
       <Suspense
         fallback={
           <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-            <div>로딩 중...</div>
+            <LoadingSpinner />
           </div>
         }
       >
diff --git a/src/app/(pages)/myAlbaform/page.tsx b/src/app/(pages)/myAlbaform/page.tsx
index 659fe493..de9746bf 100644
--- a/src/app/(pages)/myAlbaform/page.tsx
+++ b/src/app/(pages)/myAlbaform/page.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useUser } from "@/hooks/queries/user/me/useUser";
 import { userRoles } from "@/constants/userRoles";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 export default function MyAlbaForm() {
   const router = useRouter();
@@ -26,7 +27,7 @@ export default function MyAlbaForm() {
   if (isLoading) {
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-        <div>로딩 중...</div>
+        <LoadingSpinner />
       </div>
     );
   }
diff --git a/src/app/(pages)/mypage/components/sections/CommentsSection.tsx b/src/app/(pages)/mypage/components/sections/CommentsSection.tsx
index 91f8b769..8e16d2ae 100644
--- a/src/app/(pages)/mypage/components/sections/CommentsSection.tsx
+++ b/src/app/(pages)/mypage/components/sections/CommentsSection.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import { useMyComments } from "@/hooks/queries/user/me/useMyComments";
 import Pagination from "@/app/components/pagination/Pagination";
 import type { MyCommentType } from "@/types/response/user";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 // 한 페이지당 댓글 수
 const COMMENTS_PER_PAGE = 10;
@@ -41,7 +42,7 @@ export default function CommentsSection() {
   if (isLoading) {
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-        <div>로딩 중...</div>
+        <LoadingSpinner />
       </div>
     );
   }
diff --git a/src/app/(pages)/mypage/components/sections/PostsSection.tsx b/src/app/(pages)/mypage/components/sections/PostsSection.tsx
index f5ffc272..947c7fc6 100644
--- a/src/app/(pages)/mypage/components/sections/PostsSection.tsx
+++ b/src/app/(pages)/mypage/components/sections/PostsSection.tsx
@@ -6,6 +6,7 @@ import { useMyPosts } from "@/hooks/queries/user/me/useMyPosts";
 import { useMySortStore } from "@/store/mySortStore";
 import type { PostListType } from "@/types/response/post";
 import { useProfileStringValue } from "@/hooks/queries/user/me/useProfileStringValue";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 // 한 페이지당 게시글 수
 const POSTS_PER_PAGE = 10;
@@ -29,12 +30,6 @@ const PostCard = ({ post }: { post: PostListType }) => (
   </div>
 );
 
-const LoadingSpinner = () => (
-  <div className="flex justify-center py-4">
-    <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-orange-300 border-t-transparent" />
-  </div>
-);
-
 const PostList = ({ pages }: { pages: any[] }) => (
   <>
     {pages.map((page, index) => (
@@ -74,7 +69,7 @@ export default function PostsSection() {
 
   // 에러 상태 처리
   if (error) return <StatusMessage message="게시글을 불러오는데 실패했습니다." className="text-red-500" />;
-  if (isLoading) return <StatusMessage message="로딩 중..." />;
+  if (isLoading) return <LoadingSpinner />;
   // 데이터가 없는 경우 처리
   if (!data?.pages[0]?.data?.length) return <StatusMessage message="작성한 게시글이 없습니다." />;
 
diff --git a/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx b/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx
index 84ccde05..bfe02617 100644
--- a/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx
+++ b/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx
@@ -9,6 +9,7 @@ import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
 import { filterPublicOptions, filterRecruitingOptions } from "@/constants/filterOptions";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import AlbaListItem from "@/app/components/card/cardList/AlbaListItem";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 const SCRAPS_PER_PAGE = 10;
 
@@ -119,7 +120,7 @@ export default function ScrapsSection() {
   if (isLoading) {
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-        <div>로딩 중...</div>
+        <LoadingSpinner />
       </div>
     );
   }
diff --git a/src/app/(pages)/mypage/layout.tsx b/src/app/(pages)/mypage/layout.tsx
index c493c6b1..edb33e0a 100644
--- a/src/app/(pages)/mypage/layout.tsx
+++ b/src/app/(pages)/mypage/layout.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import FilterBar from "./components/FilterBar";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 interface MypageLayoutProps {
   children: React.ReactNode;
@@ -9,7 +10,7 @@ export default function MypageLayout({ children }: MypageLayoutProps) {
   return (
     <div className="flex min-h-screen flex-col">
       <div className="mx-auto w-full min-w-[327px] px-6 md:max-w-[600px] lg:max-w-[1480px]">
-        <Suspense fallback={<div>로딩 중...</div>}>
+        <Suspense fallback={<LoadingSpinner />}>
           <FilterBar />
           {children}
         </Suspense>
diff --git a/src/app/components/card/cardList/AlbaListItem.tsx b/src/app/components/card/cardList/AlbaListItem.tsx
index cad3ebd6..ccff7364 100644
--- a/src/app/components/card/cardList/AlbaListItem.tsx
+++ b/src/app/components/card/cardList/AlbaListItem.tsx
@@ -11,6 +11,7 @@ import { FormListType } from "@/types/response/form";
 import { useFormScrap } from "@/hooks/queries/form/useFormScap";
 import { MdOutlineImage } from "react-icons/md";
 import { S3_URL } from "@/constants/config";
+import DotLoadingSpinner from "../../loading-spinner/DotLodingSpinner";
 
 /**
  * 알바폼 리스트 아이템 컴포넌트
@@ -199,7 +200,7 @@ const AlbaListItem = ({
                     onClick={handleFormScrap}
                     disabled={isScrapLoading}
                   >
-                    {isScrapLoading ? "스크랩 중..." : "스크랩"}
+                    {isScrapLoading ? <DotLoadingSpinner /> : "스크랩"}
                   </button>
                 </div>
               )}
diff --git a/src/app/components/card/cardList/RecruitCondition.tsx b/src/app/components/card/cardList/RecruitCondition.tsx
index 15712a7f..629539c6 100644
--- a/src/app/components/card/cardList/RecruitCondition.tsx
+++ b/src/app/components/card/cardList/RecruitCondition.tsx
@@ -9,14 +9,14 @@ interface RecruitConditionProps {
 
 // 모집조건 카드 컴포넌트
 const RecruitCondition = ({ recruitData }: RecruitConditionProps) => {
-  const titleStyle = "text-black-200 min-w-[64px] md:min-w-[120px]";
+  const titleStyle = "text-black-200 min-w-[64px] lg:min-w-[120px]";
   return (
-    <div className="flex w-[327px] flex-col gap-5 rounded-lg border border-line-100 bg-white p-4 text-xs md:w-[640px] md:p-6 md:text-lg">
+    <div className="flex w-[327px] flex-col gap-5 rounded-lg border border-line-100 bg-white p-4 text-xs lg:w-[640px] lg:p-6 lg:text-lg">
       <div className="flex">
         <span className={cn(titleStyle)}>모집 인원</span>
         <div>
           <strong>{recruitData.numberOfPositions}명</strong>
-          <span className="text-grayscale-500 md:text-base">(인원미정)</span>
+          <span className="text-grayscale-500 lg:text-base">(인원미정)</span>
         </div>
       </div>
 
diff --git a/src/app/components/card/cardList/RecruitDetail.tsx b/src/app/components/card/cardList/RecruitDetail.tsx
index 5d1cd2e3..57742419 100644
--- a/src/app/components/card/cardList/RecruitDetail.tsx
+++ b/src/app/components/card/cardList/RecruitDetail.tsx
@@ -14,7 +14,7 @@ const RecruitDetail = ({ recruitData }: RecruitDetailProps) => {
   const propsStyle = "flex items-center justify-between md:py-4";
 
   return (
-    <div className="flex h-[156px] w-[375px] flex-col justify-center gap-3 rounded-lg border border-line-100 bg-white px-6 py-3 text-sm md:h-[336px] md:w-[640px] md:gap-6 md:text-lg">
+    <div className="flex h-[156px] w-full flex-col justify-center gap-3 rounded-lg border border-line-100 bg-white px-6 py-3 text-sm md:h-[336px] md:gap-6 md:text-lg">
       <div className={cn(propsStyle)}>
         <div>
           <span className={cn(titleStyle)}>모집 기간</span>
diff --git a/src/app/components/card/cardList/RecruitIcon.tsx b/src/app/components/card/cardList/RecruitIcon.tsx
index ccfa8c5a..92afff9d 100644
--- a/src/app/components/card/cardList/RecruitIcon.tsx
+++ b/src/app/components/card/cardList/RecruitIcon.tsx
@@ -1,5 +1,6 @@
 import { formatRecruitDate, getWorkDaysDisplay } from "@/utils/workDayFormatter";
 import RecruitIconItem from "./RecruitIconItem";
+import React from "react";
 
 // 채용 공고 아이콘 컴포넌트의 Props 인터페이스
 interface RecruitIconProps {
@@ -24,7 +25,7 @@ export const RecruitIcon = ({
 }: RecruitIconProps) => {
   // 모집 기간을 반응형으로 표시하는 컴포넌트
   const periodValue = (
-    <>
+    <React.Fragment>
       {/* 모바일에서 표시되는 기간 형식 */}
       <span className="whitespace-normal lg:hidden">
         {formatRecruitDate(recruitmentStartDate)}~{formatRecruitDate(recruitmentEndDate)}
@@ -35,7 +36,7 @@ export const RecruitIcon = ({
         <br />
         {formatRecruitDate(recruitmentEndDate, true)}
       </span>
-    </>
+    </React.Fragment>
   );
 
   // 근무 조건 데이터 배열
@@ -76,7 +77,7 @@ export const RecruitIcon = ({
 
   return (
     // 반응형 컨테이너
-    <div className="h-auto w-auto p-3 lg:w-[640px]">
+    <div className="h-auto w-full p-3">
       {/* 2x2 그리드 레이아웃 */}
       <div className="grid h-full grid-cols-2 gap-2">
         {conditions.map((condition, index) => (
diff --git a/src/app/components/card/cardList/ScrapListItem.tsx b/src/app/components/card/cardList/ScrapListItem.tsx
index 8503636a..56fb2d85 100644
--- a/src/app/components/card/cardList/ScrapListItem.tsx
+++ b/src/app/components/card/cardList/ScrapListItem.tsx
@@ -11,6 +11,7 @@ import { useFormScrap } from "@/hooks/queries/form/useFormScap";
 import { useRouter } from "next/navigation";
 import { MdOutlineImage } from "react-icons/md";
 import { S3_URL } from "@/constants/config";
+import DotLoadingSpinner from "../../loading-spinner/DotLodingSpinner";
 
 /**
  * 알바폼 스크랩 리스트 아이템 컴포넌트
@@ -161,7 +162,7 @@ const ScrapListItem = ({
                     onClick={handleFormUnscrap}
                     disabled={isUnscrapLoading}
                   >
-                    {isUnscrapLoading ? "취소 중..." : "스크랩 취소"}
+                    {isUnscrapLoading ? <DotLoadingSpinner /> : "스크랩 취소"}
                   </button>
                 </div>
               )}
diff --git a/src/app/components/loading-spinner/DotLodingSpinner.tsx b/src/app/components/loading-spinner/DotLodingSpinner.tsx
new file mode 100644
index 00000000..f50c1bdc
--- /dev/null
+++ b/src/app/components/loading-spinner/DotLodingSpinner.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+
+export default function DotLoadingSpinner() {
+  return (
+    <div className="flex justify-center py-2">
+      <div className="flex items-center justify-center">
+        <div
+          className="h-2 w-2 animate-bounce rounded-full bg-primary-orange-300"
+          style={{ animationDelay: "0s" }}
+        ></div>
+        <div
+          className="ml-2 h-2 w-2 animate-bounce rounded-full bg-primary-orange-300"
+          style={{ animationDelay: "0.2s" }}
+        ></div>
+        <div
+          className="ml-2 h-2 w-2 animate-bounce rounded-full bg-primary-orange-300"
+          style={{ animationDelay: "0.4s" }}
+        ></div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/loading-spinner/LoadingSpinner.tsx b/src/app/components/loading-spinner/LoadingSpinner.tsx
new file mode 100644
index 00000000..bab2a750
--- /dev/null
+++ b/src/app/components/loading-spinner/LoadingSpinner.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { Player } from "@lottiefiles/react-lottie-player";
+import React from "react";
+
+export default function LoadingSpinner() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white px-4">
+      <Player
+        autoplay
+        loop
+        src="/loding.json"
+        className="mb-8 w-full max-w-[300px] sm:max-w-[400px] lg:max-w-[500px]"
+      />
+    </div>
+  );
+}
diff --git a/src/app/components/modal/modals/confirm/DeleteFormModal.tsx b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
index e9cbc502..b5e3a280 100644
--- a/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
+++ b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
@@ -7,6 +7,7 @@ import axios from "axios";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import type { ConfirmFormModalProps } from "@/types/modal";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 
 const DeleteFormModal = ({ id, isOpen, onClose, onConfirm, className }: ConfirmFormModalProps) => {
   const [isDeleting, setIsDeleting] = useState(false);
@@ -71,7 +72,7 @@ const DeleteFormModal = ({ id, isOpen, onClose, onConfirm, className }: ConfirmF
               disabled={isDeleting}
               className="h-[48px] w-[300px] text-base font-medium md:h-[62px] md:w-[360px] md:text-lg"
             >
-              {isDeleting ? "삭제 중..." : "삭제하기"}
+              {isDeleting ? <DotLoadingSpinner /> : "삭제하기"}
             </Button>
             <Button
               type="button"
diff --git a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
index a3da87b9..263d248a 100644
--- a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
+++ b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
@@ -8,6 +8,7 @@ import { positionOptions } from "@/constants/positionOptions";
 import axios from "axios";
 import toast from "react-hot-toast";
 import type { ConfirmFormModalProps } from "@/types/modal";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 
 const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModalProps) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -101,7 +102,7 @@ const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModa
                 width="sm"
                 className="h-[48px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white md:h-[62px] md:text-lg"
               >
-                {isSubmitting ? "변경 중..." : "선택하기"}
+                {isSubmitting ? <DotLoadingSpinner /> : "선택하기"}
               </Button>
             </div>
           </div>
diff --git a/src/app/components/modal/modals/form/ChangePasswordModal.tsx b/src/app/components/modal/modals/form/ChangePasswordModal.tsx
index aca537f3..2f1a72e5 100644
--- a/src/app/components/modal/modals/form/ChangePasswordModal.tsx
+++ b/src/app/components/modal/modals/form/ChangePasswordModal.tsx
@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useLogout } from "@/hooks/queries/auth/useLogout";
 import { usePassword } from "@/hooks/queries/user/me/useChangePassword";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 
 interface ChangePasswordModalProps {
   isOpen: boolean;
@@ -132,7 +133,7 @@ const ChangePasswordModal = ({ isOpen, onClose, className }: ChangePasswordModal
             disabled={isPending}
             className="flex-1 rounded-md bg-orange-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-orange-600 md:text-base"
           >
-            {isPending ? "변경 중..." : "변경하기"}
+            {isPending ? <DotLoadingSpinner /> : "변경하기"}
           </button>
         </div>
       </form>
diff --git a/src/app/components/modal/modals/form/EditMyProfileModal.tsx b/src/app/components/modal/modals/form/EditMyProfileModal.tsx
index 012d8957..77cda528 100644
--- a/src/app/components/modal/modals/form/EditMyProfileModal.tsx
+++ b/src/app/components/modal/modals/form/EditMyProfileModal.tsx
@@ -11,6 +11,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { nicknameSchema, mobilePhoneSchema } from "@/schemas/commonSchema";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 
 interface EditMyProfileModalProps {
   isOpen: boolean;
@@ -183,7 +184,7 @@ const EditMyProfileModal = ({ isOpen, onClose, className }: EditMyProfileModalPr
             disabled={isUpdating}
             className="w-[158px] rounded-md bg-primary-orange-300 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary-orange-200 md:w-[314px] md:text-base"
           >
-            {isUpdating ? "수정 중..." : "수정하기"}
+            {isUpdating ? <DotLoadingSpinner /> : "수정하기"}
           </button>
         </div>
       </form>
diff --git a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
index 35cb8038..d7b50c70 100644
--- a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
+++ b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
@@ -11,6 +11,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { nicknameSchema, storePhoneSchema, mobilePhoneSchema } from "@/schemas/commonSchema";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLodingSpinner";
 
 interface EditOwnerProfileModalProps {
   isOpen: boolean;
@@ -218,7 +219,7 @@ const EditOwnerProfileModal = ({ isOpen, onClose, className }: EditOwnerProfileM
             disabled={isUpdating}
             className="w-[158px] rounded-md bg-orange-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-orange-600 md:w-[314px] md:text-base"
           >
-            {isUpdating ? "수정 중..." : "수정하기"}
+            {isUpdating ? <DotLoadingSpinner /> : "수정하기"}
           </button>
         </div>
       </form>
diff --git a/src/app/stories/design-system/pages/albaList/page.tsx b/src/app/stories/design-system/pages/albaList/page.tsx
index d44f937f..22cc756f 100644
--- a/src/app/stories/design-system/pages/albaList/page.tsx
+++ b/src/app/stories/design-system/pages/albaList/page.tsx
@@ -13,6 +13,7 @@ import Header from "@/app/stories/design-system/components/layout/Header";
 import Link from "next/link";
 import { IoAdd } from "react-icons/io5";
 import FloatingBtn from "@/app/components/button/default/FloatingBtn";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 interface AlbaListProps {
   mockData?: FormListType[][];
@@ -65,7 +66,7 @@ const AlbaList: React.FC<AlbaListProps> = () => {
   if (isLoading && items.length === 0) {
     return (
       <div className="flex h-[calc(100vh-200px)] items-center justify-center">
-        <div>로딩 중...</div>
+        <LoadingSpinner />
       </div>
     );
   }
diff --git a/src/hooks/queries/auth/useLogin.ts b/src/hooks/queries/auth/useLogin.ts
index 32c7207a..479414fe 100644
--- a/src/hooks/queries/auth/useLogin.ts
+++ b/src/hooks/queries/auth/useLogin.ts
@@ -27,7 +27,7 @@ export const useLogin = () => {
       if (data?.user) {
         queryClient.setQueryData(["user"], { user: data.user });
         toast.success("로그인되었습니다!");
-        router.push("/mypage");
+        router.push("/");
         router.refresh();
       }
     },
diff --git a/src/hooks/queries/auth/useSignup.ts b/src/hooks/queries/auth/useSignup.ts
index d9d3b8d4..5c94d795 100644
--- a/src/hooks/queries/auth/useSignup.ts
+++ b/src/hooks/queries/auth/useSignup.ts
@@ -24,7 +24,7 @@ export const useSignup = () => {
     },
     onSuccess: () => {
       toast.success("회원가입이 완료되었습니다!");
-      router.push("/login");
+      router.push("/");
     },
     onError: (error: Error) => {
       toast.error(error.message);