Skip to content

할일 리스트 모달 추가 #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Jieunsse wants to merge 1 commit into from
Closed

할일 리스트 모달 추가 #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 113 additions & 0 deletions src/components/Modal/domain/AddTodoList.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Comment on lines +27 to +31

@gemini-code-assist gemini-code-assist Bot Feb 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

여러 font 관련 속성들(font-family, font-size, font-style, font-weight, line-height)을 font shorthand 속성을 사용하여 한 줄로 줄일 수 있습니다. 이렇게 하면 코드가 더 간결해집니다.

이러한 변경은 이 파일의 .input.input::placeholder (53-57행) 및 .button (79-83행) 선택자에도 유사하게 적용하여 코드 중복을 줄이고 가독성을 높일 수 있습니다.

Suggested change
font-family: Pretendard;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 19px;
font: 500 16px/19px Pretendard;

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);
}
}
52 changes: 52 additions & 0 deletions src/components/Modal/domain/AddTodoList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
Comment on lines +12 to +52

@gemini-code-assist gemini-code-assist Bot Feb 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

현재 AddTodoList 컴포넌트는 할 일 목록의 이름을 생성 콜백으로 전달하지 않아 기능적으로 동작하지 않습니다. 또한, contentClassName prop이 Modal 컴포넌트에서 처리되지 않아 의도한 스타일이 적용되지 않을 수 있습니다.

다음과 같이 수정하여 문제를 해결할 수 있습니다.

  1. 입력 값 전달: handleSubmit 함수에서 폼 데이터를 읽어 onCreate 콜백으로 전달합니다. 이를 위해 Input에 name 속성을 추가하고 onCreate prop의 타입 시그니처를 (name: string) => void로 변경합니다.
  2. contentClassName 적용: Modal 컴포넌트가 contentClassName을 받아서 내부 컨테이너에 적용하도록 수정해야 합니다. (이 변경은 Modal.tsx 파일에 적용되어야 합니다.)

아래는 AddTodoList.tsx에 대한 전체 수정 제안입니다.

export interface AddTodoListProps {
  isOpen: boolean;
  onClose: () => void;
  onCreate: (name: string) => void;
}

export default function AddTodoList({ isOpen, onClose, onCreate }: AddTodoListProps) {
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const name = formData.get('name') as string;

    if (!name?.trim()) {
      return; // 또는 에러 메시지를 표시할 수 있습니다.
    }

    onCreate(name.trim());
  };

  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 name="name" className={styles.input} placeholder="할 일을 입력하세요" />
          <footer className={styles.footer}>
            <button type="submit" className={styles.button}>
              만들기
            </button>
          </footer>
        </form>
      </article>
    </Modal>
  );
}

1 change: 1 addition & 0 deletions src/components/Modal/types/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ interface BaseModalProps {
children?: ReactNode;
ariaDescribedby?: string;
className?: string;
contentClassName?: string;
closeOnOverlayClick?: boolean;
closeOnEscape?: boolean;
}
Expand Down
Loading