# 画面設計書 2-ログアウト画面

## 概要

本ドキュメントは、Payload CMSの管理画面におけるログアウト画面の設計について記載する。ユーザーのセッションを終了し、システムからログアウトするための画面である。

### 本画面の処理概要

本画面は、認証済みユーザーのセッションを終了し、ログイン画面へ遷移させるための画面である。通常のログアウト操作に加え、非アクティブによる自動ログアウトにも対応している。

**業務上の目的・背景**：セキュリティ確保のため、ユーザーが明示的にログアウトできる機能を提供する。また、一定時間操作がない場合の自動ログアウト（非アクティブログアウト）により、セッションハイジャックなどのセキュリティリスクを軽減する。共有端末での使用時に、他ユーザーへのアクセス権限漏洩を防止する役割も担う。

**画面へのアクセス方法**：管理画面のヘッダーメニューまたはナビゲーションからログアウトを選択する。権限エラー画面のログアウトボタンを押下する。非アクティブ状態が一定時間続いた場合に自動遷移する。URLパターンは `/admin/logout` となる。

**主要な操作・処理内容**：
1. 画面表示時にログアウト処理を自動実行（通常ログアウト時）
2. AuthProviderのlogOut関数を呼び出しセッションを終了
3. 成功トーストメッセージを表示
4. ログイン画面へ自動遷移
5. 非アクティブログアウトの場合は、メッセージ表示後にログインボタンを表示

**画面遷移**：
- 遷移元：ダッシュボード画面、各管理画面のヘッダー、権限エラー画面
- 遷移先：ログイン画面

**権限による表示制御**：本画面は認証済みユーザー向けの画面である。既にログアウト済みのユーザーがアクセスした場合は、ログイン画面へ自動的にリダイレクトされる。非アクティブログアウトの場合は、ログインへ戻るためのボタンが表示される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 6 | ユーザー認証 | 主機能 | ユーザーのセッション終了とログアウト処理 |
| 31 | Next.js統合 | 補助機能 | ログアウト後のリダイレクト処理 |

## 画面種別

認証（ログアウト）

## URL/ルーティング

- **URL**: `/admin/logout`
- **ルーティング定義**: `packages/next/src/routes/auth/logout`
- **クエリパラメータ**: `redirect` - ログアウト後のリダイレクト先URL（非アクティブ時に使用）

## 入出力項目

| 項目名 | 項目ID | 入出力区分 | データ型 | 必須 | 最大長 | 説明 |
|--------|--------|------------|----------|------|--------|------|
| リダイレクトURL | redirect | 入力 | string | 任意 | - | 再ログイン後のリダイレクト先（非アクティブ時） |
| 非アクティブフラグ | inactivity | 入力 | boolean | 任意 | - | 非アクティブによるログアウトかどうか |

## 表示項目

| 項目名 | 表示位置 | データソース | 説明 |
|--------|----------|--------------|------|
| ローディングオーバーレイ | 全画面 | - | 通常ログアウト時のローディング表示 |
| ログアウトメッセージ | 中央 | i18n | 非アクティブログアウト時のメッセージ |
| ログインボタン | 中央下部 | - | 非アクティブ時のログイン画面へのリンク |

## イベント仕様

### 1-画面表示（通常ログアウト）

- **トリガー**: 画面表示時（isLoggedIn=true、inactivity=false）
- **処理内容**:
  1. `handleLogOut`関数を呼び出し
  2. AuthProviderの`logOut`関数でセッション終了
  3. `toast.success`で成功メッセージを表示
  4. `router.push`でログイン画面へ遷移
- **結果**: ログイン画面へリダイレクト

### 2-画面表示（非アクティブログアウト）

- **トリガー**: 画面表示時（inactivity=true）
- **処理内容**:
  1. 非アクティブメッセージを表示
  2. ログインボタンを表示
- **結果**: ユーザーがボタンを押すまで待機

### 3-ログインボタン押下

- **トリガー**: 非アクティブ時のログインボタン押下
- **処理内容**: ログイン画面へ遷移（redirectパラメータ付き）
- **遷移先**: ログイン画面

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| ログアウト処理 | - | - | セッション/トークンの無効化（サーバーサイドで処理） |

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

本画面では直接的なデータベース更新は行わない。ログアウト処理はAuthProviderの`logOut`関数を通じてサーバーサイドで実行され、JWTトークンの無効化またはセッションの削除が行われる。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| authentication:loggedOutSuccessfully | 成功 | ログアウトしました | 通常ログアウト成功時 |
| authentication:loggingOut | ローディング | ログアウト中... | ローディング表示時 |
| authentication:loggedOutInactivity | 情報 | 非アクティブのためログアウトしました | 非アクティブログアウト時 |
| authentication:logBackIn | ボタンラベル | 再ログイン | 非アクティブ時のボタン |

## 例外処理

| 例外状況 | 処理内容 |
|----------|---------|
| ログアウトAPI失敗 | エラーメッセージを表示、ログイン画面への遷移は継続 |
| 既にログアウト済み | ログイン画面へ自動遷移 |
| ネットワークエラー | ログイン画面への遷移を試行 |

## 備考

- 非アクティブログアウトは、JWTトークンのリフレッシュが失敗した場合にトリガーされる
- `redirectパラメータ`を使用して、再ログイン後に元のページに戻ることが可能
- ローディングオーバーレイはアニメーション時間を0msに設定し、即座に表示される
- `navigatingToLoginRef`で重複遷移を防止している

---

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

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

### 推奨読解順序

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

まず、ログアウト処理で使用されるpropsとコンテキストを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | AdminViewServerProps | `packages/payload/src/admin/types.ts` | サーバーコンポーネントに渡されるpropsの型 |
| 1-2 | AuthContext | `packages/ui/src/providers/Auth/index.tsx` | logOut関数を提供するコンテキスト |

**読解のコツ**: LogoutClientコンポーネントはuseAuthフックを使用してlogOut関数にアクセスする。

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

処理の起点となるサーバーコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | LogoutView | `packages/next/src/views/Logout/index.tsx` | サーバーコンポーネント、LogoutClientをレンダリング |

**主要処理フロー**:
1. **行10-14**: AdminViewServerPropsとinactivityプロパティを受け取る
2. **行15-23**: initPageResultからadminRouteを抽出
3. **行25-34**: LogoutClientにpropsを渡してレンダリング

#### Step 3: クライアントコンポーネントを理解する

実際のログアウト処理を行うクライアントコンポーネントを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | LogoutClient | `packages/next/src/views/Logout/LogoutClient.tsx` | クライアントサイドのログアウト処理 |

**主要処理フロー**:
- **行36**: `useAuth`からlogOutとuserを取得
- **行41-43**: isLoggedInをuserIdで判定
- **行47-56**: loginRouteを構築（非アクティブ時はredirectパラメータ付き）
- **行61-69**: `handleLogOut`でlogOut→トースト→ルーター遷移
- **行71-78**: useEffectで画面表示時に自動ログアウトまたはリダイレクト
- **行80-88**: 非アクティブ時のUI表示

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

```
LogoutView (Server Component)
    |
    +-- LogoutClient (Client Component)
            |
            +-- useAuth()
            |     +-- logOut()
            |     +-- user
            |
            +-- useConfig()
            |
            +-- useRouteTransition()
            |     +-- startRouteTransition()
            |
            +-- useRouter()
            |     +-- push()
            |
            +-- toast.success()
            |
            +-- [条件分岐]
                  +-- LoadingOverlay (通常ログアウト時)
                  +-- メッセージ + Button (非アクティブ時)
```

### データフロー図

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

画面アクセス ---------> LogoutClient
                              |
                              v
                       [isLoggedIn判定]
                              |
            +----------------+----------------+
            |                                 |
            v                                 v
    [通常ログアウト]                 [非アクティブ/ログアウト済み]
            |                                 |
            v                                 v
       logOut() -----> セッション終了    メッセージ表示
            |                                 |
            v                                 v
    toast.success()                    ボタン表示
            |                                 |
            v                                 v
    router.push(loginRoute) <-----------+
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/next/src/views/Logout/index.tsx` | ソース | サーバーコンポーネント、エントリーポイント |
| LogoutClient.tsx | `packages/next/src/views/Logout/LogoutClient.tsx` | ソース | クライアントコンポーネント、ログアウト処理 |
| index.scss | `packages/next/src/views/Logout/index.scss` | スタイル | 画面スタイル定義 |
| Auth/index.tsx | `packages/ui/src/providers/Auth/index.tsx` | ソース | 認証プロバイダー、logOut関数提供 |
| LoadingOverlay | `packages/ui/src/elements/LoadingOverlay/index.tsx` | ソース | ローディング表示コンポーネント |
| Button | `packages/ui/src/elements/Button/index.tsx` | ソース | ボタンコンポーネント |
