# 画面設計書 28-GoCardlessリンク画面

## 概要

本ドキュメントは、Actual BudgetアプリケーションにおけるGoCardless銀行連携のリダイレクト処理画面の設計仕様を定義するものである。

### 本画面の処理概要

GoCardless銀行連携のOAuth認証フロー完了後に、ユーザーがリダイレクトされる中間画面である。この画面は認証完了を通知し、自動的にウィンドウを閉じる処理を行う。ユーザーが手動でウィンドウを閉じる必要がある場合に備えて、案内メッセージも表示される。

**業務上の目的・背景**：GoCardless（旧Nordigen）はヨーロッパの銀行との連携を可能にするオープンバンキングAPIプロバイダーである。OAuth認証フローでは、ユーザーが銀行サイトで認証を完了した後、アプリケーションにリダイレクトされる。本画面はこのリダイレクト先として機能し、認証プロセスの完了をユーザーに示しながら、バックグラウンドでウィンドウを閉じる処理を行う。

**画面へのアクセス方法**：GoCardless認証フロー中に銀行サイトからリダイレクトされることでアクセスする。直接URLを入力してアクセスすることは想定されていない。デスクトップ（ワイド画面幅）でのみアクセス可能。

**主要な操作・処理内容**：
1. 画面表示時に `window.close()` を実行してウィンドウを自動的に閉じる
2. 自動クローズが機能しない場合、ユーザーに手動クローズを促すメッセージを表示

**画面遷移**：
- 遷移元：外部（銀行サイトからのリダイレクト）
- 遷移先：なし（ウィンドウが閉じる）

**権限による表示制御**：特別な権限制御は設けられていない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 26 | GoCardless連携 | 主機能 | GoCardless銀行連携の初期設定・認証処理 |

## 画面種別

リダイレクト処理

## URL/ルーティング

`/gocardless/link`

- デスクトップ（ワイド画面幅）でのみアクセス可能
- モバイル（ナロー画面幅）でアクセスした場合は `/budget` にリダイレクト

## 入出力項目

| 項目名 | 項目ID | データ型 | 入力/出力 | 必須 | 説明 |
|--------|--------|----------|-----------|------|------|
| なし | - | - | - | - | この画面に入力項目はない |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| モーダルタイトル | string | "Account sync" と表示 |
| 待機メッセージ | text | "Please wait..." |
| 手動クローズ案内 | text | ウィンドウが自動的に閉じない場合の案内 |

## イベント仕様

### 1-画面表示・自動クローズ

画面のレンダリング時に自動的にウィンドウを閉じる処理を実行する。

**処理フロー**:
1. コンポーネントがマウントされる
2. `window.close()` が即座に実行される
3. ポップアップブロッカー等で閉じられない場合、ユーザーはメッセージを確認して手動で閉じる

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | - | この画面はデータベース更新を行わない |

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| MSG-001 | 情報 | "Please wait..." | 常時表示 |
| MSG-002 | 情報 | "The window should close automatically. If nothing happened you can close this window or tab." | 常時表示 |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| window.close()が機能しない | ユーザーに手動クローズを案内 |

## 備考

- 本画面はGoCardless OAuth認証フローの一部として機能する
- ポップアップウィンドウ内で表示されることを想定
- `isDismissable={false}` によりモーダルの手動クローズを無効化
- 認証結果の処理は親ウィンドウ側で行われる

---

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

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

### 推奨読解順序

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

非常にシンプルなコンポーネントなので、メインファイルを直接確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | GoCardlessLink.tsx | `packages/desktop-client/src/components/gocardless/GoCardlessLink.tsx` | コンポーネント全体（30行未満） |

**主要処理フロー**:
1. **9-10行目**: useTranslationフックで翻訳機能を取得
2. **12行目**: `window.close()` の呼び出し（レンダリング時に即実行）
3. **13-28行目**: モーダルUIのレンダリング

**読解のコツ**: このコンポーネントは非常にシンプルで、主な目的は `window.close()` の実行とフォールバックメッセージの表示のみ。

#### Step 2: ルーティング設定を理解する

画面へのアクセス制御を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | FinancesApp.tsx | `packages/desktop-client/src/components/FinancesApp.tsx` | ルーティング定義（313-319行目） |

**読解のコツ**: `NarrowNotSupported` でラップされているため、モバイルではアクセス不可。

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

```
GoCardlessLink
    │
    ├─ useTranslation()
    │      └─ 翻訳機能
    │
    ├─ window.close()
    │      └─ ウィンドウを閉じる
    │
    └─ Modal
           ├─ ModalHeader
           │      └─ "Account sync"
           │
           └─ Paragraph (x2)
                  └─ 待機メッセージ
```

### データフロー図

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

外部リダイレクト ─────▶ GoCardlessLink ──────────────────▶ window.close()
(銀行認証完了)           レンダリング
                             │
                             └──▶ モーダル表示 ───────────▶ ユーザーへの案内
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| GoCardlessLink.tsx | `packages/desktop-client/src/components/gocardless/GoCardlessLink.tsx` | ソース | メインコンポーネント |
| Modal.tsx | `packages/desktop-client/src/components/common/Modal.tsx` | ソース | モーダルコンポーネント |
| FinancesApp.tsx | `packages/desktop-client/src/components/FinancesApp.tsx` | ソース | ルーティング定義（313-319行目） |
