# 通知設計書 1-サインアップ確認

## 概要

本ドキュメントは、Giselleプラットフォームにおけるサインアップ確認メール通知の設計仕様を定義するものである。ユーザーがメールアドレスを使用してサインアップした際に送信される確認コード付きメールの送信仕様、テンプレート構造、処理フローを記載する。

### 本通知の処理概要

本通知は、ユーザーがGiselleプラットフォームにメールアドレスで新規登録を行った際に、メールアドレスの所有権を確認するための認証コードを送信する機能である。

**業務上の目的・背景**：メールアドレスの所有権確認は、不正なアカウント作成を防止し、正当なユーザーのみがサービスを利用できるようにするためのセキュリティ対策である。また、今後のパスワードリセットやアカウント回復の際に有効なメールアドレスが登録されていることを担保する。

**通知の送信タイミング**：ユーザーがサインアップフォームでメールアドレスとパスワードを入力し、登録ボタンを押下した直後に自動送信される。Supabase認証サービスがトリガーとなり、メール送信処理が実行される。

**通知の受信者**：サインアップを試みたユーザー本人。入力されたメールアドレス宛に送信される。受信者の決定ロジックは単純で、サインアップフォームに入力されたメールアドレスがそのまま送信先となる。

**通知内容の概要**：6桁の確認コード、確認コードの有効期限（1時間）、確認方法の説明、サポート連絡先が含まれる。

**期待されるアクション**：受信者はメールに記載された確認コードをGiselleの確認画面に入力し、メールアドレスの所有権を証明する。これにより、アカウントが有効化され、サービスの利用が可能となる。

## 通知種別

メール

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 非同期（Supabase Auth経由） |
| 優先度 | 高 |
| リトライ | Supabaseのデフォルト設定に依存 |

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

サインアップ時にユーザーが入力したメールアドレスが送信先となる。Supabase Authがサインアップリクエストを受け取ると、自動的にメール送信処理が実行される。

## 通知テンプレート

### メール通知の場合

| 項目 | 内容 |
|-----|------|
| 送信元アドレス | noreply@giselles.ai（Supabase設定に依存） |
| 送信元名称 | Giselle |
| 件名 | Verification code for Giselle |
| 形式 | HTML |

### 本文テンプレート

```
[Giselleロゴ]
Verify your email.
Your workspace is almost ready.
---
You're almost in!

Your verification code is:
[確認コード（6桁）]

Enter it to verify your email and begin your journey with Giselle.

This code will expire in 1 hour.
If you didn't request this code, you can safely ignore this email.
Need a hand? support@giselles.ai

—
The Giselle Team
https://giselles.ai
---
[フッター：Product / Blog / Documentation リンク、SNSアイコン、著作権表示]
```

### 添付ファイル

| ファイル名 | 形式 | 条件 | 説明 |
|----------|------|------|------|
| なし | - | - | 本通知には添付ファイルなし |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| token | 確認コード（6桁） | Supabase Auth生成 | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| API | Supabase signUp API呼び出し | メールアドレスが未確認 | ユーザーがメールアドレスでサインアップした際 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| メールアドレス既確認 | 既に確認済みのメールアドレスには送信されない |
| 既存アカウント | 同一メールアドレスで既にアカウントが存在する場合 |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ユーザーがサインアップフォーム送信] --> B[Supabase Auth signUp API呼び出し]
    B --> C[Supabaseがユーザーレコード作成]
    C --> D[確認コード生成]
    D --> E[メールテンプレート展開]
    E --> F[メール送信実行]
    F --> G{送信結果}
    G -->|成功| H[ユーザーに確認画面表示]
    G -->|失敗| I[エラーログ記録]
    H --> J[ユーザーが確認コード入力]
    J --> K[メールアドレス確認完了]
    I --> L[終了]
    K --> L
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| auth.users | ユーザー情報の参照 | Supabase管理テーブル |

### テーブル別参照項目詳細

#### auth.users

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| email | 送信先メールアドレス | サインアップ時に入力されたメールアドレス |
| email_confirmed_at | 確認状態の判定 | NULL = 未確認 |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| auth.users | UPDATE | 確認完了時にemail_confirmed_atを更新 |

#### 送信ログテーブル

| 操作 | 項目（カラム名） | 更新値 | 備考 |
|-----|-----------------|-------|------|
| - | - | - | Supabase管理のため詳細不明 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| 送信失敗 | SMTPサーバー接続エラー | Supabaseによる自動リトライ |
| テンプレートエラー | テンプレート変数の展開失敗 | Supabaseエラーログに記録 |
| 宛先不正 | 無効なメールアドレス形式 | バリデーションエラーとしてユーザーに通知 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | Supabaseデフォルト設定に依存 |
| リトライ間隔 | Supabaseデフォルト設定に依存 |
| リトライ対象エラー | 一時的な送信エラー |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | Supabaseプラン設定に依存 |
| 1日あたり上限 | Supabaseプラン設定に依存 |

### 配信時間帯

制限なし（24時間送信可能）

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

- 確認コードは6桁の数字で構成され、1時間で有効期限切れとなる
- 確認コードはSupabaseによりセキュアに生成される
- TLS暗号化によりメール送信時のデータ保護を実施
- 確認コードの試行回数制限はSupabaseの設定に依存

## 備考

- 本通知はSupabase認証サービスと連携して動作する
- テンプレートはReact Emailを使用して実装されている
- プレビュー機能により開発時にメールの見た目を確認可能

---

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

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

### 推奨読解順序

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

メールテンプレートに渡されるPropsの構造を理解することで、通知に必要なデータを把握できる。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | confirm-sign-up.tsx | `apps/studio.giselles.ai/emails/auth/confirm-sign-up.tsx` | ConfirmSignUpEmailPropsインターフェース（30-32行目）でtokenプロパティを確認 |

**読解のコツ**: TypeScriptのインターフェース定義を確認し、Supabaseのプレースホルダー`{{ .Token }}`がどのように使用されるか理解する。

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

メールテンプレートコンポーネントの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | confirm-sign-up.tsx | `apps/studio.giselles.ai/emails/auth/confirm-sign-up.tsx` | ConfirmSignUpEmailコンポーネント（36-92行目）の構造 |

**主要処理フロー**:
1. **36-37行目**: tokenプロパティを受け取り、未指定の場合はSupabaseプレースホルダーを使用
2. **43行目**: Preview（メールプレビューテキスト）の設定
3. **58-60行目**: 確認コードの表示部分

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

メールの共通レイアウトとスタイルを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | email-header.tsx | `apps/studio.giselles.ai/emails/components/email-header.tsx` | ヘッダーコンポーネントの構造（heading, subheading props） |
| 3-2 | email-footer.tsx | `apps/studio.giselles.ai/emails/components/email-footer.tsx` | フッターコンポーネント（SNSリンク、著作権表示） |
| 3-3 | email-styles.ts | `apps/studio.giselles.ai/emails/components/email-styles.ts` | 共通スタイル定義（code, codeContainerスタイル：68-86行目） |

**主要処理フロー**:
- **email-styles.ts 68-75行目**: 確認コード表示用のコンテナスタイル
- **email-styles.ts 77-86行目**: 確認コード自体のスタイル（32pxフォント、letter-spacing 4px）

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

```
ConfirmSignUpEmail (confirm-sign-up.tsx)
    │
    ├─ EmailFonts (email-fonts.tsx)
    │      └─ フォント読み込み設定
    │
    ├─ EmailHeader (email-header.tsx)
    │      └─ ロゴ、見出し、サブ見出し表示
    │
    ├─ 本文セクション
    │      └─ 確認コード表示（codeContainer, codeスタイル適用）
    │
    └─ EmailFooter (email-footer.tsx)
           └─ リンク、SNSアイコン、著作権表示
```

### データフロー図

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

Supabaseからの
token（確認コード） ───▶ ConfirmSignUpEmail ───▶ HTMLメール
                         コンポーネント              （Supabase経由で送信）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| confirm-sign-up.tsx | `apps/studio.giselles.ai/emails/auth/confirm-sign-up.tsx` | ソース | サインアップ確認メールテンプレート |
| email-header.tsx | `apps/studio.giselles.ai/emails/components/email-header.tsx` | ソース | メールヘッダーコンポーネント |
| email-footer.tsx | `apps/studio.giselles.ai/emails/components/email-footer.tsx` | ソース | メールフッターコンポーネント |
| email-fonts.tsx | `apps/studio.giselles.ai/emails/components/email-fonts.tsx` | ソース | フォント設定コンポーネント |
| email-styles.ts | `apps/studio.giselles.ai/emails/components/email-styles.ts` | ソース | 共通スタイル定義 |
| index.ts | `apps/studio.giselles.ai/emails/components/index.ts` | ソース | コンポーネントエクスポート |
| email-assets.ts | `apps/studio.giselles.ai/emails/utils/email-assets.ts` | ソース | メール用アセットURL生成 |
