Feat/insert 페이지 step2 메인 컴포넌트 및 카드 컴포넌트 전체 구현

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

@@ -0,0 +1,77 @@
+import { FormControl, Select, MenuItem } from "@mui/material";
+import type { SelectChangeEvent } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import type { CSSProperties, JSX } from "react";
+
+import { ExpectedPeriod } from "@shared/types/schedule";
+import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
+
+interface ProjectScheduleCardProps {
+  value: ExpectedPeriod | "";
+  onChange: (event: SelectChangeEvent<ExpectedPeriod>) => void;
+  large?: boolean;
+  style?: CSSProperties;
+}
+
+export default function ProjectScheduleCard({
+  value,
+  onChange,
+  large = false,
+  style,
+}: ProjectScheduleCardProps): JSX.Element {
+  const theme = useTheme();
+
+  return (
+    <SimpleFormCard
+      title="예상 일정"
+      description="프로젝트를 얼마나 걸릴 것으로 예상하나요?"
+      large={large}
+      style={style}
+    >
+      <FormControl fullWidth>
+        <Select<ExpectedPeriod>
+          value={value || ("" as ExpectedPeriod)}
+          onChange={onChange}
+          size={large ? "medium" : "small"}
+          displayEmpty
+          sx={{
+            fontSize: large
+              ? theme.typography.h5.fontSize
+              : theme.typography.body1.fontSize,
+            fontFamily: theme.typography.fontFamily,
+            padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+            height: 40,
+            "& .MuiSelect-select": {
+              height: "40px",
+              display: "flex",
+              alignItems: "center",
+              padding: 0,
+            },
+          }}
+        >
+          <MenuItem value="" disabled hidden>
+            일정 기간을 선택해주세요
+          </MenuItem>
+          <MenuItem value={ExpectedPeriod.oneMonth}>
+            {ExpectedPeriod.oneMonth}
+          </MenuItem>
+          <MenuItem value={ExpectedPeriod.twoMonths}>
+            {ExpectedPeriod.twoMonths}
+          </MenuItem>
+          <MenuItem value={ExpectedPeriod.threeMonths}>
+            {ExpectedPeriod.threeMonths}
+          </MenuItem>
+          <MenuItem value={ExpectedPeriod.fourMonths}>
+            {ExpectedPeriod.fourMonths}
+          </MenuItem>
+          <MenuItem value={ExpectedPeriod.sixMonths}>
+            {ExpectedPeriod.sixMonths}
+          </MenuItem>
+          <MenuItem value={ExpectedPeriod.moreThanSixMonths}>
+            {ExpectedPeriod.moreThanSixMonths}
+          </MenuItem>
+        </Select>
+      </FormControl>
+    </SimpleFormCard>
+  );
+}

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

@@ -0,0 +1,216 @@
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+import {
+  Box,
+  Button,
+  FormControl,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Select,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import type { SelectChangeEvent } from "@mui/material";
+import type { CSSProperties, JSX } from "react";
+
+import type { Positions } from "@shared/types/project";
+import type { UserRole } from "@shared/types/user";
+import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
+
+interface ProjectPositionsCardProps {
+  value: Positions[];
+  onChange: (value: Positions[]) => void;
+  large?: boolean;
+  style?: CSSProperties;
+}
+
+const USER_ROLES = [
+  { value: "frontend", label: "프론트엔드 개발자" },
+  { value: "backend", label: "백엔드 개발자" },
+  { value: "fullstack", label: "풀스택 개발자" },
+  { value: "designer", label: "디자이너" },
+  { value: "pm", label: "프로덕트 매니저" },
+];
+
+const EXPERIENCE_OPTIONS = [
+  { value: "junior", label: "주니어 (3년 이하)" },
+  { value: "mid", label: "미들 (3년 이상 10년 이하)" },
+  { value: "senior", label: "시니어 (10년 이상)" },
+];
+
+const ProjectPositionsCard = ({
+  value,
+  onChange,
+  large,
+  style,
+}: ProjectPositionsCardProps): JSX.Element => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  // 초기 포지션이 없을 때 하나 추가
+  const positions = value.length > 0 ? value : [];
+
+  // 포지션 추가
+  const addPosition = (): void => {
+    const newPosition: Positions = {
+      position: "" as UserRole,
+      count: 1,
+      experience: "",
+      applicants: [],
+    };
+    onChange([...value, newPosition]);
+  };
+
+  // 포지션 삭제
+  const removePosition = (index: number): void => {
+    const newPositions = value.filter((_, i) => i !== index);
+    onChange(newPositions);
+  };
+
+  // 포지션 수정 - 타입 안전성 개선
+  const updatePosition = (
+    index: number,
+    field: keyof Positions,
+    newValue: string | number
+  ): void => {
+    const newPositions = [...value];
+    if (index < newPositions.length) {
+      newPositions[index] = { ...newPositions[index], [field]: newValue };
+      onChange(newPositions);
+    }
+  };
+
+  // 최소 하나의 포지션이 없으면 추가
+  if (positions.length === 0) {
+    setTimeout(() => addPosition(), 0);
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <SimpleFormCard
+      title="모집 포지션"
+      description="어떤 역할의 팀원이 필요한가요?"
+      helpText="최소 1개 이상의 포지션을 추가해주세요"
+      large={large}
+      style={style}
+    >
+      <Box display="flex" flexDirection="column" gap={2}>
+        {/* 포지션 목록 */}
+        {positions.map((position, index) => (
+          <Box
+            key={index}
+            sx={{
+              display: "grid",
+              gridTemplateColumns: isMobile ? "1fr" : "2fr 1fr 1.5fr auto",
+              gap: 2,
+              backgroundColor: "#ffffff",
+              borderRadius: 2,
+            }}
+          >
+            {/* 포지션 선택 */}
+            <FormControl size="small" fullWidth>
+              <InputLabel>포지션</InputLabel>
+              <Select
+                value={position.position || ""}
+                onChange={(e: SelectChangeEvent<string>) =>
+                  updatePosition(index, "position", e.target.value)
+                }
+                label="포지션"
+              >
+                <MenuItem value="" disabled>
+                  포지션을 선택하세요
+                </MenuItem>
+                {USER_ROLES.map((role) => (
+                  <MenuItem key={role.value} value={role.value}>
+                    {role.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+
+            {/* 인원 수 */}
+            <FormControl size="small" fullWidth>
+              <InputLabel>인원</InputLabel>
+              <Select
+                value={position.count.toString()}
+                onChange={(e: SelectChangeEvent<string>) =>
+                  updatePosition(index, "count", parseInt(e.target.value))
+                }
+                label="인원"
+              >
+                {[1, 2, 3, 4, 5].map((num) => (
+                  <MenuItem key={num} value={num.toString()}>
+                    {num}명
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+
+            {/* 경력 요구사항 */}
+            <FormControl size="small" fullWidth>
+              <InputLabel>경력</InputLabel>
+              <Select
+                value={position.experience || ""}
+                onChange={(e: SelectChangeEvent<string>) =>
+                  updatePosition(index, "experience", e.target.value)
+                }
+                label="경력"
+              >
+                <MenuItem value="" disabled>
+                  경력을 선택하세요
+                </MenuItem>
+                {EXPERIENCE_OPTIONS.map((exp) => (
+                  <MenuItem key={exp.value} value={exp.value}>
+                    {exp.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+
+            {/* 삭제 버튼 */}
+            <IconButton
+              onClick={() => removePosition(index)}
+              color="error"
+              size="small"
+              disabled={positions.length <= 1}
+              sx={{
+                "&:hover": {
+                  backgroundColor: "transparent",
+                },
+              }}
+            >
+              <DeleteIcon fontSize="large" />
+            </IconButton>
+          </Box>
+        ))}
+
+        {/* 포지션 추가 버튼 */}
+        <Box display="flex" justifyContent="center" mt={2}>
+          <Button
+            variant="text"
+            startIcon={<AddIcon />}
+            onClick={addPosition}
+            sx={{
+              px: 3,
+              py: 1.5,
+              borderRadius: 3,
+              border: `2px dashed ${theme.palette.primary.main}40`,
+              color: theme.palette.primary.main,
+              fontWeight: 600,
+              "&:hover": {
+                backgroundColor: `${theme.palette.primary.main}08`,
+                border: `2px dashed ${theme.palette.primary.main}`,
+                transform: "scale(1.02)",
+              },
+            }}
+          >
+            새 포지션 추가
+          </Button>
+        </Box>
+      </Box>
+    </SimpleFormCard>
+  );
+};
+
+export default ProjectPositionsCard;

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

@@ -0,0 +1,66 @@
+import { FormControl, Select, MenuItem } from "@mui/material";
+import type { SelectChangeEvent } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import type { CSSProperties, JSX } from "react";
+
+import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
+
+interface ProjectTeamSizeCardProps {
+  value: number; // 받을 때는 number
+  onChange: (e: SelectChangeEvent<string>) => void; // 변경할 때는 string으로 받기
+  large?: boolean;
+  style?: CSSProperties;
+}
+
+const ProjectTeamSizeCard = ({
+  value,
+  onChange,
+  large,
+  style,
+}: ProjectTeamSizeCardProps): JSX.Element => {
+  const theme = useTheme();
+
+  return (
+    <SimpleFormCard
+      title="팀 규모"
+      description="몇 명이서 함께 할까요?"
+      large={large}
+      style={style}
+    >
+      <FormControl fullWidth>
+        <Select<string>
+          value={value ? value.toString() : ""}
+          onChange={onChange}
+          size={large ? "medium" : "small"}
+          displayEmpty
+          sx={{
+            fontSize: large
+              ? theme.typography.h5.fontSize
+              : theme.typography.body1.fontSize,
+            fontFamily: theme.typography.fontFamily,
+            padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+
+            height: 40,
+            "& .MuiSelect-select": {
+              height: "40px",
+              display: "flex",
+              alignItems: "center",
+              padding: 0,
+            },
+          }}
+        >
+          <MenuItem value="" disabled hidden>
+            팀 규모를 선택하세요
+          </MenuItem>
+          <MenuItem value="2">2명 (나 + 1명)</MenuItem>
+          <MenuItem value="3">3명 (소규모 팀)</MenuItem>
+          <MenuItem value="4">4명 (적당한 팀)</MenuItem>
+          <MenuItem value="5">5명 (큰 팀)</MenuItem>
+          <MenuItem value="6">6명 이상 (대규모)</MenuItem>
+        </Select>
+      </FormControl>
+    </SimpleFormCard>
+  );
+};
+
+export default ProjectTeamSizeCard;