diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index f02cc327..b9e06b2a 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -9,6 +9,7 @@
     "formulahendry.auto-rename-tag",
     "pkief.material-icon-theme",
     "equinusocio.vsc-material-theme",
-    "wix.vscode-import-cost"
+    "wix.vscode-import-cost",
+    "streetsidesoftware.code-spell-checker"
   ]
 }
diff --git a/src/assets/calendar.svg b/src/assets/calendar.svg
new file mode 100644
index 00000000..606052b5
--- /dev/null
+++ b/src/assets/calendar.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 3H3C1.89543 3 1 3.89543 1 5V19C1 20.1046 1.89543 21 3 21H17C18.1046 21 19 20.1046 19 19V5C19 3.89543 18.1046 3 17 3Z" stroke="#5E5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 1V5" stroke="#5E5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 1V5" stroke="#5E5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 9H19" stroke="#5E5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/common/DuplicationCheckInput.tsx b/src/components/common/DuplicationCheckInput.tsx
new file mode 100644
index 00000000..31f21855
--- /dev/null
+++ b/src/components/common/DuplicationCheckInput.tsx
@@ -0,0 +1,46 @@
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { GiCheckMark } from 'react-icons/gi';
+import { RiProhibited2Line } from 'react-icons/ri';
+
+type DuplicationCheckInputProp = {
+  id: string;
+  label?: string;
+  value: string;
+  placeholder?: string;
+  errors?: string;
+  register?: UseFormRegisterReturn;
+};
+
+export default function DuplicationCheckInput({
+  id,
+  label,
+  value,
+  placeholder,
+  errors,
+  register,
+}: DuplicationCheckInputProp) {
+  return (
+    <label htmlFor={id}>
+      {label && <h3 className="text-large">{label}</h3>}
+      <div className="relative">
+        <input
+          type="text"
+          id={id}
+          className="h-25 w-full min-w-200 rounded-md border border-input pl-10 pr-25 text-regular placeholder:text-xs"
+          placeholder={placeholder}
+          {...register}
+        />
+        {value && (
+          <div className="absolute right-10 top-1/2 -translate-y-1/2">
+            {errors ? (
+              <RiProhibited2Line className="size-10 text-error" />
+            ) : (
+              <GiCheckMark className="size-10 text-main" />
+            )}
+          </div>
+        )}
+      </div>
+      <div className={`my-5 h-10 text-xs text-error ${errors ? 'visible' : 'invisible'}`}>{errors}</div>
+    </label>
+  );
+}
diff --git a/src/components/common/ToggleButton.tsx b/src/components/common/ToggleButton.tsx
new file mode 100644
index 00000000..4a540da4
--- /dev/null
+++ b/src/components/common/ToggleButton.tsx
@@ -0,0 +1,26 @@
+type ToggleButtonProps = {
+  id: string;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export default function ToggleButton({ id, checked, onChange: handleChange }: ToggleButtonProps) {
+  return (
+    <label htmlFor={id} className="relative inline-block h-10 w-20">
+      <input
+        id={id}
+        type="checkbox"
+        className="peer h-0 w-0 border-main opacity-0"
+        checked={checked}
+        onChange={handleChange}
+      />
+      {/* prettier-ignore */}
+      <span className="
+      absolute bottom-0 left-0 right-0 top-0 cursor-pointer rounded-full bg-disable transition duration-300
+      before:content-[''] before:absolute before:left-2 before:top-1/2 before:-translate-y-1/2 before:size-7
+      before:rounded-full before:bg-white before:transition before:duration-300
+      peer-checked:bg-main peer-checked:before:translate-x-9
+    "/>
+    </label>
+  );
+}
diff --git a/src/components/modal/ModaFormButton.tsx b/src/components/modal/ModalFormButton.tsx
similarity index 76%
rename from src/components/modal/ModaFormButton.tsx
rename to src/components/modal/ModalFormButton.tsx
index 6a0807ad..7cd99faa 100644
--- a/src/components/modal/ModaFormButton.tsx
+++ b/src/components/modal/ModalFormButton.tsx
@@ -4,9 +4,9 @@ type ModalFormButtonProps = {
   onClose: () => void;
 };
 
-export default function ModaFormButton({ formId, isCreate, onClose }: ModalFormButtonProps) {
+export default function ModalFormButton({ formId, isCreate, onClose }: ModalFormButtonProps) {
   return (
-    <div className="h-20">
+    <div className="min-h-20">
       <button type="submit" form={formId} className="mr-10 h-full rounded-md bg-main px-10 text-white">
         {isCreate ? '등록' : '수정'}
       </button>
diff --git a/src/components/modal/project-status/CreateModalProjectStatus.tsx b/src/components/modal/project-status/CreateModalProjectStatus.tsx
index aea32a96..853e41ec 100644
--- a/src/components/modal/project-status/CreateModalProjectStatus.tsx
+++ b/src/components/modal/project-status/CreateModalProjectStatus.tsx
@@ -2,7 +2,7 @@ import { SubmitHandler } from 'react-hook-form';
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
 import ModalProjectStatusForm from '@components/modal/project-status/ModalProjectStatusForm';
-import ModaFormButton from '@components/modal/ModaFormButton';
+import ModalFormButton from '@components/modal/ModalFormButton';
 import { ProjectStatusForm } from '@/types/ProjectStatusType';
 
 type CreateModalProjectStatusProps = {
@@ -19,10 +19,8 @@ export default function CreateModalProjectStatus({ onClose: handleClose }: Creat
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <div className="flex h-full flex-col items-center justify-center">
-          <ModalProjectStatusForm formId="createStatusForm" onSubmit={handleSubmit} />
-          <ModaFormButton formId="createStatusForm" isCreate onClose={handleClose} />
-        </div>
+        <ModalProjectStatusForm formId="createStatusForm" onSubmit={handleSubmit} />
+        <ModalFormButton formId="createStatusForm" isCreate onClose={handleClose} />
       </ModalLayout>
     </ModalPortal>
   );
diff --git a/src/components/modal/project-status/ModalProjectStatusForm.tsx b/src/components/modal/project-status/ModalProjectStatusForm.tsx
index 6febcb2e..c9a78088 100644
--- a/src/components/modal/project-status/ModalProjectStatusForm.tsx
+++ b/src/components/modal/project-status/ModalProjectStatusForm.tsx
@@ -1,8 +1,8 @@
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { STATUS_VALIDATION_RULES } from '@constants/formValidationRules';
 import useProjectStatusQuery from '@hooks/query/useProjectStatusQuery';
-import { GiCheckMark } from 'react-icons/gi';
-import { RiProhibited2Fill, RiProhibited2Line } from 'react-icons/ri';
+import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
+import { RiProhibited2Fill } from 'react-icons/ri';
 import type { ProjectStatus, ProjectStatusForm } from '@/types/ProjectStatusType';
 
 type ModalProjectStatusFormProps = {
@@ -27,28 +27,14 @@ export default function ModalProjectStatusForm({ formId, statusId, onSubmit }: M
 
   return (
     <form id={formId} className="mb-10 flex grow flex-col justify-center" onSubmit={handleSubmit(onSubmit)}>
-      <label htmlFor="name" className="mb-10">
-        <h3 className="text-large">상태명</h3>
-        <div className="relative">
-          <input
-            type="text"
-            id="name"
-            className="h-25 w-200 rounded-md border border-input pl-10 pr-25 text-regular placeholder:text-xs"
-            placeholder="상태명을 입력하세요."
-            {...register('name', STATUS_VALIDATION_RULES.STATUS_NAME(nameList))}
-          />
-          {statusName && (
-            <div className="absolute right-10 top-1/2 -translate-y-1/2">
-              {errors.name ? (
-                <RiProhibited2Line className="size-10 text-error" />
-              ) : (
-                <GiCheckMark className="size-10 text-main" />
-              )}
-            </div>
-          )}
-        </div>
-        {errors.name && <div className="mt-5 text-xs text-error">{errors.name.message}</div>}
-      </label>
+      <DuplicationCheckInput
+        id="name"
+        label="상태명"
+        value={statusName}
+        placeholder="상태명을 입력하세요."
+        errors={errors.name?.message}
+        register={register('name', STATUS_VALIDATION_RULES.STATUS_NAME(nameList))}
+      />
       <h3 className="text-large">색상</h3>
       <section className="grid grid-cols-8 gap-4">
         {usableColorList.map(({ color, isUsable }, index) => (
diff --git a/src/components/modal/project-status/UpdateModalProjectStatus.tsx b/src/components/modal/project-status/UpdateModalProjectStatus.tsx
index ae0a1256..acdf4296 100644
--- a/src/components/modal/project-status/UpdateModalProjectStatus.tsx
+++ b/src/components/modal/project-status/UpdateModalProjectStatus.tsx
@@ -2,7 +2,7 @@ import { SubmitHandler } from 'react-hook-form';
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
 import ModalProjectStatusForm from '@components/modal/project-status/ModalProjectStatusForm';
-import ModaFormButton from '@components/modal/ModaFormButton';
+import ModalFormButton from '@components/modal/ModalFormButton';
 import { ProjectStatus, ProjectStatusForm } from '@/types/ProjectStatusType';
 
 type UpdateModalProjectStatusProps = {
@@ -21,10 +21,8 @@ export default function UpdateModalProjectStatus({ statusId, onClose: handleClos
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <div className="flex h-full flex-col items-center justify-center">
-          <ModalProjectStatusForm formId="updateStatusForm" statusId={statusId} onSubmit={handleSubmit} />
-          <ModaFormButton formId="updateStatusForm" isCreate={false} onClose={handleClose} />
-        </div>
+        <ModalProjectStatusForm formId="updateStatusForm" statusId={statusId} onSubmit={handleSubmit} />
+        <ModalFormButton formId="updateStatusForm" isCreate={false} onClose={handleClose} />
       </ModalLayout>
     </ModalPortal>
   );
diff --git a/src/components/modal/task/CreateModalTask.tsx b/src/components/modal/task/CreateModalTask.tsx
index ad29c6be..7707e734 100644
--- a/src/components/modal/task/CreateModalTask.tsx
+++ b/src/components/modal/task/CreateModalTask.tsx
@@ -2,14 +2,16 @@ import { SubmitHandler } from 'react-hook-form';
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
 import ModalTaskForm from '@components/modal/task/ModalTaskForm';
-import ModaFormButton from '@components/modal/ModaFormButton';
+import ModalFormButton from '@components/modal/ModalFormButton';
 import { TaskForm } from '@/types/TaskType';
+import { Project } from '@/types/ProjectType';
 
 type CreateModalTaskProps = {
+  project: Project;
   onClose: () => void;
 };
 
-export default function CreateModalTask({ onClose: handleClose }: CreateModalTaskProps) {
+export default function CreateModalTask({ project, onClose: handleClose }: CreateModalTaskProps) {
   // ToDo: 상태 생성을 위한 네트워크 로직 추가
   const handleSubmit: SubmitHandler<TaskForm> = async (data) => {
     console.log('생성 폼 제출');
@@ -19,11 +21,8 @@ export default function CreateModalTask({ onClose: handleClose }: CreateModalTas
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <div className="flex h-full flex-col items-center justify-center">
-          {/* ToDo: Task 생성 모달 작성시 수정할 것 */}
-          <ModalTaskForm formId="updateTaskForm" onSubmit={handleSubmit} />
-          <ModaFormButton formId="updateTaskForm" isCreate={false} onClose={handleClose} />
-        </div>
+        <ModalTaskForm formId="createTaskForm" project={project} onSubmit={handleSubmit} />
+        <ModalFormButton formId="createTaskForm" isCreate onClose={handleClose} />
       </ModalLayout>
     </ModalPortal>
   );
diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
index 8eb50e21..b6c940a2 100644
--- a/src/components/modal/task/ModalTaskForm.tsx
+++ b/src/components/modal/task/ModalTaskForm.tsx
@@ -1,21 +1,119 @@
+import { useState } from 'react';
+import { DateTime } from 'luxon';
+import { IoSearch } from 'react-icons/io5';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { TASK_VALIDATION_RULES } from '@constants/formValidationRules';
+import ToggleButton from '@components/common/ToggleButton';
+import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
+import useTaskQuery from '@hooks/query/useTaskQuery';
+import { Project } from '@/types/ProjectType';
 import { Task, TaskForm } from '@/types/TaskType';
 
-type ModalTaskFromProps = {
+type ModalTaskFormProps = {
   formId: string;
+  project: Project;
   taskId?: Task['taskId'];
   onSubmit: SubmitHandler<TaskForm>;
 };
 
-// ToDo: Task 모달 작성시 Task Form 만들기
-export default function ModalTaskForm({ formId, taskId, onSubmit }: ModalTaskFromProps) {
-  const { register, handleSubmit } = useForm<TaskForm>({
+export default function ModalTaskForm({ formId, project, taskId, onSubmit }: ModalTaskFormProps) {
+  const [hasDeadline, setHasDeadline] = useState(false);
+  const { taskNameList } = useTaskQuery(project.projectId);
+  const {
+    register,
+    watch,
+    setValue,
+    getValues,
+    clearErrors,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TaskForm>({
     mode: 'onChange',
-    defaultValues: {},
+    defaultValues: {
+      name: '',
+      content: '',
+      startDate: DateTime.fromJSDate(new Date()).toFormat('yyyy-LL-dd'),
+      endDate: DateTime.fromJSDate(new Date()).toFormat('yyyy-LL-dd'),
+    },
   });
+
+  const handleDeadlineToggle = () => {
+    setValue('endDate', getValues('startDate'));
+    clearErrors('endDate');
+    setHasDeadline((prev) => !prev);
+  };
+
   return (
-    <form id={formId} className="mb-10 flex grow flex-col justify-center" onSubmit={handleSubmit(onSubmit)}>
-      <div>{taskId}</div>
+    <form
+      id={formId}
+      className="mb-20 flex w-4/5 max-w-375 grow flex-col justify-center"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <DuplicationCheckInput
+        id="name"
+        label="일정"
+        value={watch('name')}
+        placeholder="일정명을 입력해주세요."
+        errors={errors.name?.message}
+        register={register('name', TASK_VALIDATION_RULES.TASK_NAME(taskNameList))}
+      />
+
+      <div className="flex items-center justify-center gap-10">
+        <label htmlFor="startDate" className="w-1/2">
+          <h3 className="text-large">시작일</h3>
+          <input
+            type="date"
+            id="startDate"
+            {...register('startDate', TASK_VALIDATION_RULES.START_DATE(project.startDate, project.endDate))}
+          />
+          <div className={`my-5 h-10 grow text-xs text-error ${errors.startDate ? 'visible' : 'invisible'}`}>
+            {errors.startDate?.message}
+          </div>
+        </label>
+        <label htmlFor="endDate" className="w-1/2">
+          <h3 className="flex items-center text-large">
+            <span className="mr-2">종료일</span>
+            <ToggleButton id="deadline" checked={hasDeadline} onChange={handleDeadlineToggle} />
+          </h3>
+          <input
+            type="date"
+            id="endDate"
+            className={`${hasDeadline ? '' : '!bg-disable'}`}
+            disabled={!hasDeadline}
+            {...register(
+              'endDate',
+              TASK_VALIDATION_RULES.END_DATE(hasDeadline, project.startDate, project.endDate, watch('startDate')),
+            )}
+          />
+          <div className={`my-5 h-10 grow text-xs text-error ${errors.endDate ? 'visible' : 'invisible'}`}>
+            {errors.endDate?.message}
+          </div>
+        </label>
+      </div>
+
+      <label htmlFor="user" className="mb-20 flex items-center gap-5">
+        <h3 className="text-large">수행자</h3>
+        <div className="relative grow">
+          <input
+            type="text"
+            id="user"
+            className="h-25 w-full rounded-md border border-input pl-10 pr-25 text-regular placeholder:text-xs"
+          />
+          <div className="absolute right-5 top-1/2 -translate-y-1/2">
+            <IoSearch className="size-15 text-emphasis" />
+          </div>
+        </div>
+      </label>
+
+      <label htmlFor="content" className="mb-20">
+        <h3 className="text-large">내용</h3>
+        <textarea name="content" id="content" className="w-full border" rows={5} />
+      </label>
+
+      <label htmlFor="files">
+        <h3 className="text-large">첨부파일</h3>
+        <input type="file" id="files" />
+      </label>
     </form>
   );
 }
diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
index 120f9863..18058c69 100644
--- a/src/components/modal/task/UpdateModalTask.tsx
+++ b/src/components/modal/task/UpdateModalTask.tsx
@@ -2,15 +2,17 @@ import { SubmitHandler } from 'react-hook-form';
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
 import ModalTaskForm from '@components/modal/task/ModalTaskForm';
-import ModaFormButton from '@components/modal/ModaFormButton';
+import ModalFormButton from '@components/modal/ModalFormButton';
 import { Task, TaskForm } from '@/types/TaskType';
+import { Project } from '@/types/ProjectType';
 
 type UpdateModalTaskProps = {
+  project: Project;
   taskId: Task['taskId'];
   onClose: () => void;
 };
 
-export default function UpdateModalTask({ taskId, onClose: handleClose }: UpdateModalTaskProps) {
+export default function UpdateModalTask({ project, taskId, onClose: handleClose }: UpdateModalTaskProps) {
   // ToDo: 상태 생성을 위한 네트워크 로직 추가
   const handleSubmit: SubmitHandler<TaskForm> = async (data) => {
     console.log('생성 폼 제출');
@@ -20,11 +22,9 @@ export default function UpdateModalTask({ taskId, onClose: handleClose }: Update
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <div className="flex h-full flex-col items-center justify-center">
-          {/* ToDo: Task 수정 모달 작성시 수정할 것 */}
-          <ModalTaskForm formId="updateTaskForm" taskId={taskId} onSubmit={handleSubmit} />
-          <ModaFormButton formId="updateTaskForm" isCreate={false} onClose={handleClose} />
-        </div>
+        {/* ToDo: Task 수정 모달 작성시 수정할 것 */}
+        <ModalTaskForm formId="updateTaskForm" taskId={taskId} project={project} onSubmit={handleSubmit} />
+        <ModalFormButton formId="updateTaskForm" isCreate={false} onClose={handleClose} />
       </ModalLayout>
     </ModalPortal>
   );
diff --git a/src/constants/formValidationRules.ts b/src/constants/formValidationRules.ts
index 7e24ccc0..ea6dc8c7 100644
--- a/src/constants/formValidationRules.ts
+++ b/src/constants/formValidationRules.ts
@@ -1,7 +1,35 @@
 import Validator from '@utils/Validator';
 import { deepFreeze } from '@utils/deepFreeze';
-import { EMAIL_REGEX, ID_REGEX, NICKNAME_REGEX, PASSWORD_REGEX, PHONE_REGEX } from './regex';
+import { EMAIL_REGEX, ID_REGEX, NICKNAME_REGEX, PASSWORD_REGEX, PHONE_REGEX } from '@constants/regex';
+import { Project } from '@/types/ProjectType';
+import { Task } from '@/types/TaskType';
 
+type ValidateOption = { [key: string]: (value: string) => string | boolean };
+
+// ToDo: 리팩토링을 해야하나? 나중에 시간날 때 생각해보기
+function getTaskDateValidation(
+  projectStartDate: Project['startDate'],
+  projectEndDate: Project['endDate'],
+  taskStartDate?: Task['startDate'],
+) {
+  const validation: ValidateOption = {};
+
+  if (taskStartDate) {
+    validation.isEarlierDate = (taskEndDate: string) =>
+      !Validator.isEarlierStartDate(taskStartDate, taskEndDate) ? '시작일 이후로 설정해주세요.' : true;
+  }
+
+  if (projectStartDate && projectEndDate) {
+    validation.isWithinDateRange = (taskDate: string) =>
+      !Validator.isWithinDateRange(projectStartDate, projectEndDate, taskDate)
+        ? '프로젝트 기간 내로 설정해주세요.'
+        : true;
+  }
+
+  return validation;
+}
+
+// ToDo: Form 별로 Validation 분리하기
 export const STATUS_VALIDATION_RULES = deepFreeze({
   STATUS_NAME: (nameList: string[]) => ({
     required: '상태명을 입력해주세요.',
@@ -14,14 +42,16 @@ export const STATUS_VALIDATION_RULES = deepFreeze({
       message: '상태명을 2자리 이상 20자리 이하로 입력해주세요.',
     },
     validate: {
-      isEmpty: (value: string) => !Validator.isEmptyString(value) || '상태명을 제대로 입력해주세요.',
-      duplicatedName: (value: string) => !Validator.isDuplicatedName(nameList, value) || '이미 사용중인 상태명입니다.',
+      isNotEmpty: (value: string) => (Validator.isEmptyString(value) ? '상태명을 제대로 입력해주세요.' : true),
+      isNotDuplicatedName: (value: string) =>
+        Validator.isDuplicatedName(nameList, value) ? '이미 사용중인 상태명입니다.' : true,
     },
   }),
   COLOR: (colorList: string[]) => ({
     required: '색상을 선택해주세요.',
     validate: {
-      duplicatedName: (value: string) => !Validator.isDuplicatedName(colorList, value) || '이미 사용중인 색상입니다.',
+      isNotDuplicatedName: (value: string) =>
+        Validator.isDuplicatedName(colorList, value) ? '이미 사용중인 색상입니다.' : true,
     },
   }),
   EMAIL: {
@@ -89,3 +119,31 @@ export const STATUS_VALIDATION_RULES = deepFreeze({
     },
   },
 });
+
+export const TASK_VALIDATION_RULES = deepFreeze({
+  TASK_NAME: (nameList: string[]) => ({
+    required: '일정명을 입력해주세요.',
+    maxLength: {
+      value: 128,
+      message: '일정명은 128자리 이하로 입력해주세요.',
+    },
+    validate: {
+      isNotEmpty: (name: string) => (Validator.isEmptyString(name) ? '일정명을 제대로 입력해주세요.' : true),
+      isNotDuplicatedName: (value: string) =>
+        Validator.isDuplicatedName(nameList, value) ? '이미 사용중인 일정명입니다.' : true,
+    },
+  }),
+  START_DATE: (projectStartDate: Project['startDate'], projectEndDate: Project['endDate']) => ({
+    required: '시작일을 선택해주세요.',
+    validate: getTaskDateValidation(projectStartDate, projectEndDate),
+  }),
+  END_DATE: (
+    hasDeadline: boolean,
+    projectStartDate: Project['startDate'],
+    projectEndDate: Project['endDate'],
+    taskStartDate: Task['startDate'],
+  ) => ({
+    required: hasDeadline && '종료일을 선택해주세요.',
+    validate: getTaskDateValidation(projectStartDate, projectEndDate, taskStartDate),
+  }),
+});
diff --git a/src/globals.css b/src/globals.css
index c5c9bddc..42d25138 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -80,6 +80,31 @@
     cursor: pointer;
     background: #e5e5e5;
   }
+
+  /* ========= Input Date Custom ========= */
+  input[type='date']::-webkit-inner-spin-button {
+    display: none;
+    appearance: none;
+  }
+  input[type='date']::-webkit-calendar-picker-indicator {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    color: transparent;
+    cursor: pointer;
+  }
+  input[type='date'] {
+    position: relative;
+    width: 100%;
+    height: 2.5rem;
+    border: 1px solid #b1b1b1;
+    border-radius: 0.375rem;
+    padding: 0 1rem 0 2.2rem;
+    background: url('./assets/calendar.svg') no-repeat left 0.5rem bottom 50%;
+  }
 }
 
 @layer components {
diff --git a/src/hooks/query/useTaskQuery.ts b/src/hooks/query/useTaskQuery.ts
new file mode 100644
index 00000000..6d15bf3c
--- /dev/null
+++ b/src/hooks/query/useTaskQuery.ts
@@ -0,0 +1,20 @@
+import { TASK_DUMMY } from '@mocks/mockData';
+import { TaskListWithStatus } from '@/types/TaskType';
+import { Project } from '@/types/ProjectType';
+
+function getTaskNameList(taskList: TaskListWithStatus[]) {
+  return taskList
+    .map((statusTask) => statusTask.tasks)
+    .flat()
+    .map((task) => task.name);
+}
+
+// Todo: Task Query CRUD로직 작성하기
+// QueryKey: project, projectId, tasks
+export default function useTaskQuery(projectId: Project['projectId']) {
+  const taskList = TASK_DUMMY;
+
+  const taskNameList = taskList ? getTaskNameList(taskList) : [];
+
+  return { taskList, taskNameList };
+}
diff --git a/src/layouts/ModalLayout.tsx b/src/layouts/ModalLayout.tsx
index 358fc139..334c5677 100644
--- a/src/layouts/ModalLayout.tsx
+++ b/src/layouts/ModalLayout.tsx
@@ -20,7 +20,7 @@ export default function ModalLayout({ onClose, children }: ModalLayoutProps) {
       className="absolute bottom-0 left-0 right-0 top-0 z-20 flex items-center justify-center bg-black/50"
       tabIndex={-1}
     >
-      <div className="h-4/5 max-h-375 min-w-375 overflow-auto bg-white p-20">{children}</div>
+      <div className="flex h-4/5 max-h-375 min-w-375 flex-col items-center overflow-auto bg-white p-20">{children}</div>
     </div>
   );
 }
diff --git a/src/layouts/page/ProjectLayout.tsx b/src/layouts/page/ProjectLayout.tsx
index 2614ba15..767f2d07 100644
--- a/src/layouts/page/ProjectLayout.tsx
+++ b/src/layouts/page/ProjectLayout.tsx
@@ -28,6 +28,7 @@ export default function ProjectLayout() {
         </ListSidebar>
         <section className="flex w-2/3 flex-col border border-list bg-contents-box">
           <header className="flex h-30 items-center justify-between border-b p-10">
+            {/* ToDo: LabelTitle 공통 컴포넌트로 추출할 것 */}
             <div>
               <small className="mr-5 font-bold text-category">project</small>
               <span className="text-emphasis">{project?.name}</span>
@@ -40,6 +41,7 @@ export default function ProjectLayout() {
             <div className="sticky top-0 z-10 mb-10 flex items-center justify-between border-b bg-contents-box pt-10">
               <ul className="*:mr-15">
                 <li className="inline">
+                  {/* ToDo: nav 옵션사항을 정리하여 map으로 정리할 것 */}
                   <NavLink to="calendar" className={({ isActive }) => (isActive ? 'text-main' : 'text-emphasis')}>
                     Calendar
                   </NavLink>
@@ -63,7 +65,7 @@ export default function ProjectLayout() {
           </div>
         </section>
       </section>
-      {showTaskModal && <CreateModalTask onClose={closeTaskModal} />}
+      {showTaskModal && <CreateModalTask project={project} onClose={closeTaskModal} />}
       {showStatusModal && <CreateModalProjectStatus onClose={closeStatusModal} />}
     </>
   );
diff --git a/src/pages/project/CalendarPage.tsx b/src/pages/project/CalendarPage.tsx
index 725ca3d3..661c3f08 100644
--- a/src/pages/project/CalendarPage.tsx
+++ b/src/pages/project/CalendarPage.tsx
@@ -115,7 +115,7 @@ export default function CalendarPage() {
         onSelectSlot={handleSelectSlot}
         onSelectEvent={handleSelectEvent}
       />
-      {showModal && <UpdateModalTask taskId={selectedTask!.taskId} onClose={closeModal} />}
+      {showModal && <UpdateModalTask taskId={selectedTask!.taskId} project={project} onClose={closeModal} />}
     </div>
   );
 }
diff --git a/src/types/TaskType.tsx b/src/types/TaskType.tsx
index 427e3961..6a313661 100644
--- a/src/types/TaskType.tsx
+++ b/src/types/TaskType.tsx
@@ -23,6 +23,9 @@ export type Task = {
 // ToDo: Task 추가 모달 작업시 같이 정의할 것
 export type TaskForm = {
   name: string;
+  content: string;
+  startDate: string;
+  endDate: string;
 };
 
 export type TaskWithStatus = RenameKeys<ProjectStatus, StatusKeyMapping> & Task;
diff --git a/src/utils/Validator.ts b/src/utils/Validator.ts
index 9dce7c8c..e5fe43a9 100644
--- a/src/utils/Validator.ts
+++ b/src/utils/Validator.ts
@@ -14,10 +14,16 @@ export default class Validator {
     return nameList.includes(name);
   }
 
-  public static isWithinDateRange(start: Date, end: Date, target: Date) {
-    const startDate = DateTime.fromJSDate(start);
-    const endDate = DateTime.fromJSDate(end);
-    const targetDate = DateTime.fromJSDate(target);
+  public static isWithinDateRange(start: Date | string, end: Date | string, target: Date | string) {
+    const startDate = DateTime.fromJSDate(new Date(start));
+    const endDate = DateTime.fromJSDate(new Date(end));
+    const targetDate = DateTime.fromJSDate(new Date(target));
     return targetDate >= startDate && targetDate < endDate;
   }
+
+  public static isEarlierStartDate(start: Date | string, end: Date | string) {
+    const startDate = DateTime.fromJSDate(new Date(start));
+    const endDate = DateTime.fromJSDate(new Date(end));
+    return startDate <= endDate;
+  }
 }