# 画面設計書 13-チーム参加成功画面

## 概要

本ドキュメントは、Giselle Studio の「チーム参加成功画面」に関する画面設計書である。チームへの参加が完了したことを通知し、アプリケーション利用を開始するための画面を定義する。

### 本画面の処理概要

**業務上の目的・背景**：ユーザーがチームへの参加プロセスを完了したことを確認し、次のステップ（アプリケーション利用開始）への誘導を行う。シンプルな成功通知画面として、ユーザーに達成感を与えながらスムーズにメイン機能へ誘導する。

**画面へのアクセス方法**：チーム招待画面（No.9）での承諾、チーム招待ログイン画面（No.10）でのログイン成功、またはチーム招待メール確認画面（No.12）でのメール確認成功後に自動的にリダイレクトされる。

**主要な操作・処理内容**：
1. チーム参加完了メッセージの表示
2. 「Go to team」ボタンによるプレイグラウンド画面への遷移

**画面遷移**：
- 遷移元：チーム招待画面（/join/[token]）、チーム招待ログイン画面（/join/[token]/login）、チーム招待メール確認画面（/join/[token]/signup/verify-email）
- 遷移先：プレイグラウンド画面（/playground）

**権限による表示制御**：認証済みユーザーがアクセス可能。URLに直接アクセスした場合も表示されるが、実際にチームに参加していない場合は意味のない画面となる。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 97 | チーム管理 | 補助機能 | チーム参加完了の確認表示 |

## 画面種別

完了通知画面

## URL/ルーティング

`/join/success`

## 入出力項目

| 項目名 | 項目ID | 入出力 | 必須 | データ型 | 制約・バリデーション |
|--------|--------|--------|------|----------|---------------------|
| なし | - | - | - | - | この画面には入力項目なし |

## 表示項目

| 項目名 | 説明 | データソース |
|--------|------|-------------|
| ウェルカムタイトル | 「Welcome to Giselle!」 | 固定テキスト |
| 完了メッセージ | 「Setup complete!」 | 固定テキスト |
| 説明文 | 次のステップへの誘導文 | 固定テキスト |
| アクションボタン | 「Go to team」 | 固定テキスト、/playgroundへのリンク |

## イベント仕様

### 1-プレイグラウンド画面遷移（Go to team）

**トリガー**: 「Go to team」ボタンクリック

**前提条件**: なし

**処理フロー**:
1. プレイグラウンド画面（/playground）へ遷移
2. 遷移後、ユーザーはアプリの実行テストが可能

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

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

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

## メッセージ仕様

| 種別 | メッセージID | メッセージ内容 | 表示条件 |
|------|-------------|---------------|----------|
| 成功 | welcome | Welcome to Giselle! | 常時表示 |
| 成功 | setup_complete | Setup complete! | 常時表示 |
| 説明 | next_steps | Head over to your team account and start creating your own unique app. We can't wait to see what you'll build! | 常時表示 |

## 例外処理

| 例外状況 | 処理内容 | ユーザーへの通知 |
|---------|---------|----------------|
| なし | - | この画面では例外処理なし |

## 備考

- 静的な完了通知画面のため、サーバーサイドでのデータ取得は行わない
- リダイレクト先は /playground に固定されている
- 画面デザインは認証画面系の共通スタイル（auth-title-glow）を使用
- AuthButtonコンポーネントを使用してボタンをスタイリング

---

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

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

### 推奨読解順序

#### Step 1: ページコンポーネントを理解する

単純な静的ページであるため、ページファイルのみで完結する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | page.tsx | `apps/studio.giselles.ai/app/(auth)/join/success/page.tsx` | 静的コンテンツの構造、リダイレクト先の定義 |

**主要処理フロー**:
1. **5行目**: リダイレクト先として /playground を定義
2. **7-30行目**: JSXによるUIレンダリング
3. **21-23行目**: AuthButtonでラップされたLinkコンポーネント

**読解のコツ**: この画面は純粋なプレゼンテーションコンポーネントであり、Server Componentとして動作する。ステート管理やデータフェッチは行わない。

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

```
page.tsx (Server Component)
    │
    └─ AuthButton (styled Link)
           └─ Link href="/playground"
```

### データフロー図

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

（なし） ─────────────▶ 静的レンダリング ──────────────▶ HTML表示
                                                              │
                                                              ▼
                         ユーザークリック ──────────────▶ /playground
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/(auth)/join/success/page.tsx` | ソース | ページエントリーポイント（Server Component） |
| auth-button.tsx | `apps/studio.giselles.ai/app/(auth)/components/auth-button.tsx` | ソース | 認証画面用ボタンコンポーネント |
