# 画面設計書 37-接続完了画面

## 概要

OAuth接続が完了した際に表示されるコールバック画面。ポップアップウィンドウとして開かれ、接続完了を通知後に自動的にウィンドウを閉じる。

### 本画面の処理概要

**業務上の目的・背景**：サードパーティサービス（主にOAuth認証）との接続フローでは、認証が完了した後にユーザーにフィードバックを提供する必要がある。本画面は、OAuth認証が成功したことをユーザーに視覚的に伝え、親ウィンドウ（元の画面）に処理完了を通知してから自動的にウィンドウを閉じる役割を担う。

**画面へのアクセス方法**：OAuth認証フロー完了後、認証プロバイダーからのリダイレクトで自動的にアクセスされる。URLは `/connected`。通常、ポップアップウィンドウとして表示される。

**主要な操作・処理内容**：
1. 接続完了メッセージの表示：「Connection Completed」というメッセージを表示
2. 親ウィンドウへの通知：`postMessage` を使用して親ウィンドウに接続完了を通知
3. 自動ウィンドウクローズ：600ミリ秒後に自動的にウィンドウを閉じる

**画面遷移**：
- 前画面：OAuth認証プロバイダーの認証ページ
- 後処理：ウィンドウクローズ（親ウィンドウに制御が戻る）

**権限による表示制御**：
- OAuth認証コールバックとしてのみアクセス可能
- 認証状態に関わらず表示されるが、実際の連携処理はサーバーサイドで行われる

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 96 | ユーザー認証 | 補助機能 | OAuth接続完了時のコールバック処理とウィンドウクローズ |

## 画面種別

コールバック

## URL/ルーティング

`/connected`

## 入出力項目

本画面にはフォーム入力はない。

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| タイトル | string | "Connection Completed" |
| サブテキスト | string | "This window will close automatically." |

## イベント仕様

### 1-ページロード時

ページがマウントされた際に自動的に処理を実行する。

1. `useEffect` フックでマウント時処理を開始
2. `window.opener` が存在し、閉じられていないことを確認
3. `postMessage` で親ウィンドウに `{ type: "github-app-installed", success: true }` を送信
4. 600ミリ秒後に `window.close()` を実行
5. コンポーネントがアンマウントされた場合、タイマーをクリアアップ

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

本画面ではデータベース更新は行わない。OAuth認証の結果はサーバーサイドの認証コールバックハンドラーで処理される。

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|---------|
| 情報 | Connection Completed | 常に表示 |
| 情報 | This window will close automatically. | 常に表示 |

### postMessage メッセージ

| メッセージタイプ | ペイロード | 送信先 |
|-----------------|----------|--------|
| github-app-installed | `{ type: "github-app-installed", success: true }` | 親ウィンドウ（任意のオリジン） |

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| 親ウィンドウが存在しない | postMessage はスキップされるが、ウィンドウクローズは実行 |
| 親ウィンドウが閉じている | postMessage はスキップされるが、ウィンドウクローズは実行 |
| window.close が失敗 | 画面は表示されたままになる（ユーザーが手動で閉じる必要あり） |

## 備考

- Client Component として実装されている（"use client"）
- postMessage のターゲットオリジンは "*"（任意のオリジン）に設定されている
- メッセージタイプは "github-app-installed" だが、汎用的な接続完了として使用される
- タイマーはコンポーネントのクリーンアップで適切に解除される

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | page.tsx | `apps/studio.giselles.ai/app/connected/page.tsx` | Client Component としての実装 |

**主要処理フロー**:
1. **行6**: useEffect でマウント時の処理を定義
2. **行8-12**: window.opener への postMessage 送信
3. **行14-16**: 600ms 後のウィンドウクローズタイマー設定
4. **行19-21**: クリーンアップ関数でタイマー解除
5. **行24-28**: メッセージ表示UI

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

```
ConnectedPage (page.tsx)
    │
    └─ useEffect (マウント時)
           ├─ window.opener.postMessage() ──────────────▶ 親ウィンドウに通知
           │
           └─ setTimeout() ─────────────────────────────▶ 600ms後
                  └─ window.close() ────────────────────▶ ウィンドウクローズ
```

### データフロー図

```
[トリガー]                      [処理]                              [出力]

OAuth認証完了 ──────────────▶   リダイレクト ──────────────────▶ /connected
                                        │
                                        ▼
                                ┌─────────────────────┐
                                │ useEffect           │
                                │ (マウント時)        │
                                └─────────────────────┘
                                        │
                        ┌───────────────┴───────────────┐
                        ▼                               ▼
                ┌───────────────┐               ┌───────────────┐
                │ postMessage   │               │ setTimeout    │
                │ → 親ウィンドウ│               │ → 600ms       │
                └───────────────┘               └───────────────┘
                                                        │
                                                        ▼
                                                ┌───────────────┐
                                                │ window.close  │
                                                └───────────────┘
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/connected/page.tsx` | ソース | ページコンポーネント |
