도메인 맥락 모달 추가

src/components/Modal/Modal.tsx

@@ -24,6 +24,7 @@ export default function Modal({
   ariaLabelledby,
   ariaDescribedby,
   className,
+  contentClassName,
   closeOnOverlayClick = true,
   closeOnEscape = true,
 }: ModalProps) {
@@ -55,7 +56,7 @@ export default function Modal({
       role="presentation"
     >
       <div
-        className={style.contentsBox}
+        className={clsx(style.contentsBox, contentClassName)}
         ref={dialogRef}
         onClick={stopPropagation}
         onKeyDown={onKeyDown}

src/components/Modal/domain/components/AddTodoList/AddTodoList.constants.ts

@@ -0,0 +1,5 @@
+export const TITLE_ID = 'add-todo-list-title';
+export const CLOSE_BUTTON_ARIA_LABEL = '닫기';
+export const DEFAULT_TITLE = '할 일 목록';
+export const DEFAULT_PLACEHOLDER = '할 일을 입력하세요';
+export const DEFAULT_SUBMIT_LABEL = '만들기';

src/components/Modal/domain/components/AddTodoList/AddTodoList.module.css

@@ -0,0 +1,130 @@
+section > .modalContent {
+  width: 384px;
+  height: 235px;
+  display: inline-flex;
+  padding: 16px 16px 32px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: 24px;
+  background: var(--Background-Primary, #fff);
+  box-sizing: border-box;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  box-sizing: border-box;
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 8px;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.title {
+  margin: 0;
+  color: var(--Text-Primary, #1e293b);
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 19px;
+}
+
+.closeButton {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.buttonContainer .closeButton,
+.buttonContainer .closeButton:hover:not(:disabled),
+.buttonContainer .closeButton:active:not(:disabled) {
+  border: none;
+  background: transparent;
+  color: inherit;
+}
+
+.form {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form .input {
+  display: flex;
+  width: 280px;
+  height: 48px;
+  padding: 16px;
+  align-items: center;
+  gap: 10px;
+  border-radius: 12px;
+  border: 1px solid var(--Border-Primary, #e2e8f0);
+  background: var(--Background-Primary, #fff);
+  box-sizing: border-box;
+  margin: 0 auto;
+}
+
+.form .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;
+  margin-top: auto;
+}
+
+.button {
+  display: flex;
+  width: 280px;
+  height: 48px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border: none;
+  border-radius: 12px;
+  background: var(--Color-Brand-Primary, #5189fa);
+  color: var(--Text-inverse, #fff);
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 19px;
+}
+
+@media (max-width: 480px) {
+  section > .modalContent {
+    border-radius: 24px 24px 0 0;
+  }
+}

src/components/Modal/domain/components/AddTodoList/AddTodoList.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import Image from 'next/image';
+import type { FormEvent } from 'react';
+import BaseButton from '@/components/Button/base/BaseButton';
+import { Input } from '@/components/input';
+import Modal from '../../../Modal';
+import styles from './AddTodoList.module.css';
+import xMarkBig from '@/assets/icons/xMark/xMarkBig.svg';
+import {
+  CLOSE_BUTTON_ARIA_LABEL,
+  DEFAULT_PLACEHOLDER,
+  DEFAULT_SUBMIT_LABEL,
+  DEFAULT_TITLE,
+  TITLE_ID,
+} from './AddTodoList.constants';
+import type { AddTodoListProps } from './AddTodoList.types';
+export type { AddTodoListProps } from './AddTodoList.types';
+
+/**
+ * @param props.isOpen 모달 표시 여부를 boolean으로 전달합니다.
+ * @param props.onClose 모달을 닫을 때 실행할 함수를 전달합니다.
+ * @param props.onSubmit 할 일 생성 버튼 클릭 시 실행할 함수를 전달합니다.
+ * @param props.text 모달 제목과 버튼 문구 같은 텍스트 옵션을 객체로 전달합니다.
+ * @param props.input 할 일 입력창에 적용할 옵션을 객체로 전달합니다.
+ * @param props.closeOptions 오버레이 클릭과 Escape 닫힘 옵션을 객체로 전달합니다.
+ */
+export default function AddTodoList({
+  isOpen,
+  onClose,
+  onSubmit,
+  text,
+  input,
+  closeOptions,
+}: AddTodoListProps) {
+  const title = text?.title ?? DEFAULT_TITLE;
+  const submitLabel = text?.submitLabel ?? DEFAULT_SUBMIT_LABEL;
+  const inputPlaceholder = text?.inputPlaceholder ?? DEFAULT_PLACEHOLDER;
+  const closeOnOverlayClick = closeOptions?.overlayClick ?? true;
+  const closeOnEscape = closeOptions?.escape ?? true;
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      ariaLabelledby={TITLE_ID}
+      contentClassName={styles.modalContent}
+      closeOnOverlayClick={closeOnOverlayClick}
+      closeOnEscape={closeOnEscape}
+    >
+      <article className={styles.container}>
+        <div className={styles.buttonContainer}>
+          <BaseButton
+            type="button"
+            className={styles.closeButton}
+            aria-label={CLOSE_BUTTON_ARIA_LABEL}
+            onClick={onClose}
+          >
+            <Image src={xMarkBig} alt="" width={24} height={24} />
+          </BaseButton>
+        </div>
+        <header className={styles.header}>
+          <h2 id={TITLE_ID} className={styles.title}>
+            {title}
+          </h2>
+        </header>
+
+        <form className={styles.form} onSubmit={handleSubmit}>
+          <Input
+            {...input?.props}
+            className={styles.input}
+            type="text"
+            name="todo"
+            placeholder={inputPlaceholder}
+          />
+          <footer className={styles.footer}>
+            <BaseButton type="submit" variant="primary" className={styles.button}>
+              {submitLabel}
+            </BaseButton>
+          </footer>
+        </form>
+      </article>
+    </Modal>
+  );
+}

src/components/Modal/domain/components/AddTodoList/AddTodoList.types.ts

@@ -0,0 +1,20 @@
+import type { InputProps } from '@/components/input/types/types';
+import type { BaseDomainModalProps } from '../../types/types';
+
+export type TodoInputProps = Omit<InputProps, 'className' | 'type' | 'name' | 'placeholder'>;
+
+export interface AddTodoListTextOptions {
+  title?: string;
+  submitLabel?: string;
+  inputPlaceholder?: string;
+}
+
+export interface AddTodoListInputOptions {
+  props?: TodoInputProps;
+}
+
+export interface AddTodoListProps extends BaseDomainModalProps {
+  onSubmit: () => void;
+  text?: AddTodoListTextOptions;
+  input?: AddTodoListInputOptions;
+}

src/components/Modal/domain/components/ChangePassword/ChangePassword.constants.ts

@@ -0,0 +1,10 @@
+export const TITLE_ID = 'change-password-title';
+export const NEW_PASSWORD_NAME = 'newPassword';
+export const CONFIRM_PASSWORD_NAME = 'confirmPassword';
+export const DEFAULT_TITLE = '비밀번호 변경하기';
+export const DEFAULT_NEW_PASSWORD_LABEL = '새 비밀번호';
+export const DEFAULT_CONFIRM_PASSWORD_LABEL = '새 비밀번호 확인';
+export const DEFAULT_NEW_PASSWORD_PLACEHOLDER = '새 비밀번호를 입력해주세요.';
+export const DEFAULT_CONFIRM_PASSWORD_PLACEHOLDER = '새 비밀번호를 다시 한 번 입력해주세요.';
+export const DEFAULT_CLOSE_LABEL = '닫기';
+export const DEFAULT_SUBMIT_LABEL = '변경하기';