# 画面設計書 105-設定トップ画面

## 概要

本ドキュメントは、Medusa Admin Dashboard における設定トップ画面の設計仕様を定義する。

### 本画面の処理概要

設定トップ画面は、システム設定の各カテゴリへのエントリーポイントとなるリダイレクト画面である。

**業務上の目的・背景**：管理者がシステムの各種設定（ストア設定、ユーザー管理、リージョン設定など）にアクセスするためのナビゲーション起点として機能する。設定画面への直接アクセス時に、デフォルトの設定画面（ストア設定）へリダイレクトすることで、一貫したユーザー体験を提供する。

**画面へのアクセス方法**：サイドナビゲーションの「設定」メニューをクリック、または直接 /settings にアクセスする。

**主要な操作・処理内容**：
1. /settings へのアクセスを検知
2. /settings/store へ自動リダイレクト
3. 子ルート（Outlet）のレンダリング

**画面遷移**：
- 遷移元：サイドナビゲーション、任意の画面からの直接アクセス
- 遷移先：ストア詳細画面（/settings/store）へ自動リダイレクト

**権限による表示制御**：認証済みの管理者ユーザーのみアクセス可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 84 | ビュー設定管理 | 主機能 | 設定メニューの表示 |

## 画面種別

ナビゲーション（リダイレクト）

## URL/ルーティング

- パス: `/settings`
- 動作: /settings/store へ自動リダイレクト（replace）

## 入出力項目

本画面は単純なリダイレクト処理のため、入出力項目は存在しない。

## 表示項目

本画面は即座にリダイレクトするため、表示項目は実質なし。Outletによる子ルートのレンダリングのみ。

## イベント仕様

### 1-初期表示時リダイレクト

- トリガー：/settings へのアクセス（コンポーネントマウント時）
- 処理内容：
  1. useEffectでlocation.pathnameを監視
  2. pathname === "/settings" の場合、/settings/store へリダイレクト（replace: true）
- 画面遷移：/settings/store へ即座にリダイレクト

### 2-子ルートレンダリング

- トリガー：/settings/* へのアクセス
- 処理内容：Outletコンポーネントにより対応する子ルートをレンダリング
- 画面遷移：なし（子コンポーネント内で処理）

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

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

本画面ではデータベース操作は発生しない。

## メッセージ仕様

本画面ではメッセージ表示は発生しない。

## 例外処理

本画面では例外処理は実装されていない（リダイレクトとOutletのみ）。

## 備考

- react-router-domのuseNavigate、useLocationを使用
- リダイレクトはreplace: trueで行われるため、ブラウザ履歴には/settingsは残らない
- Outletコンポーネントにより、ネストされた子ルートを表示
- 実際の設定コンテンツはストア詳細画面（/settings/store）以降で表示

---

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

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

### 推奨読解順序

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

画面の実装全体を確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | settings.tsx | `packages/admin/dashboard/src/routes/settings/settings.tsx` | 非常にシンプルな構造で、useEffectによるリダイレクトロジックを確認 |

**主要処理フロー**:
1. **5行目**: useNavigateでナビゲート関数を取得
2. **6行目**: useLocationで現在のロケーション情報を取得
3. **8-12行目**: useEffectで/settingsへのアクセス時に/settings/storeへリダイレクト
4. **14行目**: Outletで子ルートをレンダリング

**読解のコツ**: このコンポーネントは「レイアウトルート」として機能している。React Routerのネストルーティングにおいて、親ルートのコンポーネントがOutletを使って子ルートを表示する仕組み。/settings配下の全てのルートはこのコンポーネントを通過する。

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

```
Settings (settings.tsx)
    │
    ├─ useNavigate (react-router-dom)
    │      └─ navigate("/settings/store", { replace: true })
    │
    └─ <Outlet />
           │
           ├─ StoreDetail (/settings/store)
           ├─ ProfileDetail (/settings/profile)
           ├─ RegionList (/settings/regions)
           ├─ UserList (/settings/users)
           └─ ... (他の設定画面)
```

### データフロー図

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

/settings アクセス ───▶ useEffect ───▶ navigate("/settings/store")
         │                                    │
         ▼                                    ▼
/settings/* アクセス ───▶ <Outlet /> ───▶ 子ルートコンポーネント
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| settings.tsx | `packages/admin/dashboard/src/routes/settings/settings.tsx` | ソース | 設定画面レイアウトルート |
| index.ts | `packages/admin/dashboard/src/routes/settings/index.ts` | ソース | エクスポート定義 |
