# 画面設計書 2-サインアップ画面

## 概要

本ドキュメントは、Giselle Studio のサインアップ画面の設計仕様を記載したものである。

### 本画面の処理概要

サインアップ画面は、新規ユーザーがGiselle Studioにアカウントを作成するための登録方法選択画面である。OAuth（GitHub, Google）による登録、またはメールアドレスによる登録の選択肢を提供する。

**業務上の目的・背景**：本画面は、新規ユーザーがGiselleプラットフォームに参加するためのエントリーポイントである。複数の登録方法を提供することで、ユーザーの好みや状況に応じた柔軟な登録体験を実現する。OAuth認証によるワンクリック登録は、新規ユーザーの登録障壁を下げ、プラットフォームへの参加を促進する。メール登録オプションは、OAuthを使用しないユーザーへの代替手段を提供する。

**画面へのアクセス方法**：以下の方法でサインアップ画面にアクセスできる。
- ブラウザで直接 `/signup` URLにアクセス
- ログイン画面から「Sign up」リンクをクリック
- マーケティングサイトやランディングページからの登録リンク

**主要な操作・処理内容**：
1. OAuth認証（Google）：Googleアカウントを使用したワンクリック登録
2. OAuth認証（GitHub）：GitHubアカウントを使用したワンクリック登録
3. メール登録：「Sign up with Email」ボタンからメールサインアップ画面へ遷移
4. ログインへの遷移：既にアカウントを持っている場合のログイン画面への遷移

**画面遷移**：
- 遷移元：ログイン画面、外部サイト（マーケティングページ等）
- 遷移先：メールサインアップ画面、ログイン画面、OAuth認証プロバイダーページ

**権限による表示制御**：サインアップ画面は未認証ユーザーのみがアクセス可能であり、既に認証済みのユーザーは自動的にダッシュボードにリダイレクトされる。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 96 | ユーザー認証 | 主機能 | 新規ユーザー登録方法（OAuth / メール）の選択と認証処理への遷移 |

## 画面種別

認証（登録方法選択）

## URL/ルーティング

| 項目 | 値 |
|------|-----|
| URL | `/signup` |
| ルートファイル | `apps/studio.giselles.ai/app/(auth)/signup/page.tsx` |

## 入出力項目

### 入力項目

本画面では直接的なフォーム入力項目はない。ボタンクリックによる遷移・アクション実行のみ。

### 出力項目

本画面での直接的な出力項目はない。OAuth認証成功時はリダイレクト、メール登録選択時はメールサインアップ画面へ遷移する。

## 表示項目

| 項目名 | 表示内容 | 説明 |
|--------|----------|------|
| ページタイトル | "Unleash Your Potential" | ヘッダー部のメインタイトル |
| サブタイトル | "New here? Launch your first agent and start building with Giselle." | タイトル下の説明文 |
| フォームタイトル | "Get Started" | フォームコンテナのタイトル |
| OAuth: Googleボタン | "Sign up with Google" | Google OAuth認証ボタン |
| OAuth: GitHubボタン | "Sign up with GitHub" | GitHub OAuth認証ボタン |
| 区切り線 | "or" | OAuthとメール登録の区切り |
| メール登録ボタン | "Sign up with Email" | メールサインアップ画面への遷移ボタン |
| 利用規約同意 | LegalConsent コンポーネント | 利用規約への同意表示 |
| ログイン誘導 | "Already have an account?" + "Log in" | ログインへの誘導 |

## イベント仕様

### 1-Google OAuth登録ボタン押下

**トリガー**: "Sign up with Google" ボタンをクリック

**処理フロー**:
1. Server Action `authorizeGoogle` が呼び出される
2. Supabase Auth クライアントを作成
3. `signInWithOAuth` メソッドでGoogle認証を開始
4. `redirectTo` に認証コールバックURLを設定
5. Googleの認証ページにリダイレクト
6. 認証成功後、コールバックURLで処理され、新規ユーザーの場合は`initializeAccount`でアカウント初期化後ワークスペース一覧画面へ遷移

**例外処理**:
- 認証失敗時：エラーをスローし、画面にエラーメッセージを表示

### 2-GitHub OAuth登録ボタン押下

**トリガー**: "Sign up with GitHub" ボタンをクリック

**処理フロー**:
1. Server Action `authorizeGitHub` が呼び出される
2. Supabase Auth クライアントを作成
3. `signInWithOAuth` メソッドでGitHub認証を開始
4. `redirectTo` に認証コールバックURLを設定
5. GitHubの認証ページにリダイレクト
6. 認証成功後、コールバックURLで処理され、新規ユーザーの場合は`initializeAccount`でアカウント初期化後ワークスペース一覧画面へ遷移

**例外処理**:
- 認証失敗時：エラーをスローし、画面にエラーメッセージを表示

### 3-メール登録ボタン押下

**トリガー**: "Sign up with Email" ボタンをクリック

**処理フロー**:
1. Next.js Link コンポーネントによるクライアントサイドナビゲーション
2. `/signup/email` ページ（メールサインアップ画面）に遷移

### 4-ログインリンク押下

**トリガー**: "Log in" リンクをクリック

**処理フロー**:
1. Next.js Link コンポーネントによるクライアントサイドナビゲーション
2. `/login` ページに遷移

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| OAuth登録（新規） | users | INSERT | 新規ユーザーレコード作成 |
| OAuth登録（新規） | supabase_user_mappings | INSERT | Supabaseユーザーとの紐付け |
| OAuth登録（新規） | teams | INSERT | デフォルトチーム作成 |
| OAuth登録（新規） | team_memberships | INSERT | チームメンバーシップ作成 |
| OAuth登録（新規） | agents | INSERT | サンプルエージェント作成 |
| OAuth登録（新規） | workspaces | INSERT | サンプルワークスペース作成 |
| OAuth登録（新規） | apps | INSERT | サンプルアプリ作成 |

※OAuthによる新規ユーザー登録時は、コールバック処理で`initializeAccount`が呼ばれ、上記テーブルへのINSERTが発生する。

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

#### users

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | id | `usr_${createId()}` | CUID形式のユーザーID |
| INSERT | email | supabaseUserEmail | Supabaseから取得 |
| INSERT | avatarUrl | supabaseUserAvatarUrl | Supabaseから取得（nullの場合あり） |

#### teams

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | id | `createTeamId()` | チームID生成 |
| INSERT | name | "My Project" | デフォルトチーム名 |
| INSERT | plan | "internal" / "free" | 内部ユーザーはinternal、それ以外はfree |

## メッセージ仕様

| メッセージ種別 | メッセージ内容 | 表示条件 |
|--------------|---------------|----------|
| エラー | OAuth認証プロバイダーからのエラーメッセージ | OAuth認証失敗時 |

## 例外処理

| 例外種別 | 条件 | 処理内容 |
|---------|------|----------|
| OAuth認証エラー | Google/GitHub認証失敗 | エラーをスローし、エラーページを表示 |
| ネットワークエラー | サーバー通信失敗 | サービス不可メッセージを表示 |

## 備考

- OAuthによる登録とログインは同じ処理（`signInWithOAuth`）を使用し、新規ユーザーの場合はSupabaseが自動的にユーザーを作成する
- 新規OAuth登録時の`initializeAccount`では、サンプルワークスペースとアプリが自動作成される
- 内部ユーザー（社内メールアドレス）の場合、チームプランは`internal`に設定される

---

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

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

### 推奨読解順序

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

サインアップ画面は主に遷移のみを行うため、OAuthコールバック後のアカウント初期化処理で使用されるデータ構造を理解することが重要である。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | initialize-account.ts | `apps/studio.giselles.ai/services/accounts/actions/initialize-account.ts` | アカウント初期化時に作成されるデータ構造（行20-176） |

**読解のコツ**: `initializeAccount`関数は新規ユーザー作成時に呼ばれ、ユーザー、チーム、サンプルワークスペースを一括作成する。トランザクション内で行われる点に注目。

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

処理の起点となるページコンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `apps/studio.giselles.ai/app/(auth)/signup/page.tsx` | Server Componentとしてのページ構造（行11-55）、各ボタン・リンクの配置 |

**主要処理フロー**:
1. **行13-16**: `AuthContainer`でページレイアウトを構成
2. **行19-21**: `OAuthProviders`でGoogle/GitHub登録ボタンを表示（labelPrefix="Sign up"）
3. **行27-36**: メール登録ボタンを表示（`/signup/email`へのリンク）
4. **行44-50**: ログイン画面へのリンクを表示

#### Step 3: OAuth認証処理を理解する

OAuth認証の実装を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | oauth-providers.tsx | `apps/studio.giselles.ai/app/(auth)/components/oauth-providers.tsx` | OAuth認証ボタンの構成（行11-43） |
| 3-2 | actions.ts | `apps/studio.giselles.ai/app/(auth)/actions.ts` | OAuth認証の共通処理（行9-34）、`authorizeOAuth`関数 |

**主要処理フロー**:
- **oauth-providers.tsx 行15-28**: Google/GitHub認証の設定オブジェクト
- **actions.ts 行16-22**: Supabase `signInWithOAuth`の呼び出し
- **actions.ts 行31-33**: OAuth認証URLへのリダイレクト

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

認証画面共通のUIコンポーネントを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | auth-container.tsx | `apps/studio.giselles.ai/app/(auth)/components/auth-container.tsx` | 認証画面共通のレイアウト構造（行10-61） |
| 4-2 | auth-button.tsx | `apps/studio.giselles.ai/app/(auth)/components/auth-button.tsx` | 認証画面共通のボタンスタイル |

**主要処理フロー**:
- **auth-container.tsx 行17-27**: タイトルとサブタイトルの表示領域
- **auth-container.tsx 行30-57**: フロストガラス風のコンテナスタイル

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

```
page.tsx (Server Component)
    │
    ├─ AuthContainer (レイアウト)
    │      └─ AuthContainerHeader
    │
    ├─ OAuthProviders (OAuth登録ボタン群)
    │      ├─ ProviderButton (Google)
    │      │      └─ authorizeGoogle (Server Action)
    │      │             └─ authorizeOAuth
    │      │                    └─ supabase.auth.signInWithOAuth
    │      │
    │      └─ ProviderButton (GitHub)
    │             └─ authorizeGitHub (Server Action)
    │                    └─ authorizeOAuth
    │                           └─ supabase.auth.signInWithOAuth
    │
    ├─ AuthButton (メール登録ボタン)
    │      └─ Link (/signup/email)
    │
    ├─ LegalConsent (利用規約同意)
    │
    └─ ActionPrompt (ログイン誘導)
           └─ Link (/login)
```

### データフロー図

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

OAuthボタン押下 ───▶ authorizeOAuth ───▶ signInWithOAuth ───▶ OAuth Provider
                                                                    │
                                                                    ▼
                                                              認証コールバック
                                                                    │
                                          ┌─────────────────────────┴─────────────────────────┐
                                          ▼                                                   ▼
                                     既存ユーザー                                         新規ユーザー
                                          │                                                   │
                                          ▼                                                   ▼
                                   ダッシュボード                                    initializeAccount
                                                                                              │
                                                                                              ▼
                                                                                   users, teams, workspaces
                                                                                   agents, apps (INSERT)
                                                                                              │
                                                                                              ▼
                                                                                      ダッシュボード


メール登録ボタン押下 ───▶ Link ───▶ /signup/email (メールサインアップ画面)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/(auth)/signup/page.tsx` | ソース | サインアップ画面のメインページコンポーネント |
| actions.ts | `apps/studio.giselles.ai/app/(auth)/actions.ts` | ソース | OAuth認証のServer Actions |
| oauth-providers.tsx | `apps/studio.giselles.ai/app/(auth)/components/oauth-providers.tsx` | ソース | OAuth認証ボタン群のコンポーネント |
| auth-container.tsx | `apps/studio.giselles.ai/app/(auth)/components/auth-container.tsx` | ソース | 認証画面共通のレイアウトコンポーネント |
| auth-button.tsx | `apps/studio.giselles.ai/app/(auth)/components/auth-button.tsx` | ソース | 認証画面共通のボタンコンポーネント |
| legal-consent.tsx | `apps/studio.giselles.ai/app/(auth)/components/legal-consent.tsx` | ソース | 利用規約同意表示コンポーネント |
| divider.tsx | `apps/studio.giselles.ai/app/(auth)/components/divider.tsx` | ソース | 区切り線コンポーネント |
| action-prompt.tsx | `apps/studio.giselles.ai/app/(auth)/components/action-prompt.tsx` | ソース | アクション誘導コンポーネント |
| initialize-account.ts | `apps/studio.giselles.ai/services/accounts/actions/initialize-account.ts` | ソース | アカウント初期化処理 |
