Skip to content

[FEAT] 투두 생성 모달 및 홈 투두 카드 UI 구현 #137

Description

@kimminna

🛠️ 만들고자 한 기능 설명

홈 화면에서 할 일을 생성·조회·정렬할 수 있는 투두 생성 모달과 투두 카드 UI를 구현합니다. 아이콘/태그/시간/반복/메모/우선순위 입력을 지원하는 생성 모달, 이를 뒷받침하는 디자인시스템 컴포넌트(아이콘 선택기, 날짜 선택기, 태그 입력, 투두 툴바 등), 오버레이 기반 모달/토스트, 드래그 정렬이 가능한 홈 투두 카드를 포함합니다.

✅ TODO LIST

  • 투두 API 스키마 정의 (api/todo/todo-schema.ts)
  • 디자인시스템 컴포넌트 추가/수정: IconSelector/IconGraphic, DateSelector, TagNameInput, TodoToolbar, PriorityIcon/PrioritySelector/RepeatSelector/TagSelector/TimeSelector
  • 오버레이 기반 모달 인프라 구축 (Modal, OverlayProvider, overlay-kit 연동)
  • 투두 생성 모달 구현 (아이콘/제목/서브태스크/메모/날짜/시간/우선순위/태그/반복 입력)
  • 태그 생성 모달 및 태그 개수 제한 토스트 구현
  • 홈 투두 카드·데이 헤더 UI 구현, @dnd-kit 기반 드래그 정렬 연동
  • _components/_containers/_hooks를 기능 단위(todo-card/todo-modal/tag-modal/toast) 폴더로 재구성
  • 모달 폼 필드 바인딩을 useController 기반으로 리팩터링
  • 디자인에 없는 그랩 아이콘 제거, 드래그를 세로 축으로 제한

⏰ 예상 작업 기간

📝 참고 링크(선택)

🗣️ ETC(선택)

📸 피그마 스크린샷

Metadata

Metadata

Assignees

Labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions