実装フェーズ2:高度な機能
ドラッグ&ドロップ、リアルタイム同期など、高度な機能をAIと実装します。
Phase 2 で実装する機能
1
ドラッグ&ドロップ(dnd-kit)
2
WebSocketによるリアルタイム同期
3
楽観的更新(Optimistic Update)
4
チームメンバー招待機能
AIへの指示例
リアルタイム同期
WebSocketでリアルタイム同期を実装してください。 【要件】 - タスクの作成・更新・削除を他のユーザーに即時反映 - プロジェクトごとにルーム分け - 接続/切断時の処理 【バックエンド】 - FastAPIのWebSocket機能を使用 - Redisでメッセージをブロードキャスト 【フロントエンド】 - useWebSocketフックを作成 - TanStack Queryのキャッシュを更新
ドラッグ&ドロップ
@dnd-kit/core を使ってカンバンのドラッグ&ドロップを実装してください。 【要件】 - タスクをカラム間で移動 - 同一カラム内で順序変更 - ドロップ時にAPIでステータス更新 - 楽観的更新(即座にUIを更新、失敗時はロールバック)
実装時の注意点
- ・競合状態に注意 - 同時編集時の整合性
- ・エラー時のリカバリ - 楽観的更新失敗時の処理
- ・接続断の対応 - 再接続ロジック