# 通知設計書 16-PostgreSQL DDLコピー成功

## 概要

本ドキュメントは、PostgreSQL DDL（データ定義言語）のクリップボードへのコピーが成功した際に表示されるUI通知（トースト）の設計書である。

### 本通知の処理概要

ERD（Entity-Relationship Diagram）ビューアーのエクスポート機能で「Copy PostgreSQL」を選択し、スキーマ情報をPostgreSQL DDL形式でクリップボードにコピーした際に成功通知をトースト形式で表示する機能である。

**業務上の目的・背景**：データベース設計者や開発者がERDビューアーで可視化されたスキーマ情報をPostgreSQL DDLとして取得し、他のツールやドキュメントに貼り付ける必要がある。この通知は、クリップボードへのコピーが正常に完了したことをユーザーに即座に伝え、安心して貼り付け操作に移行できるようにするために必要である。

**通知の送信タイミング**：ExportDropdownコンポーネントで「Copy PostgreSQL」メニューアイテムをクリックし、navigator.clipboard.writeText()によるクリップボード書き込みが成功した時点で即座にトースト通知が表示される。

**通知の受信者**：コピー操作を実行したユーザー。操作を実行しているブラウザセッション上にのみ表示される。

**通知内容の概要**：タイトル「PostgreSQL DDL copied!」とステータス「success」で緑色のトースト通知が表示される。説明文には「Schema DDL has been copied to clipboard」が表示される。

**期待されるアクション**：ユーザーは通知を確認後、任意のアプリケーション（テキストエディタ、SQLクライアント、ドキュメントなど）にDDLを貼り付けることが期待される。

## 通知種別

UI通知（トースト）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（クライアントサイド即時表示） |
| 優先度 | 中（成功通知） |
| リトライ | なし（UI通知のため再送は不要） |

### 送信先決定ロジック

操作を実行したユーザーのブラウザセッションに対して即座に表示される。ToastContextを通じて管理されるグローバルなトースト表示機能により、現在アクティブなウィンドウに通知が表示される。

## 通知テンプレート

### UI通知の場合

| 項目 | 内容 |
|-----|------|
| タイトル | PostgreSQL DDL copied! |
| 説明 | Schema DDL has been copied to clipboard |
| ステータス | success |
| 表示位置 | header（画面上部） |

### 本文テンプレート

```
タイトル: PostgreSQL DDL copied!
説明: Schema DDL has been copied to clipboard
ステータス: success
```

### 添付ファイル

該当なし（UI通知のため添付ファイルは存在しない）

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| - | 本通知には動的な変数はない | - | - |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | ExportDropdownの「Copy PostgreSQL」クリック | navigator.clipboard.writeText()が成功した場合 | DDLコピー処理の成功時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| Clipboard API未対応 | navigator.clipboardが利用できない場合は処理自体が行われない |
| コピー失敗時 | clipboardResult.isErr()の場合は本通知は表示されない（エラー通知が代わりに表示） |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[Copy PostgreSQLメニュークリック] --> B{Clipboard API利用可能?}
    B -->|No| C[Clipboard unavailable通知]
    B -->|Yes| D[postgresqlSchemaDeparser実行]
    D --> E[DDL文字列生成]
    E --> F[navigator.clipboard.writeText]
    F --> G{コピー結果}
    G -->|成功| H[toast関数呼び出し]
    H --> I[成功トースト通知表示]
    G -->|失敗| J[エラー通知表示]
```

## データベース参照・更新仕様

### 参照テーブル一覧

本通知はクライアントサイドのみで動作するため、直接のデータベース参照は行わない。

### 更新テーブル一覧

本通知はデータベース更新を行わない。

## エラー処理

### エラーケース一覧

本通知は成功時のみ表示されるため、エラーケースは該当なし。

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 該当なし（成功通知のため） |
| リトライ間隔 | なし |
| リトライ対象エラー | なし |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | 制限なし |
| 1日あたり上限 | 制限なし |

### 配信時間帯

24時間対応（UI通知のため時間帯制限なし）

## セキュリティ考慮事項

- クリップボードへのアクセスはブラウザのセキュリティポリシーに従う
- HTTPSコンテキストでのみClipboard APIが利用可能
- コピーされるDDLにはデータベースのスキーマ情報が含まれる（機密性の高いテーブル名やカラム名）
- ユーザーの操作によってのみコピーが実行される（自動コピーは行わない）

## 備考

- 本通知はRadix UI Toastコンポーネントを使用して実装されている
- トーストは一定時間後に自動的に非表示となる
- @liam-hq/schemaパッケージのpostgresqlSchemaDeparserを使用してDDLを生成
- neverthrowライブラリのfromPromiseを使用して非同期処理の結果をResultで扱う
- erd-coreパッケージとappパッケージの両方に同様の実装が存在する

---

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

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

### 推奨読解順序

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

トースト通知のオプション型定義とスキーマ型を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ToastOptions型（title, description, status）の定義を確認 |

**読解のコツ**: ToastOptionsのstatusフィールドが'success'の場合に成功スタイルが適用される。

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

ExportDropdownコンポーネントからコピー処理と通知が発火する流れを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ExportDropdown.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar/ExportDropdown/ExportDropdown.tsx` | handleCopyPostgreSQL関数でのtoast呼び出し（行40-44） |

**主要処理フロー**:
1. **行21-55**: handleCopyPostgreSQL関数の定義
2. **行22-29**: Clipboard API利用可能性チェック
3. **行31-32**: postgresqlSchemaDeparserでDDL生成
4. **行34-36**: fromPromiseでクリップボード書き込み
5. **行38-54**: clipboardResult.matchで成功/失敗ハンドリング
6. **行40-44**: 成功時のトースト表示

#### Step 3: DDL生成処理を理解する

PostgreSQL DDLを生成するパーサーの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | postgresqlSchemaDeparser.ts | `frontend/packages/schema/src/deparser/postgresqlSchemaDeparser.ts` | スキーマからDDL文字列を生成するロジック |

**主要処理フロー**:
- スキーマオブジェクトを受け取りPostgreSQL DDL形式の文字列を返す

#### Step 4: トースト表示機構を理解する

トースト通知の表示ロジックを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ToastProvider、success状態のスタイル適用（行31） |
| 4-2 | useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | useToastフックの実装 |

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

```
ExportDropdown (handleCopyPostgreSQL)
    |
    +-- navigator.clipboard チェック
    |       |
    |       +-- 利用不可: toast({ title: 'Clipboard unavailable', status: 'error' })
    |
    +-- postgresqlSchemaDeparser(schema.current)
    |       |
    |       +-- DDL文字列を返す
    |
    +-- fromPromise(navigator.clipboard.writeText(ddl))
    |
    +-- clipboardResult.match()
            |
            +-- 成功: toast({ title: 'PostgreSQL DDL copied!', status: 'success' })
            |           |
            |           +-- ToastContext.createHeaderToastItem()
            |                   |
            |                   +-- Toast (Radix UI Toast)
            |
            +-- 失敗: toast({ title: 'Copy failed', status: 'error' })
```

### データフロー図

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

schema.current    postgresqlSchemaDeparser      DDL文字列
(スキーマ     --->       (DDL生成)        --->  (CREATE TABLE...)
オブジェクト)                                          |
                                                       v
                                        navigator.clipboard.writeText()
                                                       |
                                                       v
                                        fromPromise (Result化)
                                                       |
                                            +----------+----------+
                                            |                     |
                                      [成功時]               [失敗時]
                                            |                     |
                                            v                     v
                                    toast() 成功通知      toast() エラー通知
                                            |
                                            v
                                    [トースト通知表示]
                                    title: "PostgreSQL DDL copied!"
                                    status: "success"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ExportDropdown.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar/ExportDropdown/ExportDropdown.tsx` | ソース | ERDビューアーのエクスポートドロップダウン |
| ExportDropdown.tsx | `frontend/apps/app/components/SessionDetailPage/components/Output/components/Header/ExportDropdown.tsx` | ソース | アプリ側のエクスポートドロップダウン（同様の実装） |
| postgresqlSchemaDeparser.ts | `frontend/packages/schema/src/deparser/postgresqlSchemaDeparser.ts` | ソース | PostgreSQL DDL生成 |
| Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ソース | トースト通知コンポーネント |
| useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | ソース | トースト表示フック |
| Toast.module.css | `frontend/packages/ui/src/components/Toast/Toast.module.css` | スタイル | トースト通知のスタイル定義 |
| ExportDropdown.test.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar/ExportDropdown/ExportDropdown.test.tsx` | テスト | エクスポート機能のテスト |
