# 画面設計書 34-アカウント設定画面

## 概要

ユーザーが所属するチームの一覧を表示し、チーム間の切り替えや新規チーム作成を行うための設定画面。

### 本画面の処理概要

**業務上の目的・背景**：Giselleでは1人のユーザーが複数のチームに所属することが可能である。本画面は、ユーザーが所属する全てのチームを一覧表示し、作業対象チームの切り替えや新規チームの作成を行うためのインターフェースを提供する。これにより、複数の組織やプロジェクトに参加しているユーザーが効率的にチームを管理できる。

**画面へのアクセス方法**：設定画面 > アカウント設定 からアクセスする。URLは `/settings/account`。

**主要な操作・処理内容**：
1. チーム一覧の表示：ユーザーが所属するチームをカード形式で表示。チーム名、ロール、プラン情報を確認できる
2. 新規チーム作成：「Create New Team」ボタンからダイアログを開き、新しいチームを作成する
3. チーム切り替え：チームカードをクリックして作業対象チームを切り替える
4. チーム離脱：所属するチームから離脱する（オーナー以外の場合）

**画面遷移**：
- 前画面：設定画面（/settings）
- 関連画面：アカウント一般設定画面（/settings/account/general）、認証設定画面（/settings/account/authentication）

**権限による表示制御**：
- 全てのログイン済みユーザーがアクセス可能
- チームごとのロール（owner/admin/member）が表示される
- Proプラン以上のチームにはProバッジが表示される

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 97 | チーム管理 | 主機能 | ユーザーが所属するチーム一覧の取得と表示 |

## 画面種別

一覧

## URL/ルーティング

`/settings/account`

## 入出力項目

### チーム作成ダイアログ

| 項目名 | 入出力 | データ型 | 必須 | 説明 |
|--------|--------|----------|------|------|
| Team Name | 入力 | string | 必須 | 作成するチームの名前 |

## 表示項目

### チーム一覧

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| チームアバター | string | チームのアバター画像URL |
| チーム名 | string | チームの名前 |
| ロール | enum | owner/admin/member のいずれか |
| プランバッジ | boolean | Pro以上のプランの場合に表示 |

## イベント仕様

### 1-新規チーム作成ボタン押下

「Create New Team」ボタン押下でチーム作成ダイアログが開く。

1. チーム名を入力
2. 「Create」ボタン押下で `createTeam` Server Action を呼び出し
3. `teams` テーブルにレコード挿入
4. `team_memberships` テーブルにオーナーとしてのメンバーシップを挿入
5. 成功時：ダイアログを閉じ、一覧を更新
6. 失敗時：エラーメッセージを表示

### 2-チームカード押下（チーム切り替え）

チームカードを押下して作業対象チームを切り替える。

1. `navigateWithChangeTeam` Server Action を呼び出し
2. `setCurrentTeam` でセッションの現在チームを更新
3. 指定されたパス（または /settings/account）へリダイレクト

### 3-チーム離脱ボタン押下

チームカードのメニューから「Leave」を選択してチームを離脱する。

1. 確認ダイアログを表示
2. `leaveTeam` Server Action を呼び出し
3. 現在ユーザーのチームメンバーシップを削除
4. 成功時：一覧を更新（revalidatePath）
5. 失敗時：エラーメッセージを表示

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| チーム作成 | teams | INSERT | 新規チームの作成 |
| チーム作成 | team_memberships | INSERT | オーナーとしてのメンバーシップ追加 |
| チーム離脱 | team_memberships | DELETE | メンバーシップの削除 |

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

#### teams

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | id | `tm_${cuid2}` | チームID |
| INSERT | name | ユーザー入力値 | チーム名 |

#### team_memberships

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| INSERT | team_db_id | 作成されたチームのDB ID | 外部キー |
| INSERT | user_db_id | 現在ユーザーのDB ID | 外部キー |
| INSERT | role | "owner" | 作成者はオーナー |

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|---------|
| 成功 | （ダイアログクローズ/リダイレクト） | チーム作成/切り替え成功時 |
| エラー | Invalid team ID | 不正なチームIDでの操作時 |
| 情報 | The teams that are associated with your Giselle account. | 画面の説明文 |

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| 不正なチームID | エラー「Invalid team ID」を表示 |
| チーム切り替え失敗 | エラーをスローし、リダイレクトを中止 |
| チーム離脱失敗 | エラーメッセージを表示 |

## 備考

- チームオーナーはチームから離脱できない（deleteTeamMemberで制御）
- 現在選択中のチームはハイライト表示される
- チーム切り替え時、returnUrlが不正な場合は `/settings/account` にリダイレクト

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | page.tsx | `apps/studio.giselles.ai/app/(main)/settings/account/page.tsx` | Server Component としてのページレンダリング |

**主要処理フロー**:
1. **行9**: fetchUserTeams() でユーザーのチーム一覧を取得
2. **行12-19**: チームにProプラン情報を付加
3. **行35-44**: TeamCreation と GlassButton のレンダリング
4. **行47**: UserTeams コンポーネントへのprops渡し

#### Step 2: Server Actions を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | actions.ts | `apps/studio.giselles.ai/app/(main)/settings/account/actions.ts` | navigateWithChangeTeam, leaveTeam |

**主要処理フロー**:
- **行139-147**: navigateWithChangeTeam - チーム切り替えとリダイレクト
- **行149-166**: leaveTeam - チーム離脱処理

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

```
AccountSettingPage (page.tsx)
    │
    ├─ fetchUserTeams() ─────────────────────────────────▶ ユーザーのチーム一覧取得
    │
    ├─ isProPlan() ──────────────────────────────────────▶ プラン判定
    │
    └─ UserTeams
           │
           └─ navigateWithChangeTeam()
                  ├─ isTeamId() ─────────────────────────▶ チームID検証
                  ├─ setCurrentTeam() ───────────────────▶ セッション更新
                  └─ redirect() ─────────────────────────▶ リダイレクト
```

### データフロー図

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

User Session ───────────────▶   fetchUserTeams() ──────────────▶ UserTeam[]
                                        │
                                        ▼
                                ┌─────────────────────┐
                                │ isProPlan()         │ ─────────▶ teamsWithProInfo[]
                                └─────────────────────┘
                                        │
                                        ▼
                                ┌─────────────────────┐
                                │ UserTeams           │ ─────────▶ 画面表示
                                └─────────────────────┘
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/(main)/settings/account/page.tsx` | ソース | ページのエントリーポイント |
| actions.ts | `apps/studio.giselles.ai/app/(main)/settings/account/actions.ts` | ソース | Server Actions |
| user-teams.tsx | `apps/studio.giselles.ai/app/(main)/settings/account/user-teams.tsx` | ソース | チーム一覧コンポーネント |
| team-creation.tsx | `apps/studio.giselles.ai/services/teams/components/team-creation.tsx` | ソース | チーム作成ダイアログ |
