./knowledge-base/frontend/README.md

# Historical Research Frontend

React + TypeScript + Viteで構築されたフロントエンドアプリケーション

## セットアップ

### 依存パッケージのインストール

```bash
npm install
```

### 環境変数の設定

`.env.example`をコピーして`.env.local`を作成し、各URLを設定してください。

```bash
cp .env.example .env.local
```

`.env.local`の内容（開発時のみ設定。本番ビルドは空欄のまま）：

```
VITE_API_GATEWAY_URL=https://4a6a8y8yu9.execute-api.ap-northeast-1.amazonaws.com/prod
VITE_ASSIST_URL=https://zgwm746fji.ap-northeast-1.awsapprunner.com
```

> **本番ビルド時**は `.env.production` の設定を使用し、全て相対パスで動作します。

## 開発

### 開発サーバーの起動

```bash
npm run dev
```

ブラウザで http://localhost:3000 を開いてください。

### ビルド

```bash
npm run build
```

ビルド成果物は `dist/` ディレクトリに出力されます。

### プレビュー

```bash
npm run preview
```

## デプロイ

### S3へのデプロイ

```bash
# ビルド
npm run build

# S3にアップロード（CDKデプロイ後に取得したバケット名を使用）
aws s3 sync dist/ s3://historical-research-web/

# CloudFrontキャッシュの無効化
aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"
```

## 機能

### 検索ページ (`/search`)

- テキスト検索
- 時代フィルタリング
- 検索結果一覧表示

### アップロードページ (`/upload`)

- 複数画像の一括アップロード
- 共通メタデータの入力
  - タイトル（書籍タイトル）
  - 時代（ドロップダウン）
  - ジャンル（複数選択）
  - タグ（カンマ区切り）

## ディレクトリ構造

```
frontend/
├── public/              # 静的ファイル
├── src/
│   ├── api/            # APIクライアント
│   ├── components/     # 共通コンポーネント
│   ├── pages/          # ページコンポーネント
│   ├── types/          # TypeScript型定義
│   ├── App.tsx         # ルートコンポーネント
│   └── main.tsx        # エントリーポイント
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
```

## 技術スタック

- **React 18**: UIライブラリ
- **TypeScript**: 型安全性
- **Vite**: ビルドツール
- **Material-UI v5**: UIコンポーネントライブラリ
- **React Router**: ルーティング
- **TanStack Query**: データフェッチング・キャッシング
- **Axios**: HTTPクライアント

## 注意事項

- 画像アップロードはBase64エンコードで送信されます
- ファイルサイズが大きい場合はタイムアウトする可能性があります
- 本番環境ではCORS設定を適切に制限してください