refactor: 등록 단계를 각각 훅으로 분리 (Step1, Step2)

src/features/projects/hook/useInsertStep1.ts

@@ -0,0 +1,86 @@
+import { Timestamp } from "firebase/firestore";
+import { useState, type ChangeEvent } from "react";
+
+import {
+  ProjectCategory,
+  type ProjectItemInsertReq,
+} from "@shared/types/project";
+
+type Setp1Type = Pick<
+  ProjectItemInsertReq,
+  "title" | "oneLineInfo" | "category" | "closedDate" | "simpleInfo"
+>;
+
+interface ApplyFormResult {
+  form1: Setp1Type;
+  update: {
+    title: (e: ChangeEvent<HTMLInputElement>) => void;
+    oneLineInfo: (e: ChangeEvent<HTMLInputElement>) => void;
+    simpleInfo: (e: ChangeEvent<HTMLInputElement>) => void;
+    category: (category: ProjectCategory) => void;
+    closedDate: (date: string) => void;
+  };
+}
+
+const useInsertStep1 = ({ state }: { state?: Setp1Type }): ApplyFormResult => {
+  const isModify = !!state; // 추후에 수정을 위해서
+
+  const [form1, setForm1] = useState(isModify ? state : initForm1);
+
+  const updateTitle = (e: ChangeEvent<HTMLInputElement>): void => {
+    setForm1((prev) => ({
+      ...prev,
+      title: e.target.value,
+    }));
+  };
+
+  const updateOneLineInfo = (e: ChangeEvent<HTMLInputElement>): void => {
+    setForm1((prev) => ({
+      ...prev,
+      oneLineInfo: e.target.value,
+    }));
+  };
+
+  const updateSimpleInfo = (e: ChangeEvent<HTMLInputElement>): void => {
+    setForm1((prev) => ({
+      ...prev,
+      simpleInfo: e.target.value,
+    }));
+  };
+
+  const updateCategory = (category: ProjectCategory): void => {
+    setForm1((prev) => ({
+      ...prev,
+      category,
+    }));
+  };
+
+  const updateClosedDate = (closedDate: string): void => {
+    const formateTimeStamp = Timestamp.fromDate(new Date(closedDate));
+    setForm1((prev) => ({
+      ...prev,
+      closedDate: formateTimeStamp,
+    }));
+  };
+
+  return {
+    form1,
+    update: {
+      title: updateTitle,
+      oneLineInfo: updateOneLineInfo,
+      simpleInfo: updateSimpleInfo,
+      category: updateCategory,
+      closedDate: updateClosedDate,
+    },
+  };
+};
+
+export default useInsertStep1;
+
+const initForm1 = {
+  title: "",
+  category: ProjectCategory.webDevelopment,
+  simpleInfo: "",
+  closedDate: Timestamp.now(),
+  oneLineInfo: "",
+};

src/features/projects/hook/useInsertStep2.ts

@@ -0,0 +1,138 @@
+import { useState, type ChangeEvent } from "react";
+
+import {
+  RecruitmentStatus,
+  type Positions,
+  type ProjectItemInsertReq,
+} from "@shared/types/project";
+import { ExpectedPeriod } from "@shared/types/schedule";
+
+type Setp2Type = Pick<
+  ProjectItemInsertReq,
+  "techStack" | "teamSize" | "expectedPeriod" | "positions"
+>;
+
+interface ApplyFormResult {
+  form2: Setp2Type;
+  setting: {
+    // 내부 Input 셋팅용
+    tehckStackItem: (e: ChangeEvent<HTMLInputElement>) => void;
+    positionItem: <K extends keyof Positions>(
+      index: number,
+      field: K,
+      value: Positions[K]
+    ) => void;
+  };
+  update: {
+    // form 업데이트용
+    teamSize: (e: ChangeEvent<HTMLInputElement>) => void;
+    expectedPeriod: (e: ChangeEvent<HTMLInputElement>) => void;
+    techStack: () => void;
+    newPosition: () => void;
+    removePosition: (idx: number) => void;
+  };
+}
+
+const useInsertStep2 = ({ state }: { state?: Setp2Type }): ApplyFormResult => {
+  const isModify = !!state; // 추후에 수정을 위해서
+
+  const [form2, setForm2] = useState(isModify ? state : initForm2);
+  const [techSteckItem, setTechStackItem] = useState("");
+
+  // 팀 규모
+  const updateTeamSize = (e: ChangeEvent<HTMLInputElement>): void => {
+    const formateNumber = parseInt(e.target.value) || 0;
+
+    setForm2((prev) => ({
+      ...prev,
+      teamSize: formateNumber,
+    }));
+  };
+
+  // 예상 기간
+  const updateExpectedPeriod = (e: ChangeEvent<HTMLInputElement>): void => {
+    const value = e.target.value as keyof typeof ExpectedPeriod;
+
+    if (value in ExpectedPeriod) {
+      setForm2((prev) => ({
+        ...prev,
+        expectedPeriod: ExpectedPeriod[value],
+      }));
+    }
+  };
+
+  // 기술 스택 input box 용
+  const settingTechStackItem = (e: ChangeEvent<HTMLInputElement>): void => {
+    setTechStackItem(e.target.value);
+  };
+
+  // 기술 스택 + 버튼 시 list에 추가
+  const updateTechStack = (): void => {
+    setForm2((prev) => ({
+      ...prev,
+      techStack: [...prev.techStack, techSteckItem],
+    }));
+  };
+
+  // 모집 포지션 수정
+  const updatePositionField = <K extends keyof Positions>(
+    index: number,
+    field: K,
+    value: Positions[K]
+  ): void => {
+    setForm2((prev) => ({
+      ...prev,
+      positions: prev.positions.map((pos, i) =>
+        i === index ? { ...pos, [field]: value } : pos
+      ),
+    }));
+  };
+
+  // 모집 포지션 추가
+  const insertNewPositions = (): void => {
+    setForm2((prev) => ({
+      ...prev,
+      positions: [initPosition],
+    }));
+  };
+
+  // 포지션 삭제
+  const removePosition = (idx: number): void => {
+    setForm2((prev) => ({
+      ...prev,
+      positions: prev.positions.filter((_, i) => i !== idx),
+    }));
+  };
+
+  return {
+    form2,
+    setting: {
+      tehckStackItem: settingTechStackItem,
+      positionItem: updatePositionField,
+    },
+    update: {
+      teamSize: updateTeamSize,
+      techStack: updateTechStack,
+      expectedPeriod: updateExpectedPeriod,
+      newPosition: insertNewPositions,
+      removePosition: removePosition,
+    },
+  };
+};
+
+export default useInsertStep2;
+
+const initForm2 = {
+  teamSize: 0,
+  techStack: [],
+  positions: [],
+  expectedPeriod: ExpectedPeriod.oneMonth,
+};
+
+const initPosition: Positions = {
+  position: "frontend",
+  count: 0,
+  experience: "",
+  status: RecruitmentStatus.recruiting,
+  applicants: [],
+};

src/features/projects/hook/useProjectInsertForm.ts

@@ -73,6 +73,10 @@ const useProjectInsertForm = (): InsertFormResult => {
     insertItem(TestData);
   };
 
+  // lint에러를 피하기 위한...
+  // 추후에 step3, step4 훅 만들 때 가져다 쓰시라고 미리 만들어놨습니다!
+  console.log(initForm2, initForm3, initForm4);
+
   return {
     form: {
       step1: initForm1,
@@ -94,10 +98,25 @@ export default useProjectInsertForm;
 
 const initForm1 = {
   title: "",
-  oneLineInfo: "",
   category: ProjectCategory.webDevelopment,
-  closedDate: Timestamp.now(),
   simpleInfo: "",
+  closedDate: Timestamp.now(),
+  oneLineInfo: "",
+};
+const initForm2 = {
+  teamSize: 0,
+  techStack: [],
+  positions: [],
+  expectedPeriod: ExpectedPeriod.oneMonth,
+};
+const initForm3 = {
+  description: "",
+  schedules: [],
+};
+const initForm4 = {
+  workflow: Workflow.online,
+  requirements: [],
+  preferentialTreatment: [],
 };
 
 // 테스트용 form 입니다.