From b164289b4e34b962bd392f64826dec0d94f5e62c Mon Sep 17 00:00:00 2001
From: jieunsse <jieunsse@gmail.com>
Date: Sat, 7 Feb 2026 21:31:25 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Calender/CalenderModal.module.css         | 224 +++++++++++++++
 .../components/Calender/CalenderModal.tsx     | 268 ++++++++++++++++++
 2 files changed, 492 insertions(+)
 create mode 100644 src/components/Modal/domain/components/Calender/CalenderModal.module.css
 create mode 100644 src/components/Modal/domain/components/Calender/CalenderModal.tsx

diff --git a/src/components/Modal/domain/components/Calender/CalenderModal.module.css b/src/components/Modal/domain/components/Calender/CalenderModal.module.css
new file mode 100644
index 0000000..b3b7d03
--- /dev/null
+++ b/src/components/Modal/domain/components/Calender/CalenderModal.module.css
@@ -0,0 +1,224 @@
+section > .modalContent {
+  width: 384px;
+  height: 664px;
+  display: inline-flex;
+  padding: 0 16px 32px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 24px;
+  background: var(--Background-Primary, #fff);
+  box-shadow: 4px 4px 10px 0 rgba(36, 36, 36, 0.25);
+  box-sizing: border-box;
+}
+
+section > .modalContentDateOpen {
+  height: 930px;
+}
+
+section > .modalContentTimeOpen {
+  height: 848px;
+}
+
+section > .modalContentWeekdayOpen {
+  height: 759px;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.title {
+  margin: 0;
+  color: var(--Text-Primary, #1e293b);
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 19px;
+}
+
+.description {
+  margin: 0;
+  color: var(--Text-Default, #64748b);
+  text-align: center;
+  font-family: Pretendard, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
+  word-break: keep-all;
+}
+
+.form {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.fieldGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.label {
+  margin: 0;
+  color: var(--Text-Primary, #1e293b);
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 19px;
+}
+
+.todoTitleInput {
+  display: flex;
+  width: 100%;
+  height: 48px;
+  padding: 16px;
+  align-items: center;
+  gap: 10px;
+  border-radius: 12px;
+  border: 1px solid var(--Border-Primary, #e2e8f0);
+  background: var(--Background-Primary, #fff);
+  color: var(--Text-Primary, #1e293b);
+}
+
+.todoTitleInput::placeholder {
+  color: var(--Text-Default, #64748b);
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19px;
+}
+
+.dateTimeInputRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dateInput,
+.timeInput {
+  display: flex;
+  height: 48px;
+  padding: 16px;
+  align-items: center;
+  gap: 10px;
+  border-radius: 12px;
+  border: 1px solid var(--Border-Primary, #e2e8f0);
+  background: var(--Background-Primary, #fff);
+  color: var(--Text-Primary, #1e293b);
+  cursor: pointer;
+}
+
+.dateInput {
+  width: 204px;
+}
+
+.timeInput {
+  width: 124px;
+}
+
+.dateInput::placeholder,
+.timeInput::placeholder {
+  color: var(--Text-Default, #64748b);
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19px;
+}
+
+.activePickerInput {
+  border-color: var(--Interaction-Hover, #416ec8);
+}
+
+.calendarPanel,
+.timePickerPanel {
+  display: flex;
+  justify-content: center;
+}
+
+.repeatDropdownButton {
+  width: 120px;
+  height: 40px;
+}
+
+.repeatDropdownMenu {
+  z-index: 20;
+}
+
+.weekdayButtonGroup {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+}
+
+.memoInput {
+  display: flex;
+  height: 75px;
+  padding: 12px 16px;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 12px;
+  border: 1px solid var(--Border-Primary, #e2e8f0);
+  background: var(--Background-Primary, #fff);
+}
+
+.memoInput::placeholder {
+  color: var(--Text-Default, #64748b);
+}
+
+.footer {
+  margin-top: auto;
+}
+
+.submitButton {
+  display: flex;
+  width: 100%;
+  height: 48px;
+  padding: 14px 0;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 12px;
+  background: var(--Color-Brand-Primary, #5189fa);
+  color: var(--Text-inverse, #fff);
+  text-align: center;
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 19px;
+}
+
+@media (max-width: 480px) {
+  section > .modalContent,
+  section > .modalContentDateOpen,
+  section > .modalContentTimeOpen,
+  section > .modalContentWeekdayOpen {
+    width: 100%;
+    max-width: 384px;
+    border-radius: 24px 24px 0 0;
+  }
+}
diff --git a/src/components/Modal/domain/components/Calender/CalenderModal.tsx b/src/components/Modal/domain/components/Calender/CalenderModal.tsx
new file mode 100644
index 0000000..4ae03f9
--- /dev/null
+++ b/src/components/Modal/domain/components/Calender/CalenderModal.tsx
@@ -0,0 +1,268 @@
+'use client';
+
+import clsx from 'clsx';
+import type { FormEvent, KeyboardEvent } from 'react';
+import { useCallback, useId } from 'react';
+
+import BaseButton from '@/components/Button/base/BaseButton';
+import DatePickerButton from '@/components/Button/domain/DatePickerButton/DatePickerButton';
+import Calendar from '@/components/calendar/Calendar';
+import CalendarTime from '@/components/calendar/time/CalendarTime';
+import Dropdown from '@/components/dropdown/Dropdown';
+import Input from '@/components/input/Input';
+import TextArea from '@/components/input/TextArea';
+import Modal from '../../../Modal';
+import styles from './CalenderModal.module.css';
+import {
+  DESCRIPTION_ID,
+  REPEAT_OPTIONS,
+  START_DATE_INPUT_ID,
+  START_TIME_INPUT_ID,
+  TITLE_ID,
+  TODO_MEMO_NAME,
+  TODO_TITLE_NAME,
+  WEEKDAY_OPTIONS,
+} from './constants/CalenderModal.constants';
+import { useCalenderModalForm } from './hooks/useCalenderModalForm';
+import type { CalenderModalProps } from './types/CalenderModal.types';
+import {
+  formatDateLabel,
+  isPickerToggleKey,
+  resolveContentHeightClassNames,
+  resolveCalenderModalText,
+  resolveCloseOptions,
+} from './utils/CalenderModal.utils';
+export type { CalenderModalProps } from './types/CalenderModal.types';
+
+/**
+ * @param props.isOpen 모달 표시 여부를 boolean으로 전달합니다.
+ * @param props.onClose 모달을 닫을 때 실행할 함수를 전달합니다.
+ * @param props.onSubmit 할 일 생성 제출 시 실행할 함수를 전달합니다.
+ * @param props.text 제목과 라벨, 플레이스홀더 같은 텍스트 옵션을 객체로 전달합니다.
+ * @param props.input 입력창에 적용할 옵션을 객체로 전달합니다.
+ * @param props.initialValues 초기 입력 값을 객체로 전달합니다.
+ * @param props.closeOptions 오버레이 클릭과 Escape 닫힘 옵션을 객체로 전달합니다.
+ */
+export default function CalenderModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  text,
+  input,
+  initialValues,
+  closeOptions,
+}: CalenderModalProps) {
+  const textOptions = resolveCalenderModalText(text);
+  const { closeOnOverlayClick, closeOnEscape } = resolveCloseOptions(closeOptions);
+  const todoTitleInputId = useId();
+  const todoMemoInputId = useId();
+
+  const {
+    todoTitle,
+    startDate,
+    startTime,
+    repeatType,
+    repeatDays,
+    memo,
+    activePicker,
+    isWeekdaySelectorVisible,
+    setTodoTitle,
+    setStartDate,
+    setStartTime,
+    setMemo,
+    handleRepeatTypeChange,
+    handleToggleWeekday,
+    handleDatePickerToggle,
+    handleTimePickerToggle,
+    resetForm,
+  } = useCalenderModalForm({
+    initialValues,
+  });
+
+  const handleDateInputKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (!isPickerToggleKey(event.key)) return;
+      event.preventDefault();
+      handleDatePickerToggle();
+    },
+    [handleDatePickerToggle],
+  );
+
+  const handleTimeInputKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (!isPickerToggleKey(event.key)) return;
+      event.preventDefault();
+      handleTimePickerToggle();
+    },
+    [handleTimePickerToggle],
+  );
+
+  const contentHeightClassNames = resolveContentHeightClassNames(
+    activePicker,
+    isWeekdaySelectorVisible,
+    {
+      modalContentDateOpen: styles.modalContentDateOpen,
+      modalContentTimeOpen: styles.modalContentTimeOpen,
+      modalContentWeekdayOpen: styles.modalContentWeekdayOpen,
+    },
+  );
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSubmit({
+      todoTitle: todoTitle.trim(),
+      startDate,
+      startTime,
+      repeatType,
+      repeatDays: isWeekdaySelectorVisible ? repeatDays : [],
+      memo: memo.trim(),
+    });
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      ariaLabelledby={TITLE_ID}
+      ariaDescribedby={DESCRIPTION_ID}
+      contentClassName={clsx(styles.modalContent, contentHeightClassNames)}
+      closeOnOverlayClick={closeOnOverlayClick}
+      closeOnEscape={closeOnEscape}
+    >
+      <article className={styles.container}>
+        <header className={styles.header}>
+          <h2 id={TITLE_ID} className={styles.title}>
+            {textOptions.title}
+          </h2>
+          <p id={DESCRIPTION_ID} className={styles.description}>
+            {textOptions.description}
+          </p>
+        </header>
+
+        <form className={styles.form} onSubmit={handleSubmit}>
+          <section className={styles.fieldGroup}>
+            <label htmlFor={todoTitleInputId} className={styles.label}>
+              {textOptions.todoTitleLabel}
+            </label>
+            <Input
+              {...input?.todoTitle}
+              id={todoTitleInputId}
+              className={styles.todoTitleInput}
+              type="text"
+              name={TODO_TITLE_NAME}
+              value={todoTitle}
+              placeholder={textOptions.todoTitlePlaceholder}
+              onChange={(event) => setTodoTitle(event.target.value)}
+            />
+          </section>
+
+          <section className={styles.fieldGroup}>
+            <p className={styles.label}>{textOptions.startDateTimeLabel}</p>
+            <div className={styles.dateTimeInputRow}>
+              <Input
+                id={START_DATE_INPUT_ID}
+                className={clsx(
+                  styles.dateInput,
+                  activePicker === 'date' && styles.activePickerInput,
+                )}
+                type="text"
+                value={formatDateLabel(startDate)}
+                placeholder={textOptions.startDatePlaceholder}
+                readOnly
+                aria-label={textOptions.startDatePlaceholder}
+                onClick={handleDatePickerToggle}
+                onKeyDown={handleDateInputKeyDown}
+              />
+              <Input
+                id={START_TIME_INPUT_ID}
+                className={clsx(
+                  styles.timeInput,
+                  activePicker === 'time' && styles.activePickerInput,
+                )}
+                type="text"
+                value={startTime}
+                placeholder={textOptions.startTimePlaceholder}
+                readOnly
+                aria-label={textOptions.startTimePlaceholder}
+                onClick={handleTimePickerToggle}
+                onKeyDown={handleTimeInputKeyDown}
+              />
+            </div>
+
+            {activePicker === 'date' ? (
+              <div className={styles.calendarPanel}>
+                <Calendar value={startDate} onChange={setStartDate} />
+              </div>
+            ) : null}
+            {activePicker === 'time' ? (
+              <div className={styles.timePickerPanel}>
+                <CalendarTime
+                  value={startTime}
+                  onChange={setStartTime}
+                  outputFormat="ko"
+                  stepMinutes={30}
+                />
+              </div>
+            ) : null}
+          </section>
+
+          <section className={styles.fieldGroup}>
+            <p className={styles.label}>{textOptions.repeatSettingLabel}</p>
+            <Dropdown
+              items={REPEAT_OPTIONS}
+              value={repeatType}
+              size="repeat"
+              ariaLabel={textOptions.repeatSettingLabel}
+              buttonClassName={styles.repeatDropdownButton}
+              menuClassName={styles.repeatDropdownMenu}
+              onChange={handleRepeatTypeChange}
+            />
+          </section>
+
+          {isWeekdaySelectorVisible ? (
+            <section className={styles.fieldGroup}>
+              <p className={styles.label}>{textOptions.repeatWeekdayLabel}</p>
+              <div className={styles.weekdayButtonGroup}>
+                {WEEKDAY_OPTIONS.map((weekday) => (
+                  <DatePickerButton
+                    key={weekday.day}
+                    day={weekday.day}
+                    label={weekday.label}
+                    selected={repeatDays.includes(weekday.day)}
+                    onClick={handleToggleWeekday}
+                  />
+                ))}
+              </div>
+            </section>
+          ) : null}
+
+          <section className={styles.fieldGroup}>
+            <label htmlFor={todoMemoInputId} className={styles.label}>
+              {textOptions.memoLabel}
+            </label>
+            <TextArea
+              {...input?.memo}
+              id={todoMemoInputId}
+              className={styles.memoInput}
+              name={TODO_MEMO_NAME}
+              value={memo}
+              placeholder={textOptions.memoPlaceholder}
+              onChange={(event) => setMemo(event.target.value)}
+            />
+          </section>
+
+          <footer className={styles.footer}>
+            <BaseButton type="submit" variant="primary" className={styles.submitButton}>
+              {textOptions.submitLabel}
+            </BaseButton>
+          </footer>
+        </form>
+      </article>
+    </Modal>
+  );
+}

From 6d575df50b45f6a371ed45aee7bb2447a15374ca Mon Sep 17 00:00:00 2001
From: jieunsse <jieunsse@gmail.com>
Date: Sat, 7 Feb 2026 21:31:48 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=BB=A4=EC=8A=A4=ED=85=80?=
 =?UTF-8?q?=ED=9B=85,=20=EC=9C=A0=ED=8B=B8,=20=EC=83=81=EC=88=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../constants/CalenderModal.constants.ts      |  53 ++++++++
 .../Calender/hooks/useCalenderModalForm.ts    | 104 +++++++++++++++
 .../Calender/types/CalenderModal.types.ts     |  71 ++++++++++
 .../Calender/utils/CalenderModal.utils.ts     | 125 ++++++++++++++++++
 4 files changed, 353 insertions(+)
 create mode 100644 src/components/Modal/domain/components/Calender/constants/CalenderModal.constants.ts
 create mode 100644 src/components/Modal/domain/components/Calender/hooks/useCalenderModalForm.ts
 create mode 100644 src/components/Modal/domain/components/Calender/types/CalenderModal.types.ts
 create mode 100644 src/components/Modal/domain/components/Calender/utils/CalenderModal.utils.ts

diff --git a/src/components/Modal/domain/components/Calender/constants/CalenderModal.constants.ts b/src/components/Modal/domain/components/Calender/constants/CalenderModal.constants.ts
new file mode 100644
index 0000000..b26f09b
--- /dev/null
+++ b/src/components/Modal/domain/components/Calender/constants/CalenderModal.constants.ts
@@ -0,0 +1,53 @@
+import type { Weekday } from '@/components/Button/domain/DatePickerButton/DatePickerButton';
+import type { DropdownItemData } from '@/components/dropdown/types/types';
+import type { CalenderRepeatType } from '../types/CalenderModal.types';
+
+export const TITLE_ID = 'calender-modal-title';
+export const DESCRIPTION_ID = 'calender-modal-description';
+
+export const START_DATE_INPUT_ID = 'calender-modal-start-date';
+export const START_TIME_INPUT_ID = 'calender-modal-start-time';
+
+export const TODO_TITLE_NAME = 'todoTitle';
+export const TODO_MEMO_NAME = 'todoMemo';
+
+export const REPEAT_TYPE_NONE: CalenderRepeatType = 'none';
+export const REPEAT_TYPE_ONCE: CalenderRepeatType = 'once';
+export const REPEAT_TYPE_DAILY: CalenderRepeatType = 'daily';
+export const REPEAT_TYPE_WEEKLY: CalenderRepeatType = 'weekly';
+export const REPEAT_TYPE_MONTHLY: CalenderRepeatType = 'monthly';
+
+export const DEFAULT_TITLE = '할 일 만들기';
+export const DEFAULT_DESCRIPTION =
+  '할 일은 실제로 행동 가능한 작업 중심으로 작성해주시면 좋습니다.';
+export const DEFAULT_TODO_TITLE_LABEL = '할 일 제목';
+export const DEFAULT_TODO_TITLE_PLACEHOLDER = '할 일 제목을 입력해주세요.';
+export const DEFAULT_START_DATE_TIME_LABEL = '시작 날짜 및 시간';
+export const DEFAULT_START_DATE_PLACEHOLDER = '날짜를 선택해주세요.';
+export const DEFAULT_START_TIME_PLACEHOLDER = '시간을 선택해주세요.';
+export const DEFAULT_REPEAT_SETTING_LABEL = '반복 설정';
+export const DEFAULT_REPEAT_WEEKDAY_LABEL = '반복 요일';
+export const DEFAULT_MEMO_LABEL = '할 일 메모';
+export const DEFAULT_MEMO_PLACEHOLDER = '메모를 입력해주세요.';
+export const DEFAULT_SUBMIT_LABEL = '만들기';
+
+export const REPEAT_OPTIONS: DropdownItemData[] = [
+  { value: REPEAT_TYPE_NONE, label: '반복 안함' },
+  { value: REPEAT_TYPE_ONCE, label: '한 번' },
+  { value: REPEAT_TYPE_DAILY, label: '매일' },
+  { value: REPEAT_TYPE_WEEKLY, label: '주 반복' },
+  { value: REPEAT_TYPE_MONTHLY, label: '월 반복' },
+];
+
+export const WEEKDAY_OPTIONS: Array<{ day: Weekday; label: string }> = [
+  { day: 'sun', label: '일' },
+  { day: 'mon', label: '월' },
+  { day: 'tue', label: '화' },
+  { day: 'wed', label: '수' },
+  { day: 'thu', label: '목' },
+  { day: 'fri', label: '금' },
+  { day: 'sat', label: '토' },
+];
+
+export const WEEKDAY_ORDER: Weekday[] = WEEKDAY_OPTIONS.map((weekday) => weekday.day);
+export const WEEKDAY_REPEAT_TYPES: CalenderRepeatType[] = [REPEAT_TYPE_WEEKLY, REPEAT_TYPE_MONTHLY];
diff --git a/src/components/Modal/domain/components/Calender/hooks/useCalenderModalForm.ts b/src/components/Modal/domain/components/Calender/hooks/useCalenderModalForm.ts
new file mode 100644
index 0000000..56b1cfa
--- /dev/null
+++ b/src/components/Modal/domain/components/Calender/hooks/useCalenderModalForm.ts
@@ -0,0 +1,104 @@
+import { useCallback, useState } from 'react';
+import type { Weekday } from '@/components/Button/domain/DatePickerButton/DatePickerButton';
+import type {
+  CalenderActivePicker,
+  CalenderModalFormValues,
+  CalenderModalInitialValues,
+} from '../types/CalenderModal.types';
+import {
+  isWeekdayRepeatType,
+  resolveInitialValues,
+  resolveRepeatType,
+  toggleWeekday,
+} from '../utils/CalenderModal.utils';
+
+interface UseCalenderModalFormProps {
+  initialValues?: CalenderModalInitialValues;
+}
+
+export function useCalenderModalForm({ initialValues }: UseCalenderModalFormProps) {
+  const [formValues, setFormValues] = useState<CalenderModalFormValues>(() =>
+    resolveInitialValues(initialValues),
+  );
+  const [activePicker, setActivePicker] = useState<CalenderActivePicker>('none');
+
+  const setTodoTitle = useCallback((nextTodoTitle: string) => {
+    setFormValues((previousValues) => ({
+      ...previousValues,
+      todoTitle: nextTodoTitle,
+    }));
+  }, []);
+
+  const setStartDate = useCallback((nextStartDate: Date | null) => {
+    setFormValues((previousValues) => ({
+      ...previousValues,
+      startDate: nextStartDate,
+    }));
+  }, []);
+
+  const setStartTime = useCallback((nextStartTime: string) => {
+    setFormValues((previousValues) => ({
+      ...previousValues,
+      startTime: nextStartTime,
+    }));
+  }, []);
+
+  const setMemo = useCallback((nextMemo: string) => {
+    setFormValues((previousValues) => ({
+      ...previousValues,
+      memo: nextMemo,
+    }));
+  }, []);
+
+  const handleRepeatTypeChange = useCallback((nextValue: string) => {
+    const nextRepeatType = resolveRepeatType(nextValue);
+    setFormValues((previousValues) => ({
+      ...previousValues,
+      repeatType: nextRepeatType,
+      repeatDays: isWeekdayRepeatType(nextRepeatType) ? previousValues.repeatDays : [],
+    }));
+  }, []);
+
+  const handleToggleWeekday = useCallback((targetDay: Weekday) => {
+    setFormValues((previousValues) => ({
+      ...previousValues,
+      repeatDays: toggleWeekday(previousValues.repeatDays, targetDay),
+    }));
+  }, []);
+
+  const handleDatePickerToggle = useCallback(() => {
+    setActivePicker((previousPicker) => (previousPicker === 'date' ? 'none' : 'date'));
+  }, []);
+
+  const handleTimePickerToggle = useCallback(() => {
+    setActivePicker((previousPicker) => (previousPicker === 'time' ? 'none' : 'time'));
+  }, []);
+
+  const resetForm = useCallback(() => {
+    setFormValues(resolveInitialValues(initialValues));
+    setActivePicker('none');
+  }, [initialValues]);
+
+  const isWeekdaySelectorVisible =
+    isWeekdayRepeatType(formValues.repeatType) && activePicker === 'none';
+
+  return {
+    todoTitle: formValues.todoTitle,
+    startDate: formValues.startDate,
+    startTime: formValues.startTime,
+    repeatType: formValues.repeatType,
+    repeatDays: formValues.repeatDays,
+    memo: formValues.memo,
+    activePicker,
+    isWeekdaySelectorVisible,
+    setTodoTitle,
+    setStartDate,
+    setStartTime,
+    setMemo,
+    handleRepeatTypeChange,
+    handleToggleWeekday,
+    handleDatePickerToggle,
+    handleTimePickerToggle,
+    resetForm,
+  };
+}
diff --git a/src/components/Modal/domain/components/Calender/types/CalenderModal.types.ts b/src/components/Modal/domain/components/Calender/types/CalenderModal.types.ts
new file mode 100644
index 0000000..5d78741
--- /dev/null
+++ b/src/components/Modal/domain/components/Calender/types/CalenderModal.types.ts
@@ -0,0 +1,71 @@
+import type { Weekday } from '@/components/Button/domain/DatePickerButton/DatePickerButton';
+import type { InputProps, TextAreaProps } from '@/components/input/types/types';
+import type { BaseDomainModalProps } from '../../../types/types';
+
+export type CalenderRepeatType = 'none' | 'once' | 'daily' | 'weekly' | 'monthly';
+export type CalenderActivePicker = 'none' | 'date' | 'time';
+
+export interface CalenderModalFormValues {
+  todoTitle: string;
+  startDate: Date | null;
+  startTime: string;
+  repeatType: CalenderRepeatType;
+  repeatDays: Weekday[];
+  memo: string;
+}
+
+export type CalenderModalSubmitPayload = CalenderModalFormValues;
+
+export interface CalenderModalTextOptions {
+  title?: string;
+  description?: string;
+  todoTitleLabel?: string;
+  todoTitlePlaceholder?: string;
+  startDateTimeLabel?: string;
+  startDatePlaceholder?: string;
+  startTimePlaceholder?: string;
+  repeatSettingLabel?: string;
+  repeatWeekdayLabel?: string;
+  memoLabel?: string;
+  memoPlaceholder?: string;
+  submitLabel?: string;
+}
+
+export interface ResolvedCalenderModalText {
+  title: string;
+  description: string;
+  todoTitleLabel: string;
+  todoTitlePlaceholder: string;
+  startDateTimeLabel: string;
+  startDatePlaceholder: string;
+  startTimePlaceholder: string;
+  repeatSettingLabel: string;
+  repeatWeekdayLabel: string;
+  memoLabel: string;
+  memoPlaceholder: string;
+  submitLabel: string;
+}
+
+export type TodoTitleInputProps = Omit<
+  InputProps,
+  'className' | 'type' | 'name' | 'placeholder' | 'value' | 'defaultValue' | 'onChange'
+>;
+
+export type TodoMemoInputProps = Omit<
+  TextAreaProps,
+  'className' | 'name' | 'placeholder' | 'value' | 'defaultValue' | 'onChange'
+>;
+
+export interface CalenderModalInputOptions {
+  todoTitle?: TodoTitleInputProps;
+  memo?: TodoMemoInputProps;
+}
+
+export type CalenderModalInitialValues = Partial<CalenderModalFormValues>;
+
+export interface CalenderModalProps extends BaseDomainModalProps {
+  onSubmit: (payload: CalenderModalSubmitPayload) => void;
+  text?: CalenderModalTextOptions;
+  input?: CalenderModalInputOptions;
+  initialValues?: CalenderModalInitialValues;
+}
diff --git a/src/components/Modal/domain/components/Calender/utils/CalenderModal.utils.ts b/src/components/Modal/domain/components/Calender/utils/CalenderModal.utils.ts
new file mode 100644
index 0000000..9b5caed
--- /dev/null
+++ b/src/components/Modal/domain/components/Calender/utils/CalenderModal.utils.ts
@@ -0,0 +1,125 @@
+import type { Weekday } from '@/components/Button/domain/DatePickerButton/DatePickerButton';
+import type { DomainModalCloseOptions } from '../../../types/types';
+import {
+  DEFAULT_DESCRIPTION,
+  DEFAULT_MEMO_LABEL,
+  DEFAULT_MEMO_PLACEHOLDER,
+  DEFAULT_REPEAT_SETTING_LABEL,
+  DEFAULT_REPEAT_WEEKDAY_LABEL,
+  DEFAULT_START_DATE_PLACEHOLDER,
+  DEFAULT_START_DATE_TIME_LABEL,
+  DEFAULT_START_TIME_PLACEHOLDER,
+  DEFAULT_SUBMIT_LABEL,
+  DEFAULT_TITLE,
+  DEFAULT_TODO_TITLE_LABEL,
+  DEFAULT_TODO_TITLE_PLACEHOLDER,
+  REPEAT_OPTIONS,
+  REPEAT_TYPE_NONE,
+  WEEKDAY_ORDER,
+  WEEKDAY_REPEAT_TYPES,
+} from '../constants/CalenderModal.constants';
+import type {
+  CalenderActivePicker,
+  CalenderModalFormValues,
+  CalenderModalInitialValues,
+  CalenderModalTextOptions,
+  CalenderRepeatType,
+  ResolvedCalenderModalText,
+} from '../types/CalenderModal.types';
+
+export function resolveCalenderModalText(
+  text?: CalenderModalTextOptions,
+): ResolvedCalenderModalText {
+  return {
+    title: text?.title ?? DEFAULT_TITLE,
+    description: text?.description ?? DEFAULT_DESCRIPTION,
+    todoTitleLabel: text?.todoTitleLabel ?? DEFAULT_TODO_TITLE_LABEL,
+    todoTitlePlaceholder: text?.todoTitlePlaceholder ?? DEFAULT_TODO_TITLE_PLACEHOLDER,
+    startDateTimeLabel: text?.startDateTimeLabel ?? DEFAULT_START_DATE_TIME_LABEL,
+    startDatePlaceholder: text?.startDatePlaceholder ?? DEFAULT_START_DATE_PLACEHOLDER,
+    startTimePlaceholder: text?.startTimePlaceholder ?? DEFAULT_START_TIME_PLACEHOLDER,
+    repeatSettingLabel: text?.repeatSettingLabel ?? DEFAULT_REPEAT_SETTING_LABEL,
+    repeatWeekdayLabel: text?.repeatWeekdayLabel ?? DEFAULT_REPEAT_WEEKDAY_LABEL,
+    memoLabel: text?.memoLabel ?? DEFAULT_MEMO_LABEL,
+    memoPlaceholder: text?.memoPlaceholder ?? DEFAULT_MEMO_PLACEHOLDER,
+    submitLabel: text?.submitLabel ?? DEFAULT_SUBMIT_LABEL,
+  };
+}
+
+export function resolveCloseOptions(closeOptions?: DomainModalCloseOptions) {
+  return {
+    closeOnOverlayClick: closeOptions?.overlayClick ?? true,
+    closeOnEscape: closeOptions?.escape ?? true,
+  };
+}
+
+export function formatDateLabel(date: Date | null): string {
+  if (!date) return '';
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(date);
+}
+
+export function resolveRepeatType(value?: string): CalenderRepeatType {
+  if (!value) return REPEAT_TYPE_NONE;
+
+  const found = REPEAT_OPTIONS.find((option) => option.value === value);
+  if (!found) return REPEAT_TYPE_NONE;
+
+  return found.value as CalenderRepeatType;
+}
+
+export function isWeekdayRepeatType(repeatType: CalenderRepeatType): boolean {
+  return WEEKDAY_REPEAT_TYPES.includes(repeatType);
+}
+
+export function sortWeekdays(days: Weekday[]): Weekday[] {
+  const uniqueDays = Array.from(new Set(days));
+  return WEEKDAY_ORDER.filter((weekday) => uniqueDays.includes(weekday));
+}
+
+export function toggleWeekday(selectedDays: Weekday[], targetDay: Weekday): Weekday[] {
+  const nextDays = selectedDays.includes(targetDay)
+    ? selectedDays.filter((day) => day !== targetDay)
+    : [...selectedDays, targetDay];
+
+  return sortWeekdays(nextDays);
+}
+
+export function resolveInitialValues(
+  initialValues?: CalenderModalInitialValues,
+): CalenderModalFormValues {
+  return {
+    todoTitle: initialValues?.todoTitle ?? '',
+    startDate: initialValues?.startDate ?? null,
+    startTime: initialValues?.startTime ?? '',
+    repeatType: resolveRepeatType(initialValues?.repeatType),
+    repeatDays: sortWeekdays(initialValues?.repeatDays ?? []),
+    memo: initialValues?.memo ?? '',
+  };
+}
+
+export function isPickerToggleKey(key: string): boolean {
+  return key === 'Enter' || key === ' ';
+}
+
+interface ContentHeightStyles {
+  modalContentDateOpen: string;
+  modalContentTimeOpen: string;
+  modalContentWeekdayOpen: string;
+}
+
+export function resolveContentHeightClassNames(
+  activePicker: CalenderActivePicker,
+  isWeekdaySelectorVisible: boolean,
+  styles: ContentHeightStyles,
+) {
+  return {
+    [styles.modalContentDateOpen]: activePicker === 'date',
+    [styles.modalContentTimeOpen]: activePicker === 'time',
+    [styles.modalContentWeekdayOpen]: activePicker === 'none' && isWeekdaySelectorVisible,
+  };
+}