update: ダッシュボード機能へのアップデート

説明

このIssueでは、#9 にて作成した最小限構成アプリをParallel Routes機能を使用したダッシュボード形式にアップデートします。

ディレクトリ構成

src/
├── app/
│   ├── dashboard/ # 新規作成（ダッシュボード実装用）
│   │   ├── @list/
│   │   │   └── page.tsx
│   │   ├── @form/
│   │   │   └── page.tsx
│   │   └── layout.tsx
│   ├── page.tsx
│   └── layout.tsx
├── components/
│   └── memos/
│   　  ├── MemoList.tsx
│   　  └── MemoForm.tsx
├── hooks/
│   └── useMemos.ts
└── types/
    └── index.ts

タスク

1. プロジェクト構造の更新

[ ] app/dashboard/ ディレクトリを作成
[ ] app/dashboard/@list/ と app/dashboard/@form/ ディレクトリを作成

2. ダッシュボードレイアウトの実装

[ ] app/dashboard/layout.tsx を作成し、Parallel Routesのスロットを設定
[ ] components/ui/Header.tsx を作成し、ヘッダーコンポーネントを実装
[ ] app/page.tsx を更新し、ダッシュボードへのリンクを追加

3. メモリスト機能のアップデート

[ ] app/dashboard/@list/page.tsx を作成
[ ] MemoListコンポーネントを実装

4. メモ作成機能のアップデート

[ ] app/dashboard/@form/page.tsx を作成
[ ] MemoFormコンポーネントを実装
[ ] フロート型の追加ボタンをTailwindCSSで実装

受け入れ基準

新しいプロジェクト構造が正しく設定されている
ダッシュボードレイアウトが正しく表示され、ヘッダーが全てのページで表示される
ホームページからダッシュボードへ正しくナビゲートできる
メモリストが正しく表示される
フロート型の追加ボタンが画面下部に表示される
メモ作成フォームが正しく機能し、フロート型の追加ボタンが画面下部に表示される

技術的な注意点

Parallel Routesを使用してダッシュボードのレイアウトを構築する
TailwindCSSを使用してフロート型のUIデザインの下地を作成する

kei615ykhm / logic-loom-nextjs14

update: ダッシュボード機能へのアップデート #12

説明

ディレクトリ構成

タスク

1. プロジェクト構造の更新

2. ダッシュボードレイアウトの実装

3. メモリスト機能のアップデート

4. メモ作成機能のアップデート

受け入れ基準

技術的な注意点

関連リソース