# 画面設計書 39-メンテナンス画面

## 概要

システムメンテナンス中にユーザーに表示される情報画面。サービスが一時的に利用できないことを通知し、復旧を待つようメッセージを表示する。

### 本画面の処理概要

**業務上の目的・背景**：サービスのメンテナンスやシステム更新時に、ユーザーに適切な情報を提供する必要がある。本画面は、メンテナンス中であることをユーザーに伝え、サービス復旧を待つように案内するためのシンプルな情報ページである。これにより、ユーザーはサービス停止の理由を理解し、不安なく復旧を待つことができる。

**画面へのアクセス方法**：システムメンテナンス時に、他の全てのページからこの画面にリダイレクトされるか、直接 `/maintenance` にアクセスして表示される。

**主要な操作・処理内容**：
1. メンテナンスメッセージの表示：「We'll be back.」というタイトルと説明文を表示
2. 静的な情報提供のみで、ユーザー操作は不要

**画面遷移**：
- 前画面：任意のページ（メンテナンス中はここにリダイレクト）
- 後処理：メンテナンス終了後、通常のサービスページにアクセス可能

**権限による表示制御**：
- 認証状態に関わらず全てのユーザーに表示される
- メンテナンス時は全ての機能がこの画面にリダイレクトされる可能性がある

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 100 | テレメトリ | 補助機能 | システムメンテナンス中の状態表示 |

## 画面種別

情報表示

## URL/ルーティング

`/maintenance`

## 入出力項目

本画面にはフォーム入力はない。

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| タイトル | string | "We'll be back." |
| 説明文1 | string | "We're busy updating the Giselle." |
| 説明文2 | string | "Please check back soon." |

## イベント仕様

本画面にはインタラクティブなイベントはない。静的なHTML/CSSのみで構成される。

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

本画面ではデータベース更新は行わない。

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|----------|---------|
| 情報 | We'll be back. | 常に表示（タイトル） |
| 情報 | We're busy updating the Giselle. Please check back soon. | 常に表示（説明文） |

## 例外処理

本画面には例外処理は存在しない。静的なページとして常に表示される。

## 備考

- Server Component として実装されている（"use client" ディレクティブなし）
- 完全に静的なページで、クライアントサイドのJavaScriptは不要
- デザインはダークテーマ（bg-black-900, text-white-850）
- コメントアウトされた「Maintenance in progress」ボタンがある（将来的な拡張の可能性）
- フォントには `font-accent` が使用されている

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | page.tsx | `apps/studio.giselles.ai/app/maintenance/page.tsx` | 静的なServer Component としての実装 |

**主要処理フロー**:
1. **行1**: 無名関数としてエクスポート
2. **行2-16**: JSXによる静的なUI表示
3. **行5-6**: タイトルの表示
4. **行7-10**: 説明文の表示
5. **行12-14**: コメントアウトされたボタン（将来拡張用）

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

```
MaintenancePage (page.tsx)
    │
    └─ return JSX ─────────────────────────────────────▶ 静的HTML表示
```

### データフロー図

```
[トリガー]                      [処理]                              [出力]

メンテナンス                    ┌─────────────────────┐
モード有効化 ───────────────▶   │ リダイレクト         │ ─────────▶ /maintenance
                                │ または直接アクセス   │
                                └─────────────────────┘
                                        │
                                        ▼
                                ┌─────────────────────┐
                                │ MaintenancePage     │ ─────────▶ 静的HTML表示
                                └─────────────────────┘
                                        │
                                        ▼
                                ┌─────────────────────┐
                                │ "We'll be back."    │
                                │ メッセージ表示      │
                                └─────────────────────┘
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `apps/studio.giselles.ai/app/maintenance/page.tsx` | ソース | ページコンポーネント |
