# 画面設計書 9-プロジェクト詳細画面

## 概要

本ドキュメントは、Liam DBアプリケーションのプロジェクト詳細画面について定義する。

### 本画面の処理概要

プロジェクト詳細画面は、プロジェクトのルートURLにアクセスした際に、mainブランチの詳細画面へ自動リダイレクトする画面である。実際のコンテンツ表示はブランチ詳細画面（No.10）で行われる。

**業務上の目的・背景**：Liam DBではGitHubリポジトリのブランチ単位でスキーマを管理する。プロジェクトのルートURL（`/projects/[projectId]`）へアクセスした場合、デフォルトブランチ（main）の詳細画面へ自動的に誘導することで、ユーザーの操作を簡素化する。

**画面へのアクセス方法**：
- プロジェクト一覧画面からプロジェクトを選択
- 直接`/projects/[projectId]`にアクセス

**主要な操作・処理内容**：
1. URLパラメータからprojectIdを取得
2. Valibotでパラメータをバリデーション
3. バリデーション成功時、`/projects/[projectId]/ref/main`へリダイレクト
4. バリデーション失敗時、404 Not Foundを返却

**画面遷移**：
- リダイレクト先 → ブランチ詳細画面（`/projects/[projectId]/ref/main`）

**権限による表示制御**：なし（リダイレクト専用画面）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 27 | プロジェクト管理 | 主機能 | mainブランチのプロジェクト詳細画面へリダイレクト |

## 画面種別

リダイレクト

## URL/ルーティング

- URL: `/projects/[projectId]`
- ファイル: `frontend/apps/app/app/projects/[projectId]/page.tsx`
- レンダリング: サーバーコンポーネント
- 動的パラメータ: `projectId`（プロジェクトID）

## 入出力項目

### 入力項目

| 項目名 | 項目ID | データ型 | 必須 | 備考 |
|--------|--------|----------|------|------|
| プロジェクトID | projectId | string | はい | URLパスパラメータ |

## 表示項目

なし（リダイレクト処理のみ）

## イベント仕様

### 1-ページ読み込み時リダイレクト

ページアクセス時に自動的にmainブランチ詳細へリダイレクト。

**トリガー**：ページアクセス

**処理フロー**：
1. URLパラメータからprojectIdを取得
2. Valibotスキーマでバリデーション
3. バリデーション失敗時：`notFound()`を呼び出し404を返却
4. バリデーション成功時：`/projects/${projectId}/ref/main`へリダイレクト

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| ページ読み込み | - | - | データベース操作なし |

本画面はリダイレクト処理のみであり、データベース操作は行わない。

## メッセージ仕様

なし（リダイレクト処理のみ）

## 例外処理

| 例外ケース | 処理内容 |
|------------|----------|
| projectIdパラメータ不正 | 404 Not Found を返却 |
| パラメータ未指定 | 404 Not Found を返却 |

## 備考

- Next.js 15の動的ルート`[projectId]`を使用
- リダイレクト先のブランチ名は固定で`main`
- Valibotを使用したパラメータバリデーション
- 実際のプロジェクト情報表示はブランチ詳細画面（No.10）で行う

---

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

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

### 推奨読解順序

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

プロジェクト詳細ページは非常にシンプルなリダイレクト処理。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | page.tsx | `frontend/apps/app/app/projects/[projectId]/page.tsx` | リダイレクト処理の全体 |

**主要処理フロー**:
- **5-7行目**: Valibotでパラメータスキーマ定義
- **9-11行目**: パラメータをパース
- **11行目**: バリデーション失敗時は`notFound()`
- **13行目**: projectIdを抽出
- **16行目**: `/projects/${projectId}/ref/main`へリダイレクト

**読解のコツ**: Next.js 15では`params`がPromiseとして渡されるため、`await params`が必要な点に注目。

#### Step 2: リダイレクト先を理解する

リダイレクト先のブランチ詳細画面の概要を把握。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | page.tsx | `frontend/apps/app/app/projects/[projectId]/ref/[branchOrCommit]/page.tsx` | リダイレクト先のブランチ詳細ページ |

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

```
app/projects/[projectId]/page.tsx
    │
    ├─ valibot (パラメータバリデーション)
    │
    ├─ notFound() [next/navigation] (失敗時)
    │
    └─ redirect() [next/navigation] (成功時)
           │
           └─ /projects/[projectId]/ref/main
```

### データフロー図

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

/projects/[id]      ───▶ page.tsx                     ───▶ リダイレクト
     │                      │
     │                      ├─ パラメータ取得
     │                      │
     │                      └─ Valibotバリデーション
     │                             │
     │                      ┌──────┴──────┐
     │                      │             │
     │                   成功          失敗
     │                      │             │
     │                      ▼             ▼
     │               redirect()      notFound()
     │                      │             │
     │                      ▼             ▼
     │         /projects/[id]/ref/main  404ページ
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `frontend/apps/app/app/projects/[projectId]/page.tsx` | ソース | プロジェクト詳細ページ（リダイレクト） |
| types.ts | `frontend/apps/app/app/types.ts` | ソース | PageProps型定義 |
