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

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

@@ -35,9 +35,11 @@ export default function ProjectScheduleCard({
           size={large ? "medium" : "small"}
           displayEmpty
           sx={{
-            fontSize: large
-              ? theme.typography.h5.fontSize
-              : theme.typography.body1.fontSize,
+            fontSize: {
+              xs: large ? "14px" : "14px",
+              sm: large ? "15px" : "15px",
+              md: large ? "16px" : "16px",
+            },
             fontFamily: theme.typography.fontFamily,
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
             height: 40,

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

@@ -58,6 +58,14 @@ const ProjectOneLineCard = ({
           },
           "& .MuiOutlinedInput-input": {
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+            "&::placeholder": {
+              fontSize: {
+                xs: "14px",
+                sm: "15px",
+                md: "16px",
+              },
+              color: "#999",
+            },
           },
         }}
         required

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/entities/projects/ui/project-insert/ProjectTeamSizeCard.tsx

@@ -34,9 +34,11 @@ const ProjectTeamSizeCard = ({
           size={large ? "medium" : "small"}
           displayEmpty
           sx={{
-            fontSize: large
-              ? theme.typography.h5.fontSize
-              : theme.typography.body1.fontSize,
+            fontSize: {
+              xs: large ? "14px" : "14px",
+              sm: large ? "15px" : "15px",
+              md: large ? "16px" : "16px",
+            },
             fontFamily: theme.typography.fontFamily,
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
 

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

@@ -1,14 +1,7 @@
 import AddIcon from "@mui/icons-material/Add";
 import { Box, Button } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import type {
-  ChangeEvent,
-  CSSProperties,
-  JSX,
-  KeyboardEvent,
-  FocusEvent,
-  MouseEvent,
-} from "react";
+import type { ChangeEvent, CSSProperties, JSX, KeyboardEvent } from "react";
 import { useState } from "react";
 
 import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
@@ -57,47 +50,49 @@ const ProjectTechStackCard = ({
     >
       {/* 입력 + 추가 버튼 */}
       <Box display="flex" gap={1} mb={2}>
-        <input
+        <Box
+          component="input"
           type="text"
           value={newTech}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             setNewTech(e.target.value)
           }
           onKeyUp={handleKeyPress}
           placeholder="React, Python, Figma... 뭐든 좋아요!"
-          style={{
+          sx={{
             flex: 1,
             height: 40,
-            borderRadius: theme.shape.borderRadius,
+            borderRadius: "8px",
             border: `1px solid ${theme.palette.divider}`,
-            fontSize: large
-              ? theme.typography.h5.fontSize
-              : theme.typography.body1.fontSize,
+            fontSize: {
+              xs: "14px",
+              sm: "15px",
+              md: "16px",
+            },
             fontFamily: theme.typography.fontFamily,
             background: theme.palette.background.paper,
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
             boxSizing: "border-box",
             outline: "none",
             transition: "border-color 0.2s ease-in-out",
-          }}
-          onFocus={(e) => {
-            // 포커스 시: 파란색 테두리 + 두껍게
-            e.target.style.borderColor = theme.palette.primary.main;
-            e.target.style.borderWidth = "2px";
-          }}
-          onBlur={(e: FocusEvent<HTMLInputElement>) => {
-            e.currentTarget.style.borderColor = theme.palette.divider;
-            e.currentTarget.style.borderWidth = "1px";
-          }}
-          onMouseEnter={(e: MouseEvent<HTMLInputElement>) => {
-            if (e.currentTarget !== document.activeElement) {
-              e.currentTarget.style.borderColor = "#000000";
-            }
-          }}
-          onMouseLeave={(e: MouseEvent<HTMLInputElement>) => {
-            if (e.currentTarget !== document.activeElement) {
-              e.currentTarget.style.borderColor = theme.palette.divider;
-            }
+
+            "&::placeholder": {
+              fontSize: {
+                xs: "14px", // 모바일
+                sm: "15px", // 태블릿
+                md: "16px", // 데스크톱
+              },
+              color: "#999",
+            },
+
+            "&:focus": {
+              borderColor: theme.palette.primary.main,
+              borderWidth: "2px",
+            },
+
+            "&:hover:not(:focus)": {
+              borderColor: "#000000",
+            },
           }}
         />
         <Button
@@ -129,7 +124,11 @@ const ProjectTechStackCard = ({
                 py: 1,
                 backgroundColor: theme.palette.grey[100],
                 borderRadius: 2,
-                fontSize: "1.5rem",
+                fontSize: {
+                  xs: "14px",
+                  sm: "15px",
+                  md: "16px",
+                },
                 color: theme.palette.text.primary,
               }}
             >
@@ -145,7 +144,11 @@ const ProjectTechStackCard = ({
                   color: theme.palette.text.primary,
                   backgroundColor: "transparent",
                   cursor: "pointer",
-                  fontSize: "18px",
+                  fontSize: {
+                    xs: "16px",
+                    sm: "17px",
+                    md: "18px",
+                  },
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",

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

@@ -45,7 +45,6 @@ const ProjectTitleCard = ({
             fontFamily: theme.typography.fontFamily,
             background: "none",
             border: "none",
-
             // 호버 시 테두리 검정색
             "&:hover .MuiOutlinedInput-notchedOutline": {
               borderColor: theme.palette.text.primary,
@@ -58,6 +57,14 @@ const ProjectTitleCard = ({
           },
           "& .MuiOutlinedInput-input": {
             padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+            "&::placeholder": {
+              fontSize: {
+                xs: "14px",
+                sm: "15px",
+                md: "16px",
+              },
+              color: "#999",
+            },
           },
         }}
         required

src/features/projects/hooks/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/hooks/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/hooks/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;
   };