Merge pull request #124 from FE9-2/feat/albaform/edit

Fix : 폼 관련 수정

Author: hongggyelim

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

@@ -23,7 +23,7 @@ export default function AddFormPage() {
     mode: "onChange",
     defaultValues: {
       isPublic: false,
-      hourlyWage: 10030,
+      hourlyWage: 0,
       isNegotiableWorkDays: false,
       workDays: [],
       workEndTime: "",
@@ -35,7 +35,7 @@ export default function AddFormPage() {
       age: "",
       education: "",
       gender: "",
-      numberOfPositions: 0,
+      numberOfPositions: undefined,
       recruitmentEndDate: undefined,
       recruitmentStartDate: undefined,
       description: "",
@@ -285,13 +285,13 @@ export default function AddFormPage() {
             onChange={handleOptionChange}
             currentParam={currentParam || ""}
           />
-          <div className="absolute -bottom-[160px] mb-20 flex flex-col gap-2 lg:relative lg:bottom-0 lg:mb-0">
+          <div className="absolute -bottom-[160px] mb-20 flex w-full flex-col gap-2 lg:relative lg:bottom-0 lg:mb-0">
             <Button
               type="button"
               variant="outlined"
               width="md"
               color="orange"
-              className="h-[58px] border bg-background-100 lg:h-[72px] lg:text-xl lg:leading-8"
+              className="lg: h-[58px] w-[320px] border bg-background-100 lg:h-[72px] lg:w-full lg:text-xl lg:leading-8"
               onClick={() => onTempSave()}
             >
               임시 저장
@@ -301,7 +301,7 @@ export default function AddFormPage() {
               variant="solid"
               width="md"
               color="orange"
-              className="h-[58px] lg:h-[72px] lg:text-xl lg:leading-8"
+              className="lg: h-[58px] w-[320px] lg:h-[72px] lg:w-full lg:text-xl lg:leading-8"
               disabled={!isValid}
               onClick={handleSubmit(() => mutation.mutate())}
             >

src/app/(pages)/(albaform)/alba/[formId]/edit/page.tsx

@@ -75,18 +75,10 @@ export default function EditFormPage() {
         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) {
@@ -232,13 +224,13 @@ export default function EditFormPage() {
             onChange={handleOptionChange}
             currentParam={currentParam || ""}
           />
-          <div className="absolute -bottom-[120px] mb-5 flex flex-col gap-2 lg:relative lg:bottom-0">
+          <div className="absolute -bottom-[120px] mb-10 flex w-[320px] lg:relative lg:bottom-0 lg:w-full">
             <Button
               type="submit"
               variant="solid"
               width="md"
               color="orange"
-              className="h-[58px] lg:h-[72px] lg:text-xl lg:leading-8"
+              className="h-[58px] w-full lg:h-[72px] lg:text-xl lg:leading-8"
               disabled={!isValid}
               onClick={handleSubmit(() => mutation.mutate())}
             >

src/app/(pages)/(albaform)/apply/[formId]/page.tsx

@@ -220,13 +220,13 @@ export default function Apply() {
           errormessage={errors.password?.message}
         />
       </div>
-      <div className="lg:flex-2 mt-4 flex flex-col gap-[10px] lg:mt-8 lg:flex-row">
+      <div className="lg:flex-2 mt-4 flex w-full flex-col gap-[10px] lg:mt-8 lg:flex-row">
         <Button
           type="button"
           variant="outlined"
           width="md"
           color="orange"
-          className="h-[58px] border lg:h-[72px] lg:text-xl lg:leading-8"
+          className="h-[58px] w-full border lg:h-[72px] lg:text-xl lg:leading-8"
           onClick={onTempSave}
           disabled={!isDirty}
         >
@@ -237,7 +237,7 @@ export default function Apply() {
           variant="solid"
           width="md"
           color="orange"
-          className="h-[58px] lg:h-[72px] lg:text-xl lg:leading-8"
+          className="h-[58px] w-full lg:h-[72px] lg:text-xl lg:leading-8"
           disabled={!isValid || !isDirty}
         >
           작성 완료

…/component/addFormLayout/ApplyHeader.tsx …es)/(albaform)/component/ApplyHeader.tsxsrc/app/(pages)/(albaform)/component/addFormLayout/ApplyHeader.tsx renamed to src/app/(pages)/(albaform)/component/ApplyHeader.tsx src/app/(pages)/(albaform)/component/addFormLayout/ApplyHeader.tsx renamed to src/app/(pages)/(albaform)/component/ApplyHeader.tsx

@@ -1,11 +1,54 @@
 "use client";
-import AddFormLayout from "@/app/(pages)/(albaform)/component/addFormLayout/AddFormLayout";
 import { ReactNode, Suspense } from "react";
+import { cn } from "@/lib/tailwindUtil";
+import ApplyHeader from "./component/ApplyHeader";
+import useModalStore from "@/store/modalStore";
+import { usePathname, useRouter } from "next/navigation";
 
 export default function Layout({ children }: { children: ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const title = pathname.split("/").includes("apply") ? "알바폼 지원하기" : "알바폼 만들기";
+
+  const { openModal } = useModalStore();
+
   return (
-    <AddFormLayout>
+    <div
+      className={cn(
+        "mx-auto my-10 w-[327px] pb-[70px] lg:w-[680px] lg:pb-0 lg:pl-10",
+        title === "알바폼 만들기" ? "lg:ml-[600px]" : ""
+      )}
+    >
+      <ApplyHeader
+        title={title}
+        onCancel={() =>
+          openModal("customForm", {
+            isOpen: true,
+            title: "폼 작성 취소",
+            content: "작성을 취소하시겠습니까?",
+            onConfirm: () => {
+              openModal("customForm", {
+                isOpen: false,
+                title: "",
+                content: "",
+                onConfirm: () => {},
+                onCancel: () => {},
+              });
+              router.back();
+            },
+            onCancel: () => {
+              openModal("customForm", {
+                isOpen: false,
+                title: "",
+                content: "",
+                onConfirm: () => {},
+                onCancel: () => {},
+              });
+            },
+          })
+        }
+      />
       <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
-    </AddFormLayout>
+    </div>
   );
 }

src/app/(pages)/(albaform)/component/addFormLayout/AddFormLayout.tsx

@@ -18,27 +18,29 @@ const InputDropdown = forwardRef<HTMLInputElement, InputDropdownProps>(
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const [selectedValue, setSelectedValue] = useState<string>("");
     const [isCustomInput, setIsCustomInput] = useState<boolean>(false);
-    const { setValue, getValues } = useFormContext();
+    const { setValue, watch } = useFormContext();
 
     const handleOptionClick = (option: string) => {
       if (option === "직접 입력") {
         setIsCustomInput(true);
         setSelectedValue("");
         // 동적으로 받아온 name에 값 할당 -> 훅폼에 저장
-        setValue(name, selectedValue);
+        setValue(name, selectedValue, { shouldDirty: true });
       } else {
         setSelectedValue(option);
         setIsCustomInput(false);
-        setValue(name, option);
+        setValue(name, option, { shouldDirty: true });
         setIsOpen(false);
       }
     };
 
     // 작성중인 탭으로 다시 이동했을때 이전에 저장된 훅폼 데이터 연동
     useEffect(() => {
-      const data = getValues();
-      setSelectedValue(data.name || "");
-    }, [getValues]);
+      const value = watch(name); // 동적으로 필드 값 가져오기
+      if (value !== undefined) {
+        setSelectedValue(value); // 초기값 동기화
+      }
+    }, [name, watch]);
 
     const textStyle = "text-base";