# 画面設計書 16-設定-一般画面

## 概要

本ドキュメントは、Liam DBアプリケーションにおける設定-一般画面の設計仕様を定義する。

### 本画面の処理概要

この画面では、組織の一般設定を管理する。組織名の変更や組織の削除が可能である。

**業務上の目的・背景**：
組織の管理者が組織の基本情報を管理するための画面である。組織名の変更により、チーム名やプロジェクト名の変更に柔軟に対応できる。また、不要になった組織を完全に削除する機能を提供し、データのライフサイクル管理を実現する。

**画面へのアクセス方法**：
- グローバルナビゲーションの設定メニューから「General」を選択
- URLパターンは `/settings/general`

**主要な操作・処理内容**：
1. 組織名の表示と編集
2. 組織名の保存（更新）
3. 組織の削除（確認ダイアログ付き）

**画面遷移**：
- 遷移元: 各種画面のナビゲーション
- 遷移先: 設定-プロジェクト画面、設定-メンバー画面、設定-請求画面（タブ切り替え）
- 組織削除後: 組織一覧画面（`/organizations`）へリダイレクト

**権限による表示制御**：
認証済みユーザーのみアクセス可能。未認証の場合はログイン画面へリダイレクトされる。組織メンバーのみが設定を閲覧・編集可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 33 | 設定画面 | 主機能 | 組織の一般設定を管理 |
| 26 | 組織管理 | 補助機能 | 組織名の変更処理 |
| 25 | ユーザー認証 | 補助機能 | 認証状態の確認とリダイレクト |
| 39 | Supabaseクライアント | API連携 | 組織設定データの取得・更新 |

## 画面種別

設定 / 編集

## URL/ルーティング

```
/settings/general
```

## 入出力項目

### 入力項目

| 項目名 | 型 | 必須 | 説明 |
|--------|-----|------|------|
| name | string | Yes | 組織名 |
| organizationId | string | Yes | hidden - 組織ID |

### 出力項目

| 項目名 | 型 | 説明 |
|--------|-----|------|
| organization | object | 組織情報（id, name） |

## 表示項目

### 組織名セクション

| 項目名 | 型 | 説明 |
|--------|-----|------|
| cardTitle | string | "Organization Name" |
| input | Input | 組織名入力フィールド |
| helperText | string | "This is your team's visible name within Liam DB..." |
| saveButton | Button | "Save" ボタン |

### 組織削除セクション

| 項目名 | 型 | 説明 |
|--------|-----|------|
| cardTitle | string | "Delete Organization" |
| dangerText | string | 削除に関する警告メッセージ |
| deleteButton | Button | "Delete" ボタン（確認ダイアログ付き） |

## イベント仕様

### 1-組織名保存

組織名を入力して「Save」ボタンをクリックする。

**処理フロー**:
1. フォーム送信
2. `updateOrganizationAction` Server Action呼び出し
3. organizationsテーブルを更新
4. 成功時: Toast通知（"Updated"）を表示
5. エラー時: Toast通知（"Error"）を表示

### 2-組織削除

「Delete」ボタンをクリックして確認ダイアログで承認する。

**処理フロー**:
1. 「Delete」ボタンクリック
2. 確認ダイアログ表示
3. 確認後、`deleteOrganizationAction` Server Action呼び出し
4. organizationsテーブルから削除（カスケード削除）
5. 成功時: sessionStorageに成功メッセージを保存
6. 組織一覧画面へリダイレクト

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| 画面表示 | organizations | SELECT | 組織情報取得 |
| 組織名保存 | organizations | UPDATE | 組織名を更新 |
| 組織削除 | organizations | DELETE | 組織を削除（カスケード） |

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

#### organizations（取得）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| SELECT | id | 組織ID | - |
| SELECT | name | 組織名 | - |

取得条件:
- `id = :organizationId`

#### organizations（更新）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| UPDATE | name | フォーム入力値 | - |

更新条件:
- `id = :organizationId`

#### organizations（削除）

| 操作 | 項目（カラム名） | 更新値・取得条件 | 備考 |
|-----|-----------------|-----------------|------|
| DELETE | - | - | カスケード削除で関連データも削除 |

削除条件:
- `id = :organizationId`

## メッセージ仕様

| メッセージID | 種別 | メッセージ | 表示条件 |
|------------|------|-----------|---------|
| MSG-001 | 情報 | This is your team's visible name within Liam DB. For example, the name of your company or team. | 常時表示（ヘルパーテキスト） |
| MSG-002 | 警告 | Permanently remove your organization and all of its contents from the Liam DB. This action is not reversible — please continue with caution. | 常時表示（削除セクション） |
| MSG-003 | 成功 | Updated | 組織名更新成功時（Toast） |
| MSG-004 | 成功 | Deleted | 組織削除成功時（Toast） |
| MSG-005 | エラー | Error | 処理失敗時（Toast） |

## 例外処理

| 例外条件 | 処理内容 |
|---------|---------|
| 組織ID取得失敗 | ログイン画面へリダイレクト |
| 組織情報取得失敗 | notFound()を呼び出し、404ページを表示 |
| 組織名更新失敗 | エラーToast表示、updateState.errorに詳細 |
| 組織削除失敗 | エラーToast表示、deleteState.errorに詳細 |

## 備考

- サーバーコンポーネントとクライアントコンポーネントのハイブリッド実装
- useActionStateフックでServer Actionの状態管理
- useToastフックでToast通知を表示
- 組織削除成功メッセージはsessionStorageに保存してリダイレクト先で表示
- useIdフックでフォームIDを生成（フォームとinputの関連付け）
- 削除セクションはdangerCardスタイルで危険性を視覚的に表現

---

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

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

### 推奨読解順序

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

まず、プログラム間で受け渡されるデータ構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | getOrganizationDetails.ts | `frontend/apps/app/components/GeneralPage/services/getOrganizationDetails.ts` | 組織情報の取得ロジック |

**読解のコツ**: organizationはid, nameのみを持つシンプルな構造。Supabaseからsingleで取得。

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

処理の起点となるファイル・関数を特定。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `frontend/apps/app/app/settings/general/page.tsx` | 認証チェックとGeneralPage呼び出し |

**主要処理フロー**:
1. **行7**: getOrganizationIdで組織ID取得
2. **行8-10**: 失敗時はログイン画面へリダイレクト
3. **行12**: 組織IDを抽出
4. **行14**: GeneralPageコンポーネントを呼び出し

#### Step 3: メインサーバーコンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | GeneralPage.tsx | `frontend/apps/app/components/GeneralPage/GeneralPage.tsx` | 組織情報取得とクライアントコンポーネント呼び出し |

**主要処理フロー**:
- **行11**: getOrganizationDetailsで組織詳細取得
- **行13-15**: 組織情報がなければnotFound()
- **行18**: GeneralPageClientをレンダリング

#### Step 4: クライアントコンポーネントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | GeneralPageClient.tsx | `frontend/apps/app/components/GeneralPage/components/GeneralPageClient/GeneralPageClient.tsx` | フォームと状態管理 |

**主要処理フロー**:
- **行19-20**: useIdでformId生成、useToastでToast取得
- **行24-28**: useActionStateでupdateAction状態管理
- **行31-35**: useActionStateでdeleteAction状態管理
- **行38-52**: updateState変更時のToast表示
- **行54-75**: deleteState変更時のリダイレクトとToast表示
- **行77-113**: 組織名セクションのレンダリング
- **行115-140**: 組織削除セクションのレンダリング

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

```
page.tsx (エントリーポイント)
    │
    ├─ getOrganizationId()
    │      └─ 認証チェック
    │
    └─ GeneralPage.tsx
           │
           ├─ getOrganizationDetails()
           │      └─ Supabase (organizations SELECT)
           │
           └─ GeneralPageClient.tsx
                  │
                  ├─ useActionState(updateOrganizationAction)
                  │
                  ├─ useActionState(deleteOrganizationAction)
                  │
                  ├─ useToast()
                  │
                  ├─ 組織名フォーム
                  │      └─ updateAction (Server Action)
                  │
                  └─ 削除フォーム
                         └─ DeleteOrganizationButtonClient
                                └─ deleteAction (Server Action)
```

### データフロー図

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

認証情報 ─────────▶ getOrganizationId ─────▶ organizationId / redirect
                   (認証チェック)

組織ID ───────────▶ getOrganizationDetails ─▶ organization
                   (Supabase SELECT)

organization ─────▶ GeneralPageClient ──────▶ フォーム表示
                   (状態管理)

フォーム入力 ─────▶ updateOrganizationAction ▶ UPDATE / Toast
                   (Server Action)

削除確認 ─────────▶ deleteOrganizationAction ▶ DELETE / リダイレクト
                   (Server Action)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `frontend/apps/app/app/settings/general/page.tsx` | ソース | ページエントリーポイント |
| GeneralPage.tsx | `frontend/apps/app/components/GeneralPage/GeneralPage.tsx` | ソース | サーバーコンポーネント |
| GeneralPageClient.tsx | `frontend/apps/app/components/GeneralPage/components/GeneralPageClient/GeneralPageClient.tsx` | ソース | クライアントコンポーネント |
| getOrganizationDetails.ts | `frontend/apps/app/components/GeneralPage/services/getOrganizationDetails.ts` | ソース | 組織情報取得サービス |
| organizationClientActions.ts | `frontend/apps/app/components/GeneralPage/components/GeneralPageClient/actions/organizationClientActions.ts` | ソース | Server Actions定義 |
| DeleteOrganizationButtonClient.tsx | `frontend/apps/app/components/GeneralPage/components/GeneralPageClient/components/DeleteOrganizationButtonClient/DeleteOrganizationButtonClient.tsx` | ソース | 削除ボタンコンポーネント |
| GeneralPage.module.css | `frontend/apps/app/components/GeneralPage/GeneralPage.module.css` | スタイル | 画面スタイル定義 |
| getOrganizationId.ts | `frontend/apps/app/features/organizations/services/getOrganizationId.ts` | ソース | 組織ID取得サービス |
