Feat/insert 프로젝트 등록 페이지 입력값 유효성 검사 구현

src/entities/projects/ui/project-insert/ProjectPreferentialCard.tsx

@@ -43,7 +43,7 @@ const ProjectPreferentialCard = ({
     <SimpleFormCard
       title="우대사항"
       description="있으면 좋은 기술이나 경험이 있나요?"
-      helpText="우대사항은 선택사항입니다. 있으면 더 좋은 조건들을 적어주세요"
+      helpText="있으면 더 좋은 조건들을 적어주세요 (최소 1개 이상)"
       large={large}
       style={style}
     >

src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx

@@ -1,4 +1,4 @@
-import { TextField } from "@mui/material";
+import { TextField, useTheme } from "@mui/material";
 import type { ChangeEvent, CSSProperties, JSX } from "react";
 
 import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
@@ -16,6 +16,8 @@ const ProjectSimpleDescCard = ({
   large,
   style,
 }: ProjectSimpleDescCardProps): JSX.Element => {
+  const theme = useTheme();
+
   return (
     <SimpleFormCard
       title="프로젝트 간단 소개"
@@ -34,23 +36,21 @@ const ProjectSimpleDescCard = ({
         fullWidth
         variant="outlined"
         size="small"
-        InputProps={{
-          sx: {
+        sx={{
+          "& .MuiOutlinedInput-root": {
             fontSize: 16,
             fontFamily: "inherit",
             background: "none",
-            border: "none",
+
             "&:hover .MuiOutlinedInput-notchedOutline": {
-              borderColor: "#222",
+              borderColor: theme.palette.text.primary,
             },
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: "#1976d2",
+              borderColor: theme.palette.primary.main,
               borderWidth: "2px",
             },
           },
-        }}
-        inputProps={{
-          style: {
+          "& .MuiOutlinedInput-input": {
             padding: large ? 5 : 5,
             fontSize: 16,
             color: "#222",

src/features/projects/hook/useInsertStep1.ts

@@ -25,6 +25,7 @@ const useInsertStep1 = ({ state }: { state?: Step1Type }): ApplyFormResult => {
   const isModify = !!state; // 추후에 수정을 위해서
 
   const [form1, setForm1] = useState(isModify ? state : initForm1);
+  const [hasUserSelected, setHasUserSelected] = useState(false);
 
   const updateTitle = (e: ChangeEvent<HTMLInputElement>): void => {
     setForm1((prev) => ({
@@ -50,13 +51,23 @@ const useInsertStep1 = ({ state }: { state?: Step1Type }): ApplyFormResult => {
   };
 
   const updateCategory = (event: SelectChangeEvent): void => {
+    setHasUserSelected(true);
     setForm1((prev) => ({
       ...prev,
       category: event.target.value as ProjectCategory,
     }));
   };
 
   const updateClosedDate = (e: ChangeEvent<HTMLInputElement>): void => {
+    if (!e.target.value) {
+      // 빈 값일 때 상태를 null로 설정 (날짜 삭제)
+      setForm1((prev) => ({
+        ...prev,
+        closedDate: null as any,
+      }));
+      return;
+    }
+
     const formateTimeStamp = Timestamp.fromDate(new Date(e.target.value));
     setForm1((prev) => ({
       ...prev,
@@ -65,10 +76,24 @@ const useInsertStep1 = ({ state }: { state?: Step1Type }): ApplyFormResult => {
   };
 
   const validateForm = (): boolean => {
-    //여기에 검사식을 넣어주세요.
-    // 아래는 예시 입니다.
     if (!form1.title.trim()) {
-      alert("프로젝트 이름을 적어주세욧요.");
+      alert("프로젝트 이름을 입력해주세요");
+      return false;
+    }
+    if (!form1.oneLineInfo.trim()) {
+      alert("한 줄 소개를 입력해주세요.");
+      return false;
+    }
+    if (!form1.simpleInfo.trim()) {
+      alert("프로젝트 간단 설명을 입력해주세요.");
+      return false;
+    }
+    if (!hasUserSelected) {
+      alert("프로젝트 분야를 선택해주세요.");
+      return false;
+    }
+    if (!form1.closedDate) {
+      alert("모집 마감일을 선택해주세요.");
       return false;
     }
     return true;

src/features/projects/hook/useInsertStep2.ts

@@ -20,12 +20,41 @@ const useInsertStep2 = ({ state }: { state?: Step2Type }): ApplyFormResult => {
   };
 
   const validateForm = (): boolean => {
-    //여기에 검사식을 넣어주세요.
-    // 아래는 예시 입니다.
+    if (formStep2.teamSize === 0) {
+      alert("팀 규모를 선택해주세요.");
+      return false;
+    }
+    if (!formStep2.expectedPeriod) {
+      alert("예상 일정을 선택해주세요.");
+      return false;
+    }
+
     if (formStep2.techStack.length === 0) {
-      alert("기술 스택을 적어주세욧요.");
+      alert("기술 스택을 추가해주세요");
       return false;
     }
+    if (formStep2.positions.length === 0) {
+      alert("최소 1개 이상의 모집 포지션을 추가해주세요.");
+      return false;
+    }
+    for (let i = 0; i < formStep2.positions.length; i++) {
+      const position = formStep2.positions[i];
+
+      if (!position.position) {
+        alert(`${i + 1}번째 포지션을 선택해주세요.`);
+        return false;
+      }
+
+      if (!position.count || position.count === 0) {
+        alert(`${i + 1}번째 포지션의 모집 인원을 선택해주세요.`);
+        return false;
+      }
+
+      if (!position.experience) {
+        alert(`${i + 1}번째 포지션의 경력 요구사항을 선택해주세요.`);
+        return false;
+      }
+    }
     return true;
   };
 

src/features/projects/hook/useInsertStep3.ts

@@ -34,12 +34,34 @@ const useInsertStep3 = ({ state }: { state?: Step3Type }): ApplyFormResult => {
   };
 
   const validateForm = (): boolean => {
-    //여기에 검사식을 넣어주세요.
-    // 아래는 예시 입니다.
     if (!formStep3.description.trim()) {
-      alert("프로젝트 상세 설명을 적어주세욧요.");
+      alert("프로젝트 상세 설명을 작성해주세요");
       return false;
     }
+    if (formStep3.schedules.length === 0) {
+      alert("최소 1개 이상의 프로젝트 일정을 추가해주세요.");
+      return false;
+    }
+
+    for (let i = 0; i < formStep3.schedules.length; i++) {
+      const schedule = formStep3.schedules[i];
+      const scheduleNum = i + 1;
+
+      if (!schedule.stageName.trim()) {
+        alert(`${scheduleNum}번째 일정의 단계명을 입력해주세요.`);
+        return false;
+      }
+
+      if (!schedule.description.trim()) {
+        alert(`${scheduleNum}번째 일정의 설명을 입력해주세요.`);
+        return false;
+      }
+
+      if (!schedule.period) {
+        alert(`${scheduleNum}번째 일정의 예상 기간을 선택해주세요.`);
+        return false;
+      }
+    }
     return true;
   };
 

src/features/projects/hook/useInsertStep4.ts

@@ -29,12 +29,31 @@ const useInsertStep4 = ({ state }: { state?: Step4Type }): ApplyFormResult => {
   };
 
   const validateForm = (): boolean => {
-    //여기에 검사식을 넣어주세요.
-    // 아래는 예시 입니다.
-    if (formStep4.requirements[0] === "") {
-      alert("지원 요구사항을 적어주세욧요.");
+    if (!formStep4.workflow) {
+      alert("진행 방식을 선택해주세요.");
       return false;
     }
+    if (formStep4.requirements.length === 0) {
+      alert("최소 1개 이상의 지원 요구사항을 입력해주세요.");
+      return false;
+    }
+    for (let i = 0; i < formStep4.requirements.length; i++) {
+      if (!formStep4.requirements[i].trim()) {
+        alert(`${i + 1}번째 지원 요구사항을 입력해주세요.`);
+        return false;
+      }
+    }
+    if (formStep4.preferentialTreatment.length === 0) {
+      alert("최소 1개 이상의 우대사항을 입력해주세요.");
+      return false;
+    }
+    for (let i = 0; i < formStep4.preferentialTreatment.length; i++) {
+      if (!formStep4.preferentialTreatment[i].trim()) {
+        alert(`${i + 1}번째 우대사항을 입력해주세요.`);
+        return false;
+      }
+    }
+
     return true;
   };
 

src/features/projects/hook/useProjectInsertForm.ts

@@ -58,7 +58,10 @@ const useProjectInsertForm = (): InsertFormResult => {
       return;
     }
 
-    await submit();
+    // step4 데이터까지 받기 위해 상태 업데이트 기다린 후 submit
+    setTimeout(async () => {
+      await submit();
+    }, 100);
   };
 
   const submit = async (): Promise<void> => {

src/features/projects/ui/project-insert/Step1.tsx

@@ -1,4 +1,5 @@
 import { useMediaQuery, useTheme } from "@mui/material";
+import { Timestamp } from "firebase/firestore";
 import type { JSX } from "react";
 
 import useInsertStep1 from "@features/projects/hook/useInsertStep1";
@@ -10,9 +11,14 @@ import ProjectOneLineCard from "@entities/projects/ui/project-insert/ProjectOneL
 import ProjectSimpleDescCard from "@entities/projects/ui/project-insert/ProjectSimpleDescCard";
 import ProjectTitleCard from "@entities/projects/ui/project-insert/ProjectTitleCard";
 
-import { formatDate } from "@shared/libs/utils/projectDetail";
 import StepWhiteBox from "@shared/ui/project-insert/StepWhiteBox";
 
+// 모집 마감일 형식 변환
+const timestampToInputDate = (timestamp: Timestamp | null): string => {
+  if (!timestamp) return "";
+  return timestamp.toDate().toISOString().split("T")[0];
+};
+
 const Step1 = ({
   updateForm,
 }: {
@@ -50,7 +56,7 @@ const Step1 = ({
         style={{ gridColumn: "span 1" }}
       />
       <ProjectDeadlineCard
-        value={formatDate(form1.closedDate)}
+        value={timestampToInputDate(form1.closedDate)}
         onChange={update.closedDate}
         large
         style={{ gridColumn: "span 1" }}