diff --git a/src/entities/projects/ui/project-insert/ProjectCategoryCard.tsx b/src/entities/projects/ui/project-insert/ProjectCategoryCard.tsx
index 9ff38a0..16f18c7 100644
--- a/src/entities/projects/ui/project-insert/ProjectCategoryCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectCategoryCard.tsx
@@ -3,6 +3,8 @@ 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 ProjectCategoryCardProps {
   value: string;
   onChange: (event: SelectChangeEvent) => void;
@@ -10,9 +12,6 @@ interface ProjectCategoryCardProps {
   style?: CSSProperties;
 }
 
-const CARD_SHADOW =
-  "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
-
 const ProjectCategoryCard = ({
   value,
   onChange,
@@ -21,49 +20,13 @@ const ProjectCategoryCard = ({
 }: ProjectCategoryCardProps): JSX.Element => {
   const theme = useTheme();
   return (
-    <div
-      style={{
-        background: theme.palette.background.paper,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        boxShadow: CARD_SHADOW,
-        padding: large ? theme.spacing(4) : theme.spacing(3),
-        minHeight: large ? 220 : 180,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        width: "100%",
-        overflow: "visible",
-        fontFamily: theme.typography.fontFamily,
-        ...style,
-      }}
+    <SimpleFormCard
+      title="프로젝트 분야"
+      description="어떤 분야의 프로젝트인지 선택해주세요"
+      helpText="가장 가까운 분야를 선택해주세요"
+      large={large}
+      style={style}
     >
-      <div
-        style={{
-          fontWeight: theme.typography.h3.fontWeight,
-          fontSize: large
-            ? theme.typography.h3.fontSize
-            : theme.typography.h4.fontSize,
-          marginBottom: 14,
-          color: theme.palette.text.primary,
-        }}
-      >
-        <span role="img" aria-label="분야">
-          🏷️
-        </span>{" "}
-        프로젝트 분야
-      </div>
-      <div
-        style={{
-          color: theme.palette.text.secondary,
-          fontSize: large
-            ? theme.typography.h6.fontSize
-            : theme.typography.body1.fontSize,
-          marginBottom: 18,
-        }}
-      >
-        어떤 분야의 프로젝트인지 선택해주세요
-      </div>
       <FormControl fullWidth>
         <Select
           value={value || ""}
@@ -100,16 +63,7 @@ const ProjectCategoryCard = ({
           <MenuItem value="other">기타</MenuItem>
         </Select>
       </FormControl>
-      <div
-        style={{
-          color: theme.palette.text.disabled,
-          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
-          marginTop: 10,
-        }}
-      >
-        가장 가까운 분야를 선택해주세요
-      </div>
-    </div>
+    </SimpleFormCard>
   );
 };
 
diff --git a/src/entities/projects/ui/project-insert/ProjectDeadlineCard.tsx b/src/entities/projects/ui/project-insert/ProjectDeadlineCard.tsx
index bad68f9..3b7e846 100644
--- a/src/entities/projects/ui/project-insert/ProjectDeadlineCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectDeadlineCard.tsx
@@ -1,6 +1,7 @@
-import { useTheme } from "@mui/material/styles";
 import type { ChangeEvent, CSSProperties, JSX } from "react";
 
+import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
+
 interface ProjectDeadlineCardProps {
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -14,52 +15,14 @@ const ProjectDeadlineCard = ({
   large,
   style,
 }: ProjectDeadlineCardProps): JSX.Element => {
-  const theme = useTheme();
   return (
-    <div
-      style={{
-        background: theme.palette.background.paper,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        boxShadow:
-          "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
-        padding: large ? theme.spacing(4) : theme.spacing(3),
-        minHeight: large ? 220 : 180,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        width: "100%",
-        overflow: "visible",
-        fontFamily: theme.typography.fontFamily,
-        ...style,
-      }}
+    <SimpleFormCard
+      title="모집 마감일"
+      description="언제까지 팀원을 모집할까요?"
+      helpText="충분한 시간을 두고 설정하세요!"
+      large={large}
+      style={style}
     >
-      <div
-        style={{
-          fontWeight: theme.typography.h3.fontWeight,
-          fontSize: large
-            ? theme.typography.h3.fontSize
-            : theme.typography.h4.fontSize,
-          marginBottom: 14,
-          color: theme.palette.text.primary,
-        }}
-      >
-        <span role="img" aria-label="마감">
-          📅
-        </span>{" "}
-        모집 마감일
-      </div>
-      <div
-        style={{
-          color: theme.palette.text.secondary,
-          fontSize: large
-            ? theme.typography.h6.fontSize
-            : theme.typography.body1.fontSize,
-          marginBottom: 18,
-        }}
-      >
-        언제까지 팀원을 모집할까요?
-      </div>
       <input
         type="date"
         name="deadline"
@@ -67,29 +30,19 @@ const ProjectDeadlineCard = ({
         onChange={onChange}
         style={{
           width: "100%",
-          padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          fontSize: large
-            ? theme.typography.h5.fontSize
-            : theme.typography.body1.fontSize,
+          padding: large ? 18 : 14,
+          borderRadius: 8,
+          border: "1px solid #e0e0e0",
+          fontSize: 16,
           marginBottom: 8,
-          fontFamily: theme.typography.fontFamily,
+          fontFamily: "inherit",
           height: 40,
           boxSizing: "border-box",
-          background: theme.palette.background.paper,
+          background: "inherit",
         }}
         required
       />
-      <div
-        style={{
-          color: "#bbb",
-          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
-        }}
-      >
-        충분한 시간을 두고 설정하세요!
-      </div>
-    </div>
+    </SimpleFormCard>
   );
 };
 
diff --git a/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx b/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx
index 58d19bc..a98210f 100644
--- a/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx
@@ -1,6 +1,9 @@
+import { TextField } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import type { ChangeEvent, CSSProperties, JSX } from "react";
 
+import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
+
 interface ProjectOneLineCardProps {
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -8,9 +11,6 @@ interface ProjectOneLineCardProps {
   style?: CSSProperties;
 }
 
-const CARD_SHADOW =
-  "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
-
 const ProjectOneLineCard = ({
   value,
   onChange,
@@ -18,81 +18,51 @@ const ProjectOneLineCard = ({
   style,
 }: ProjectOneLineCardProps): JSX.Element => {
   const theme = useTheme();
+
   return (
-    <div
-      style={{
-        background: theme.palette.background.paper,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        boxShadow: CARD_SHADOW,
-        padding: large ? theme.spacing(4) : theme.spacing(3),
-        minHeight: large ? 220 : 180,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        width: "100%",
-        overflow: "visible",
-        fontFamily: theme.typography.fontFamily,
-        ...style,
-      }}
+    <SimpleFormCard
+      title="한 줄 소개"
+      description="프로젝트를 한 줄로 매력적으로 소개해주세요!"
+      helpText="이모지를 활용하면 더 눈에 띄어요!"
+      large={large}
+      style={style}
     >
-      <div
-        style={{
-          fontWeight: theme.typography.h3.fontWeight,
-          fontSize: large
-            ? theme.typography.h3.fontSize
-            : theme.typography.h4.fontSize,
-          marginBottom: 14,
-          color: theme.palette.text.primary,
-        }}
-      >
-        <span role="img" aria-label="소개">
-          ✨
-        </span>{" "}
-        한 줄 소개
-      </div>
-      <div
-        style={{
-          color: theme.palette.text.secondary,
-          fontSize: large
-            ? theme.typography.h6.fontSize
-            : theme.typography.body1.fontSize,
-          marginBottom: 18,
-        }}
-      >
-        프로젝트를 한 줄로 매력적으로 소개해주세요!
-      </div>
-      <input
+      <TextField
         type="text"
         name="subtitle"
         value={value}
         onChange={onChange}
-        placeholder="예: 개인 맞춤형 학습으로 공부 효율을 높여보세요! 📚"
-        style={{
-          width: "100%",
-          padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          fontSize: large
-            ? theme.typography.h5.fontSize
-            : theme.typography.body1.fontSize,
-          marginBottom: 8,
-          fontFamily: theme.typography.fontFamily,
-          height: 40,
-          boxSizing: "border-box",
-          background: theme.palette.background.paper,
+        placeholder="예: 개인 맞춤형 학습으로 공부 효율을 높여보세요!"
+        fullWidth
+        variant="outlined"
+        size="small"
+        sx={{
+          "& .MuiOutlinedInput-root": {
+            height: 40,
+            fontSize: large
+              ? theme.typography.h5.fontSize
+              : theme.typography.body1.fontSize,
+            fontFamily: theme.typography.fontFamily,
+            background: "none",
+            border: "none",
+
+            // 호버 시 테두리 검정색
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: theme.palette.text.primary,
+            },
+            // 포커스 시 테두리 primary 색상
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: theme.palette.primary.main,
+              borderWidth: "2px",
+            },
+          },
+          "& .MuiOutlinedInput-input": {
+            padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+          },
         }}
         required
       />
-      <div
-        style={{
-          color: "#bbb",
-          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
-        }}
-      >
-        이모지를 활용하면 더 눈에 띄어요!
-      </div>
-    </div>
+    </SimpleFormCard>
   );
 };
 
diff --git a/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx b/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx
index 2c80eb1..61d2f02 100644
--- a/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx
@@ -1,9 +1,11 @@
-import { useTheme } from "@mui/material/styles";
+import { TextField } from "@mui/material";
 import type { ChangeEvent, CSSProperties, JSX } from "react";
 
+import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
+
 interface ProjectSimpleDescCardProps {
   value: string;
-  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   large?: boolean;
   style?: CSSProperties;
 }
@@ -14,88 +16,49 @@ const ProjectSimpleDescCard = ({
   large,
   style,
 }: ProjectSimpleDescCardProps): JSX.Element => {
-  const theme = useTheme();
   return (
-    <div
-      style={{
-        background: theme.palette.background.paper,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        boxShadow:
-          "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
-        padding: large ? theme.spacing(4) : theme.spacing(3),
-        minHeight: large ? 220 : 180,
-        width: "100%",
-        gridColumn: "1 / -1",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        marginTop: 0,
-        overflow: "visible",
-        fontFamily: theme.typography.fontFamily,
-        ...style,
-      }}
+    <SimpleFormCard
+      title="프로젝트 간단 소개"
+      description="프로젝트에 대해 간단히 설명해주세요! (상세 설명은 다음 단계에서 작성합니다)"
+      helpText="2~3줄 정도로 핵심만 간단히 써주세요!"
+      large={large}
+      style={style}
     >
-      <div
-        style={{
-          fontWeight: theme.typography.h3.fontWeight,
-          fontSize: large
-            ? theme.typography.h3.fontSize
-            : theme.typography.h4.fontSize,
-          marginBottom: 14,
-          color: theme.palette.text.primary,
-        }}
-      >
-        <span role="img" aria-label="소개">
-          📝
-        </span>{" "}
-        프로젝트 간단 소개
-      </div>
-      <div
-        style={{
-          color: theme.palette.text.secondary,
-          fontSize: large
-            ? theme.typography.h6.fontSize
-            : theme.typography.body1.fontSize,
-          marginBottom: 18,
-        }}
-      >
-        프로젝트에 대해 간단히 설명해주세요! (상세 설명은 다음 단계에서
-        작성합니다)
-      </div>
-      <textarea
-        name="description"
+      <TextField
+        multiline
+        minRows={2}
+        name="simpleInfo"
         value={value}
         onChange={onChange}
         placeholder="예: 사용자의 학습 패턴을 분석하여 최적의 학습 방법을 제안하는 모바일 앱을 개발합니다."
-        rows={3}
-        style={{
-          width: "100%",
-          padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          fontSize: large
-            ? theme.typography.h5.fontSize
-            : theme.typography.body1.fontSize,
-          marginBottom: 8,
-          resize: "vertical",
-          minHeight: 40,
-          overflow: "visible",
-          fontFamily: theme.typography.fontFamily,
-          boxSizing: "border-box",
-          background: theme.palette.background.paper,
+        fullWidth
+        variant="outlined"
+        size="small"
+        InputProps={{
+          sx: {
+            fontSize: 16,
+            fontFamily: "inherit",
+            background: "none",
+            border: "none",
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: "#222",
+            },
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: "#1976d2",
+              borderWidth: "2px",
+            },
+          },
+        }}
+        inputProps={{
+          style: {
+            padding: large ? 5 : 5,
+            fontSize: 16,
+            color: "#222",
+          },
         }}
         required
       />
-      <div
-        style={{
-          color: "#bbb",
-          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
-        }}
-      >
-        2-3줄 정도로 핵심만 간단히 써주세요!
-      </div>
-    </div>
+    </SimpleFormCard>
   );
 };
 
diff --git a/src/entities/projects/ui/project-insert/ProjectTechStackCard.tsx b/src/entities/projects/ui/project-insert/ProjectTechStackCard.tsx
index f410aaa..f6eb411 100644
--- a/src/entities/projects/ui/project-insert/ProjectTechStackCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectTechStackCard.tsx
@@ -63,7 +63,7 @@ const ProjectTechStackCard = ({
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             setNewTech(e.target.value)
           }
-          onKeyPress={handleKeyPress}
+          onKeyUp={handleKeyPress}
           placeholder="React, Python, Figma... 뭐든 좋아요!"
           style={{
             flex: 1,
diff --git a/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx b/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx
index ed818da..f20edf6 100644
--- a/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx
+++ b/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx
@@ -1,6 +1,9 @@
+import { TextField } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import type { ChangeEvent, CSSProperties, JSX } from "react";
 
+import SimpleFormCard from "@shared/ui/project-insert/SimpleFormCard";
+
 interface ProjectTitleCardProps {
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -8,9 +11,6 @@ interface ProjectTitleCardProps {
   style?: CSSProperties;
 }
 
-const CARD_SHADOW =
-  "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
-
 const ProjectTitleCard = ({
   value,
   onChange,
@@ -18,81 +18,51 @@ const ProjectTitleCard = ({
   style,
 }: ProjectTitleCardProps): JSX.Element => {
   const theme = useTheme();
+
   return (
-    <div
-      style={{
-        background: theme.palette.background.paper,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        boxShadow: CARD_SHADOW,
-        padding: large ? theme.spacing(4) : theme.spacing(3),
-        minHeight: large ? 220 : 180,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        width: "100%",
-        overflow: "visible",
-        fontFamily: theme.typography.fontFamily,
-        ...style,
-      }}
+    <SimpleFormCard
+      title="프로젝트 이름"
+      description="언제 프로젝트인지 한 눈에 알 수 있는 이름을 지어주세요!"
+      helpText="간단하게 기억하기 쉬운 이름이 좋아요!"
+      large={large}
+      style={style}
     >
-      <div
-        style={{
-          fontWeight: theme.typography.h3.fontWeight,
-          fontSize: large
-            ? theme.typography.h3.fontSize
-            : theme.typography.h4.fontSize,
-          marginBottom: 14,
-          color: theme.palette.text.primary,
-        }}
-      >
-        <span role="img" aria-label="이름">
-          🍑
-        </span>{" "}
-        프로젝트 이름
-      </div>
-      <div
-        style={{
-          color: theme.palette.text.secondary,
-          fontSize: large
-            ? theme.typography.h6.fontSize
-            : theme.typography.body1.fontSize,
-          marginBottom: 18,
-        }}
-      >
-        언제 프로젝트인지 한 눈에 알 수 있는 이름을 지어주세요!
-      </div>
-      <input
+      <TextField
         type="text"
         name="title"
         value={value}
         onChange={onChange}
         placeholder="예: 우리 동네 맛집 찾기 앱"
-        style={{
-          width: "100%",
-          padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          fontSize: large
-            ? theme.typography.h5.fontSize
-            : theme.typography.body1.fontSize,
-          marginBottom: 8,
-          fontFamily: theme.typography.fontFamily,
-          height: 40,
-          boxSizing: "border-box",
-          background: theme.palette.background.paper,
+        fullWidth
+        variant="outlined"
+        size="small"
+        sx={{
+          "& .MuiOutlinedInput-root": {
+            height: 40,
+            fontSize: large
+              ? theme.typography.h5.fontSize
+              : theme.typography.body1.fontSize,
+            fontFamily: theme.typography.fontFamily,
+            background: "none",
+            border: "none",
+
+            // 호버 시 테두리 검정색
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: theme.palette.text.primary,
+            },
+            // 포커스 시 테두리 primary 색상
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: theme.palette.primary.main,
+              borderWidth: "2px",
+            },
+          },
+          "& .MuiOutlinedInput-input": {
+            padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+          },
         }}
         required
       />
-      <div
-        style={{
-          color: "#bbb",
-          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
-        }}
-      >
-        간단하게 기억하기 쉬운 이름이 좋아요!
-      </div>
-    </div>
+    </SimpleFormCard>
   );
 };
 
diff --git a/src/features/projects/hook/useInsertStep1.ts b/src/features/projects/hook/useInsertStep1.ts
index 14a152c..61cc033 100644
--- a/src/features/projects/hook/useInsertStep1.ts
+++ b/src/features/projects/hook/useInsertStep1.ts
@@ -1,5 +1,7 @@
+import type { SelectChangeEvent } from "@mui/material";
 import { Timestamp } from "firebase/firestore";
-import { useState, type ChangeEvent } from "react";
+import { useState } from "react";
+import type { ChangeEvent } from "react";
 
 import {
   ProjectCategory,
@@ -16,9 +18,11 @@ interface ApplyFormResult {
   update: {
     title: (e: ChangeEvent<HTMLInputElement>) => void;
     oneLineInfo: (e: ChangeEvent<HTMLInputElement>) => void;
-    simpleInfo: (e: ChangeEvent<HTMLInputElement>) => void;
-    category: (category: ProjectCategory) => void;
-    closedDate: (date: string) => void;
+    simpleInfo: (
+      e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => void;
+    category: (event: SelectChangeEvent) => void;
+    closedDate: (e: ChangeEvent<HTMLInputElement>) => void;
   };
 }
 
@@ -41,22 +45,24 @@ const useInsertStep1 = ({ state }: { state?: Setp1Type }): ApplyFormResult => {
     }));
   };
 
-  const updateSimpleInfo = (e: ChangeEvent<HTMLInputElement>): void => {
+  const updateSimpleInfo = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void => {
     setForm1((prev) => ({
       ...prev,
       simpleInfo: e.target.value,
     }));
   };
 
-  const updateCategory = (category: ProjectCategory): void => {
+  const updateCategory = (event: SelectChangeEvent): void => {
     setForm1((prev) => ({
       ...prev,
-      category,
+      category: event.target.value as ProjectCategory,
     }));
   };
 
-  const updateClosedDate = (closedDate: string): void => {
-    const formateTimeStamp = Timestamp.fromDate(new Date(closedDate));
+  const updateClosedDate = (e: ChangeEvent<HTMLInputElement>): void => {
+    const formateTimeStamp = Timestamp.fromDate(new Date(e.target.value));
     setForm1((prev) => ({
       ...prev,
       closedDate: formateTimeStamp,
diff --git a/src/features/projects/hook/useProjectInsertForm.ts b/src/features/projects/hook/useProjectInsertForm.ts
index cf41860..d2297c8 100644
--- a/src/features/projects/hook/useProjectInsertForm.ts
+++ b/src/features/projects/hook/useProjectInsertForm.ts
@@ -15,10 +15,10 @@ import { ExpectedPeriod } from "@shared/types/schedule";
 import { type User } from "@shared/types/user";
 
 // 이하 InitData 개선 예정
-type Setp1Type = Pick<
-  ProjectItemInsertReq,
-  "title" | "oneLineInfo" | "category" | "closedDate" | "simpleInfo"
->;
+// type Setp1Type = Pick<
+//   ProjectItemInsertReq,
+//   "title" | "oneLineInfo" | "category" | "closedDate" | "simpleInfo"
+// >;
 export type Step2Type = Pick<
   ProjectItemInsertReq,
   "teamSize" | "techStack" | "positions"
@@ -33,7 +33,7 @@ export type Step4Type = Pick<
 
 interface InsertFormResult {
   form: {
-    step1: Setp1Type;
+    // step1: Setp1Type;
     step2: Step2Type;
     step3: Step3Type;
     step4: Step4Type;
@@ -45,6 +45,13 @@ interface InsertFormResult {
   };
   submit: () => Promise<void>;
   onChange: {
+    // step1: {
+    //   title: (e: ChangeEvent<HTMLInputElement>) => void;
+    //   oneLineInfo: (e: ChangeEvent<HTMLInputElement>) => void;
+    //   simpleInfo: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    //   category: (category: ProjectCategory) => void;
+    //   closedDate: (date: string) => void;
+    // };
     step2: (field: keyof Step2Type, value: Step2Type[keyof Step2Type]) => void;
     step3: (field: keyof Step3Type, value: Step3Type[keyof Step3Type]) => void;
     step4: (field: keyof Step4Type, value: Step4Type[keyof Step4Type]) => void;
@@ -55,6 +62,7 @@ const useProjectInsertForm = (): InsertFormResult => {
   const user = useAuthStore((state) => state.user);
   const { data: userProfile } = useUserProfile(user?.uid || "");
   const { mutate: insertProject, isPending } = useProjectInsert();
+  // const step1FormHook = useInsertStep1({ state: undefined });
 
   const [currentStep, setCurrentStep] = useState(1);
   // const [formStep1, setFormStep1] = useState<Setp1Type>(initForm1);
@@ -110,7 +118,7 @@ const useProjectInsertForm = (): InsertFormResult => {
 
   return {
     form: {
-      step1: initForm1,
+      // step1: step1FormHook.form1,
       step2: formStep2,
       step3: formStep3,
       step4: formStep4,
@@ -122,6 +130,7 @@ const useProjectInsertForm = (): InsertFormResult => {
     },
     submit,
     onChange: {
+      // step1: step1FormHook.update,
       step2: handleChangeStep2,
       step3: handleChangeStep3,
       step4: handleChangeStep4,
@@ -131,13 +140,13 @@ const useProjectInsertForm = (): InsertFormResult => {
 
 export default useProjectInsertForm;
 
-const initForm1 = {
-  title: "",
-  category: ProjectCategory.webDevelopment,
-  simpleInfo: "",
-  closedDate: Timestamp.now(),
-  oneLineInfo: "",
-};
+// const initForm1 = {
+//   title: "",
+//   category: ProjectCategory.webDevelopment,
+//   simpleInfo: "",
+//   closedDate: Timestamp.now(),
+//   oneLineInfo: "",
+// };
 const initForm2 = {
   teamSize: 0,
   techStack: [],
diff --git a/src/features/projects/ui/project-insert/Step1.tsx b/src/features/projects/ui/project-insert/Step1.tsx
index c40bf88..a32105c 100644
--- a/src/features/projects/ui/project-insert/Step1.tsx
+++ b/src/features/projects/ui/project-insert/Step1.tsx
@@ -1,5 +1,6 @@
 import { Box, styled, useMediaQuery, useTheme } from "@mui/material";
-import type { JSX } from "react";
+import type { SelectChangeEvent } from "@mui/material";
+import type { JSX, ChangeEvent } from "react";
 
 import ProjectCategoryCard from "@entities/projects/ui/project-insert/ProjectCategoryCard";
 import ProjectDeadlineCard from "@entities/projects/ui/project-insert/ProjectDeadlineCard";
@@ -15,44 +16,53 @@ type SetpType = Pick<
   "title" | "oneLineInfo" | "category" | "closedDate" | "simpleInfo"
 >;
 
-const Step1 = ({ form }: { form: SetpType }): JSX.Element => {
+interface Step1Props {
+  form: SetpType;
+  onChangeForm: {
+    title: (e: ChangeEvent<HTMLInputElement>) => void;
+    oneLineInfo: (e: ChangeEvent<HTMLInputElement>) => void;
+    simpleInfo: (
+      e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => void;
+    category: (event: SelectChangeEvent) => void;
+    closedDate: (e: ChangeEvent<HTMLInputElement>) => void;
+  };
+}
+
+const Step1 = ({ form, onChangeForm }: Step1Props): JSX.Element => {
   const theme = useTheme();
   const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
 
-  const handleChange = (): void => {};
-
   return (
     <StepBox>
       <ProjectTitleCard
         value={form.title}
-        onChange={handleChange}
+        onChange={onChangeForm.title}
         large
         style={{ gridColumn: "span 1" }}
       />
       <ProjectOneLineCard
         value={form.oneLineInfo}
-        onChange={handleChange}
+        onChange={onChangeForm.oneLineInfo}
         large
         style={{ gridColumn: "span 1" }}
       />
-      {/* category의 type이 enum이라 콘솔에 경고가 뜹니다 */}
       <ProjectCategoryCard
         value={form.category}
-        onChange={handleChange}
+        onChange={onChangeForm.category}
         large
         style={{ gridColumn: "span 1" }}
       />
       <ProjectDeadlineCard
         value={formatDate(form.closedDate)}
-        onChange={handleChange}
+        onChange={onChangeForm.closedDate}
         large
         style={{ gridColumn: "span 1" }}
       />
       <ProjectSimpleDescCard
         value={form.simpleInfo}
-        onChange={handleChange}
+        onChange={onChangeForm.simpleInfo}
         large
-        // ??
         style={{ gridColumn: isMdDown ? "span 1" : "1 / -1" }}
       />
     </StepBox>
diff --git a/src/pages/project-insert/ui/HoneyTipBox.tsx b/src/pages/project-insert/ui/HoneyTipBox.tsx
index 5bf1588..f4179e5 100644
--- a/src/pages/project-insert/ui/HoneyTipBox.tsx
+++ b/src/pages/project-insert/ui/HoneyTipBox.tsx
@@ -1,77 +1,169 @@
-import { Box, styled } from "@mui/material";
+import { Box, styled, alpha } from "@mui/material";
 import type { JSX } from "react";
 
-import TextWithEmoji from "@shared/ui/project-insert/TextWithEmoji";
-
-// Typography에 fontSize={number}은 적용되지 않으므로 삭제하엿습니다.
-// 스타일이 반복되어 사용되고 있기에 공통 컴포넌트로 만들어 재사용하였습니다.
-
 const HoneyTipBox = (): JSX.Element => {
   return (
-    <TipBox>
-      <TextWithEmoji
-        emoji="💡"
-        emoji_label="lightbulb"
-        mainText="꿀팁 모음집"
-      />
-
-      <Box
-        display="flex"
-        flexWrap="wrap"
-        gap={4}
-        mt={3}
-        flexDirection={{ xs: "column", sm: "row" }}
-      >
-        <Box flex={1}>
-          <TextWithEmoji
-            emoji="🎯"
-            emoji_label="dart"
-            mainText="구체적인 계획을 세우세요"
-            subText="일정과 역할이 명확할수록 좋은 팀원을 만날 수 있어요"
-          />
-          <TextWithEmoji
-            emoji="🤝"
-            emoji_label="handshake"
-            mainText="초보자도 환영해요"
-            subText="경험보다 열정이 더 중요할 때가 많아요"
-          />
-        </Box>
-        <Box flex={1}>
-          <TextWithEmoji
-            emoji="💬"
-            emoji_label="chat"
-            mainText="소통 방식 미리 정하기"
-            subText="언제, 어떻게 만날지 미리 정해두면 좋아요"
-          />
-          <TextWithEmoji
-            emoji="🎉"
-            emoji_label="fun"
-            mainText="재미있게 표현하기"
-            subText="딱딱한 설명보다 재미있는 설명이 더 매력적이에요"
-          />
-        </Box>
-      </Box>
-    </TipBox>
+    <TipContainer>
+      {/* 헤더 섹션 */}
+      <TipHeader>
+        <HeaderIcon>💡</HeaderIcon>
+        <HeaderTitle>꿀팁 모음집</HeaderTitle>
+      </TipHeader>
+
+      {/* 팁 그리드 */}
+      <TipGrid>
+        <TipCard>
+          <CardIcon>🎯</CardIcon>
+          <CardContent>
+            <CardTitle>구체적인 계획을 세우세요</CardTitle>
+            <CardSubtext>
+              일정과 역할이 명확할수록 좋은 팀원을 만날 수 있어요
+            </CardSubtext>
+          </CardContent>
+        </TipCard>
+
+        <TipCard>
+          <CardIcon>🤝</CardIcon>
+          <CardContent>
+            <CardTitle>초보자도 환영해요</CardTitle>
+            <CardSubtext>경험보다 열정이 더 중요할 때가 많아요</CardSubtext>
+          </CardContent>
+        </TipCard>
+
+        <TipCard>
+          <CardIcon>💬</CardIcon>
+          <CardContent>
+            <CardTitle>소통 방식 미리 정하기</CardTitle>
+            <CardSubtext>언제, 어떻게 만날지 미리 정해두면 좋아요</CardSubtext>
+          </CardContent>
+        </TipCard>
+
+        <TipCard>
+          <CardIcon>🎉</CardIcon>
+          <CardContent>
+            <CardTitle>재미있게 표현하기</CardTitle>
+            <CardSubtext>
+              딱딱한 설명보다 재미있는 설명이 더 매력적이에요
+            </CardSubtext>
+          </CardContent>
+        </TipCard>
+      </TipGrid>
+    </TipContainer>
   );
 };
 
 export default HoneyTipBox;
 
-// 해당 Box는 부모의 MainContainer 밖으로 넘어가지 않으므로 MaxWidth, marginX 설정을 제거하였습니다.
-const TipBox = styled(Box)(({ theme }) => ({
-  marginTop: theme.spacing(6), // default spacing이 8px ... 라고 하네요
+// 메인 컨테이너 - 폼과 통일감 있는 디자인
+const TipContainer = styled(Box)(({ theme }) => ({
+  marginTop: theme.spacing(4),
   backgroundColor: "#fffbe6",
-  border: "1.5px solid #ffe6a0",
-  borderRadius: theme.spacing(1),
-  padding: theme.spacing(3),
-  paddingLeft: theme.spacing(1),
-  paddingRight: theme.spacing(1),
+  border: "1px solid #e0e0e0",
+  borderRadius: "12px",
+  padding: theme.spacing(2),
+
   [theme.breakpoints.up("sm")]: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
+    padding: theme.spacing(3),
   },
+}));
+
+// 헤더 섹션 - 간결하고 명확한 스타일
+const TipHeader = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  marginBottom: theme.spacing(2),
+  paddingBottom: theme.spacing(1),
+  borderBottom: `1px solid ${alpha("#000", 0.08)}`,
+}));
+
+// 헤더 아이콘
+const HeaderIcon = styled(Box)(() => ({
+  fontSize: "20px",
+  fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"',
+}));
+
+// 헤더 타이틀
+const HeaderTitle = styled(Box)(({ theme }) => ({
+  fontSize: "18px",
+  fontWeight: 600,
+  color: "#333",
+  letterSpacing: "-0.02em",
+
+  [theme.breakpoints.up("sm")]: {
+    fontSize: "19px",
+  },
+}));
+
+// 팁 그리드 - 폼과 동일한 간격
+const TipGrid = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr",
+  gap: theme.spacing(2),
+
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: theme.spacing(2),
+  },
+}));
+
+// 개별 팁 카드 - 폼 요소와 유사한 스타일
+const TipCard = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.5),
+  padding: theme.spacing(2),
+  backgroundColor: "#fff",
+  border: "1px solid #e8e8e8",
+  borderRadius: "8px",
+
+  // 서브틀한 그림자로 깊이감
+  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+
+  [theme.breakpoints.up("md")]: {
+    padding: theme.spacing(2),
+    gap: theme.spacing(2),
+  },
+}));
+
+// 카드 아이콘 - 심플하고 깔끔한 스타일
+const CardIcon = styled(Box)(() => ({
+  fontSize: "28px",
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "40px",
+  height: "40px",
+
+  // 이모지 최적화
+  fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"',
+}));
+
+// 카드 컨텐츠
+const CardContent = styled(Box)(() => ({
+  flex: 1,
+  minWidth: 0,
+}));
+
+// 카드 타이틀 - 폼 레이블과 유사한 스타일
+const CardTitle = styled(Box)(({ theme }) => ({
+  fontSize: "15px",
+  fontWeight: 600,
+  color: "#333",
+  marginBottom: theme.spacing(0.5),
+  lineHeight: 1.4,
+  letterSpacing: "-0.01em",
+
   [theme.breakpoints.up("md")]: {
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3),
+    fontSize: "16px",
   },
 }));
+
+// 카드 서브텍스트 - 폼 헬퍼 텍스트와 유사한 스타일
+const CardSubtext = styled(Box)(() => ({
+  fontSize: "14px",
+  color: "#666",
+  lineHeight: 1.5,
+  letterSpacing: "-0.005em",
+}));
diff --git a/src/pages/project-insert/ui/ProjectInsertPage.tsx b/src/pages/project-insert/ui/ProjectInsertPage.tsx
index d357fe0..7d8b1dc 100644
--- a/src/pages/project-insert/ui/ProjectInsertPage.tsx
+++ b/src/pages/project-insert/ui/ProjectInsertPage.tsx
@@ -11,7 +11,6 @@ import TopTitle from "@pages/project-insert/ui/TopTitle";
 
 import useProjectInsert from "@features/projects/hook/useProjectInsertForm";
 import PageNaviBtn from "@features/projects/ui/project-insert/PageNaviBtn";
-import Step1 from "@features/projects/ui/project-insert/Step1";
 import Step2 from "@features/projects/ui/project-insert/Step2";
 import Step3 from "@features/projects/ui/project-insert/Step3";
 import Step4 from "@features/projects/ui/project-insert/Step4";
@@ -28,7 +27,9 @@ const ProjectInsertPage = (): JSX.Element => {
       <StepBox currentStep={page.currentStep} />
 
       {/* Step별 컴포넌트 */}
-      {page.currentStep === 1 && <Step1 form={form.step1} />}
+      {/* {page.currentStep === 1 && (
+        <Step1 form={form.step1} onChangeForm={onChange.step1} />
+      )} */}
       {page.currentStep === 2 && (
         <Step2 form={form.step2} onChangeForm={onChange.step2} />
       )}