# 画面設計書 22-シェアレイアウト

## 概要

本ドキュメントは、OpenCodeエンタープライズアプリケーション（enterprise）におけるシェアレイアウトの設計を定義する。セッション共有機能のための親レイアウトコンポーネントであり、共有されたセッション詳細画面のコンテナとして機能する。

### 本画面の処理概要

この画面は、エンタープライズ向けセッション共有機能のレイアウトコンポーネントである。`/share/*`配下のルートに対する共通のラッパーとして機能し、子コンポーネント（シェア詳細画面）をレンダリングする。

**業務上の目的・背景**：エンタープライズ環境では、AIとのセッション記録を社内メンバーや関係者と共有することが重要である。このレイアウトコンポーネントは、共有セッションの表示に必要な共通のラッパー構造を提供する。シンプルなパススルーレイアウトにより、将来的な機能拡張（ヘッダー、フッター、認証チェック等の追加）を容易にする設計となっている。

**画面へのアクセス方法**：`/share/{shareID}`形式のURLにアクセスすることで、このレイアウトを経由してシェア詳細画面が表示される。直接このレイアウト単体で表示されることはなく、常に子ルートと組み合わせて使用される。

**主要な操作・処理内容**：
1. 子コンポーネント（props.children）のレンダリング
2. 共有セッション表示のための共通コンテナ提供

**画面遷移**：
- この画面から遷移可能：なし（レイアウトコンポーネントのため）
- この画面に遷移してくる：`/share/{shareID}`形式のURL直接アクセス

**権限による表示制御**：なし。共有リンクを知っている誰でもアクセス可能（共有IDによるアクセス制御）。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 23 | セッション共有 | 主機能 | セッション共有機能のレイアウト提供 |

## 画面種別

レイアウト（コンテナ）

## URL/ルーティング

- パス: `/share/*`
- ファイル: `packages/enterprise/src/routes/share.tsx`
- 子ルート: `/share/[shareID]` (シェア詳細)

## 入出力項目

### 入力項目（Props）

| 項目名 | 型 | 必須 | 説明 |
|--------|-----|------|------|
| children | JSX.Element | はい | 子コンポーネント（シェア詳細画面） |

## 表示項目

表示項目なし（子コンポーネントをそのまま表示）

## イベント仕様

イベント処理なし（パススルーレイアウト）

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

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

データベース操作なし

## メッセージ仕様

メッセージ表示なし

## 例外処理

例外処理なし（子コンポーネントで処理）

## 備考

- 現在の実装は非常にシンプルで、propsの子要素をそのまま返すだけの純粋なパススルーコンポーネント
- SolidJSの`ParentProps`型を使用し、childrenを適切に型付け
- 将来的に共通のヘッダー、フッター、認証チェック、テーマ設定などを追加可能な設計
- エンタープライズパッケージ独自のコンポーネントとして実装

---

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

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

### 推奨読解順序

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

このレイアウトは非常にシンプルなため、主にSolidJSの`ParentProps`型を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | share.tsx | `packages/enterprise/src/routes/share.tsx` | ParentPropsの使用方法 |

**読解のコツ**: SolidJSでは`ParentProps`はchildrenプロパティを含む型で、レイアウトコンポーネントで使用される標準的なパターン。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | share.tsx | `packages/enterprise/src/routes/share.tsx` | レイアウトコンポーネントの全体構造 |

**主要処理フロー**:
1. **1行目**: `ParentProps`型のインポート（solid-jsより）
2. **3行目**: デフォルトエクスポートされた関数コンポーネント定義
3. **4行目**: `props.children`をそのまま返却

#### Step 3: 関連する子ルートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | [shareID].tsx | `packages/enterprise/src/routes/share/[shareID].tsx` | このレイアウト内でレンダリングされる子コンポーネント |

**主要処理フロー**:
- シェア詳細画面がこのレイアウトの子として表示される
- shareIDパラメータによる動的ルーティング

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

```
share.tsx (Share Layout)
    │
    └─ props.children
           │
           └─ [shareID].tsx (Share Detail)
                  │
                  ├─ getData() - サーバーサイドデータ取得
                  │      └─ Share.get() / Share.data()
                  │
                  └─ UI Components
                         ├─ SessionTurn
                         ├─ SessionReview
                         └─ ...
```

### データフロー図

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

URL: /share/{id}
    │
    ▼
SolidStart Router ──▶ share.tsx (Layout) ──▶ children render
                              │
                              ▼
                      [shareID].tsx ──▶ Share Detail UI
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| share.tsx | `packages/enterprise/src/routes/share.tsx` | ソース | シェアレイアウトコンポーネント |
| [shareID].tsx | `packages/enterprise/src/routes/share/[shareID].tsx` | ソース | シェア詳細コンポーネント |
| share.ts | `packages/enterprise/src/core/share.ts` | ソース | シェアデータ管理ロジック |
| [...404].tsx | `packages/enterprise/src/routes/[...404].tsx` | ソース | エンタープライズ404ページ |
