# セットアップガイド

## バックエンド接続確認

✅ **接続状況**: バックエンドAPI（ポート8080）との接続が確認できました

### 確認したエンドポイント

- `GET /api/v1/items` - 正常にレスポンス（3件のテストデータを確認）
- データ例:
  - "Test Item" (TEST001)
  - "ぽえ" (0X23) 
  - "マヌケ" (0X13)

### 環境設定

現在の設定:
- **API Base URL**: `http://127.0.0.1:8080/api/v1`
- **開発モード**: 有効（APIリクエストログ出力）

### 実装した機能

1. **環境変数サポート**
   - `.env` ファイルでAPIエンドポイント設定可能
   - `VITE_API_BASE_URL` で接続先変更可能

2. **接続ステータス表示**
   - ナビバーに接続状況のChip表示
   - 30秒間隔で自動接続チェック
   - クリックで手動接続確認

3. **エラーハンドリング強化**
   - ネットワークエラーの日本語メッセージ
   - 開発モードでのリクエスト/レスポンスログ
   - APIエラーの詳細表示

4. **実データ連携**
   - 備品一覧ページで実際のAPIデータ取得
   - ページネーション対応
   - 検索機能準備完了

## 次のステップ

1. **開発サーバー起動**: `npm run dev`
2. **ブラウザで確認**: http://localhost:5173
3. **API接続状況**: ナビバーの接続ステータスで確認
4. **備品一覧**: 実際のバックエンドデータが表示される

## トラブルシューティング

### バックエンドが見つからない場合
- `.env` ファイルの `VITE_API_BASE_URL` を確認
- バックエンドサーバーが起動しているか確認
- ポート番号が正しいか確認（デフォルト: 8080）

### CORS エラーの場合
- バックエンドのCORS設定を確認
- 開発環境では通常自動設定される