# 通知設計書 24-リンクコピー成功

## 概要

本ドキュメントは、Liamプロジェクトにおけるリンクコピー成功通知（UI通知・トースト）の設計仕様を定義する。

### 本通知の処理概要

現在表示しているページのURLをクリップボードにコピーする操作が成功した際に、ユーザーへ成功状態を視覚的にフィードバックするUI通知（トースト）を表示する機能である。

**業務上の目的・背景**：LiamのERD（Entity Relationship Diagram）可視化画面では、特定のスキーマ設定やビュー状態を他のチームメンバーと共有するニーズがある。現在のURLには表示状態がエンコードされているため、URLをコピーして共有することで、同じビューを他者に見せることができる。コピー成功時に視覚的なフィードバックを提供することで、ユーザーが確実に操作完了を認識でき、次のアクション（SlackやEmail等への貼り付け）にスムーズに移行できる。

**通知の送信タイミング**：ERDRenderer内のCopyLinkButtonをクリック、またはコマンドパレットからリンクコピーを実行し、`navigator.clipboard.writeText()`によるクリップボードへの書き込みが成功した直後にトースト通知が表示される。

**通知の受信者**：コピー操作を実行したユーザー本人がブラウザ上で直接通知を受け取る。サーバーへの送信や他ユーザーへの通知は行われない。

**通知内容の概要**：タイトル「Link copied!」が成功ステータスのトースト通知として表示される。説明文は含まれない。

**期待されるアクション**：ユーザーは通知を確認後、コピーされたURLをSlack、Email、ドキュメントなどに貼り付けて共有することが期待される。

## 通知種別

UI通知（トースト） - アプリ内通知

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（即時表示） |
| 優先度 | 中 |
| リトライ | なし |

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

コピー操作を実行したユーザーのブラウザ上に直接表示される。ユーザー認証状態やロールに関係なく、操作者本人にのみ通知される。

## 通知テンプレート

### UI通知（トースト）の場合

| 項目 | 内容 |
|-----|------|
| タイトル | Link copied! |
| 説明 | なし |
| ステータス | success |
| 表示位置 | header（画面上部）またはcommand-palette |

### 本文テンプレート

```
タイトル: Link copied!
ステータス: success
```

### 添付ファイル

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

## テンプレート変数

該当なし（固定メッセージのため変数は使用しない）

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | AppBar内CopyLinkButtonクリック | `navigator.clipboard.writeText()`成功 | URLのクリップボードコピー成功時 |
| 画面操作 | LeftPane内CopyLinkButtonクリック | `navigator.clipboard.writeText()`成功 | URLのクリップボードコピー成功時 |
| 画面操作 | コマンドパレットからリンクコピー実行 | `navigator.clipboard.writeText()`成功 | URLのクリップボードコピー成功時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| クリップボード書き込み失敗 | writeTextがエラーを返した場合、失敗通知（No.25）が表示される |
| クリップボードAPI未サポート | navigator.clipboardが存在しない場合、「Clipboard unavailable」（No.21）が表示される |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ユーザーがCopy Linkクリック] --> B{navigator.clipboard存在?}
    B -->|No| C[Clipboard unavailableトースト表示]
    B -->|Yes| D[window.location.href取得]
    D --> E[navigator.clipboard.writeText呼び出し]
    E --> F{書き込み結果}
    F -->|成功| G[Link copied!トースト表示]
    F -->|失敗| H[URL copy failedトースト表示]
    G --> I[clickLogEvent送信]
    I --> J[処理終了]
    H --> J
    C --> J
```

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

### 参照テーブル一覧

該当なし（UI通知のためデータベースアクセスは発生しない）

### 更新テーブル一覧

該当なし（UI通知のためデータベース更新は発生しない）

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| クリップボード書き込み失敗 | writeTextがPromise.rejectを返した場合 | No.25「リンクコピー失敗」通知を表示 |
| クリップボードAPI未サポート | navigator.clipboardが存在しない場合 | No.21「クリップボード利用不可」通知を表示 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 0回（リトライなし） |
| リトライ間隔 | 該当なし |
| リトライ対象エラー | 該当なし |

## 配信設定

### レート制限

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

### 配信時間帯

制限なし（ユーザー操作に応じて即時表示）

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

- 本通知は個人情報を含まない固定メッセージである
- コピーされるURLにはページの表示状態情報が含まれる可能性があるが、通知自体には機密情報は含まれない
- クリップボードへの書き込みはセキュアコンテキスト（HTTPS）環境で行われる

## 備考

- Radix UI Toastコンポーネントを使用して実装されている
- トースト通知は一定時間後に自動的に非表示となる（Radix UIのデフォルト動作）
- `useCopy`フックを通じた統一的なコピー処理で実装されている
- コピー成功後にGoogle Tag Manager（GTM）へのイベントログ送信も行われる
- 複数の場所（AppBar、LeftPane、コマンドパレット）から同一の通知が発生する
- コマンドパレットから実行した場合、トースト表示位置は'command-palette'となる

---

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

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

### 推奨読解順序

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

まず、トースト通知で使用されるデータ構造を理解することが重要である。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ToastOptions型とToastStatus型の定義を確認。statusが'success'となる |
| 1-2 | useCopy.ts | `frontend/packages/ui/src/hooks/useCopy.ts` | UseCopyOptions型を確認。toast.success/errorの設定 |

**読解のコツ**: TypeScriptの型定義を確認し、useCopyフックへ渡すオプションの構造を理解する。

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

処理の起点となるCopyLinkButtonコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CopyLinkButton.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar/CopyLinkButton/CopyLinkButton.tsx` | useCopyフックの使用とhandleCopyUrl関数 |

**主要処理フロー**:
1. **16-21行目**: useCopyフックの初期化（success: 'Link copied!', error: 'URL copy failed'）
2. **23-33行目**: handleCopyUrl関数の定義
3. **24行目**: `copy(window.location.href)` - 現在のURLをコピー
4. **26-32行目**: clickLogEventでGTMにイベント送信

#### Step 3: LeftPaneのCopyLinkButtonを理解する

サイドバー内のCopyLinkButtonを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | CopyLinkButton.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/LeftPane/CopyLinkButton/CopyLinkButton.tsx` | AppBar版と同様の実装 |

**主要処理フロー**:
- **10-15行目**: useCopyフックの初期化
- **17-27行目**: handleCopyUrl関数（AppBar版と同様）

#### Step 4: コマンドパレットのuseCopyLinkを理解する

コマンドパレットからのリンクコピーを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | useCopyLink.ts | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/hooks/useCopyLink.ts` | コマンドパレット用のリンクコピーフック |

**主要処理フロー**:
- **5-12行目**: useCopyフックの初期化（positionパラメータでトースト位置を指定）
- **14-17行目**: copyLink関数の定義

#### Step 5: useCopyフックを理解する

共通のコピー処理を提供するuseCopyフックを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 5-1 | useCopy.ts | `frontend/packages/ui/src/hooks/useCopy.ts` | 汎用コピーフックの実装 |

**主要処理フロー**:
- **28-37行目**: Feature Detection（クリップボードAPI存在チェック）
- **39-42行目**: fromPromiseでクリップボード書き込み
- **44-53行目**: 成功時の処理（isCopied状態更新、トースト表示）
- **56-64行目**: 失敗時の処理（コンソールログ、エラートースト表示）

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

```
CopyLinkButton (AppBar/LeftPane)
    │
    └─ handleCopyUrl()
           │
           ├─ useCopy({ toast: { success: 'Link copied!', error: 'URL copy failed' } })
           │      │
           │      └─ copy(window.location.href)
           │             │
           │             ├─ Feature Detection
           │             │      └─ 未サポート → toast({ title: 'Clipboard unavailable', status: 'error' })
           │             │
           │             └─ navigator.clipboard.writeText(url)
           │                    │
           │                    ├─ 成功 → toast({ title: 'Link copied!', status: 'success' })
           │                    │
           │                    └─ 失敗 → toast({ title: 'URL copy failed', status: 'error' })
           │
           └─ clickLogEvent()

useCopyLink (CommandPalette)
    │
    └─ copyLink()
           │
           └─ useCopy({ toast: { success: 'Link copied!', error: 'URL copy failed', position } })
                  │
                  └─ copy(window.location.href)
                         └─ (同上)
```

### データフロー図

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

window.location.href ───▶ useCopyフック ───▶ Feature Detection
                               │
                               ▼
                    navigator.clipboard.writeText()
                               │
                               ▼
                         fromPromise()
                               │
                    ┌──────────┴──────────┐
                    ▼                     ▼
                 成功時                  失敗時
                    │                     │
                    ▼                     ▼
     toast('Link copied!') ───▶    toast('URL copy failed') ───▶
     clickLogEvent() ───▶         console.error()
                    │                     │
                    ▼                     ▼
            トースト通知表示        トースト通知表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CopyLinkButton.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar/CopyLinkButton/CopyLinkButton.tsx` | ソース | AppBar内のリンクコピーボタン |
| CopyLinkButton.tsx | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/LeftPane/CopyLinkButton/CopyLinkButton.tsx` | ソース | LeftPane内のリンクコピーボタン |
| useCopyLink.ts | `frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/hooks/useCopyLink.ts` | ソース | コマンドパレット用リンクコピーフック |
| useCopy.ts | `frontend/packages/ui/src/hooks/useCopy.ts` | ソース | 汎用コピーフック |
| useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | ソース | トースト表示フック |
| Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ソース | トースト表示コンポーネント |
| types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ソース | トースト関連の型定義 |
