# 画面設計書 4-ホーム画面

## 概要

本ドキュメントは、Medusa Admin Dashboard のホーム画面の設計仕様を定義するものです。ログイン後の初期表示画面として機能し、自動的に注文一覧画面へリダイレクトする役割を持ちます。

### 本画面の処理概要

本画面は、ログイン成功後に最初にアクセスされるダッシュボードの入口画面です。現在の実装では、ユーザーが本画面にアクセスすると即座に注文一覧画面（/orders）へリダイレクトされます。将来的にはダッシュボードウィジェットやサマリー情報を表示する拡張が可能な設計となっています。

**業務上の目的・背景**：ECサイト管理において、ログイン直後に最も頻繁にアクセスする画面は注文管理画面です。本画面はログインフローの終点として機能し、管理者を効率的に業務開始地点へ導く役割を果たします。リダイレクト方式を採用することで、URLの一貫性（/）を保ちながら、実際の作業画面へスムーズに遷移させることができます。

**画面へのアクセス方法**：
- ログイン成功後の自動遷移
- ブラウザで直接ルートURL `/` にアクセス
- ナビゲーションのホームリンク

**主要な操作・処理内容**：
1. 画面マウント時に自動的に注文一覧画面へリダイレクト

**画面遷移**：
- 遷移元：ログイン画面（認証成功後）
- 遷移先：注文一覧画面（自動リダイレクト）

**権限による表示制御**：本画面は認証済みユーザーのみアクセス可能です。未認証ユーザーはログイン画面へリダイレクトされます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 98 | ダッシュボード | 主機能 | ダッシュボードの表示 |
| 9 | 注文CRUD | 補助機能 | 最近の注文サマリー表示（将来的な拡張） |

## 画面種別

ダッシュボード（リダイレクト画面）

## URL/ルーティング

`/` または `/home`

## 入出力項目

なし（リダイレクト専用画面のため）

## 表示項目

| 項目名 | 表示位置 | データソース | 説明 |
|--------|----------|--------------|------|
| 空のdiv | 画面全体 | 静的 | リダイレクト中の一時的な空要素 |

## イベント仕様

### 1-画面マウント時のリダイレクト

**トリガー**: コンポーネントのマウント（useEffectの実行）

**処理フロー**:
1. Homeコンポーネントがマウントされる
2. useEffectフックが実行される
3. `navigate("/orders", { replace: true })` でリダイレクト実行
4. ブラウザ履歴を置き換えて注文一覧画面へ遷移

**遷移先**: 注文一覧画面（/orders）

## データベース更新仕様

### 操作別データベース影響一覧

本画面ではデータベースへの更新操作は発生しません。

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | データベース操作なし |

## メッセージ仕様

本画面ではメッセージの表示はありません。

## 例外処理

| 例外条件 | 処理内容 | ユーザーへの表示 |
|---------|---------|-----------------|
| 未認証アクセス | ログイン画面へリダイレクト | ログイン画面が表示される |

## 備考

- 本画面は認証済みユーザーのみアクセス可能なプロテクト画面です
- 現在の実装はシンプルなリダイレクト機能のみですが、将来的には以下の拡張が想定されます：
  - 売上サマリーウィジェット
  - 最近の注文一覧
  - 在庫アラート
  - タスクリスト
- `replace: true` オプションにより、ブラウザの「戻る」ボタンでホーム画面に戻ることはできません

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: エントリーポイントを理解する

Home コンポーネントの実装は非常にシンプルです。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | home.tsx | `packages/admin/dashboard/src/routes/home/home.tsx` | 全体（12行）: Homeコンポーネントの実装 |
| 1-2 | index.ts | `packages/admin/dashboard/src/routes/home/index.ts` | エクスポート定義 |

**主要処理フロー**:
1. **4行目**: Homeコンポーネントの定義開始
2. **5行目**: useNavigateフックの取得
3. **7-9行目**: useEffectで初回マウント時にリダイレクト実行
4. **8行目**: `navigate("/orders", { replace: true })` でリダイレクト
5. **11行目**: 空のdiv要素を返却（リダイレクト中の表示用）

**読解のコツ**:
- `useEffect` の依存配列に `[navigate]` が指定されているため、コンポーネントのマウント時に一度だけ実行されます
- `replace: true` オプションにより、ブラウザ履歴のスタックに新しいエントリを追加せず、現在のエントリを置き換えます

### プログラム呼び出し階層図

```
Home (home.tsx)
    │
    └─ useEffect
           │
           └─ navigate("/orders", { replace: true })
                  │
                  └─ OrderList (orders/order-list/)
```

### データフロー図

```
[入力]                [処理]               [出力]

ルートURL "/" ───▶ Home コンポーネント
                        │
                        ▼
                    useEffect
                        │
                        ▼
              navigate("/orders", { replace: true })
                        │
                        ▼
                 注文一覧画面 "/orders"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| home.tsx | `packages/admin/dashboard/src/routes/home/home.tsx` | ソース | ホーム画面のメインコンポーネント |
| index.ts | `packages/admin/dashboard/src/routes/home/index.ts` | ソース | エクスポート定義 |
