TODOアプリ 仕様書
概要
タスクの一覧表示・作成・詳細確認・編集ができるTODO管理フロー。
画面一覧
| # | 画面ID | 画面名 | 概要 |
|---|---|---|---|
| 1 | todo-list | TODO一覧 | タスク一覧表示。チェックボックスで完了切り替え、新規作成・詳細遷移 |
| 2 | todo-create | TODO作成 | タイトル・詳細・優先度・期限を入力して新規タスクを作成 |
| 3 | todo-detail | TODO詳細 | タスクの詳細情報を表示。編集・削除アクション |
| 4 | todo-edit | TODO編集 | 既存タスクのタイトル・詳細・優先度・期限を編集 |
画面遷移
画面詳細
1. TODO一覧（todo-list）
- ヘッダー: タイトル「TODO」+ 残タスク数 + 新規作成ボタン
- リスト: 各タスクをCardで表示
- チェックボックス: 完了/未完了の切り替え（完了時は取り消し線+半透明）
- タイトル、期限日、優先度Badge
- タスクカードをクリックで詳細画面へ遷移
2. TODO作成（todo-create）
- 戻るリンク → 一覧
- フォーム:
- タイトル（Input、必須）
- 詳細（Textarea、任意）
- 優先度（Select: 高/中/低）
- 期限（date Input）
- アクション: キャンセル / 作成する
3. TODO詳細（todo-detail）
- 戻るリンク → 一覧
- タスク情報表示:
- タイトル、優先度Badge、ステータスBadge
- 詳細テキスト
- 期限、作成日
- アクション: 編集ボタン / 削除ボタン
4. TODO編集（todo-edit）
- 戻るリンク → 詳細
- フォーム（作成画面と同構成、既存データがプリセット）:
- タイトル、詳細、優先度、期限
- アクション: キャンセル / 保存する
パターン軸
| 軸 | 選択肢 | 説明 |
|---|---|---|
| layout | list / card | 一覧画面のレイアウト方式 |
| detail-level | simple / detailed | 情報表示の詳細度 |
使用コンポーネント
Button, Card, Input, Label, Textarea, Select, Badge, Checkbox, Separator（shadcn/ui） Plus, ArrowLeft, Pencil, Trash2（lucide-react）