diff --git a/src/app/(pages)/(albaform)/addform/page.tsx b/src/app/(pages)/(albaform)/addform/page.tsx
index 93b1a3bb..09113d8e 100644
--- a/src/app/(pages)/(albaform)/addform/page.tsx
+++ b/src/app/(pages)/(albaform)/addform/page.tsx
@@ -1,6 +1,6 @@
 "use client";
-import { useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
 import axios from "axios";
 import TabMenuDropdown from "@/app/components/button/dropdown/TabMenuDropdown";
@@ -8,41 +8,21 @@ import Button from "@/app/components/button/default/Button";
 import { toast } from "react-hot-toast";
 import { useMutation } from "@tanstack/react-query";
 import { useUpdateProfile } from "@/hooks/queries/user/me/useUpdateProfile";
-import RecruitContentSection from "./RecruitContentSection";
-import RecruitConditionSection from "./RecruitConditionSection";
-import WorkConditionSection from "./WorkConditionSection";
+import RecruitContentSection from "./section/RecruitContentSection";
+import RecruitConditionSection from "./section/RecruitConditionSection";
+import WorkConditionSection from "./section/WorkConditionSection";
+import useEditing from "@/hooks/useEditing";
+import { SubmitFormDataType } from "@/types/addform";
 
-interface SubmitFormDataType {
-  isPublic: boolean;
-  hourlyWage: number;
-  isNegotiableWorkDays: boolean;
-  workDays: string[];
-  workEndTime: string;
-  workStartTime: string;
-  workEndDate: string;
-  workStartDate: string;
-  location: string;
-  preferred: string;
-  age: string;
-  education: string;
-  gender: string;
-  numberOfPositions: number;
-  imageUrls: string[];
-  recruitmentEndDate: string | undefined;
-  recruitmentStartDate: string | undefined;
-  description: string;
-  title: string;
-  imageFiles: File[];
-}
 export default function AddFormPage() {
   const router = useRouter();
-
+  const formId = useParams().formId;
   // 리액트 훅폼에서 관리할 데이터 타입 지정 및 메서드 호출 (상위 컴포넌트 = useForm 사용)
   const methods = useForm<SubmitFormDataType>({
     mode: "onChange",
     defaultValues: {
       isPublic: false,
-      hourlyWage: 0,
+      hourlyWage: 10030,
       isNegotiableWorkDays: false,
       workDays: [],
       workEndTime: "",
@@ -75,7 +55,7 @@ export default function AddFormPage() {
 
   // 이미지 업로드 api 처리를 위해 별도 변수에 할당
   const imageFiles = currentValues.imageFiles;
-  const [selectedOption, setSelectedOption] = useState("모집 내용");
+  const [, setSelectedOption] = useState<string>("");
 
   // 폼 제출 리액트쿼리
   const mutation = useMutation({
@@ -91,24 +71,20 @@ export default function AddFormPage() {
             acc[key] = Number(value);
           } else if (key === "hourlyWage") {
             // hourlyWage는 쉼표를 제거하고 숫자형으로 변환
-            acc[key] = Number(value.replaceAll(/,/g, "")); // 쉼표 제거 후 숫자형 변환
+            if (value.includes(",")) acc[key] = Number(value.replaceAll(/,/g, "")); // 쉼표 제거 후 숫자형 변환
           } else {
             acc[key as keyof SubmitFormDataType] = value; // 나머지 값은 그대로 추가
           }
           return acc;
         }, {});
-      await axios.post("/api/forms", filteredData, {
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
+      await axios.post("/api/forms", filteredData);
     },
     onSuccess: () => {
       if (typeof window !== "undefined") {
         window.localStorage.removeItem("tempAddFormData");
       }
       toast.success("알바폼을 등록했습니다.");
-      router.back(); // -> 추후 상세 페이지 이동으로 수정할것
+      router.push(`/alba/${formId}`);
     },
     onError: (error) => {
       console.error("에러가 발생했습니다.", error);
@@ -137,16 +113,32 @@ export default function AddFormPage() {
     router.push(`/addform?tab=${params}`);
   };
 
+  useEffect(() => {
+    switch (currentParam) {
+      case "recruit-content":
+        setSelectedOption("모집 내용");
+        break;
+      case "recruit-condition":
+        setSelectedOption("모집 조건");
+        break;
+      case "work-condition":
+        setSelectedOption("근무 조건");
+        break;
+      default:
+        setSelectedOption("모집 내용");
+    }
+  }, [currentParam]);
+
   const renderChildren = () => {
-    switch (selectedOption) {
-      case "모집 내용":
+    switch (currentParam) {
+      case "recruit-content":
         return <RecruitContentSection key="recruitContent" />;
-      case "모집 조건":
+      case "recruit-condition":
         return <RecruitConditionSection key="recruitCondition" />;
-      case "근무 조건":
+      case "work-condition":
         return <WorkConditionSection key="workCondition" />;
       default:
-        return <></>;
+        return <RecruitContentSection key="recruitContent" />;
     }
   };
   const { uploadImageMutation } = useUpdateProfile();
@@ -207,29 +199,11 @@ export default function AddFormPage() {
   };
 
   // 각각의 탭 작성중 여부
-  const isEditingRecruitContent =
-    currentValues.title !== "" || currentValues.description !== "" || currentValues.recruitmentStartDate !== undefined
-      ? true
-      : false;
-  const isEditingRecruitCondition =
-    currentValues.gender !== "" ||
-    currentValues.numberOfPositions !== 0 ||
-    currentValues.education !== "" ||
-    currentValues.age !== "" ||
-    currentValues.preferred !== ""
-      ? true
-      : false;
-  const isEditingWorkCondition =
-    currentValues.location !== "" ||
-    currentValues.workStartTime !== "" ||
-    currentValues.workStartDate !== "" ||
-    currentValues.hourlyWage > 0
-      ? true
-      : false;
+  const { isEditingRecruitContent, isEditingRecruitCondition, isEditingWorkCondition } = useEditing(currentValues);
 
   return (
     <FormProvider {...methods}>
-      <div className="relative">
+      <div className="relative pb-10 lg:pb-0">
         <aside className="flex flex-col items-center justify-between rounded-[24px] bg-background-200 lg:fixed lg:left-[108px] lg:top-[64px] lg:m-10 lg:h-[80vh] lg:p-10">
           <TabMenuDropdown
             options={[
@@ -241,8 +215,9 @@ export default function AddFormPage() {
               { label: "근무 조건", isEditing: isEditingWorkCondition || currentParam === "work-condition" },
             ]}
             onChange={handleOptionChange}
+            currentParam={currentParam || ""}
           />
-          <div className="absolute -bottom-[160px] flex flex-col gap-2 lg:relative lg:bottom-0">
+          <div className="absolute -bottom-[160px] mb-20 flex flex-col gap-2 lg:relative lg:bottom-0 lg:mb-0">
             <Button
               type="button"
               variant="outlined"
diff --git a/src/app/(pages)/(albaform)/addform/RecruitConditionSection.tsx b/src/app/(pages)/(albaform)/addform/section/RecruitConditionSection.tsx
similarity index 97%
rename from src/app/(pages)/(albaform)/addform/RecruitConditionSection.tsx
rename to src/app/(pages)/(albaform)/addform/section/RecruitConditionSection.tsx
index 29f5dd5b..516ff9f5 100644
--- a/src/app/(pages)/(albaform)/addform/RecruitConditionSection.tsx
+++ b/src/app/(pages)/(albaform)/addform/section/RecruitConditionSection.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useFormContext } from "react-hook-form";
-import Label from "../Label";
 import InputDropdown from "@/app/components/button/dropdown/InputDropdown";
+import Label from "../../component/Label";
 
 // 알바폼 만들기 - 사장님- 2-모집조건
 export default function RecruitConditionSection() {
diff --git a/src/app/(pages)/(albaform)/addform/RecruitContentSection.tsx b/src/app/(pages)/(albaform)/addform/section/RecruitContentSection.tsx
similarity index 98%
rename from src/app/(pages)/(albaform)/addform/RecruitContentSection.tsx
rename to src/app/(pages)/(albaform)/addform/section/RecruitContentSection.tsx
index f1f7ee33..94349f20 100644
--- a/src/app/(pages)/(albaform)/addform/RecruitContentSection.tsx
+++ b/src/app/(pages)/(albaform)/addform/section/RecruitContentSection.tsx
@@ -1,5 +1,4 @@
 "use client";
-import Label from "../Label";
 import BaseInput from "@/app/components/input/text/BaseInput";
 import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
 import ImageInput from "@/app/components/input/file/ImageInput/ImageInput";
@@ -7,6 +6,7 @@ import DatePickerInput from "@/app/components/input/dateTimeDaypicker/DatePicker
 import { cn } from "@/lib/tailwindUtil";
 import { useFormContext } from "react-hook-form";
 import { useEffect, useState } from "react";
+import Label from "../../component/Label";
 
 // 알바폼 만들기 - 사장님 - 1-모집내용
 
diff --git a/src/app/(pages)/(albaform)/addform/WorkConditionSection.tsx b/src/app/(pages)/(albaform)/addform/section/WorkConditionSection.tsx
similarity index 94%
rename from src/app/(pages)/(albaform)/addform/WorkConditionSection.tsx
rename to src/app/(pages)/(albaform)/addform/section/WorkConditionSection.tsx
index 669e8720..a2b3f474 100644
--- a/src/app/(pages)/(albaform)/addform/WorkConditionSection.tsx
+++ b/src/app/(pages)/(albaform)/addform/section/WorkConditionSection.tsx
@@ -2,7 +2,6 @@
 
 import { useFormContext } from "react-hook-form";
 import { useState, ChangeEvent, MouseEvent, useEffect } from "react";
-import Label from "../Label";
 import { cn } from "@/lib/tailwindUtil";
 import DatePickerInput from "@/app/components/input/dateTimeDaypicker/DatePickerInput";
 import LocationInput from "@/app/components/input/text/LocationInput";
@@ -10,6 +9,8 @@ import TimePickerInput from "@/app/components/input/dateTimeDaypicker/TimePicker
 import DayPickerList from "@/app/components/input/dateTimeDaypicker/DayPickerList";
 import BaseInput from "@/app/components/input/text/BaseInput";
 import CheckBtn from "@/app/components/button/default/CheckBtn";
+import formatMoney from "@/utils/formatMoney";
+import Label from "../../component/Label";
 
 // 알바폼 만들기 - 사장님 - 3-근무조건
 export default function WorkConditionSection() {
@@ -56,15 +57,6 @@ export default function WorkConditionSection() {
   // 시급 상태 추가
   const [displayWage, setDisplayWage] = useState<string>("");
 
-  const formatNumber = (value: string) => {
-    let numericValue = value.replaceAll(/,/g, "");
-    if (numericValue.startsWith("0")) {
-      numericValue = numericValue.slice(1);
-    }
-    const formatNumber = numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    return formatNumber;
-  };
-
   // 리액트 훅폼 데이터를 가져와서 렌더링
   useEffect(() => {
     const selectedDays = getValues("workDays") || [];
@@ -150,7 +142,7 @@ export default function WorkConditionSection() {
             const value = e.target.value;
             const numericValue = Number(value.replace(/,/g, ""));
             setValue("hourlyWage", numericValue); // 콤마 제거하고 숫자형으로 저장
-            setDisplayWage(formatNumber(value));
+            setDisplayWage(formatMoney(value));
           }}
           variant="white"
           afterString="원"
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx b/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx
new file mode 100644
index 00000000..31614d10
--- /dev/null
+++ b/src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx
@@ -0,0 +1,253 @@
+"use client";
+// 알바폼 수정 페이지 (사장님)
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { FormProvider, useForm } from "react-hook-form";
+import axios from "axios";
+import TabMenuDropdown from "@/app/components/button/dropdown/TabMenuDropdown";
+import Button from "@/app/components/button/default/Button";
+import { toast } from "react-hot-toast";
+import { useMutation } from "@tanstack/react-query";
+import { useUpdateProfile } from "@/hooks/queries/user/me/useUpdateProfile";
+import RecruitContentSection from "../../../addform/section/RecruitContentSection";
+import RecruitConditionSection from "../../../addform/section/RecruitConditionSection";
+import WorkConditionSection from "../../../addform/section/WorkConditionSection";
+import { SubmitFormDataType } from "@/types/addform";
+import useEditing from "@/hooks/useEditing";
+import useFormDetail from "@/hooks/queries/form/detail/useFormDetail";
+
+export default function EditFormPage() {
+  const router = useRouter();
+  const [formIdState, setFormIdState] = useState<number>(0);
+  const formId = useParams().formId;
+
+  useEffect(() => {
+    // formId가 문자열로 전달되므로 숫자로 변환하여 상태에 저장
+    if (formId) {
+      setFormIdState(Number(formId)); // formId를 숫자로 변환하여 상태에 저장
+    }
+  }, [formId]);
+
+  const { albaFormDetailData, isLoading, error } = useFormDetail({ formId: formIdState });
+
+  const methods = useForm<SubmitFormDataType>({
+    mode: "onChange",
+  });
+
+  const {
+    reset,
+    setValue,
+    handleSubmit,
+    formState: { isDirty, isValid },
+  } = methods;
+
+  // 훅폼에서 관리하는 전체 데이터를 가져오는 함수
+  const currentValues: SubmitFormDataType = methods.watch();
+  const imageFiles = currentValues.imageFiles;
+  // 탭 선택 옵션 관리
+  const [selectedOption, setSelectedOption] = useState("모집 내용");
+  // 이미지 업로드 훅
+  const { uploadImageMutation } = useUpdateProfile();
+  // 각각의 탭 작성중 여부
+  const { isEditingRecruitContent, isEditingRecruitCondition, isEditingWorkCondition } = useEditing(currentValues);
+
+  // 비동기 데이터로 폼 상태 업데이트
+  useEffect(() => {
+    if (albaFormDetailData) {
+      reset({
+        isPublic: albaFormDetailData.isPublic,
+        hourlyWage: albaFormDetailData.hourlyWage, // 쉼표 추가하기
+        isNegotiableWorkDays: albaFormDetailData.isNegotiableWorkDays,
+        workDays: albaFormDetailData.workDays,
+        workEndTime: albaFormDetailData.workEndTime,
+        workStartTime: albaFormDetailData.workStartTime,
+        workEndDate: albaFormDetailData.workEndDate, // display값에 반영하기
+        workStartDate: albaFormDetailData.workStartDate,
+        location: albaFormDetailData.location,
+        preferred: albaFormDetailData.preferred, //value 반영하기
+        age: albaFormDetailData.age, //value 반영하기
+        education: albaFormDetailData.education, //value 반영하기
+        gender: albaFormDetailData.gender, //value 반영하기
+        numberOfPositions: albaFormDetailData.numberOfPositions, //value 반영하기
+        recruitmentEndDate: albaFormDetailData.recruitmentEndDate, // display값에 반영하기
+        recruitmentStartDate: albaFormDetailData.recruitmentStartDate,
+        description: albaFormDetailData.description,
+        title: albaFormDetailData.title,
+        imageUrls: albaFormDetailData.imageUrls, // 프리뷰 반영하기
+        imageFiles: [],
+      });
+    }
+  }, [albaFormDetailData, reset]);
+
+  useEffect(() => {
+    if (albaFormDetailData) {
+      // console.log("data", data);
+      console.log("currentValues", currentValues);
+    }
+  }, [albaFormDetailData, currentValues]);
+
+  // 이미지 업로드 api
+  const uploadImages = async (files: File[]) => {
+    if (currentValues.imageUrls.length !== currentValues.imageFiles.length) {
+      const uploadedUrls: string[] = [];
+
+      // 전체 파일 배열을 순회하면서 업로드 로직 진행
+      for (const file of files) {
+        // 파일 크기 체크
+        const maxSize = 5 * 1024 * 1024; // 5MB
+        if (file.size > maxSize) {
+          toast.error(`5MB 이상의 파일은 업로드할 수 없습니다.`);
+          continue;
+        }
+        const formData = new FormData();
+        formData.append("image", file);
+        try {
+          const uploadResponse = await uploadImageMutation.mutateAsync(file);
+          if (uploadResponse?.url) {
+            uploadedUrls.push(uploadResponse.url);
+          }
+        } catch (uploadError) {
+          console.error(`파일 ${file.name} 업로드 실패:`, uploadError);
+        }
+      }
+      return uploadedUrls;
+    } else {
+      return currentValues.imageUrls;
+    }
+  };
+
+  // 폼데이터 임시 저장 함수
+  const onTempSave = async () => {
+    // 이미지 처리 로직
+    if (imageFiles && imageFiles.length > 0) {
+      try {
+        const uploadedUrls = await uploadImages(Array.from(imageFiles));
+        if (uploadedUrls && uploadedUrls.length > 0) {
+          setValue("imageUrls", [...uploadedUrls]);
+        } else {
+          setValue("imageUrls", [...currentValues.imageUrls]);
+        }
+      } catch (error) {
+        console.error("임시저장 - 이미지 업로드 중 오류 발생:", error);
+        setValue("imageUrls", []);
+      }
+    }
+    // 임시저장
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem("tempAddFormData", JSON.stringify(currentValues));
+    }
+    console.log("임시저장 데이터", currentValues);
+  };
+
+  // 수정된 폼 제출 리액트쿼리
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const excludedKeys = ["displayDate", "workDateRange", "recruitDateRange", "imageFiles"];
+
+      // 원하는 필드만 포함된 새로운 객체 만들기
+      const filteredData = Object.entries(currentValues)
+        .filter(([key]) => !excludedKeys.includes(key)) // 제외할 키를 필터링
+        .reduce((acc: Partial<SubmitFormDataType>, [key, value]) => {
+          if (key === "numberOfPositions") {
+            // numberOfPositions는 숫자형으로 변환
+            acc[key] = Number(value);
+          } else if (key === "hourlyWage") {
+            // hourlyWage는 쉼표를 제거하고 숫자형으로 변환
+            if (value.includes(",")) acc[key] = Number(value.replaceAll(/,/g, "")); // 쉼표 제거 후 숫자형 변환
+          } else {
+            acc[key as keyof SubmitFormDataType] = value; // 나머지 값은 그대로 추가
+          }
+          return acc;
+        }, {});
+      await axios.patch(`/api/forms/${formId}`, filteredData);
+    },
+    onSuccess: () => {
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem("tempAddFormData");
+      }
+      toast.success("알바폼을 수정했습니다.");
+      router.push(`/alba/${formId}`);
+    },
+    onError: (error) => {
+      console.error("에러가 발생했습니다.", error);
+      toast.error("에러가 발생했습니다.");
+    },
+  });
+
+  // tab 선택 시 Url params 수정 & 하위 폼 데이터 임시저장
+  const searchParams = useSearchParams();
+  const currentParam = searchParams.get("tab");
+  const [prevOption, setPrevOption] = useState<string | null>(null);
+  const initialLoad = currentParam === null; // 초기 로딩 여부 확인
+
+  const handleOptionChange = async (option: string) => {
+    onTempSave();
+    setSelectedOption(option);
+    if (!initialLoad && option !== currentParam && option !== prevOption && isDirty) {
+      setPrevOption(option);
+    }
+    const params = {
+      "모집 내용": "recruit-content",
+      "모집 조건": "recruit-condition",
+      "근무 조건": "work-condition",
+    }[option];
+    router.push(`/alba/${formId}/edit?tab=${params}`);
+  };
+
+  const renderChildren = () => {
+    switch (selectedOption) {
+      case "모집 내용":
+        return <RecruitContentSection key="recruitContent" />;
+      case "모집 조건":
+        return <RecruitConditionSection key="recruitCondition" />;
+      case "근무 조건":
+        return <WorkConditionSection key="workCondition" />;
+      default:
+        return <></>;
+    }
+  };
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
+  }
+
+  return (
+    <FormProvider {...methods}>
+      <div className="relative">
+        <aside className="flex flex-col items-center justify-between rounded-[24px] bg-background-200 lg:fixed lg:left-[108px] lg:top-[64px] lg:m-10 lg:h-[80vh] lg:p-10">
+          <TabMenuDropdown
+            options={[
+              {
+                label: "모집 내용",
+                isEditing: isEditingRecruitContent || initialLoad || currentParam === "recruit-content",
+              },
+              { label: "모집 조건", isEditing: isEditingRecruitCondition || currentParam === "recruit-condition" },
+              { label: "근무 조건", isEditing: isEditingWorkCondition || currentParam === "work-condition" },
+            ]}
+            onChange={handleOptionChange}
+            currentParam={currentParam || ""}
+          />
+          <div className="absolute -bottom-[120px] mb-5 flex flex-col gap-2 lg:relative lg:bottom-0">
+            <Button
+              type="submit"
+              variant="solid"
+              width="md"
+              color="orange"
+              className="h-[58px] lg:h-[72px] lg:text-xl lg:leading-8"
+              disabled={!isValid}
+              onClick={handleSubmit(() => mutation.mutate())}
+            >
+              수정하기
+            </Button>
+          </div>
+        </aside>
+        {renderChildren()}
+      </div>
+    </FormProvider>
+  );
+}
diff --git a/src/app/(pages)/(albaform)/apply/[formId]/page.tsx b/src/app/(pages)/(albaform)/apply/[formId]/page.tsx
index 07a6c47b..685a149c 100644
--- a/src/app/(pages)/(albaform)/apply/[formId]/page.tsx
+++ b/src/app/(pages)/(albaform)/apply/[formId]/page.tsx
@@ -8,8 +8,8 @@ import { cn } from "@/lib/tailwindUtil";
 import axios from "axios";
 import toast from "react-hot-toast";
 import { useParams, useRouter } from "next/navigation";
-import Label from "@/app/(pages)/(albaform)/Label";
 import { useMutation } from "@tanstack/react-query";
+import Label from "../../component/Label";
 interface ApplyFormData {
   name: string;
   phoneNumber: string;
@@ -78,13 +78,9 @@ export default function Apply() {
   // 폼 제출 리액트쿼리
   const mutation = useMutation({
     mutationFn: async () => {
-      // 원하는 필드만 포함된 새로운 객체 만들기
-
-      await axios.post(`/api/forms/${formId}/applications`, submitData, {
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
+      console.log("apply 제출 submitData 출력", submitData);
+      const response = await axios.post(`/api/forms/${formId}/applications`, submitData);
+      console.log("apply 제출 response.data 출력", response.data);
     },
 
     onSuccess: () => {
@@ -92,7 +88,7 @@ export default function Apply() {
         window.localStorage.removeItem("tempAddFormData");
       }
       toast.success("알바폼을 등록했습니다.");
-      router.back(); // -> 추후 상세 페이지 이동으로 수정할것
+      router.push(`/alba/${formId}`);
     },
 
     onError: (error) => {
@@ -110,7 +106,8 @@ export default function Apply() {
 
       window.localStorage.setItem("tempApplyData", JSON.stringify(currentValues));
       toast.success("임시 저장되었습니다.");
-      // console.log("currentData", currentValues);
+      console.log("임시저장 currentData", currentValues);
+      console.log("임시저장 submitData", submitData);
     } catch (error) {
       console.error("Error uploading resume:", error);
       toast.error("이력서 업로드에 실패했습니다.");
diff --git a/src/app/(pages)/(albaform)/Label.tsx b/src/app/(pages)/(albaform)/component/Label.tsx
similarity index 100%
rename from src/app/(pages)/(albaform)/Label.tsx
rename to src/app/(pages)/(albaform)/component/Label.tsx
diff --git a/src/app/components/layout/addFormLayout/AddFormLayout.tsx b/src/app/(pages)/(albaform)/component/addFormLayout/AddFormLayout.tsx
similarity index 90%
rename from src/app/components/layout/addFormLayout/AddFormLayout.tsx
rename to src/app/(pages)/(albaform)/component/addFormLayout/AddFormLayout.tsx
index 97bc6eb9..26cff642 100644
--- a/src/app/components/layout/addFormLayout/AddFormLayout.tsx
+++ b/src/app/(pages)/(albaform)/component/addFormLayout/AddFormLayout.tsx
@@ -13,7 +13,7 @@ export default function AddFormLayout({ children }: { children: ReactNode }) {
     <>
       <div
         className={cn(
-          "mx-auto my-10 w-[327px] pb-[70px] lg:w-[640px] lg:pl-10",
+          "mx-auto my-10 w-[327px] pb-[70px] lg:w-[680px] lg:pb-0 lg:pl-10",
           title === "알바폼 만들기" ? "lg:ml-[600px]" : ""
         )}
       >
diff --git a/src/app/components/layout/addFormLayout/ApplyHeader.tsx b/src/app/(pages)/(albaform)/component/addFormLayout/ApplyHeader.tsx
similarity index 100%
rename from src/app/components/layout/addFormLayout/ApplyHeader.tsx
rename to src/app/(pages)/(albaform)/component/addFormLayout/ApplyHeader.tsx
diff --git a/src/app/(pages)/(albaform)/layout.tsx b/src/app/(pages)/(albaform)/layout.tsx
index 1c364bc7..3fb66c7a 100644
--- a/src/app/(pages)/(albaform)/layout.tsx
+++ b/src/app/(pages)/(albaform)/layout.tsx
@@ -1,5 +1,5 @@
 "use client";
-import AddFormLayout from "@/app/components/layout/addFormLayout/AddFormLayout";
+import AddFormLayout from "@/app/(pages)/(albaform)/component/addFormLayout/AddFormLayout";
 import { ReactNode, Suspense } from "react";
 
 export default function Layout({ children }: { children: ReactNode }) {
diff --git a/src/app/api/forms/[formId]/applications/route.ts b/src/app/api/forms/[formId]/applications/route.ts
index 733d5fd5..8bf78d63 100644
--- a/src/app/api/forms/[formId]/applications/route.ts
+++ b/src/app/api/forms/[formId]/applications/route.ts
@@ -7,21 +7,28 @@ import apiClient from "@/lib/apiClient";
 export async function POST(req: NextRequest, { params }: { params: { formId: string } }) {
   try {
     const accessToken = cookies().get("accessToken")?.value;
+    const body = await req.json();
+    console.log("apply 라우트에서 body출력", body);
 
+    // 토큰 없어도 비회원 apply 가능
     if (!accessToken) {
-      return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+      const response = await apiClient.post(`/forms/${params.formId}/applications`, body, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      console.log("apply 라우터에서 response.data출력 ", response.data);
+      return NextResponse.json(response.data);
+    } else {
+      const response = await apiClient.post(`/forms/${params.formId}/applications`, body, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json",
+        },
+      });
+      console.log("apply 라우터에서 response.data출력 ", response.data);
+      return NextResponse.json(response.data);
     }
-
-    const body = await req.json();
-
-    const response = await apiClient.post(`/forms/${params.formId}/applications`, body, {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        "Content-Type": "application/json",
-      },
-    });
-    console.log(response.data);
-    return NextResponse.json(response.data);
   } catch (error: unknown) {
     console.error(error);
     if (error instanceof AxiosError) {
diff --git a/src/app/api/forms/[formId]/route.ts b/src/app/api/forms/[formId]/route.ts
index 2db90a18..6a95eab9 100644
--- a/src/app/api/forms/[formId]/route.ts
+++ b/src/app/api/forms/[formId]/route.ts
@@ -40,7 +40,7 @@ export async function PATCH(req: NextRequest, { params }: { params: { formId: st
     return NextResponse.json(response.data);
   } catch (error: unknown) {
     if (error instanceof AxiosError) {
-      console.error(`PATCH /api/forms/${params.formId} error:`, error);
+      console.error(`수정api요청 실패 : /api/forms/${params.formId} error:`, error);
       if (error.response) {
         return NextResponse.json({ message: error.response.data.message }, { status: error.response.status });
       }
diff --git a/src/app/components/button/dropdown/InputDropdown.tsx b/src/app/components/button/dropdown/InputDropdown.tsx
index 4aac5335..03e57aa4 100644
--- a/src/app/components/button/dropdown/InputDropdown.tsx
+++ b/src/app/components/button/dropdown/InputDropdown.tsx
@@ -37,7 +37,7 @@ const InputDropdown = forwardRef<HTMLInputElement, InputDropdownProps>(
     // 작성중인 탭으로 다시 이동했을때 이전에 저장된 훅폼 데이터 연동
     useEffect(() => {
       const data = getValues();
-      setSelectedValue(data.name);
+      setSelectedValue(data.name || "");
     }, [getValues]);
 
     const textStyle = "text-base";
diff --git a/src/app/components/button/dropdown/TabMenuDropdown.tsx b/src/app/components/button/dropdown/TabMenuDropdown.tsx
index 6033a2c6..5e83df49 100644
--- a/src/app/components/button/dropdown/TabMenuDropdown.tsx
+++ b/src/app/components/button/dropdown/TabMenuDropdown.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { IoIosArrowDown } from "react-icons/io";
 import { cn } from "@/lib/tailwindUtil";
 import useWidth from "@/hooks/useWidth";
@@ -8,6 +8,7 @@ interface TopMenuDropdownProps {
   options: { label: string; isEditing: boolean }[];
   className?: string;
   onChange?: (menu: string) => void;
+  currentParam: string;
 }
 
 const EditingChip = ({ className = "", selected }: { className?: string; selected?: boolean }) => {
@@ -17,11 +18,27 @@ const EditingChip = ({ className = "", selected }: { className?: string; selecte
   return <span className={cn(chipStyle, selected ? selectedStyle : defaultStyle, className)}>작성중</span>;
 };
 
-const TabMenuDropdown = ({ options, className = "", onChange }: TopMenuDropdownProps) => {
+const TabMenuDropdown = ({ options, className = "", onChange, currentParam = "" }: TopMenuDropdownProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selectedLabel, setSelectedLabel] = useState<string>(options[0].label); // 선택된 값 (label을 저장)
   const { isDesktop } = useWidth();
 
+  useEffect(() => {
+    switch (currentParam) {
+      case "recruit-content":
+        setSelectedLabel("모집 내용");
+        break;
+      case "recruit-condition":
+        setSelectedLabel("모집 조건");
+        break;
+      case "work-condition":
+        setSelectedLabel("근무 조건");
+        break;
+      default:
+        setSelectedLabel("모집 내용");
+    }
+  }, []);
+
   const handleOptionClick = (label: string) => {
     setSelectedLabel(label); // 선택된 레이블을 저장
     setIsOpen((prev) => !prev);
diff --git a/src/app/components/card/cardList/ApplicationStatusCard.tsx b/src/app/components/card/cardList/ApplicationStatusCard.tsx
index f0a7d841..fcdac9b0 100644
--- a/src/app/components/card/cardList/ApplicationStatusCard.tsx
+++ b/src/app/components/card/cardList/ApplicationStatusCard.tsx
@@ -1,9 +1,7 @@
 "use client";
 
-import React, { useState } from "react";
+import React from "react";
 import { ApplicationResponse } from "@/types/response/application";
-import { FaSortAmountDown } from "react-icons/fa";
-import { cn } from "@/lib/tailwindUtil";
 
 interface ApplicationStatusCardProps {
   applicationStatusData: ApplicationResponse[]; // 전달받는 데이터는 배열
diff --git a/src/app/components/input/dateTimeDaypicker/DatePickerInput.tsx b/src/app/components/input/dateTimeDaypicker/DatePickerInput.tsx
index 2971edd8..cec7063a 100644
--- a/src/app/components/input/dateTimeDaypicker/DatePickerInput.tsx
+++ b/src/app/components/input/dateTimeDaypicker/DatePickerInput.tsx
@@ -90,7 +90,7 @@ const DatePickerInput = ({
           type="text"
           placeholder="시작일 ~ 종료일"
           variant="white"
-          beforeIcon={<BsCalendar4 className="size-[18px] text-grayscale-200" />}
+          beforeIcon={<BsCalendar4 className="size-4 text-grayscale-200 lg:size-8" />}
           afterIcon={<IoMdArrowDropup className={`${iconStyle} ${isOpen ? "rotate-180" : ""}`} />}
           value={dateValue || ""}
           readOnly
diff --git a/src/app/components/input/dateTimeDaypicker/TimePickerInput.tsx b/src/app/components/input/dateTimeDaypicker/TimePickerInput.tsx
index 0ada1659..60addaf6 100644
--- a/src/app/components/input/dateTimeDaypicker/TimePickerInput.tsx
+++ b/src/app/components/input/dateTimeDaypicker/TimePickerInput.tsx
@@ -17,7 +17,7 @@ const TimePickerInput = forwardRef<HTMLInputElement, BaseInputProps>((props, ref
     handleOpenDropdown();
   };
   const { isOpen, handleOpenDropdown } = useDropdownOpen();
-  const beforeIconStyle = "text-grayscale-400 size-[13px] lg:size-5";
+  const beforeIconStyle = "text-grayscale-400 size-5 lg:size-8";
   const afterIconStyle =
     "text-black-400 size-6 lg:size-9  transition-all transition-transform duration-200 ease-in-out";
   const width = "w-[150px] lg:w-[210px]";
@@ -38,7 +38,7 @@ const TimePickerInput = forwardRef<HTMLInputElement, BaseInputProps>((props, ref
         placeholder="00:00"
         value={value || ""}
         size="w-[150px] h-[54px] lg:w-[210px] lg:h-[64px]"
-        beforeIcon={<LuClock className={beforeIconStyle} />}
+        beforeIcon={<LuClock className={beforeIconStyle} strokeWidth="1" />}
         afterIcon={<IoMdArrowDropup className={`${afterIconStyle} ${isOpen ? "rotate-180" : ""}`} />}
         errormessage={errormessage}
       />
diff --git a/src/app/components/input/text/LocationInput.tsx b/src/app/components/input/text/LocationInput.tsx
index c7f8342c..01de1124 100644
--- a/src/app/components/input/text/LocationInput.tsx
+++ b/src/app/components/input/text/LocationInput.tsx
@@ -12,7 +12,7 @@ const LocationInput = forwardRef<HTMLInputElement, BaseInputProps>(
         ref={ref}
         type={type}
         variant={variant || "white"}
-        beforeIcon={<IoLocationSharp className="size-6 text-grayscale-100 lg:size-8" />}
+        beforeIcon={<IoLocationSharp className="size-5 text-grayscale-100 lg:size-8" />}
         placeholder="위치를 입력해주세요."
         errormessage={errormessage}
         feedbackMessage={feedbackMessage}
diff --git a/src/app/stories/design-system/components/card/cardList/RecruitCondition.stories.tsx b/src/app/stories/design-system/components/card/cardList/RecruitCondition.stories.tsx
index 76b1c8b4..81c73c6b 100644
--- a/src/app/stories/design-system/components/card/cardList/RecruitCondition.stories.tsx
+++ b/src/app/stories/design-system/components/card/cardList/RecruitCondition.stories.tsx
@@ -14,8 +14,8 @@ export default meta;
 type Story = StoryObj<typeof RecruitCondition>;
 
 const mockRecruitData: FormDetailResponse = {
-  updatedAt: new Date(),
-  createdAt: new Date(),
+  updatedAt: "2024-12-11T04:43:46.052Z",
+  createdAt: "2024-12-11T04:43:46.052Z",
   preferred: "업무 관련 자격증 소지, 유사업무 경험 우대, 인근 거주 우대",
   age: "20세 이상",
   education: "고등학교 졸업",
@@ -27,12 +27,12 @@ const mockRecruitData: FormDetailResponse = {
   workDays: ["월요일", "화요일"],
   workEndTime: "18:00",
   workStartTime: "09:00",
-  workEndDate: new Date(),
-  workStartDate: new Date(),
+  workEndDate: "2024-12-11T04:43:46.052Z",
+  workStartDate: "2024-12-11T04:43:46.052Z",
   location: "서울",
   imageUrls: ["url1", "url2"],
-  recruitmentEndDate: new Date(),
-  recruitmentStartDate: new Date(),
+  recruitmentEndDate: "2024-12-11T04:43:46.052Z",
+  recruitmentStartDate: "2024-12-11T04:43:46.052Z",
   description: "모집설명",
   title: "모집제목",
   ownerId: 1,
diff --git a/src/app/stories/design-system/components/card/cardList/RecruitDetail.stories.tsx b/src/app/stories/design-system/components/card/cardList/RecruitDetail.stories.tsx
index 6e633a21..f271bb6f 100644
--- a/src/app/stories/design-system/components/card/cardList/RecruitDetail.stories.tsx
+++ b/src/app/stories/design-system/components/card/cardList/RecruitDetail.stories.tsx
@@ -14,8 +14,8 @@ export default meta;
 type Story = StoryObj<typeof RecruitDetail>;
 
 const mockRecruitData: FormDetailResponse = {
-  updatedAt: new Date(),
-  createdAt: new Date(),
+  updatedAt: "2024-12-11T04:43:46.052Z",
+  createdAt: "2024-12-11T04:43:46.052Z",
   preferred: "string",
   age: "string",
   education: "string",
@@ -27,12 +27,12 @@ const mockRecruitData: FormDetailResponse = {
   workDays: ["월요일", "화요일"],
   workEndTime: "18:00",
   workStartTime: "09:00",
-  workEndDate: new Date(),
-  workStartDate: new Date(),
+  workEndDate: "2024-12-11T04:43:46.052Z",
+  workStartDate: "2024-12-11T04:43:46.052Z",
   location: "서울",
   imageUrls: ["url1", "url2"],
-  recruitmentEndDate: new Date(),
-  recruitmentStartDate: new Date(),
+  recruitmentEndDate: "2024-12-11T04:43:46.052Z",
+  recruitmentStartDate: "2024-12-11T04:43:46.052Z",
   description: "모집 설명",
   title: "모집 제목",
   ownerId: 1,
diff --git a/src/app/stories/design-system/components/dropdown/TabMenuDropdown.stories.tsx b/src/app/stories/design-system/components/dropdown/TabMenuDropdown.stories.tsx
index f28e7209..153ac7b8 100644
--- a/src/app/stories/design-system/components/dropdown/TabMenuDropdown.stories.tsx
+++ b/src/app/stories/design-system/components/dropdown/TabMenuDropdown.stories.tsx
@@ -29,4 +29,11 @@ export const Default: Story = {
       { label: "근무 조건", isEditing: false },
     ],
   },
+  render: (args) => {
+    // 기본 값을 전달합니다.
+    const mockSearchParams = new URLSearchParams("?tab=recruit-content");
+    const currentParam = mockSearchParams.get("tab") || "recruit-content";
+
+    return <TabMenuDropdown {...args} currentParam={currentParam} />;
+  },
 };
diff --git a/src/hooks/queries/form/detail/useFormDetail.ts b/src/hooks/queries/form/detail/useFormDetail.ts
index bc3844dc..5ac46caf 100644
--- a/src/hooks/queries/form/detail/useFormDetail.ts
+++ b/src/hooks/queries/form/detail/useFormDetail.ts
@@ -26,3 +26,4 @@ export const useFormDetail = ({ formId }: UseFormDetailParams) => {
     error: query.error,
   };
 };
+export default useFormDetail;
diff --git a/src/hooks/useEditing.ts b/src/hooks/useEditing.ts
new file mode 100644
index 00000000..6645766d
--- /dev/null
+++ b/src/hooks/useEditing.ts
@@ -0,0 +1,26 @@
+import { SubmitFormDataType } from "@/types/addform";
+import { useMemo } from "react";
+
+const useEditing = (data: SubmitFormDataType) => {
+  const isEditingRecruitContent = useMemo(() => {
+    return data.title !== "" || data.description !== "" || data.recruitmentStartDate !== undefined;
+  }, [data.title, data.description, data.recruitmentStartDate]);
+
+  const isEditingRecruitCondition = useMemo(() => {
+    return (
+      data.gender !== "" ||
+      (data.numberOfPositions ?? 0) > 0 ||
+      data.education !== "" ||
+      data.age !== "" ||
+      data.preferred !== ""
+    );
+  }, [data.gender, data.numberOfPositions, data.education, data.age, data.preferred]);
+
+  const isEditingWorkCondition = useMemo(() => {
+    return data.location !== "" || data.workStartTime !== "" || data.workStartDate !== "" || (data.hourlyWage ?? 0) > 0;
+  }, [data.location, data.workStartTime, data.workStartDate, data.hourlyWage]);
+
+  return { isEditingRecruitContent, isEditingRecruitCondition, isEditingWorkCondition };
+};
+
+export default useEditing;
diff --git a/src/types/addform.d.ts b/src/types/addform.d.ts
index 95f10898..9df5d950 100644
--- a/src/types/addform.d.ts
+++ b/src/types/addform.d.ts
@@ -1,20 +1,5 @@
-export interface RecruitContentFormData {
-  imageUrls: string[];
-  recruitmentEndDate: string | undefined;
-  recruitmentStartDate: string | undefined;
-  description: string;
-  title: string;
-}
-
-export interface RecruitConditionFormData {
-  numberOfPositions: number;
-  gender: string;
-  education: string;
-  age: string;
-  preferred: string;
-}
-
-export interface WorkConditionFormData {
+export interface SubmitFormDataType {
+  isPublic: boolean;
   hourlyWage: number;
   isNegotiableWorkDays: boolean;
   workDays: string[];
@@ -23,5 +8,15 @@ export interface WorkConditionFormData {
   workEndDate: string;
   workStartDate: string;
   location: string;
-  isPublic: boolean;
+  preferred: string;
+  age: string;
+  education: string;
+  gender: string;
+  numberOfPositions: number;
+  imageUrls: string[];
+  recruitmentEndDate: string | undefined;
+  recruitmentStartDate: string | undefined;
+  description: string;
+  title: string;
+  imageFiles: File[];
 }
diff --git a/src/types/response/form.d.ts b/src/types/response/form.d.ts
index e75c03a3..f2e14d45 100644
--- a/src/types/response/form.d.ts
+++ b/src/types/response/form.d.ts
@@ -46,8 +46,8 @@ export interface FormListResponse {
 
 // 알바폼 상세 조회/스크랩 응답
 export interface FormDetailResponse {
-  updatedAt: Date;
-  createdAt: Date;
+  updatedAt: string;
+  createdAt: string;
   preferred: string;
   age: string;
   education: string;
@@ -59,12 +59,12 @@ export interface FormDetailResponse {
   workDays: Array<string>;
   workEndTime: string;
   workStartTime: string;
-  workEndDate: Date;
-  workStartDate: Date;
+  workEndDate: string;
+  workStartDate: string;
   location: string;
   imageUrls: Array<string>;
-  recruitmentEndDate: Date;
-  recruitmentStartDate: Date;
+  recruitmentEndDate: string;
+  recruitmentStartDate: string;
   description: string;
   title: string;
   ownerId: number;
diff --git a/src/utils/formatMoney.ts b/src/utils/formatMoney.ts
new file mode 100644
index 00000000..07f13486
--- /dev/null
+++ b/src/utils/formatMoney.ts
@@ -0,0 +1,9 @@
+const formatMoney = (value: string) => {
+  let numericValue = value.replaceAll(/,/g, "");
+  if (numericValue.startsWith("0")) {
+    numericValue = numericValue.slice(1);
+  }
+  const formatNumber = numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return formatNumber;
+};
+export default formatMoney;