# 画面設計書 121-ユーザー詳細画面

## 概要

本ドキュメントは、Medusa Admin Dashboardにおけるユーザー詳細画面の設計を記述したものです。管理者ユーザーの詳細情報を表示し、編集・削除操作を行うための画面です。

### 本画面の処理概要

この画面では、個別の管理者ユーザーの詳細情報を閲覧し、ユーザー情報の編集や削除といった管理操作を実行できます。

**業務上の目的・背景**：ECサイトの運営において、管理者ユーザーの情報を一元管理することは、セキュリティとアクセス制御の観点から非常に重要です。この画面は、個々のユーザーの詳細情報を確認し、必要に応じて更新や無効化（削除）を行うための中心的なインターフェースとして機能します。ユーザーの氏名やメールアドレスの変更、アカウントの削除などの操作を、確認ダイアログを通じて安全に実行できます。

**画面へのアクセス方法**：設定 > ユーザー管理 > ユーザー一覧画面から、特定のユーザーをクリックまたは選択することでこの画面にアクセスします。URLパスは `/settings/users/:id` の形式です。

**主要な操作・処理内容**：
1. ユーザーの基本情報（メールアドレス、名前）の表示
2. ユーザー情報の編集画面への遷移（編集ボタンクリック）
3. ユーザーの削除操作（削除ボタンクリック後、確認ダイアログで承認）
4. メタデータの表示・編集
5. JSONデータの表示

**画面遷移**：
- 遷移元：ユーザー一覧画面（No.119）
- 遷移先：ユーザー編集画面（No.122）、ユーザーメタデータ編集画面（No.123）

**権限による表示制御**：認証済みの管理者ユーザーのみアクセス可能です。自分自身のユーザー情報も含め、全ての管理者ユーザーの情報を閲覧・編集・削除できます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 62 | ユーザーCRUD | 主機能 | ユーザー詳細の表示 |

## 画面種別

詳細

## URL/ルーティング

`/settings/users/:id`

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 必須 | 説明 |
|--------|----------|----------|------|------|
| id | 入力（URLパラメータ） | string | Yes | ユーザーID |
| user | 出力 | AdminUser | - | ユーザー情報オブジェクト |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| email | string | ユーザーのメールアドレス（見出しとして表示） |
| name | string | ユーザーの名前（first_name + last_name）。未設定の場合は「-」を表示 |
| metadata | object | ユーザーに関連付けられたメタデータ |

## イベント仕様

### 1-編集ボタンクリック

編集ボタンをクリックすると、ユーザー編集画面（モーダル形式のドロワー）へ遷移します。

- 遷移先URL: `/settings/users/:id/edit`
- 遷移方法: ルーターナビゲーション

### 2-削除ボタンクリック

削除ボタンをクリックすると、確認ダイアログが表示されます。

- 確認ダイアログ表示内容:
  - タイトル: 「本当によろしいですか？」（i18n: general.areYouSure）
  - 説明: ユーザー削除に関する警告メッセージ（i18n: users.deleteUserWarning）
  - 確認テキスト入力: ユーザー名またはメールアドレスの入力が必要
- 確認後の処理:
  - `DELETE /admin/users/:id` APIを呼び出し
  - 成功時: トースト通知を表示し、ユーザー一覧画面へ遷移
  - 失敗時: エラーメッセージをトースト通知で表示

### 3-メタデータ編集

画面内のメタデータセクションから編集を選択すると、メタデータ編集画面へ遷移します。

- 遷移先URL: `/settings/users/:id/metadata`

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | user | SELECT | ユーザー情報の取得 |
| 削除ボタン押下 | user | DELETE | ユーザーの削除 |

### テーブル別更新項目詳細

#### user

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | id, email, first_name, last_name, metadata | id = URLパラメータのid | - |
| DELETE | - | id = URLパラメータのid | 論理削除または物理削除 |

## メッセージ仕様

| メッセージ種別 | 表示条件 | メッセージ内容（i18nキー） |
|--------------|----------|------------------------|
| 成功 | ユーザー削除成功時 | users.deleteUserSuccess |
| エラー | API呼び出し失敗時 | error.message（APIからのエラーメッセージ） |
| 確認 | 削除確認ダイアログ | general.areYouSure, users.deleteUserWarning |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| ユーザーが見つからない | エラーをスロー（isError状態）してエラーバウンダリでハンドリング |
| API呼び出しエラー | toast.error()でエラーメッセージを表示 |
| ローディング中 | SingleColumnPageSkeletonコンポーネントを表示 |

## 備考

- 拡張ポイント: `user.details.before`、`user.details.after` のウィジェットスロットが用意されている
- ローダー機能: React Routerのloader機能を使用して、ページ遷移前にデータを事前取得する

---

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

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

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、ユーザーデータの型定義とAPIレスポンスの構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | HttpTypes | `packages/types/src/http/user/admin/index.ts` | AdminUser型の構造（id, email, first_name, last_name, metadata） |

**読解のコツ**: MedusaではHTTPレスポンスの型がHttpTypes配下に定義されています。AdminUserResponseがuserプロパティを含むことに注目してください。

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

処理の起点となるコンポーネントファイルを特定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | user-detail.tsx | `packages/admin/dashboard/src/routes/users/user-detail/user-detail.tsx` | メインコンポーネント、データ取得フック、子コンポーネントの構成 |
| 2-2 | loader.ts | `packages/admin/dashboard/src/routes/users/user-detail/loader.ts` | React Routerのローダー関数による事前データ取得 |

**主要処理フロー**:
1. **11-12行目**: useLoaderDataでローダーの事前取得データを受け取る
2. **14-22行目**: useUserフックでユーザーデータを取得（initialDataとして事前取得データを使用）
3. **26-28行目**: ローディング中はスケルトンを表示
4. **34-46行目**: SingleColumnPageコンポーネントでレイアウトを構成し、UserGeneralSectionを表示

#### Step 3: ユーザー情報表示コンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | user-general-section.tsx | `packages/admin/dashboard/src/routes/users/user-detail/components/user-general-section/user-general-section.tsx` | ユーザー情報の表示ロジック、編集・削除アクション |

**主要処理フロー**:
- **18行目**: useDeleteUserフックで削除ミューテーションを取得
- **20行目**: ユーザー名の組み立て（first_name + last_name）
- **22-47行目**: handleDeleteUser関数で削除確認ダイアログと削除処理を実装
- **53-74行目**: ActionMenuコンポーネントで編集・削除アクションを提供

#### Step 4: API呼び出しフックを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | users.tsx | `packages/admin/dashboard/src/hooks/api/users.tsx` | useUser、useDeleteUserフックの実装 |

**主要処理フロー**:
- **41-61行目**: useUserフックでsdk.admin.user.retrieve()を呼び出し
- **129-150行目**: useDeleteUserフックでsdk.admin.user.delete()を呼び出し、成功時にキャッシュを無効化

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

```
UserDetail (user-detail.tsx)
    │
    ├─ useLoaderData() → loader.ts
    │      └─ sdk.admin.user.retrieve()
    │
    ├─ useUser() → hooks/api/users.tsx
    │      └─ sdk.admin.user.retrieve()
    │
    └─ UserGeneralSection (user-general-section.tsx)
           │
           ├─ useDeleteUser() → hooks/api/users.tsx
           │      └─ sdk.admin.user.delete()
           │
           └─ ActionMenu
                  ├─ Edit → navigate("edit")
                  └─ Delete → handleDeleteUser()
                         └─ mutateAsync() → DELETE /admin/users/:id
```

### データフロー図

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

URLパラメータ(:id) ───▶ loader.ts                  ───▶ initialData
                              │
                              ▼
                        sdk.admin.user.retrieve()
                              │
                              ▼
initialData ───────────▶ useUser()               ───▶ user オブジェクト
                              │
                              ▼
                        UserGeneralSection
                              │
                    ┌─────────┴─────────┐
                    ▼                   ▼
            表示（email, name）    ActionMenu
                                        │
                    ┌───────────────────┴───────────────────┐
                    ▼                                       ▼
            Edit → /edit                          Delete → 確認ダイアログ
                                                           │
                                                           ▼
                                                  sdk.admin.user.delete()
                                                           │
                                                           ▼
                                                  navigate("..")
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| user-detail.tsx | `packages/admin/dashboard/src/routes/users/user-detail/user-detail.tsx` | ソース | メインコンポーネント |
| loader.ts | `packages/admin/dashboard/src/routes/users/user-detail/loader.ts` | ソース | データ事前取得ローダー |
| user-general-section.tsx | `packages/admin/dashboard/src/routes/users/user-detail/components/user-general-section/user-general-section.tsx` | ソース | ユーザー情報表示・アクションコンポーネント |
| users.tsx | `packages/admin/dashboard/src/hooks/api/users.tsx` | ソース | ユーザー関連APIフック |
| index.ts | `packages/admin/dashboard/src/routes/users/user-detail/index.ts` | ソース | バレルエクスポート |
| breadcrumb.tsx | `packages/admin/dashboard/src/routes/users/user-detail/breadcrumb.tsx` | ソース | パンくずリスト表示 |
