hyperdashi-client/SETUP.md

セットアップガイド

バックエンド接続確認

✅ 接続状況: バックエンド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設定を確認
• 開発環境では通常自動設定される