# 通知設計書 2-ログアウト成功

## 概要

本ドキュメントは、Liamアプリケーションにおけるログアウト成功時のUI通知（トースト）の設計仕様を定義する。ユーザーがログアウト操作を正常に完了した際に表示される成功通知について、表示仕様、トリガー条件、処理フローを詳細に記載する。

### 本通知の処理概要

ログアウト成功通知は、ユーザーがアプリケーションからログアウトした後、ログインページにリダイレクトされた際に表示されるトースト通知である。

**業務上の目的・背景**：ユーザーがセキュアにログアウト操作を完了したことを明確にフィードバックすることで、セッション終了の確認を可能にし、セキュリティ意識の向上とユーザー体験の改善を実現する。特に共有端末を使用する環境では、ログアウトの完了を視覚的に確認できることが重要である。

**通知の送信タイミング**：ユーザーがヘッダーのユーザードロップダウンメニューから「Logout」を選択し、ログアウトAPIが正常に完了した後、ログインページ（`/login?logout=success`）にリダイレクトされた時点で表示される。

**通知の受信者**：ログアウト操作を実行したユーザー本人。ログインページに遷移した時点で、URLパラメータに基づいてトースト通知が表示される。

**通知内容の概要**：「Logged out successfully」というタイトルと「You have been logged out.」という説明文が、成功（success）ステータスのトースト通知として表示される。

**期待されるアクション**：ユーザーはログアウトが完了したことを確認し、必要に応じて再度ログインするか、ブラウザを閉じるなどの操作を行う。トースト通知は一定時間後に自動的に消える。

## 通知種別

UI通知（トースト）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（ページ遷移後に即座に表示） |
| 優先度 | 中 |
| リトライ | なし（UI表示のため不要） |

### 送信先決定ロジック

ログアウト操作を実行したユーザーがログインページにリダイレクトされた際に、URLのクエリパラメータ`logout=success`の存在を検知して表示する。

## 通知テンプレート

### UI通知の場合

| 項目 | 内容 |
|-----|------|
| タイトル | Logged out successfully |
| 説明文 | You have been logged out. |
| ステータス | success |
| 表示位置 | header（ヘッダー下部） |

### 本文テンプレート

```
タイトル: Logged out successfully
説明: You have been logged out.
```

### 添付ファイル

| ファイル名 | 形式 | 条件 | 説明 |
|----------|------|------|------|
| なし | - | - | UI通知のため添付ファイルなし |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| なし | - | - | 固定文言のため変数なし |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面遷移 | ログインページへのリダイレクト | URLパラメータ`logout=success`が存在 | ログアウトAPI成功後のリダイレクト時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| logoutパラメータなし | URLに`logout=success`パラメータがない場合は表示しない |
| logoutパラメータが`success`以外 | パラメータ値がsuccessでない場合は表示しない |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ユーザーがLogoutをクリック] --> B[handleLogout関数実行]
    B --> C[/api/logout POSTリクエスト]
    C --> D{レスポンス確認}
    D -->|成功| E[/login?logout=success にリダイレクト]
    D -->|失敗| F[エラートースト表示]
    E --> G[LogoutToastコンポーネント検知]
    G --> H{logoutパラメータ確認}
    H -->|success| I[成功トースト表示]
    H -->|その他| J[表示なし]
    I --> K[URLからパラメータ削除]
    K --> L[終了]
    F --> L
    J --> L
```

## データベース参照・更新仕様

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| なし | - | UI通知のためデータベース参照なし |

### テーブル別参照項目詳細

UI通知のため、データベースからの参照は行わない。

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| なし | - | UI通知のためデータベース更新なし |

#### 送信ログテーブル

| 操作 | 項目（カラム名） | 更新値 | 備考 |
|-----|-----------------|-------|------|
| - | - | - | UI通知のため送信ログなし |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| なし | - | 成功通知のためエラーケースなし |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | なし |
| リトライ間隔 | - |
| リトライ対象エラー | - |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | なし（UI表示のため制限不要） |
| 1日あたり上限 | なし |

### 配信時間帯

特に制限なし。ユーザー操作に応じて即座に表示される。

## セキュリティ考慮事項

- ログアウト成功の確認メッセージは、実際にセッションが終了したことを示す重要なフィードバックである
- URLパラメータはトースト表示後に`router.replace()`で削除され、ブラウザ履歴に残らない
- 通知内容には機密情報を含まない

## 備考

- Radix UIの`@radix-ui/react-toast`を使用してトースト表示を実装
- トーストは`header`位置（ヘッダー下部）に表示される
- トースト表示後、URLパラメータを削除してクリーンなURLを維持する

---

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

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

### 推奨読解順序

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

まず、トースト通知の型定義を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ToastOptions型（3-7行目）でトースト通知の構造を理解する |

**読解のコツ**: `ToastStatus`が`'success' | 'error' | 'warning' | 'info'`の4種類であり、本通知では`success`を使用する。

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

処理の起点となるログアウトトリガーを特定。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | UserDropdown.tsx | `frontend/apps/app/components/CommonLayout/AppBar/UserDropdown.tsx` | handleLogout関数（48-64行目）でログアウト処理とリダイレクトの流れを理解する |

**主要処理フロー**:
1. **49-51行目**: `/api/logout`へのPOSTリクエスト（fromAsyncThrowableでラップ）
2. **53-55行目**: 成功時、`/login?logout=success`へリダイレクト
3. **58-63行目**: 失敗時、エラートースト表示

#### Step 3: トースト表示処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | LogoutToast.tsx | `frontend/apps/app/components/LoginPage/LogoutToast.tsx` | URLパラメータの検知と成功トースト表示処理（7-28行目）を理解する |

**主要処理フロー**:
- **12-24行目**: useEffectでURLパラメータを監視
- **13行目**: `searchParams.get('logout')`でパラメータ取得
- **14-19行目**: `success`の場合にトースト表示
- **22-23行目**: `router.replace()`でURLをクリーンアップ

#### Step 4: トーストコンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | Toastコンポーネントの実装（20-47行目）とToastProvider（97-132行目）を理解する |
| 4-2 | useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | useToastフックの実装（5-13行目）を理解する |

**主要処理フロー**:
- **Toast.tsx 81-95行目**: useToastDisplayフックで状態管理
- **Toast.tsx 117-121行目**: HeaderToastViewportProviderでヘッダー位置にトースト表示

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

```
UserDropdown.tsx
    │
    └─ handleLogout()
           │
           ├─ fetch('/api/logout', { method: 'POST' })
           │
           └─ router.push('/login?logout=success')
                  │
                  ▼
LogoutToast.tsx
    │
    └─ useEffect()
           │
           ├─ searchParams.get('logout')
           │
           ├─ toast({ title, description, status })
           │      │
           │      └─ ToastContext (Toast.tsx)
           │
           └─ router.replace(pathname)
```

### データフロー図

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

ユーザー操作             ───▶ handleLogout()              ───▶ リダイレクト
(Logoutクリック)               │                               │
                              │                               ▼
                              └─▶ /api/logout POST        /login?logout=success
                                                               │
                                                               ▼
URLパラメータ            ───▶ LogoutToast useEffect()    ───▶ トースト表示
(logout=success)               │                               │
                              └─▶ toast()                  URLクリーンアップ
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| UserDropdown.tsx | `frontend/apps/app/components/CommonLayout/AppBar/UserDropdown.tsx` | ソース | ログアウト処理のトリガー |
| LogoutToast.tsx | `frontend/apps/app/components/LoginPage/LogoutToast.tsx` | ソース | ログアウト成功トースト表示コンポーネント |
| Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ソース | トースト通知UIコンポーネント |
| useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | ソース | トーストフック |
| types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ソース | トースト型定義 |
