1. システム概要
本システムは、メール・パスワードによるユーザー認証を必須とし、未認証の場合はログイン画面へ自動遷移するWebアプリケーションである。日常のタスク管理に加え、タスク詳細・検索・コメント管理、コメントごとのファイル添付（ダウンロード機能付き）、コメントのドラッグ＆ドロップ並び替え、およびデータベースへのCRUD操作成功時に右上に表示される通知カード（トースト）を備える。
2. 画面設計
① ログイン画面
- 表示内容: メールアドレス入力欄、パスワード入力欄、ログインボタン。
- 機能: 認証成功時はタスク一覧画面へ遷移。未認証のユーザーが保護されたページへアクセスした場合は、自動的にログイン画面へリダイレクト。
② タスク一覧画面
- 共通UI要素:
- ヘッダー（タスク、新規、ログアウト、ヘルプ）
- CRUD操作時の右上通知カード: タスクやコメントの作成・更新・削除（CRUD）成功時に、画面右上に「〇〇に成功しました」等のトーストカードがポップアップ表示され、数秒後に自動消滅。
- 検索・絞り込み:
- ステータス切替タブ（「仕掛」 / 「完了」）
- タスク検索バー（タイトルおよびコメントを対象とした曖昧検索）
- タスクカード一覧: カード形式（カラー分け、完了チェックボックス、タイトルリンク、期限、完了日時、各種操作ボタン）。
③ タスク詳細画面
- タスク基本情報: タイトル、期限（曜日付き）、登録日時、関連リンク、「Googleカレンダーに登録」ボタン。
- コメント・ファイル管理エリア:
- コメント一覧（ドラッグ＆ドロップ対応）: コメントをドラッグ＆ドロップで並び替え可能（順序は即時DB保存）。
- コメント追加・編集・削除機能: テキスト投稿・修正・削除（CRUD実行時に右上にトースト通知表示）。
- ファイル添付・ダウンロード機能: コメントごとにファイルを登録し、詳細画面からダウンロードが可能。
- 共通アクション: 「戻る」ボタン。
3. 機能要件
3.1 認証・セキュリティ機能
- メール・パスワード認証: ユーザー登録済みのメールアドレスとパスワードによるログイン。
- ルーティング保護: ログイン状態を常時監視し、未認証のアクセスはログイン画面へリダイレクト。
3.2 ユーザー通知（CRUD連動トースト）機能
- 右上カード通知: データベースに対するCRUD（作成・読込・更新・削除）アクション成功時に、画面右上にアニメーション付きのカード（トースト）を表示。
3.3 タスク・検索・連携機能
- CRUD機能: タスクおよびコメントの新規作成、編集、削除、複写。
- ステータス管理: 「仕掛中」と「完了」の切り替え（チェックボックス連動）。
- Googleカレンダー連携: タイトルと期限を元に、Googleカレンダーのイベント作成画面を別タブで開く。
- 検索機能: タイトルおよびコメントを対象とした曖昧検索による絞り込み。
3.4 コメントおよびファイル・並び替え機能
- コメントのドラッグ＆ドロップ並び替え: 詳細画面内でコメントの表示順を変更し、データベースへ永続化。
- ファイル添付・ダウンロード: コメントテーブルに保持されたファイル情報を元に、ファイルのダウンロード機能を提供。
4. データ構造（データベース設計）
users テーブル（ユーザー認証用）
| カラム名 | 型 | 説明 |
|---|
id | unsignedBigInteger (PK) | 主キー |
name | string | ユーザー名 |
email | string (Unique) | メールアドレス（ログインID） |
password | string | ハッシュ化されたパスワード |
created_at | datetime | 作成日時 |
updated_at | datetime | 更新日時 |
tasks テーブル（タスク）
| カラム名 | 型 | 説明 |
|---|
id | unsignedBigInteger (PK) | 主キー |
user_id | unsignedBigInteger | ユーザーID（外部キー：users紐付け） |
title | string | タスクタイトル |
term | datetime / string | 期限 |
link | text / string | 関連リンク |
is_done | boolean | 完了フラグ (0:仕掛, 1:完了) |
| finishday | datetime | 完了日時 |
created_at | datetime | 作成日時 |
updated_at | datetime | 更新日時 |
comments テーブル（コメント・ファイル・並び順統合）
| カラム名 | 型 | 説明 |
|---|
id | unsignedBigInteger (PK) | 主キー |
task_id | unsignedBigInteger | タスクID（外部キー） |
body | text | コメント本文 |
| link | string (Nullable) | リンクURL |
file_name | string (Nullable) | 添付ファイル名（ダウンロード用） |
file_path | string (Nullable) | 添付ファイルの保存パス |
sort_order | integer | 表示順序（コメントのドラッグ＆ドロップ並び替え用） |
created_at | datetime | 作成日時 |
updated_at | datetime | 更新日時 |
5. 技術スタック
- バックエンド: Laravel (RESTful API / Sanctum等による認証)
- フロントエンド: React (TypeScript), Tailwind CSS, React Router, React Query
※Laravel上のViewでReactが動く
- データベース: MySQL
コメントを残す