Merge pull request #114 from FE9-2/feat/albaform/owner

Chore : 알바폼 페이지 일부 수정

Author: cccwon2

…/(albaform)/addform/RecruitCondition.tsx …orm)/addform/RecruitConditionSection.tsxsrc/app/(pages)/(albaform)/addform/RecruitCondition.tsx renamed to src/app/(pages)/(albaform)/addform/RecruitConditionSection.tsx src/app/(pages)/(albaform)/addform/RecruitCondition.tsx renamed to src/app/(pages)/(albaform)/addform/RecruitConditionSection.tsx

@@ -4,7 +4,7 @@ import Label from "../Label";
 import InputDropdown from "@/app/components/button/dropdown/InputDropdown";
 
 // 알바폼 만들기 - 사장님- 2-모집조건
-export default function RecruitCondition() {
+export default function RecruitConditionSection() {
   const {
     register,
     formState: { errors },

…s)/(albaform)/addform/RecruitContent.tsx …aform)/addform/RecruitContentSection.tsxsrc/app/(pages)/(albaform)/addform/RecruitContent.tsx renamed to src/app/(pages)/(albaform)/addform/RecruitContentSection.tsx src/app/(pages)/(albaform)/addform/RecruitContent.tsx renamed to src/app/(pages)/(albaform)/addform/RecruitContentSection.tsx

@@ -7,11 +7,10 @@ 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 { useSearchParams } from "next/navigation";
 
 // 알바폼 만들기 - 사장님 - 1-모집내용
 
-export default function RecruitContent() {
+export default function RecruitContentSection() {
   // 이미지 파일을 로컬 상태에 저장
   const [initialImageList, setInitialImageList] = useState<{ file: File; url: string; id: string }[]>([]);
 
@@ -41,12 +40,9 @@ export default function RecruitContent() {
     ]);
   };
 
-  const searchParams = useSearchParams();
-  const currentParam = searchParams.get("tab");
-  const initialLoad = currentParam === null; // 초기 로딩 여부 확인
   // 컴포넌트가 마운트될 때 이미지 초기값 설정 (초기로딩 제외)
   useEffect(() => {
-    if (!initialLoad && currentValue.imageFiles?.length > 0) {
+    if (currentValue.imageFiles?.length > 0) {
       handleChangeImages(currentValue.imageFiles);
     }
   }, []);

…es)/(albaform)/addform/WorkCondition.tsx …baform)/addform/WorkConditionSection.tsxsrc/app/(pages)/(albaform)/addform/WorkCondition.tsx renamed to src/app/(pages)/(albaform)/addform/WorkConditionSection.tsx src/app/(pages)/(albaform)/addform/WorkCondition.tsx renamed to src/app/(pages)/(albaform)/addform/WorkConditionSection.tsx

@@ -12,7 +12,7 @@ import BaseInput from "@/app/components/input/text/BaseInput";
 import CheckBtn from "@/app/components/button/default/CheckBtn";
 
 // 알바폼 만들기 - 사장님 - 3-근무조건
-export default function WorkCondition() {
+export default function WorkConditionSection() {
   const {
     register,
     setValue,

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

@@ -4,13 +4,13 @@ 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";
-import RecruitCondition from "./RecruitCondition";
 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 RecruitContent from "./RecruitContent";
-import WorkCondition from "./WorkCondition";
+import RecruitContentSection from "./RecruitContentSection";
+import RecruitConditionSection from "./RecruitConditionSection";
+import WorkConditionSection from "./WorkConditionSection";
 
 interface SubmitFormDataType {
   isPublic: boolean;
@@ -66,13 +66,12 @@ export default function AddFormPage() {
 
   const {
     setValue,
-    getValues,
     handleSubmit,
     formState: { isDirty, isValid },
   } = methods;
 
   // 훅폼에서 관리하는 전체 데이터를 가져오는 함수
-  const currentValues: SubmitFormDataType = getValues();
+  const currentValues: SubmitFormDataType = methods.watch();
 
   // 이미지 업로드 api 처리를 위해 별도 변수에 할당
   const imageFiles = currentValues.imageFiles;
@@ -135,17 +134,17 @@ export default function AddFormPage() {
       "모집 조건": "recruit-condition",
       "근무 조건": "work-condition",
     }[option];
-    router.replace(`/addform?tab=${params}`);
+    router.push(`/addform?tab=${params}`);
   };
 
   const renderChildren = () => {
     switch (selectedOption) {
       case "모집 내용":
-        return <RecruitContent key="recruitContent" />;
+        return <RecruitContentSection key="recruitContent" />;
       case "모집 조건":
-        return <RecruitCondition key="recruitCondition" />;
+        return <RecruitConditionSection key="recruitCondition" />;
       case "근무 조건":
-        return <WorkCondition key="workCondition" />;
+        return <WorkConditionSection key="workCondition" />;
       default:
         return <></>;
     }
@@ -204,33 +203,27 @@ export default function AddFormPage() {
       window.localStorage.setItem("tempAddFormData", JSON.stringify(currentValues));
     }
     toast.success("임시 저장되었습니다.");
-    // console.log("임시저장 데이터", currentValues);
+    console.log("임시저장 데이터", currentValues);
   };
 
   // 각각의 탭 작성중 여부
   const isEditingRecruitContent =
-    currentValues.title !== "" ||
-    currentValues.description !== "" ||
-    currentValues.recruitmentStartDate !== "" ||
-    currentValues.imageUrls
+    currentValues.title !== "" || currentValues.description !== "" || currentValues.recruitmentStartDate !== undefined
       ? true
       : false;
   const isEditingRecruitCondition =
-    currentValues.gender ||
-    currentValues.numberOfPositions ||
-    currentValues.education ||
-    currentValues.age ||
-    currentValues.preferred
+    currentValues.gender !== "" ||
+    currentValues.numberOfPositions !== 0 ||
+    currentValues.education !== "" ||
+    currentValues.age !== "" ||
+    currentValues.preferred !== ""
       ? true
       : false;
   const isEditingWorkCondition =
-    currentValues.location ||
-    currentValues.workDays ||
-    currentValues.workStartTime ||
-    currentValues.workStartDate ||
-    currentValues.hourlyWage ||
-    currentValues.isNegotiableWorkDays ||
-    currentValues.isPublic
+    currentValues.location !== "" ||
+    currentValues.workStartTime !== "" ||
+    currentValues.workStartDate !== "" ||
+    currentValues.hourlyWage > 0
       ? true
       : false;
 
@@ -242,7 +235,7 @@ export default function AddFormPage() {
             options={[
               {
                 label: "모집 내용",
-                isEditing: isEditingRecruitContent || initialLoad || currentParam === "recruit-condition",
+                isEditing: isEditingRecruitContent || initialLoad || currentParam === "recruit-content",
               },
               { label: "모집 조건", isEditing: isEditingRecruitCondition || currentParam === "recruit-condition" },
               { label: "근무 조건", isEditing: isEditingWorkCondition || currentParam === "work-condition" },

src/app/api/forms/[formId]/applications/route.ts

@@ -20,9 +20,10 @@ export async function POST(req: NextRequest, { params }: { params: { formId: str
         "Content-Type": "application/json",
       },
     });
-
+    console.log(response.data);
     return NextResponse.json(response.data);
   } catch (error: unknown) {
+    console.error(error);
     if (error instanceof AxiosError) {
       console.error(`POST /api/forms/${params.formId}/applications error:`, error);
       if (error.response) {

src/app/components/input/file/ImageInput/ImageInput.tsx

@@ -17,7 +17,7 @@ interface ImageInputProps {
 }
 
 const ImageInput = forwardRef<HTMLInputElement, ImageInputProps>((props, ref) => {
-  const [imageList, setImageList] = useState<ImageInputType[]>(props.initialImageList || []); // 단순히 이미지 프리뷰를 위한 상태 관리
+  const [imageList, setImageList] = useState<ImageInputType[]>([]); // 단순히 이미지 프리뷰를 위한 상태 관리
 
   const handleFileChange = (selectedFile: File | null) => {
     if (selectedFile) {
@@ -42,6 +42,7 @@ const ImageInput = forwardRef<HTMLInputElement, ImageInputProps>((props, ref) =>
       props.onChange?.(newImageList.map((img) => img.file).filter((file) => file !== null));
     }
   };
+
   const handleOpenFileSelecter = () => {
     if (typeof ref === "function") {
       // input 요소를 찾아서 클릭
@@ -55,6 +56,10 @@ const ImageInput = forwardRef<HTMLInputElement, ImageInputProps>((props, ref) =>
   };
 
   const handleDeleteImage = (targetId: string) => {
+    const targetImage = imageList.find((image) => image.id === targetId);
+    if (targetImage) {
+      URL.revokeObjectURL(targetImage.url); // URL 객체 해제
+    }
     const newImageList = imageList.filter((image) => image.id !== targetId);
     setImageList(newImageList);
     props.onChange?.(newImageList.map((img) => img.file).filter((file) => file !== null));

src/app/components/layout/addFormLayout/ApplyHeader.tsx

@@ -2,7 +2,7 @@ import Button from "@/app/components/button/default/Button";
 
 const ApplyHeader = ({ title, onCancel }: { title: string; onCancel: () => void }) => {
   return (
-    <div className="flex w-full items-center justify-between py-5">
+    <div className="flex w-full items-center justify-between pb-5">
       <h1 className="text-xl font-semibold leading-5 text-black-500 lg:text-[32px] lg:leading-[46px]">{title}</h1>
       <Button className="h-10 text-grayscale-50" color="gray" width="xs" onClick={onCancel}>
         작성 취소