Merge pull request #132 from FE9-2/refactor/layout

Refactor : alba/[id] 폴더 병합

Author: cccwon2

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

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
 import axios from "axios";
 import TabMenuDropdown from "@/app/components/button/dropdown/TabMenuDropdown";
@@ -17,13 +17,13 @@ import CustomFormModal from "@/app/components/modal/modals/confirm/CustomFormMod
 
 export default function AddFormPage() {
   const router = useRouter();
-  const formId = useParams().formId;
-  // 리액트 훅폼에서 관리할 데이터 타입 지정 및 메서드 호출 (상위 컴���트 = useForm 사용)
+  const [formId, setFormId] = useState<number | undefined>(undefined);
+  // 리액트 훅폼에서 관리할 데이터 타입 지정 및 메서드 호출 (상위 컴포넌트 = useForm 사용)
   const methods = useForm<SubmitFormDataType>({
     mode: "onChange",
     defaultValues: {
-      isPublic: false,
-      hourlyWage: 0,
+      isPublic: true,
+      hourlyWage: "10,030",
       isNegotiableWorkDays: false,
       workDays: [],
       workEndTime: "",
@@ -92,7 +92,7 @@ export default function AddFormPage() {
             acc[key] = Number(value);
           } else if (key === "hourlyWage") {
             // 문자열이면 콤마 제거 후 숫자로 변환
-            acc[key] = typeof value === "string" ? Number(value.replace(/,/g, "")) : Number(value);
+            acc[key] = typeof value === "string" ? String(Number(value.replace(/,/g, ""))) : String(Number(value));
           } else if (key === "imageUrls") {
             // 업로드된 이미지 URL 사용
             acc[key] = uploadedUrls;
@@ -102,14 +102,16 @@ export default function AddFormPage() {
           return acc;
         }, {});
 
-      await axios.post("/api/forms", filteredData);
+      const response = await axios.post("/api/forms", filteredData);
+      const id = response.data.id;
+      setFormId(id);
     },
     onSuccess: () => {
       if (typeof window !== "undefined") {
         window.localStorage.removeItem("tempAddFormData");
       }
       toast.success("알바폼을 등록했습니다.");
-      router.push(`/alba/${formId}`);
+      // if (formId) router.push(`/alba/${formId}`);
     },
     onError: (error) => {
       console.error("에러가 발생했습니다.", error);
@@ -118,6 +120,12 @@ export default function AddFormPage() {
     },
   });
 
+  useEffect(() => {
+    if (formId) {
+      router.push(`/alba/${formId}`);
+    }
+  }, [formId]);
+
   // tab 선택 시 Url params 수정 & 하위 폼 데이터 임시저장
   const searchParams = useSearchParams();
   const currentParam = searchParams.get("tab");
@@ -277,7 +285,7 @@ export default function AddFormPage() {
             options={[
               {
                 label: "모집 내용",
-                isEditing: isEditingRecruitContent || initialLoad || currentParam === "recruit-content",
+                isEditing: isEditingRecruitContent || currentParam === "recruit-content",
               },
               { label: "모집 조건", isEditing: isEditingRecruitCondition || currentParam === "recruit-condition" },
               { label: "근무 조건", isEditing: isEditingWorkCondition || currentParam === "work-condition" },

src/app/(pages)/(albaform)/addform/section/RecruitContentSection.tsx

@@ -18,7 +18,6 @@ export default function RecruitContentSection() {
   const {
     register,
     setValue,
-    getValues,
     formState: { errors },
   } = useFormContext();
 

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

@@ -19,7 +19,6 @@ export default function WorkConditionSection() {
   const {
     register,
     setValue,
-    getValues,
     trigger,
     watch,
     formState: { errors },
@@ -40,6 +39,7 @@ export default function WorkConditionSection() {
 
   //근무 요일 지정
   const [selectedWorkDays, setSelectedWorkDays] = useState<string[]>([]);
+  const negotiable = watch("isNegotiableWorkDays");
 
   const handleClickDay = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -54,6 +54,9 @@ export default function WorkConditionSection() {
       setValue("workDays", [...selectedWorkDays, day]);
       trigger("workDays");
     }
+    if (negotiable) {
+      setSelectedWorkDays([]);
+    }
   };
 
   // 최저시급 상수 수정 (2025년 기준)
@@ -100,7 +103,7 @@ export default function WorkConditionSection() {
     <div className="relative">
       <Script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" strategy="afterInteractive" />
 
-      <form className="my-8 flex flex-col gap-4">
+      <form className="my-8 flex flex-col gap-8">
         <Label>근무 위치</Label>
         <div className="relative">
           <LocationInput
@@ -151,35 +154,39 @@ export default function WorkConditionSection() {
             ))}
         </div>
 
+        {/* 요일 협의 가능하다면 근무요일은 선택하지 않아도 됨 */}
         <div className="flex flex-col gap-4">
           <Label>근무 요일</Label>
-          <DayPickerList workDays={selectedWorkDays} onClick={handleClickDay} />
+          <DayPickerList workDays={selectedWorkDays} onClick={handleClickDay} disabled={negotiable} />
 
           <div className="relative flex flex-col pl-[14px]">
             <CheckBtn
               label="요일 협의 가능"
               checked={watch("isNegotiableWorkDays")}
               {...register("isNegotiableWorkDays")}
             />
-            {selectedWorkDays.length === 0 && <p className={cn(errorTextStyle, "")}>근무 요일을 선택해주세요.</p>}
+            {selectedWorkDays.length === 0 && !negotiable && (
+              <p className={cn(errorTextStyle, "")}>근무 요일을 선택해주세요.</p>
+            )}
           </div>
         </div>
-
-        <Label>시급</Label>
-        <BaseInput
-          {...register("hourlyWage", {
-            required: "시급을 작성해주세요.",
-            min: {
-              value: MINIMUM_WAGE,
-              message: `최저시급(${formatMoney(MINIMUM_WAGE.toString())}원) 이상을 입력해주세요.`,
-            },
-          })}
-          value={displayWage}
-          onChange={handleWageChange}
-          variant="white"
-          afterString="원"
-          errormessage={errors.hourlyWage?.message as string}
-        />
+        <div className="flex flex-col gap-4">
+          <Label>시급</Label>
+          <BaseInput
+            {...register("hourlyWage", {
+              required: "시급을 작성해주세요.",
+              min: {
+                value: MINIMUM_WAGE,
+                message: `최저시급(${formatMoney(MINIMUM_WAGE.toString())}원) 이상을 입력해주세요.`,
+              },
+            })}
+            value={displayWage}
+            onChange={handleWageChange}
+            variant="white"
+            afterString="원"
+            errormessage={errors.hourlyWage?.message as string}
+          />
+        </div>
 
         <div className="relative flex flex-col gap-4">
           <Label>공개 설정</Label>

…s)/alba/components/ApplicationStatus.tsx …d]/edit/components/ApplicationStatus.tsxsrc/app/(pages)/alba/components/ApplicationStatus.tsx renamed to src/app/(pages)/(albaform)/alba/[formId]/edit/components/ApplicationStatus.tsx src/app/(pages)/alba/components/ApplicationStatus.tsx renamed to src/app/(pages)/(albaform)/alba/[formId]/edit/components/ApplicationStatus.tsx

@@ -24,7 +24,7 @@ export default function FormDetails({ albaFormDetailData }: FormDetailsProps) {
       </div>
       <p className="text-3xl font-bold">{albaFormDetailData.title}</p>
       <div className="space-y-32">
-        <div className="text-2xl">{albaFormDetailData.description}</div>
+        <div className="whitespace-pre-wrap text-2xl">{albaFormDetailData.description}</div>
         <p className="text-3xl font-bold">근무 지역</p>
       </div>
       <div className="flex space-x-5 text-2xl">

…/(pages)/alba/components/FormActions.tsx …[formId]/edit/components/FormActions.tsxsrc/app/(pages)/alba/components/FormActions.tsx renamed to src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormActions.tsx src/app/(pages)/alba/components/FormActions.tsx renamed to src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormActions.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 formatMoney from "@/utils/formatMoney";
 
 export default function EditFormPage() {
   const router = useRouter();
@@ -57,7 +58,7 @@ export default function EditFormPage() {
     if (albaFormDetailData) {
       reset({
         isPublic: albaFormDetailData.isPublic,
-        hourlyWage: albaFormDetailData.hourlyWage, // 쉼표 추가하기
+        hourlyWage: formatMoney(String(albaFormDetailData.hourlyWage)), // 쉼표 추가하기
         isNegotiableWorkDays: albaFormDetailData.isNegotiableWorkDays,
         workDays: albaFormDetailData.workDays,
         workEndTime: albaFormDetailData.workEndTime,
@@ -146,7 +147,7 @@ export default function EditFormPage() {
             acc[key] = Number(value);
           } else if (key === "hourlyWage") {
             // hourlyWage는 쉼표를 제거하고 숫자형으로 변환
-            if (value.includes(",")) acc[key] = Number(value.replaceAll(/,/g, "")); // 쉼표 제거 후 숫자형 변환
+            if (value.includes(",")) acc[key] = String(Number(value.replaceAll(/,/g, ""))); // 쉼표 제거 후 숫자형 변환
           } else {
             acc[key as keyof SubmitFormDataType] = value; // 나머지 값은 그대로 추가
           }

…p/(pages)/alba/components/FormDetail.tsx …/[formId]/edit/components/FormDetail.tsxsrc/app/(pages)/alba/components/FormDetail.tsx renamed to src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormDetail.tsx src/app/(pages)/alba/components/FormDetail.tsx renamed to src/app/(pages)/(albaform)/alba/[formId]/edit/components/FormDetail.tsx

@@ -3,13 +3,13 @@
 import { useParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { useUser } from "@/hooks/queries/user/me/useUser";
-import FormHeader from "../components/FormHeader";
-import FormDetails from "../components/FormDetail";
-import RecruitInformation from "../components/RecruitInfomation";
-import ApplicationStatus from "../components/ApplicationStatus";
 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";
 
 interface Coords {
   lat: number;