Feat : alba/edit 알바폼 수정 페이지

src/app/(pages)/(albaform)/addform/WorkConditionSection.tsx

@@ -10,6 +10,7 @@ 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";
 
 // 알바폼 만들기 - 사장님 - 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="원"

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";
@@ -11,32 +11,12 @@ import { useUpdateProfile } from "@/hooks/queries/user/me/useUpdateProfile";
 import RecruitContentSection from "./RecruitContentSection";
 import RecruitConditionSection from "./RecruitConditionSection";
 import WorkConditionSection from "./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",
@@ -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(`/albaFormDetail/owner/${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,25 +199,7 @@ 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}>