From 83c8b6f01b50df5281625a563799147eb5f8ab44 Mon Sep 17 00:00:00 2001
From: jieunsse <jieunsse@gmail.com>
Date: Fri, 6 Feb 2026 18:29:46 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=95=A0=EC=9D=BC=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modal/domain/AddTodoList.module.css       | 113 ++++++++++++++++++
 src/components/Modal/domain/AddTodoList.tsx   |  52 ++++++++
 src/components/Modal/types/types.ts           |   1 +
 3 files changed, 166 insertions(+)
 create mode 100644 src/components/Modal/domain/AddTodoList.module.css
 create mode 100644 src/components/Modal/domain/AddTodoList.tsx

diff --git a/src/components/Modal/domain/AddTodoList.module.css b/src/components/Modal/domain/AddTodoList.module.css
new file mode 100644
index 0000000..5d1d989
--- /dev/null
+++ b/src/components/Modal/domain/AddTodoList.module.css
@@ -0,0 +1,113 @@
+.container {
+  --dialog-max-width-mobile: 375px;
+  --dialog-padding: 16px 16px 32px;
+  --dialog-gap: 10px;
+  --control-height: 48px;
+  --close-button-size: 24px;
+  --input-max-width: 288px;
+  --button-max-width: 280px;
+
+  display: flex;
+  padding: var(--dialog-padding);
+  flex-direction: column;
+  gap: var(--dialog-gap);
+  align-items: stretch;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.title {
+  color: var(--Text-Primary, #1e293b);
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 19px;
+  margin: 0;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.input.input {
+  padding: 14px 16px;
+  width: 100%;
+  max-width: var(--input-max-width);
+  height: var(--control-height);
+  box-sizing: border-box;
+  align-self: center;
+  text-align: center;
+}
+
+.input.input::placeholder {
+  color: var(--Text-Default, #64748b);
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19px;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+.button {
+  display: flex;
+  width: 100%;
+  max-width: var(--button-max-width);
+  height: var(--control-height);
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  background: var(--Color-Brand-Primary, #5189fa);
+  border: none;
+  color: var(--color-text-inverse, #ffffff);
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 19px;
+}
+
+.closeButton {
+  width: var(--close-button-size);
+  height: var(--close-button-size);
+  padding: 0;
+  border: none;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.modalContent.modalContent {
+  --dialog-radius-desktop: 24px;
+  --dialog-radius-mobile: 24px 24px 0 0;
+  border-radius: var(--dialog-radius-desktop);
+}
+
+@media (max-width: 480px) {
+  .container {
+    width: 100%;
+    max-width: var(--dialog-max-width-mobile);
+  }
+
+  .modalContent.modalContent {
+    border-radius: var(--dialog-radius-mobile);
+  }
+}
diff --git a/src/components/Modal/domain/AddTodoList.tsx b/src/components/Modal/domain/AddTodoList.tsx
new file mode 100644
index 0000000..99ed38a
--- /dev/null
+++ b/src/components/Modal/domain/AddTodoList.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import Image from 'next/image';
+import type { FormEvent } from 'react';
+import { Input } from '@/components/input';
+import Modal from '../Modal';
+import styles from './AddTodoList.module.css';
+import xMarkBig from '@/assets/icons/xMark/xMarkBig.svg';
+
+const TITLE_ID = 'add-todo-list-title';
+
+export interface AddTodoListProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreate: () => void;
+}
+
+export default function AddTodoList({ isOpen, onClose, onCreate }: AddTodoListProps) {
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onCreate();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      ariaLabelledby={TITLE_ID}
+      contentClassName={styles.modalContent}
+    >
+      <article className={styles.container}>
+        <header className={styles.header}>
+          <h2 id={TITLE_ID} className={styles.title}>
+            할 일 목록
+          </h2>
+          <button type="button" className={styles.closeButton} aria-label="close" onClick={onClose}>
+            <Image src={xMarkBig} alt="" width={24} height={24} />
+          </button>
+        </header>
+
+        <form className={styles.form} onSubmit={handleSubmit}>
+          <Input className={styles.input} placeholder="할 일을 입력하세요" />
+          <footer className={styles.footer}>
+            <button type="submit" className={styles.button}>
+              만들기
+            </button>
+          </footer>
+        </form>
+      </article>
+    </Modal>
+  );
+}
diff --git a/src/components/Modal/types/types.ts b/src/components/Modal/types/types.ts
index 6c53d07..98b4c1c 100644
--- a/src/components/Modal/types/types.ts
+++ b/src/components/Modal/types/types.ts
@@ -6,6 +6,7 @@ interface BaseModalProps {
   children?: ReactNode;
   ariaDescribedby?: string;
   className?: string;
+  contentClassName?: string;
   closeOnOverlayClick?: boolean;
   closeOnEscape?: boolean;
 }