# チケット進捗管理可視化フロントエンド
## 概要
チケットの進捗状況をリアルタイムでビジュアル的に表示するReactアプリケーション。
ワークプランの全体像とそれぞれのタスクの関係性を可視化し、作業の進捗状況を直感的に把握できるようにする。
## 技術スタック
- React
- TypeScript
- react-flow - フローチャート可視化ライブラリ
- tailwindCSS - スタイリング
- Vite - 開発環境とビルド
## データソース
アプリケーションは以下の優先順位でデータを読み込みます：
1. ローカルJSONファイル - `data/workplan.json`（優先）
2. ローカルストレージ - JSONファイルの読み込みに失敗した場合のフォールバック
JSONファイルは以下のパスから相対パスで読み込まれます：
```
../data/workplan.json
```
## 開発方法
### 環境のセットアップ
```bash
# 依存関係のインストール
npm install
# 開発サーバーの起動
npm run dev
```
### ビルド
```bash
npm run build
```
## データフォーマット
ワークプランのJSONデータは以下の形式に従う必要があります：
```json
{
"currentTicket": {
"goal": "チケットの目標",
"pullRequests": [
{
"goal": "PRの目標",
"status": "not_started|in_progress|blocked|completed|cancelled|needsRefinment",
"commits": [
{
"goal": "コミットの目標",
"status": "not_started|in_progress|blocked|completed|cancelled|needsRefinment"
}
]
}
]
},
"lastUpdated": "2023-03-23T11:19:23.960Z",
"version": "1.0.0"
}
```
## 機能
- PR（グループノード）とコミット（子ノード）の階層構造表示
- ステータスによる色分け表示
- ズーム・パン機能
- ミニマップとコントロールパネル
## フェーズ4: 調整とテスト
フェーズ4では、以下の機能を追加・改善しています：
1. **レスポンシブデザイン対応**
- さまざまな画面サイズに対応するレイアウト調整
- モバイルデバイス対応（スマートフォン、タブレット）
- 画面サイズに応じたコンポーネント表示切り替え
2. **ユーザービリティ改善**
- ローディング画面の追加
- エラーハンドリングの強化
- モバイルデバイスの向き警告表示
3. **テスト**
- レスポンシブデザインテストスクリプトの追加
- さまざまなデバイスサイズでの表示確認
- コンポーネント表示状態のテスト
## レスポンシブテスト
レスポンシブデザインをテストするには以下のコマンドを実行します：
```bash
# 依存関係のインストール（まだの場合）
npm install
# 開発サーバーを起動
npm run dev
# 別のターミナルでテストを実行
npm run test:responsive
```
このテストでは以下の画面サイズでアプリケーションを検証します：
- モバイル（縦向き・横向き）
- タブレット（縦向き・横向き）
- デスクトップ
- 大型ディスプレイ
テスト結果のスクリーンショットは `test/screenshots` ディレクトリに保存されます。
## ライセンス
このプロジェクトは内部利用のみを目的としています。
