Feat: 알바폼 상세 페이지 이미지 수정(수정 중)

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}

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">

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">

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">

src/app/(pages)/(albaform)/alba/[formId]/edit/components/ApplicationStatus.tsx → 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>
+    </>
   );
 }

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

src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormDetail.tsx → 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>