diff --git a/src/components/timeline/TimelineCreateModal.stories.tsx b/src/components/timeline/TimelineCreateModal.stories.tsx
new file mode 100644
index 0000000..b7548f8
--- /dev/null
+++ b/src/components/timeline/TimelineCreateModal.stories.tsx
@@ -0,0 +1,127 @@
+import { useEffect, useRef } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import TimelineCreateModal from "./TimelineCreateModal";
+
+const meta: Meta<typeof TimelineCreateModal> = {
+  title: "Timeline/CreateModal",
+  component: TimelineCreateModal,
+  parameters: { layout: "fullscreen" },
+  args: {
+    onClose: fn(),
+  },
+};
+
+export default meta;
+type TStory = StoryObj<typeof TimelineCreateModal>;
+
+function EnsureModalRoot() {
+  useEffect(() => {
+    let el = document.getElementById("modal-root");
+    let created = false;
+
+    if (!el) {
+      created = true;
+      el = document.createElement("div");
+      el.id = "modal-root";
+      document.body.appendChild(el);
+    }
+
+    return () => {
+      if (created) el?.remove();
+    };
+  }, []);
+  return null;
+}
+
+function ValidationErrorsPreview() {
+  const submittedRef = useRef(false);
+
+  useEffect(() => {
+    if (submittedRef.current) return;
+    submittedRef.current = true;
+
+    const timer = window.setTimeout(() => {
+      const submitButton = document.querySelector<HTMLButtonElement>(
+        'button[type="submit"]',
+      );
+      submitButton?.click();
+    }, 150);
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  return (
+    <>
+      <EnsureModalRoot />
+      <TimelineCreateModal isOpen onClose={fn()} />
+    </>
+  );
+}
+
+function SubmittingPreview() {
+  const submittedRef = useRef(false);
+
+  useEffect(() => {
+    if (submittedRef.current) return;
+    submittedRef.current = true;
+
+    const timer = window.setTimeout(() => {
+      const nameInput = document.querySelector<HTMLInputElement>(
+        'input[placeholder="ex. 6월 봄 프로모션"]',
+      );
+      const startInput =
+        document.querySelector<HTMLInputElement>('input[type="date"]');
+      const endInputs =
+        document.querySelectorAll<HTMLInputElement>('input[type="date"]');
+
+      if (nameInput) {
+        nameInput.value = "스토리북 테스트";
+        nameInput.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+      if (startInput) {
+        startInput.value = "2026-06-01";
+        startInput.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+      if (endInputs) {
+        endInputs[1].value = "2026-06-30";
+        endInputs[1].dispatchEvent(new Event("input", { bubbles: true }));
+      }
+
+      const metricButton = document.querySelector<HTMLButtonElement>(
+        'button[aria-pressed="false"]',
+      );
+      metricButton?.click();
+
+      const submitButton = document.querySelector<HTMLButtonElement>(
+        'button[type="submit"]',
+      );
+      submitButton?.click();
+    }, 200);
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  return (
+    <>
+      <EnsureModalRoot />
+      <TimelineCreateModal isOpen onClose={fn()} />
+    </>
+  );
+}
+
+export const Default: TStory = {
+  render: () => (
+    <>
+      <EnsureModalRoot />
+      <TimelineCreateModal isOpen onClose={fn()} />
+    </>
+  ),
+};
+
+export const ValidationErrors: TStory = {
+  render: () => <ValidationErrorsPreview />,
+};
+
+export const Submitting: TStory = {
+  render: () => <SubmittingPreview />,
+};
diff --git a/src/components/timeline/TimelineCreateModal.tsx b/src/components/timeline/TimelineCreateModal.tsx
new file mode 100644
index 0000000..e344c32
--- /dev/null
+++ b/src/components/timeline/TimelineCreateModal.tsx
@@ -0,0 +1,306 @@
+import { type MouseEvent, useEffect, useMemo, useState } from "react";
+import { Controller, type SubmitHandler, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "sonner";
+import { twMerge } from "tailwind-merge";
+
+import type { TTimelineMetric } from "@/types/timeline/api";
+import { TIMELINE_FORM_DEFAULT_VALUES } from "@/types/timeline/form";
+import {
+  TIMELINE_COMPARISON_PERIOD_OPTIONS,
+  TIMELINE_METRIC_OPTIONS,
+} from "@/constants/timeline/formOptions";
+
+import {
+  timelineCreateSchema,
+  type TTimelineCreateFormValues,
+} from "@/utils/timeline/timeline";
+
+import Button from "../common/button/Button";
+import {
+  DropdownMenu,
+  type TMenuItem,
+} from "../common/dropdownmenu/DropdownMenu";
+import Input from "../common/input/Input";
+import Modal from "../common/modal/Modal";
+
+import ChevronIcon from "@/assets/icon/chevron/chevron-up.svg?react";
+
+const MOCK_SUBMIT_DELAY_MS = 800;
+
+function openDatePickerFromField(event: MouseEvent<HTMLElement>) {
+  const input =
+    event.currentTarget.querySelector<HTMLInputElement>('input[type="date"]');
+  if (!input || input.disabled) return;
+
+  input.focus();
+
+  if (typeof input.showPicker !== "function") return;
+
+  try {
+    input.showPicker();
+  } catch {
+    /* 일부 브라우저나 보안 컨텍스트에서 showPicker 호출 제한될 수 있음 */
+  }
+}
+
+interface ITimelineCreateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function TimelineCreateModal({
+  isOpen,
+  onClose,
+}: ITimelineCreateModalProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<TTimelineCreateFormValues>({
+    mode: "onChange",
+    resolver: zodResolver(timelineCreateSchema),
+    defaultValues: TIMELINE_FORM_DEFAULT_VALUES,
+  });
+
+  const selectedMetrics = watch("metrics");
+  const comparisonPeriodType = watch("comparisonPeriodType");
+
+  const comparisonLabel = useMemo(() => {
+    return (
+      TIMELINE_COMPARISON_PERIOD_OPTIONS.find(
+        (option) => option.value === comparisonPeriodType,
+      )?.label ?? "비교 기간 선택"
+    );
+  }, [comparisonPeriodType]);
+
+  const comparisonMenuItems: TMenuItem[] = useMemo(
+    () =>
+      TIMELINE_COMPARISON_PERIOD_OPTIONS.map((option) => ({
+        label: option.label,
+        active: option.value === comparisonPeriodType,
+        onClick: () => {
+          setValue("comparisonPeriodType", option.value, {
+            shouldValidate: true,
+          });
+        },
+      })),
+    [comparisonPeriodType, setValue],
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      reset(TIMELINE_FORM_DEFAULT_VALUES);
+      setIsSubmitting(false);
+    }
+  }, [isOpen, reset]);
+
+  const handleClose = () => {
+    if (isSubmitting) return;
+    onClose();
+  };
+
+  const toggleMetric = (metric: TTimelineMetric) => {
+    const current = selectedMetrics ?? [];
+    const next = current.includes(metric)
+      ? current.filter((item) => item !== metric)
+      : [...current, metric];
+
+    setValue("metrics", next, { shouldValidate: true });
+  };
+
+  const onSubmit: SubmitHandler<TTimelineCreateFormValues> = async (data) => {
+    setIsSubmitting(true);
+
+    try {
+      await new Promise<void>((resolve) => {
+        window.setTimeout(resolve, MOCK_SUBMIT_DELAY_MS);
+      });
+      toast.success("타임라인이 생성되었습니다", {
+        description: `"${data.name}" 타임라인을 추가했습니다`,
+      });
+      reset(TIMELINE_FORM_DEFAULT_VALUES);
+      onClose();
+    } catch {
+      toast.error("타임라인 생성에 실패했습니다. 다시 시도해주세요");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      size="lg"
+      padding="lg"
+      title="타임라인 생성"
+      disableOverlayClick={isSubmitting}
+    >
+      <div className="flex w-full flex-col items-start px-4 pr-8 tablet:pr-10">
+        <h2 className="mb-2 font-heading3 text-text-title">타임라인 생성</h2>
+        <p className="mb-5 text-start font-body2 text-text-muted">
+          분석할 기간과 성과 지표를 설정해 새 타임라인을 만들어보세요
+        </p>
+
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex w-full flex-col gap-10"
+          noValidate
+        >
+          <div className="w-full space-y-7">
+            <Input
+              label="타임라인 이름"
+              placeholder="ex. 6월 봄 프로모션"
+              disabled={isSubmitting}
+              error={!!errors.name}
+              helperText={errors.name?.message}
+              {...register("name")}
+            />
+
+            <div className="grid grid-cols-1 gap-7 tablet:grid-cols-2">
+              <div
+                role="presentation"
+                className={!isSubmitting ? "cursor-pointer" : undefined}
+                onClick={openDatePickerFromField}
+              >
+                <Input
+                  label="시작일"
+                  type="date"
+                  disabled={isSubmitting}
+                  error={!!errors.startDate}
+                  helperText={errors.startDate?.message}
+                  inputClassName="cursor-pointer"
+                  {...register("startDate")}
+                />
+              </div>
+              <div
+                role="presentation"
+                className={!isSubmitting ? "cursor-pointer" : undefined}
+                onClick={openDatePickerFromField}
+              >
+                <Input
+                  label="종료일"
+                  type="date"
+                  disabled={isSubmitting}
+                  error={!!errors.endDate}
+                  helperText={errors.endDate?.message}
+                  inputClassName="cursor-pointer"
+                  {...register("endDate")}
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <span className="ml-1 font-body1 text-text-title">성과 지표</span>
+              <p className="ml-1 font-caption text-text-muted">
+                타임라인에서 추적할 지표를 1개 이상 선택하세요
+              </p>
+              <Controller
+                name="metrics"
+                control={control}
+                render={() => (
+                  <div className="flex flex-wrap gap-3 mt-1">
+                    {TIMELINE_METRIC_OPTIONS.map((option) => {
+                      const isSelected = selectedMetrics?.includes(
+                        option.value,
+                      );
+                      return (
+                        <button
+                          type="button"
+                          key={option.value}
+                          disabled={isSubmitting}
+                          aria-pressed={isSelected}
+                          onClick={() => toggleMetric(option.value)}
+                          className={twMerge(
+                            "inline-flex h-8 items-center rounded-full border px-4 font-body2 transition-colors",
+                            isSelected
+                              ? "border-info-blue/40 bg-info-blue/15 text-info-blue"
+                              : "border-text-placeholder/40 bg-surface-200 text-text-muted hover:bg-surface-300",
+                            isSubmitting && "cursor-not-allowed opacity-60",
+                          )}
+                        >
+                          {option.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              />
+              {errors.metrics ? (
+                <p className="ml-1 font-caption text-info-red">
+                  {errors.metrics.message}
+                </p>
+              ) : null}
+            </div>
+            <div className="flex flex-col gap-2">
+              <span className="ml-1 font-body1 text-text-title">기간 설정</span>
+              <p className="ml-1 font-caption text-text-muted">
+                성과를 비교할 기준 기간을 선택하세요
+              </p>
+              <Controller
+                name="comparisonPeriodType"
+                control={control}
+                render={() => (
+                  <DropdownMenu
+                    fullWidth
+                    aria-label="비교 기간 선택"
+                    items={comparisonMenuItems}
+                    trigger={(open) => (
+                      <div
+                        tabIndex={0}
+                        className={twMerge(
+                          "flex h-14 w-full cursor-pointer items-center justify-between rounded-2xl bg-surface-100 px-5 text-left font-body1 ring-1 ring-surface-400 transition-colors duration-200 ease-out outline-none",
+                          "hover:bg-surface-200 hover:ring-surface-400",
+                          "focus-visible:ring-2 focus-visible:ring-surface-400",
+                          isSubmitting && "cursor-not-allowed opacity-60",
+                          errors.comparisonPeriodType
+                            ? "ring-2 ring-info-red bg-info-red/5"
+                            : "",
+                        )}
+                      >
+                        <span className="min-w-0 flex-1 truncate text-text-title">
+                          {comparisonLabel}
+                        </span>
+                        <ChevronIcon
+                          className={twMerge(
+                            "h-4 w-4 shrink-0 text-text-muted transition-transform duration-200",
+                            open ? "rotate-0" : "rotate-180",
+                          )}
+                          aria-hidden
+                        />
+                      </div>
+                    )}
+                  />
+                )}
+              />
+              {errors.comparisonPeriodType ? (
+                <p className="ml-1 font-caption text-info-red">
+                  {errors.comparisonPeriodType.message}
+                </p>
+              ) : null}
+            </div>
+          </div>
+          <div className="w-full">
+            <Button
+              type="submit"
+              size="big"
+              variant="primary"
+              fullWidth
+              isLoading={isSubmitting}
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? "생성 중..." : "생성하기"}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/timeline/TimelinePerformancePanel.tsx b/src/components/timeline/TimelinePerformancePanel.tsx
index b7e856a..66ace77 100644
--- a/src/components/timeline/TimelinePerformancePanel.tsx
+++ b/src/components/timeline/TimelinePerformancePanel.tsx
@@ -131,7 +131,13 @@ export default function TimelinePerformancePanel({
     CHART_PERIOD_LABELS[chartPeriodIndex] ?? CHART_PERIOD_LABELS[0];
 
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen) {
+      if (summaryTimerRef.current !== null) {
+        window.clearTimeout(summaryTimerRef.current);
+        summaryTimerRef.current = null;
+      }
+      return;
+    }
     setAiState(data.aiSummary.trim() ? "done" : "idle");
     setGeneratedSummary("");
   }, [isOpen, data.aiSummary]);
@@ -144,12 +150,16 @@ export default function TimelinePerformancePanel({
     };
   }, []);
   const handleGenerateSummary = () => {
+    if (summaryTimerRef.current !== null) {
+      window.clearTimeout(summaryTimerRef.current);
+    }
     setAiState("loading");
     summaryTimerRef.current = window.setTimeout(() => {
       setGeneratedSummary(
         data.aiSummary.trim() || "AI 요약이 생성되었습니다.(API연동전 임시)",
       );
       setAiState("done");
+      summaryTimerRef.current = null;
     }, AI_SUMMARY_LOADING_MS);
   };
 
diff --git a/src/constants/timeline/formOptions.ts b/src/constants/timeline/formOptions.ts
new file mode 100644
index 0000000..592e6cc
--- /dev/null
+++ b/src/constants/timeline/formOptions.ts
@@ -0,0 +1,30 @@
+import {
+  TIMELINE_COMPARISON_PERIOD_TYPES,
+  TIMELINE_METRICS,
+  type TTimelineComparisonPeriodType,
+  type TTimelineMetric,
+} from "@/types/timeline/api";
+
+export const TIMELINE_METRIC_OPTIONS: ReadonlyArray<{
+  value: TTimelineMetric;
+  label: string;
+}> = [
+  { value: "CLICK", label: "클릭" },
+  { value: "CONVERSION", label: "전환" },
+  { value: "IMPRESSION", label: "노출" },
+  { value: "ROAS", label: "ROAS" },
+] as const;
+
+export const TIMELINE_COMPARISON_PERIOD_OPTIONS: ReadonlyArray<{
+  value: TTimelineComparisonPeriodType;
+  label: string;
+}> = [
+  { value: "LAST_WEEK", label: "지난주 대비" },
+  { value: "LAST_MONTH", label: "지난달 대비" },
+  { value: "PREVIOUS_PERIOD", label: "이전 동일 기간 대비" },
+] as const;
+
+/*zod enum 용 - 타입과 동기화*/
+export const TIMELINE_METRIC_VALUES = TIMELINE_METRICS;
+export const TIMELINE_COMPARISON_PERIOD_VALUES =
+  TIMELINE_COMPARISON_PERIOD_TYPES;
diff --git a/src/types/timeline/timeline.mock.ts b/src/types/timeline/timeline.mock.ts
index 30dcc0c..bd79ce7 100644
--- a/src/types/timeline/timeline.mock.ts
+++ b/src/types/timeline/timeline.mock.ts
@@ -33,7 +33,7 @@ export const TIMELINE_DETAIL_MOCK: ITimelineDetail = {
   performanceStatus: "ON_TRACK",
   metrics: ["CLICK", "CONVERSION", "ROAS"],
   summary:
-    "해당 기간 동안 클릭수는 전반적으로 증가하며 평균 이상의 성과를 보였습니다. 특히 1월 23일에 가장 높은 클릭수를 기록했으며, 이후에도 높은 수준을 유지했습니다. 다만 전환수는 후반부로 갈수록 소폭 감소하는 흐름을 보였습니다.",
+    "해당 기간 동안 클릭수는 전반적으로 증가하며 평균 이상의 성과를 보였습니다. 특히 6월 23일에 가장 높은 클릭수를 기록했으며, 이후에도 높은 수준을 유지했습니다. 다만 전환수는 후반부로 갈수록 소폭 감소하는 흐름을 보였습니다.",
   dailyTrend: [
     {
       date: "2026-06-18",
diff --git a/src/utils/timeline/timeline.ts b/src/utils/timeline/timeline.ts
new file mode 100644
index 0000000..08e7fd1
--- /dev/null
+++ b/src/utils/timeline/timeline.ts
@@ -0,0 +1,29 @@
+import z from "zod";
+
+import {
+  TIMELINE_COMPARISON_PERIOD_VALUES,
+  TIMELINE_METRIC_VALUES,
+} from "@/constants/timeline/formOptions";
+
+const dataFieldSchema = z.string().trim().min(1, "날짜를 선택해 주세요");
+
+export const timelineCreateSchema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .min(1, "타임라인 이름을 입력해주세요")
+      .max(50, "이름은 50자 이내로 입력해주세요"),
+    startDate: dataFieldSchema,
+    endDate: dataFieldSchema,
+    metrics: z
+      .array(z.enum(TIMELINE_METRIC_VALUES))
+      .min(1, "성과 지표를 1개 이상 선택해주세요"),
+    comparisonPeriodType: z.enum(TIMELINE_COMPARISON_PERIOD_VALUES),
+  })
+  .refine((data) => data.startDate <= data.endDate, {
+    path: ["endDate"],
+    message: "종료일은 시작일 이전이 불가합니다",
+  });
+
+export type TTimelineCreateFormValues = z.infer<typeof timelineCreateSchema>;