-
-
今日の受付
-
- {summary.totalCheckedIn}
- 人
-
-
-
-
滞在中
-
- {summary.currentlyPresent}
- 人
-
-
-
-
退室済み
-
- {summary.checkedOut}
- 人
-
+
+
+
+ 人
+
+ }
+ />
+
+ 0} />
+ 滞在中
+
+ }
+ value={
+ <>
+
+ 人
+
+ }
+ />
+
+
+ 人
+
+ }
+ />
-
- {lastResult && (
-
-
- チェックアウトしました
-
- {lastResult.checkedOutCount}人を
- {formatJapaneseDateTime(lastResult.checkedOutAt)}にチェックアウトしました。
-
-
- )}
+ {lastResult && (
+
+
+ チェックアウトしました
+
+ {lastResult.checkedOutCount}人を
+ {formatJapaneseDateTime(lastResult.checkedOutAt)}にチェックアウトしました。
+
+
+ )}
- {error && (
-
-
- 処理できませんでした
- {error}
-
- )}
+ {error && (
+
+
+ 処理できませんでした
+ {error}
+
+ )}
-
-
setQuery(e.target.value)}
- placeholder="ID・ニックネーム・氏名・学年で検索"
- className="h-14 rounded-lg bg-white px-5 text-lg"
- />
-
-
-
void checkoutParticipants(selectedPresentIds)}
+
+
setQuery(e.target.value)}
+ placeholder="ID・ニックネーム・氏名・学年で検索"
+ className="h-14 rounded-lg bg-white px-5 text-lg"
/>
+
+
+ void checkoutParticipants(selectedPresentIds)}
+ />
+
-
-
+
+
+
-
-
- {filteredSessions.length === 0 ? (
-
-
-
+
+
+
+ {filteredSessions.length === 0 ? (
+
+
+
+
+
+ 表示できる参加者はいません
+
- 表示できる参加者はいません
-
-
- ) : (
-
-
-
-
-
- toggleFilteredPresent(checked === true)}
- className="size-6 rounded-md"
- />
-
- 参加者
- 状態
- 受付時刻
- 滞在時間
- 操作
-
-
-
- {filteredSessions.map((session) => {
- const stayDurationMinutes = getSessionStayDurationMinutes(session, nowMs);
- return (
-
-
- {session.isPresent ? (
-
- toggleParticipant(session.participantId, checked === true)
- }
- className="size-6 rounded-md"
- />
- ) : null}
-
-
-
-
- {session.nickname}
-
-
- {session.fullName}
-
-
- ID {session.participantId}
- /
- {session.grade}
-
-
-
-
-
-
- {session.isPresent ? '滞在中' : '退室済み'}
-
- {session.term ? (
-
+ ) : (
+
+
+
+
+
+ toggleFilteredPresent(checked === true)}
+ className="size-6 rounded-md"
+ />
+
+ 参加者
+ 状態
+ 受付時刻
+ 滞在時間
+ 操作
+
+
+
+ {filteredSessions.map((session, index) => {
+ const stayDurationMinutes = getSessionStayDurationMinutes(session, nowMs);
+ return (
+
+
+ {session.isPresent ? (
+
+ toggleParticipant(session.participantId, checked === true)
+ }
+ className="size-6 rounded-md"
+ />
) : null}
- {!session.counted && }
-
-
-
- {formatJapaneseDateTimeWithYear(session.checkedInAt)}
-
-
- {session.isPresent
- ? `${formatDuration(stayDurationMinutes)} 経過`
- : formatDuration(stayDurationMinutes)}
-
-
-
-
-
- );
- })}
-
-
-
- )}
-
-
+
+
+
+
+ {session.nickname}
+
+
+ {session.fullName}
+
+
+ ID {session.participantId}
+ /
+ {session.grade}
+
+
+
+
+
+
+ {session.isPresent ? '滞在中' : '退室済み'}
+
+ {session.term ? (
+
+ ) : null}
+ {!session.counted && }
+
+
+
+ {formatJapaneseDateTimeWithYear(session.checkedInAt)}
+
+
+ {session.isPresent
+ ? `${formatDuration(stayDurationMinutes)} 経過`
+ : formatDuration(stayDurationMinutes)}
+
+
+
+
+
+ );
+ })}
+
+
+
+ )}
+
+
+
+
+
+
ようこそ
+
+ うけつけシステムにサインインしてください
+
+
+
+ 許可リストに登録されたメンターのみ利用できます
+
+
+
+
+
);
}
diff --git a/apps/checkin/src/app/manual/page.tsx b/apps/checkin/src/app/manual/page.tsx
index 06781a9..b78c74e 100644
--- a/apps/checkin/src/app/manual/page.tsx
+++ b/apps/checkin/src/app/manual/page.tsx
@@ -3,7 +3,6 @@
import {
IconAlertCircle,
IconArrowRight,
- IconBug,
IconChevronRight,
IconKeyboard,
IconSearch,
@@ -18,73 +17,45 @@ import { Input } from '@tecnova/ui/components/input';
import { Skeleton } from '@tecnova/ui/components/skeleton';
import { apiFetch, readErrorMessage } from '@tecnova/ui/lib/api-client';
import { cn } from '@tecnova/ui/lib/utils';
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
import { useRouter } from 'next/navigation';
-import { type FormEvent, type ReactNode, useEffect, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
+import { PageShell } from '@/components/page-shell';
import { PanelHeader } from '@/components/panel-header';
+import { SegmentedControl } from '@/components/segmented-control';
+import { listItemTransition } from '@/lib/motion';
import { PARTICIPANT_ID_PATTERN, participantProfilePath } from '@/lib/participant-id';
type Mode = 'id' | 'name';
export default function ManualPage() {
const [mode, setMode] = useState('id');
-
+ const prefersReduced = useReducedMotion();
return (
-
+
-
- {mode === 'id' ?
:
}
+
},
+ { value: 'name', label: '名前で探す', icon:
},
+ ]}
+ />
+
+
+ {mode === 'id' ? : }
+
+
- onChange('id')}
- icon={}
- label="IDで入力"
- />
- onChange('name')}
- icon={}
- label="名前で探す"
- />
-
- );
-}
-
-function ToggleButton({
- active,
- onClick,
- icon,
- label,
-}: {
- active: boolean;
- onClick: () => void;
- icon: ReactNode;
- label: string;
-}) {
- return (
-
+
);
}
@@ -103,7 +74,11 @@ function IdEntryPanel() {
return (
diff --git a/apps/checkin/src/app/page.tsx b/apps/checkin/src/app/page.tsx
index f080874..0407721 100644
--- a/apps/checkin/src/app/page.tsx
+++ b/apps/checkin/src/app/page.tsx
@@ -2,10 +2,11 @@
import {
IconArrowRight,
- IconBug,
IconCamera,
IconCameraRotate,
+ IconCircleCheck,
IconClipboardCheck,
+ IconKeyboard,
IconQrcode,
IconRefresh,
IconUserPlus,
@@ -13,13 +14,18 @@ import {
import { Button } from '@tecnova/ui/components/button';
import { Card, CardContent, CardDescription } from '@tecnova/ui/components/card';
import { BrowserMultiFormatReader, type IScannerControls } from '@zxing/browser';
+import { motion, useReducedMotion } from 'motion/react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
-import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { type ReactNode, useCallback, useEffect, useRef, useState, ViewTransition } from 'react';
+import { PageShell } from '@/components/page-shell';
import { PanelHeader, type PanelTone } from '@/components/panel-header';
+import { Reveal } from '@/components/reveal';
+import { ScanReticle } from '@/components/scan-reticle';
import { PARTICIPANT_ID_PATTERN, participantProfilePath } from '@/lib/participant-id';
function ActionPanel({
+ index,
title,
description,
icon,
@@ -28,6 +34,7 @@ function ActionPanel({
action,
buttonVariant = 'default',
}: {
+ index: number;
title: string;
description: string;
icon: ReactNode;
@@ -37,26 +44,29 @@ function ActionPanel({
buttonVariant?: 'default' | 'outline';
}) {
return (
-
-
-
-
- {description}
-
-
-
-
-
+
+
+
+
+
+ {description}
+
+
+
+
+
+
);
}
export default function Home() {
const router = useRouter();
+ const prefersReduced = useReducedMotion();
const [cameraError, setCameraError] = useState
(null);
const [scannerAttempt, setScannerAttempt] = useState(0);
const [videoDevices, setVideoDevices] = useState([]);
@@ -65,6 +75,7 @@ export default function Home() {
const videoRef = useRef(null);
const controlsRef = useRef(null);
const navigatingRef = useRef(false);
+ const navTimerRef = useRef(null);
const refreshVideoDevices = useCallback(async () => {
if (!navigator.mediaDevices?.enumerateDevices) return [];
@@ -98,7 +109,9 @@ export default function Home() {
navigatingRef.current = true;
controlsRef.current?.stop();
setNavigatingId(value);
- router.push(participantProfilePath(value));
+ navTimerRef.current = window.setTimeout(() => {
+ router.push(participantProfilePath(value));
+ }, 450);
})
.then((controls) => {
if (cancelled) {
@@ -125,6 +138,16 @@ export default function Home() {
};
}, [navigatingId, refreshVideoDevices, router, scannerAttempt, selectedDeviceId]);
+ // ナビゲーション遅延タイマーはアンマウント時のみ掃除する。
+ // スキャナ effect の cleanup（navigatingId 変更で毎回走る）で消すと遷移がキャンセルされるため分離する。
+ useEffect(() => {
+ return () => {
+ if (navTimerRef.current) {
+ window.clearTimeout(navTimerRef.current);
+ }
+ };
+ }, []);
+
const switchCamera = async () => {
const devices = videoDevices.length > 0 ? videoDevices : await refreshVideoDevices();
if (devices.length <= 1) {
@@ -140,63 +163,88 @@ export default function Home() {
};
return (
-
+
-
- }
- title="QRコードをかざしてね"
- tone="sky"
- />
-
-
-
- {navigatingId && (
-
-
-
プロフィールを開いています
-
- {navigatingId}
-
-
- )}
- {cameraError && (
-
-
- カメラを起動できませんでした
-
- )}
-
-
-
-
-
-
+
+
+ }
+ title="QRコードをかざしてね"
+ tone="sky"
+ />
+
+
+
+ {!navigatingId && !cameraError &&
}
+ {navigatingId && (
+
+
+
+
+
+
+ プロフィールを開いています
+
+ {navigatingId}
+
+
+
+
+ )}
+ {cameraError && (
+
+
+ カメラを起動できませんでした
+
+ )}
+
+
+
+
+
+
+
}
@@ -204,8 +252,8 @@ export default function Home() {
href="/first-time"
action="初回登録へ"
/>
-
}
@@ -213,11 +261,11 @@ export default function Home() {
href="/history"
action="履歴を見る"
/>
-
}
+ icon={
}
tone="slate"
href="/manual"
action="入力へ"
@@ -226,6 +274,6 @@ export default function Home() {
-
+
);
}
diff --git a/apps/checkin/src/app/reception/participants/[id]/page.tsx b/apps/checkin/src/app/reception/participants/[id]/page.tsx
index 74457b7..9682c81 100644
--- a/apps/checkin/src/app/reception/participants/[id]/page.tsx
+++ b/apps/checkin/src/app/reception/participants/[id]/page.tsx
@@ -38,7 +38,7 @@ import { apiFetch, readErrorMessage } from '@tecnova/ui/lib/api-client';
import { motion, useReducedMotion } from 'motion/react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, ViewTransition } from 'react';
import { AnimatedNumber } from '@/components/animated-number';
import { PanelHeader } from '@/components/panel-header';
import { ResultSummaryCard } from '@/components/result-summary-card';
@@ -350,27 +350,20 @@ export default function ReceptionParticipantPage() {
{ label: '滞在時間', value: formatDuration(data.stayDurationMinutes) },
];
return (
-
- : }
- rows={resultRows}
- footer={
-
- }
- />
-
+ : }
+ rows={resultRows}
+ footer={
+
+ }
+ />
);
}
@@ -380,122 +373,126 @@ export default function ReceptionParticipantPage() {
-
-
-
-
-
-
-
-
-
-
- {profile.participant.nickname}
-
-
- {profile.participant.fullName}
-
-
-
- ID {profile.participant.id}
-
-
- {profile.participant.grade}
-
+
+
+
+
+
+
+
+
+
+
+
+ {profile.participant.nickname}
+
+
+ {profile.participant.fullName}
+
+
+
+ ID {profile.participant.id}
+
+
+ {profile.participant.grade}
+
+
+
+ {profile.current.isPresent ? (
+
+ ) : (
+
+ )}
+ {profile.current.isPresent ? 'チェックイン中' : '未チェックイン'}
+
- {profile.current.isPresent ? (
-
- ) : (
-
- )}
- {profile.current.isPresent ? 'チェックイン中' : '未チェックイン'}
-
-
-
-
-
- 今日の入室
-
-
- {profile.current.checkedInAt
- ? formatJapaneseDateTime(profile.current.checkedInAt)
- : 'まだありません'}
-
-
-
-
-
-
-
- 参加回数
+
+
+
+ 今日の入室
-
-
- 回
+
+ {profile.current.checkedInAt
+ ? formatJapaneseDateTime(profile.current.checkedInAt)
+ : 'まだありません'}
-
- {participationBreakdown.map((item) => (
-
-
-
-
- {item.label}
-
- -
- {item.value}
-
-
- ))}
-
- {stats.map((item) => (
-
-
-
- {item.label}
+
+
+
+
+
+ 参加回数
-
- {item.value}
+
+
+ 回
+
+ {participationBreakdown.map((item) => (
+
+
-
+
+ {item.label}
+
+ -
+ {item.value}
+
+
+ ))}
+
- ))}
-
-
-
-
+ {stats.map((item) => (
+
+
+
+ {item.label}
+
+
+ {item.value}
+
+
+ ))}
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+ {me.mentor.name.slice(0, 1)}
+
+
+
{me.mentor.name}
+
+ {me.mentor.role}
+
+ {me.user.email}
+
+
+
-
-
- {error && (
-
- ログアウトエラー
- {error}
-
- )}
-
-
-
-
- 項目
- 内容
-
-
-
- {rows.map((row) => (
-
-
- {row.label}
-
-
- {row.value}
-
+
+
+ {error && (
+
+ ログアウトエラー
+ {error}
+
+ )}
+
-
-
-
-
-
-
-
-
-
-
- ログアウトしますか
-
- 受付システムを使うには、もう一度 Google ログインが必要です。
-
-
-
-
- キャンセル
-
-
+
+ {rows.map((row) => (
+
+
+ {row.label}
+
+
+ {row.value}
+
+
+ ))}
+
+
+
+
+
+
-
-
+
+ ログアウト
+
+
+
+
+
+
+
+ ログアウトしますか
+
+ 受付システムを使うには、もう一度 Google ログインが必要です。
+
+
+
+
+ キャンセル
+
+ void signOut()}
+ >
+ {isSigningOut ? 'ログアウト中' : 'ログアウトする'}
+
+
+
+
+
+
-
-
-
-
-
-
- {rows.map((row) => (
-
-
- {row.label}
-
-
- {row.value}
-
-
- ))}
-
-
-
{note}
: null}
-
- {footer}
-
+
+
+
+ {icon}
+
+ }
+ title={title}
+ tone={tone}
+ />
+
+
+
+
+ {rows.map((row, index) => (
+
+
+ {row.label}
+
+
+ {row.value}
+
+
+ ))}
+
+
+
+
+ {CORNER_CLASSES.map((pos) => (
+
+ ))}
+
+
+ {options.map((option) => {
+ const active = option.value === value;
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/apps/checkin/src/components/stat-tile.tsx b/apps/checkin/src/components/stat-tile.tsx
new file mode 100644
index 0000000..aa8319e
--- /dev/null
+++ b/apps/checkin/src/components/stat-tile.tsx
@@ -0,0 +1,48 @@
+import { cn } from '@tecnova/ui/lib/utils';
+import type { ReactNode } from 'react';
+
+export type StatTone = 'neutral' | 'emerald';
+
+// 集計値タイル。value は ReactNode（AnimatedNumber + 単位サフィックス等）を想定。
+export function StatTile({
+ label,
+ value,
+ icon,
+ tone = 'neutral',
+ className,
+}: {
+ label: ReactNode;
+ value: ReactNode;
+ icon?: ReactNode;
+ tone?: StatTone;
+ className?: string;
+}) {
+ const isEmerald = tone === 'emerald';
+ return (
+
+
+ {icon}
+ {label}
+
+
+ {value}
+
+
+
+ {icon}
+ {label}
+
+
+ {value}
+
+
+
+ {CORNER_CLASSES.map((pos) => (
+
+ ))}
+ {!prefersReduced && (
+
+ )}
+
+
`）の **各 `ActionPanel` を個別に `Reveal` で包む**（index=1,2,3）と段階的に出る。`ActionPanel` 自身を `Reveal` でラップする形にする：
+
+```tsx
+return (
+
+
+
+
+
+ }
+ title="QRコードをかざしてね"
+ tone="sky"
+ />
+
+
+
+ {!navigatingId && !cameraError &&
}
+ {navigatingId && (
+
+
+
プロフィールを開いています
+
+ {navigatingId}
+
+
+ )}
+ {cameraError && (
+
+
+ カメラを起動できませんでした
+
+ )}
+
+
+
+
+
+
+
+
+
+
}
+ tone="emerald"
+ href="/first-time"
+ action="初回登録へ"
+ />
+
}
+ tone="sky"
+ href="/history"
+ action="履歴を見る"
+ />
+
}
+ tone="slate"
+ href="/manual"
+ action="入力へ"
+ buttonVariant="outline"
+ />
+
+
+);
+```
+
+- [ ] **Step 3: `ActionPanel` に `index` を追加し Reveal で包む**
+
+`ActionPanel` の props 型に `index: number;` を追加し、返り値を `Reveal` でラップ：
+
+```tsx
+function ActionPanel({
+ index,
+ title,
+ description,
+ icon,
+ tone,
+ href,
+ action,
+ buttonVariant = 'default',
+}: {
+ index: number;
+ title: string;
+ description: string;
+ icon: ReactNode;
+ tone: PanelTone;
+ href: string;
+ action: string;
+ buttonVariant?: 'default' | 'outline';
+}) {
+ return (
+
+
+
+
+
+ {description}
+
+
+
+
+
+
+ );
+}
+```
+
+- [ ] **Step 4: 型チェック + lint**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/page.tsx`
+Expected: PASS。`IconBug` の未使用警告が消えていること。
+
+- [ ] **Step 5: 目視確認**
+
+Run: `pnpm --filter checkin dev` → `http://localhost:3000/`
+確認: グラデーション地、QR カード→アクションカードのスタッガー入場、走査線アニメ、`IconKeyboard` 表示。OS の reduced-motion ON で走査線停止・即表示。
+
+- [ ] **Step 6: commit**
+
+```bash
+git add apps/checkin/src/app/page.tsx
+git commit -m "feat(checkin): elevate home screen with motion and scan reticle"
+```
+
+### 🚦 承認ゲート
+
+> **STOP.** Home をユーザーが実機で確認し、見た目・モーション感・走査線の強さを承認するまで Phase 3 に進まない。
+> フィードバックがあれば該当プリミティブ／Home を調整し、確定した語彙を Phase 3 の基準とする。
+
+---
+
+## Phase 3 — 残り 6 画面への展開
+
+> 各画面共通の「基本変換」: ①`
` を `PageShell`（中央寄せ画面は `className` で `items-center justify-center` を付与）に置換 ②ルート直下のカード／セクションを `Reveal`（index でスタッガー）で包む ③主要送信ボタンを `motion.div`+`whileTap={tapScale}` でラップ（プロフィール画面と同じ手法）。Loading/Error 画面も地をグラデーションへ統一（Error は `bg-rose-50` 維持）。
+> 各タスクは基本変換 + そのシグネチャー実装 + 検証 + commit。
+
+### Task 8: Guideline（ショーケース）
+
+**Files:**
+- Modify: `apps/checkin/src/app/guideline/page.tsx`
+
+- [ ] **Step 1: 基本変換**
+
+`GuidelineSlideView` / `LoadingScreen` / `ActivatingScreen` の `` を `PageShell`（`p-3 sm:p-4` を保つため `className="p-3 sm:p-4"` を渡す）に置換。`ErrorScreen` は `bg-rose-50` のまま。
+
+- [ ] **Step 2: シグネチャー① 方向付きスライド遷移**
+
+`slideIndex` の増減方向を保持する state を追加し、スライド本体（`` のビジュアル+本文）を `AnimatePresence` + `motion.div` で包む。`useReducedMotion` 時は x 移動を 0 にしてクロスフェードのみ。
+
+`GuidelinePageContent` に方向 state を追加：
+
+```tsx
+const [direction, setDirection] = useState(1);
+const goPrev = () => {
+ setDirection(-1);
+ setSlideIndex((index) => Math.max(0, index - 1));
+};
+const goNext = () => {
+ setDirection(1);
+ setSlideIndex((index) => Math.min(GUIDELINE_SLIDES.length - 1, index + 1));
+};
+```
+
+`GuidelineSlideView` の props を `onPrev: goPrev` / `onNext: goNext` に差し替え、`current`（=`slideIndex+1`）と `direction` を渡す。スライド本体を次でラップ（`import { AnimatePresence, motion, useReducedMotion } from 'motion/react';`）：
+
+```tsx
+const prefersReduced = useReducedMotion();
+const offset = prefersReduced ? 0 : 40;
+// ...
+
+
+
+ {/* 既存のビジュアルパネル + 本文パネルをそのまま内側へ */}
+
+
+
` を `motion.div` 化し幅をアニメート：
+
+```tsx
+
+
+
+```
+
+- [ ] **Step 4: シグネチャー③ アイコンのポップ入場 + キーボード操作**
+
+ビジュアルパネルのアイコン円を `motion.div` にし、`popInitial`/`popAnimate`/`popTransition(0)` を適用（`@/lib/motion` から import、reduced 時は `initial={false}`）。
+`GuidelineSlideView` に矢印キー操作を追加：
+
+```tsx
+useEffect(() => {
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === 'ArrowRight' && !isLast) onNext();
+ if (e.key === 'ArrowLeft' && current > 1) onPrev();
+ };
+ window.addEventListener('keydown', onKey);
+ return () => window.removeEventListener('keydown', onKey);
+}, [current, isLast, onNext, onPrev]);
+```
+
+- [ ] **Step 5: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/guideline/page.tsx`
+目視: `/guideline?preRegistrationId=
` で 前/次 のスライド方向、進捗バーの伸び、アイコンのポップ、←/→ キー、reduced-motion 即時化。
+
+- [ ] **Step 6: commit**
+
+```bash
+git add apps/checkin/src/app/guideline/page.tsx
+git commit -m "feat(checkin): elevate guideline carousel with slide transitions"
+```
+
+### Task 9: Login（ウェルカムヒーロー）
+
+**Files:**
+- Modify: `apps/checkin/src/app/login/page.tsx`
+
+- [ ] **Step 1: 基本変換 + ヒーロー化**
+
+`` を `PageShell`（`className="items-center justify-center"`）へ。カードを `Reveal` で包む。カード上部に TECNOVA ロゴ + やさしい見出しのヒーローを追加（装飾背景なし、フラット）。Google ボタンを `motion.div`+`whileTap={tapScale}` で包む。
+
+```tsx
+import { IconBrandGoogleFilled } from '@tabler/icons-react';
+import { Alert, AlertDescription, AlertTitle } from '@tecnova/ui/components/alert';
+import { Button } from '@tecnova/ui/components/button';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@tecnova/ui/components/card';
+import { motion, useReducedMotion } from 'motion/react';
+import Image from 'next/image';
+import { useState } from 'react';
+import { PageShell } from '@/components/page-shell';
+import { Reveal } from '@/components/reveal';
+import { tapScale } from '@/lib/motion';
+import { authClient } from '@/lib/auth-client';
+// signIn は既存実装のまま
+
+const prefersReduced = useReducedMotion();
+return (
+
+
+
+
+
+
+
ようこそ
+
+ うけつけシステムにサインインしてください
+
+
+ 許可リストに登録されたメンターのみ利用できます
+
+
+
+
+
+);
+```
+
+> 注: `useReducedMotion`/`prefersReduced` は `LoginPage` 関数本体の先頭で取得する。
+
+- [ ] **Step 2: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/login/page.tsx`
+目視: `/login` でロゴ + 見出し + カード入場、ボタン押下感。reduced-motion 即時化。
+
+- [ ] **Step 3: commit**
+
+```bash
+git add apps/checkin/src/app/login/page.tsx
+git commit -m "feat(checkin): add welcoming hero to login screen"
+```
+
+### Task 10: Manual（モード切替の作り込み）
+
+**Files:**
+- Create: `apps/checkin/src/components/segmented-control.tsx`
+- Modify: `apps/checkin/src/app/manual/page.tsx`
+
+- [ ] **Step 1: SegmentedControl を作成**
+
+```tsx
+'use client';
+
+import { cn } from '@tecnova/ui/lib/utils';
+import { motion, useReducedMotion } from 'motion/react';
+import type { ReactNode } from 'react';
+
+type SegmentedOption = { value: T; label: string; icon?: ReactNode };
+
+// 2 値以上のモード切替。選択中インジケータが layoutId でスライドする。reduced 時は即切替。
+export function SegmentedControl({
+ options,
+ value,
+ onChange,
+ ariaLabel,
+}: {
+ options: SegmentedOption[];
+ value: T;
+ onChange: (value: T) => void;
+ ariaLabel: string;
+}) {
+ const prefersReduced = useReducedMotion();
+ return (
+
+ {options.map((option) => {
+ const active = option.value === value;
+ return (
+
+ );
+ })}
+
+ );
+}
+```
+
+- [ ] **Step 2: Manual の基本変換 + ModeToggle 置換**
+
+`` を `PageShell` に。`ModeToggle`/`ToggleButton` を削除し `SegmentedControl` を使用。`IdEntryPanel`/`NameSearchPanel` の切替を `AnimatePresence`+`motion.div`（`key={mode}`、フェード+わずかな y）で包む。`IdEntryPanel` の `IconBug` を `IconKeyboard` に変更。
+
+`ManualPage`:
+
+```tsx
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { IconKeyboard, IconSearch /* ほか既存 */ } from '@tabler/icons-react';
+import { PageShell } from '@/components/page-shell';
+import { SegmentedControl } from '@/components/segmented-control';
+
+export default function ManualPage() {
+ const [mode, setMode] = useState('id');
+ const prefersReduced = useReducedMotion();
+ return (
+
+
+
},
+ { value: 'name', label: '名前で探す', icon:
},
+ ]}
+ />
+
+
+ {mode === 'id' ? : }
+
+
+
` 内 `- ` を `motion.li`（`listItemTransition(index)`、reduced 時 `initial={false}`）に変更。`import { listItemTransition } from '@/lib/motion';`。
+
+```tsx
+{state.results.map((participant, index) => (
+
+ {/* 既存 ResultRow */}
+
+))}
+```
+
+> `SearchResults` 内で `const prefersReduced = useReducedMotion();` を先頭に追加。
+
+- [ ] **Step 4: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/manual/page.tsx apps/checkin/src/components/segmented-control.tsx`
+目視: `/manual` でトグルのスライド、パネルのクロスフェード、検索結果のスタッガー、`IconKeyboard` 表示。reduced-motion 即時化。
+
+- [ ] **Step 5: commit**
+
+```bash
+git add apps/checkin/src/app/manual/page.tsx apps/checkin/src/components/segmented-control.tsx
+git commit -m "feat(checkin): add sliding segmented control and result stagger to manual"
+```
+
+### Task 11: History（生きているダッシュボード）
+
+**Files:**
+- Modify: `apps/checkin/src/app/history/page.tsx`
+
+- [ ] **Step 1: 基本変換**
+
+``（本体・LoadingScreen）を `PageShell` に。`ErrorScreen` は `bg-rose-50` 維持。本体の 2 枚のカードを `Reveal`（index 0,1）で包む。
+
+- [ ] **Step 2: シグネチャー サマリ + LiveDot + StatTile**
+
+サマリ 3 枚を `StatTile` に置換し数値を `AnimatedNumber` 化、「滞在中」は emerald トーン + `LiveDot active`。
+
+```tsx
+import { AnimatedNumber } from '@/components/animated-number';
+import { LiveDot } from '@/components/live-dot';
+import { StatTile } from '@/components/stat-tile';
+
+
+
人}
+ />
+ 0} />滞在中}
+ value={<>人}
+ />
+ 人}
+ />
+` レンダリングのため `asChild` 不可。`motion.tr` を直接使い、`TableCell` は維持）。reduced 時 `initial={false}`、`listItemTransition(index)`。
+
+```tsx
+{filteredSessions.map((session, index) => {
+ const stayDurationMinutes = getSessionStayDurationMinutes(session, nowMs);
+ return (
+
+ {/* 既存の TableCell 群をそのまま */}
+
+ );
+})}
+```
+
+> `HistoryPage` 先頭で `const prefersReduced = useReducedMotion();` を取得。`motion`/`useReducedMotion`/`listItemTransition` を import。`motion.tr` の className はテーブル行のスタイルを `@tecnova/ui` の `TableRow` 実装に合わせる（`node_modules/@tecnova/ui` または生成元の table.tsx を確認して border/hover クラスを移植）。
+
+- [ ] **Step 4: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/history/page.tsx`
+目視: `/history` でサマリのカウントアップ、滞在中の脈動ドット、行のスタッガー、空状態。reduced-motion 即時化。
+
+- [ ] **Step 5: commit**
+
+```bash
+git add apps/checkin/src/app/history/page.tsx
+git commit -m "feat(checkin): animate history summary and rows"
+```
+
+### Task 12: First-time（ステップ + 候補のスタッガー）
+
+**Files:**
+- Modify: `apps/checkin/src/app/first-time/page.tsx`
+
+- [ ] **Step 1: 基本変換**
+
+本体・LoadingScreen の `` を `PageShell` に。`ErrorScreen` は `bg-rose-50` 維持。メインカードを `Reveal` で包む。
+
+- [ ] **Step 2: シグネチャー 件数バッジ + ステップ + 候補グリッド**
+
+未登録件数を `AnimatedNumber` 化：
+
+```tsx
+
+ 未登録 人
+
+```
+
+`RegistrationSteps` の各 `- ` と、候補 `
` の各 `- ` を `motion.li`（`listItemTransition(index)`、reduced 時 `initial={false}`）化。`FirstTimePage`/`RegistrationSteps` 先頭で `useReducedMotion()` 取得、`@/lib/motion` と `@/components/animated-number` を import。
+
+- [ ] **Step 3: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/first-time/page.tsx`
+目視: `/first-time` で件数カウントアップ、ステップ/候補のスタッガー、ダイアログ動作維持。reduced-motion 即時化。
+
+- [ ] **Step 4: commit**
+
+```bash
+git add apps/checkin/src/app/first-time/page.tsx
+git commit -m "feat(checkin): stagger first-time steps and candidate grid"
+```
+
+### Task 13: Settings（メンター ID カード）
+
+**Files:**
+- Modify: `apps/checkin/src/app/settings/page.tsx`
+
+- [ ] **Step 1: 基本変換 + ヘッダのアイデンティティカード化**
+
+`` を `PageShell` に。カードを `Reveal` で包む。`CardHeader` の素の歯車を、メンターのアバター（頭文字 or `IconUser`）+ 名前 + ロールバッジのヘッダに差し替え：
+
+```tsx
+
+
+
+ {me.mentor.name.slice(0, 1)}
+
+
+
{me.mentor.name}
+
+ {me.mentor.role}
+ {me.user.email}
+
+
+
+ 許可リストに登録されたアカウントのみ利用できます
+
+
+
+
+ );
+}
+```
+
+- [ ] **Step 4: layout を AppShell でラップ**
+
+Modify `apps/signage/src/app/layout.tsx` — import を追加し body を差し替え：
+
+```tsx
+import { AppShell } from '@/components/app-shell';
+```
+
+```tsx
+
+ {children}
+
+```
+
+- [ ] **Step 5: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 6: 認証ゲートを手動確認**
+
+Run: `pnpm --filter signage dev`（api も起動しておく）
+確認: 未ログインで `http://localhost:3002` → `/login` へ遷移。共有（or 任意の許可リスト）アカウントでログイン → `/` に戻り「signage」プレースホルダが表示。
+Expected: 401→/login、ログイン後に本体表示。
+
+- [ ] **Step 7: コミット**
+
+```bash
+git add apps/signage/src
+git commit -m "feat(signage): add mentor-whitelist auth (auth-client, MeProvider shell, login)"
+```
+
+---
+
+## Task 5: 時刻ソースとユーティリティ（`now` / `use-now` / `time`）
+
+**Files:**
+- Create: `apps/signage/src/lib/now.ts`
+- Create: `apps/signage/src/lib/use-now.ts`
+- Create: `apps/signage/src/lib/time.ts`
+
+- [ ] **Step 1: `now.ts`（`?now=` 上書き対応の時刻ソース）**
+
+Create `apps/signage/src/lib/now.ts`:
+
+```ts
+// 端末のローカル時計を返す。?now=ISO クエリがある場合のみ、その時刻を起点に
+// 実時間の経過分だけ進めた擬似時刻を返す（タイムベース挙動の手動検証用）。
+let anchor: { base: number; mountedAt: number } | null | undefined;
+
+const readAnchor = (): { base: number; mountedAt: number } | null => {
+ if (typeof window === 'undefined') return null;
+ const raw = new URLSearchParams(window.location.search).get('now');
+ if (!raw) return null;
+ const base = new Date(raw).getTime();
+ if (Number.isNaN(base)) return null;
+ return { base, mountedAt: Date.now() };
+};
+
+export const getNow = (): Date => {
+ if (anchor === undefined) anchor = readAnchor();
+ if (anchor === null) return new Date();
+ return new Date(anchor.base + (Date.now() - anchor.mountedAt));
+};
+```
+
+- [ ] **Step 2: `use-now.ts`（毎秒 re-render 用フック）**
+
+Create `apps/signage/src/lib/use-now.ts`:
+
+```ts
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getNow } from './now';
+
+// 表示更新用に一定間隔で現在時刻を返す（チャイム発火は use-chime-scheduler が別途精密に行う）。
+export const useNow = (intervalMs = 1000): Date => {
+ const [now, setNow] = useState(() => getNow());
+ useEffect(() => {
+ const id = window.setInterval(() => setNow(getNow()), intervalMs);
+ return () => window.clearInterval(id);
+ }, [intervalMs]);
+ return now;
+};
+```
+
+- [ ] **Step 3: `time.ts`（JST 時刻・カウントダウン整形）**
+
+Create `apps/signage/src/lib/time.ts`:
+
+```ts
+const jstHmFormatter = new Intl.DateTimeFormat('en-GB', {
+ timeZone: 'Asia/Tokyo',
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: false,
+});
+
+// JST の 'HH:mm'。
+export const jstHm = (date: Date): string => jstHmFormatter.format(date);
+
+// 秒数を 'M:SS' に（休憩カウントダウン用）。負値は 0 扱い。
+export const mmss = (totalSeconds: number): string => {
+ const s = Math.max(0, Math.floor(totalSeconds));
+ const m = Math.floor(s / 60);
+ const sec = s % 60;
+ return `${m}:${String(sec).padStart(2, '0')}`;
+};
+```
+
+- [ ] **Step 4: `use-wake-lock.ts`（スリープ防止・visibility で再取得）**
+
+Create `apps/signage/src/lib/use-wake-lock.ts`:
+
+```ts
+'use client';
+
+import { useEffect } from 'react';
+
+// 画面スリープ防止。document が hidden になると OS が自動解放するため
+// visibilitychange で再取得する。HTTPS（secure context）必須。
+export const useWakeLock = (enabled: boolean): void => {
+ useEffect(() => {
+ if (!enabled || !('wakeLock' in navigator)) return;
+ let lock: WakeLockSentinel | null = null;
+
+ const request = async (): Promise => {
+ try {
+ lock = await navigator.wakeLock.request('screen');
+ } catch {
+ // low battery / hidden などで拒否されうる（ベストエフォート）。
+ }
+ };
+ const onVisible = (): void => {
+ if (document.visibilityState === 'visible') void request();
+ };
+
+ void request();
+ document.addEventListener('visibilitychange', onVisible);
+ return () => {
+ document.removeEventListener('visibilitychange', onVisible);
+ void lock?.release().catch(() => {});
+ };
+ }, [enabled]);
+};
+```
+
+- [ ] **Step 5: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし（`WakeLockSentinel`/`navigator.wakeLock` は lib.dom 由来）。
+
+- [ ] **Step 6: コミット**
+
+```bash
+git add apps/signage/src/lib
+git commit -m "feat(signage): add time utils (now override, useNow, jst/mmss) and wake lock hook"
+```
+
+---
+
+## Task 6: チャイム音（Web Audio 合成）`chimes.ts`
+
+**Files:**
+- Create: `apps/signage/src/lib/chimes.ts`
+
+- [ ] **Step 1: 実装**
+
+Create `apps/signage/src/lib/chimes.ts`:
+
+```ts
+import type { ChimeKind } from '@tecnova/shared/activity-cycle';
+
+// 単一の AudioContext を使い回す（ブラウザは同時 context 数を制限するため）。
+let ctx: AudioContext | null = null;
+
+const getCtx = (): AudioContext => {
+ if (!ctx) ctx = new AudioContext();
+ return ctx;
+};
+
+// 起動タップ内で呼ぶ。自動再生制約を解放する。
+export const resumeAudio = async (): Promise => {
+ const c = getCtx();
+ if (c.state !== 'running') await c.resume();
+};
+
+// suspended に戻っていれば再開（OS スリープ後・タブ復帰時）。
+export const ensureAudioRunning = async (): Promise => {
+ if (ctx && ctx.state !== 'running') await ctx.resume();
+};
+
+const tone = (
+ c: AudioContext,
+ freq: number,
+ startAt: number,
+ dur: number,
+ type: OscillatorType,
+): void => {
+ const osc = c.createOscillator();
+ const gain = c.createGain();
+ osc.type = type;
+ osc.frequency.value = freq;
+ // 指数エンベロープでベル風の余韻（0 には到達できないので 0.0001 へ）。
+ gain.gain.setValueAtTime(0.0001, startAt);
+ gain.gain.exponentialRampToValueAtTime(0.5, startAt + 0.02);
+ gain.gain.exponentialRampToValueAtTime(0.0001, startAt + dur);
+ osc.connect(gain).connect(c.destination);
+ osc.start(startAt);
+ osc.stop(startAt + dur + 0.05);
+};
+
+// 種別ごとに音色・音程を変える。
+const PATTERNS: Record = {
+ resume: { freqs: [784, 988], type: 'sine', dur: 0.7 }, // 上行＝再開
+ break: { freqs: [988, 784], type: 'sine', dur: 0.8 }, // 下行＝休憩（キンコン）
+ 'term-end': { freqs: [880, 587], type: 'triangle', dur: 1.2 }, // 長め＝ターム終了
+};
+
+export const playChime = (kind: ChimeKind): void => {
+ const c = getCtx();
+ if (c.state !== 'running') return; // 解放前は鳴らさない
+ const { freqs, type, dur } = PATTERNS[kind];
+ const t = c.currentTime + 0.02;
+ tone(c, freqs[0], t, dur, type);
+ tone(c, freqs[1], t + 0.45, dur, type);
+};
+```
+
+- [ ] **Step 2: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 3: コミット**
+
+```bash
+git add apps/signage/src/lib/chimes.ts
+git commit -m "feat(signage): synthesize chime tones via Web Audio"
+```
+
+---
+
+## Task 7: チャイムスケジューラ `use-chime-scheduler.ts`
+
+**Files:**
+- Create: `apps/signage/src/lib/use-chime-scheduler.ts`
+
+- [ ] **Step 1: 実装（自己補正 setTimeout ＋ key dedup）**
+
+Create `apps/signage/src/lib/use-chime-scheduler.ts`:
+
+```ts
+'use client';
+
+import { type ChimeEvent, cycleChimeEventsForDay } from '@tecnova/shared/activity-cycle';
+import { useEffect, useRef } from 'react';
+
+interface Args {
+ enabled: boolean; // 音声解放済みか（起動タップ後）
+ isTermActive: (term: ChimeEvent['term']) => boolean; // 稼働判定
+ onChime: (event: ChimeEvent) => void; // 発火時の副作用（playChime 等）
+ getNow: () => Date;
+}
+
+// 壁時計の :00/:50 等の境界でちょうど発火させる。setInterval は使わず、毎 tick
+// Date から次境界までの遅延を再計算する（ドリフトしない）。key で二重発火を防ぐ。
+export const useChimeScheduler = ({ enabled, isTermActive, onChime, getNow }: Args): void => {
+ const isActiveRef = useRef(isTermActive);
+ const onChimeRef = useRef(onChime);
+ const getNowRef = useRef(getNow);
+ isActiveRef.current = isTermActive;
+ onChimeRef.current = onChime;
+ getNowRef.current = getNow;
+
+ useEffect(() => {
+ if (!enabled) return;
+ const fired = new Set();
+ let last = getNowRef.current().getTime();
+ let timer = 0;
+
+ const tick = (): void => {
+ const now = getNowRef.current().getTime();
+ const events = cycleChimeEventsForDay(new Date(now));
+ for (const e of events) {
+ const at = e.at.getTime();
+ if (at > last && at <= now && !fired.has(e.key)) {
+ fired.add(e.key);
+ if (isActiveRef.current(e.term)) onChimeRef.current(e);
+ }
+ }
+ last = now;
+ const nextAt = events
+ .map((e) => e.at.getTime())
+ .filter((t) => t > now)
+ .sort((a, b) => a - b)[0];
+ const delay = nextAt === undefined ? 1000 : Math.min(1000, Math.max(50, nextAt - now));
+ timer = window.setTimeout(tick, delay);
+ };
+
+ const onVisible = (): void => {
+ if (document.visibilityState === 'visible') {
+ window.clearTimeout(timer);
+ tick();
+ }
+ };
+
+ timer = window.setTimeout(tick, 0);
+ document.addEventListener('visibilitychange', onVisible);
+ return () => {
+ window.clearTimeout(timer);
+ document.removeEventListener('visibilitychange', onVisible);
+ };
+ }, [enabled]);
+};
+```
+
+- [ ] **Step 2: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 3: コミット**
+
+```bash
+git add apps/signage/src/lib/use-chime-scheduler.ts
+git commit -m "feat(signage): drift-free chime scheduler with per-boundary dedupe"
+```
+
+---
+
+## Task 8: ライブデータ取得 `use-signage-data.ts`
+
+**Files:**
+- Create: `apps/signage/src/lib/use-signage-data.ts`
+
+- [ ] **Step 1: 実装（`/api/sessions/today` をポーリングしターム別に集計）**
+
+Create `apps/signage/src/lib/use-signage-data.ts`:
+
+```ts
+'use client';
+
+import type { TermId } from '@tecnova/shared/venue-schedule';
+import type { TodaySessionsResponse } from '@tecnova/shared/schemas';
+import { apiJson } from '@tecnova/ui/lib/api-client';
+import { useEffect, useState } from 'react';
+
+export interface SignageData {
+ currentlyPresent: number;
+ totalCheckedIn: number;
+ termCounts: Record;
+}
+
+const EMPTY: SignageData = {
+ currentlyPresent: 0,
+ totalCheckedIn: 0,
+ termCounts: { morning: 0, afternoon: 0, evening: 0 },
+};
+
+const POLL_MS = 20_000;
+
+// 認証付き /api/sessions/today を ~20秒間隔で取得。ターム別 checkedIn は
+// sessions[].term の件数（累計＝ターム終了まで sticky）。失敗時は直近値を保持。
+export const useSignageData = (): SignageData => {
+ const [data, setData] = useState(EMPTY);
+
+ useEffect(() => {
+ let active = true;
+ const load = async (): Promise => {
+ try {
+ const res = await apiJson('/api/sessions/today');
+ if (!active) return;
+ const termCounts: Record = { morning: 0, afternoon: 0, evening: 0 };
+ for (const s of res.sessions) {
+ if (s.term) termCounts[s.term] += 1;
+ }
+ setData({
+ currentlyPresent: res.summary.currentlyPresent,
+ totalCheckedIn: res.summary.totalCheckedIn,
+ termCounts,
+ });
+ } catch {
+ // ネットワーク不達時は直近値を維持（degrade）。
+ }
+ };
+ void load();
+ const id = window.setInterval(() => void load(), POLL_MS);
+ return () => {
+ active = false;
+ window.clearInterval(id);
+ };
+ }, []);
+
+ return data;
+};
+```
+
+- [ ] **Step 2: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし（`TodaySessionsResponse` は `@tecnova/shared/schemas` からエクスポート済み）。
+
+- [ ] **Step 3: コミット**
+
+```bash
+git add apps/signage/src/lib/use-signage-data.ts
+git commit -m "feat(signage): poll /api/sessions/today and derive per-term counts"
+```
+
+---
+
+## Task 9: 動画プレイリスト ＋ Stage（動画レイヤ）
+
+**Files:**
+- Create: `apps/signage/src/config/playlist.ts`
+- Create: `apps/signage/src/components/stage.tsx`
+
+- [ ] **Step 1: プレイリスト設定**
+
+Create `apps/signage/src/config/playlist.ts`:
+
+```ts
+export interface VideoItem {
+ src: string;
+ type?: string;
+}
+
+// 動画はリポジトリに置かず、self-host/CDN の URL を列挙する。差し替えは本ファイル＋再デプロイ。
+// 例（実URLに差し替える）:
+// { src: 'https://cdn.example.com/signage/intro.mp4', type: 'video/mp4' },
+// 空配列のままだと Stage は背景色のみを表示する。
+export const PLAYLIST: VideoItem[] = [];
+```
+
+- [ ] **Step 2: Stage（動画は常時マウント・active で再生/停止、unmuted で音声）**
+
+Create `apps/signage/src/components/stage.tsx`:
+
+```tsx
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { PLAYLIST } from '@/config/playlist';
+
+interface Props {
+ active: boolean; // 活動フェーズ中のみ再生
+ unmuted: boolean; // 起動タップ後に音声ON
+}
+
+export function Stage({ active, unmuted }: Props) {
+ const ref = useRef(null);
+ const indexRef = useRef(0);
+
+ // React は muted を DOM に確実に反映しないため ref 経由で設定する。
+ useEffect(() => {
+ const v = ref.current;
+ if (v) v.muted = !unmuted;
+ }, [unmuted]);
+
+ useEffect(() => {
+ const v = ref.current;
+ if (!v) return;
+ if (active) void v.play().catch(() => {});
+ else v.pause();
+ }, [active]);
+
+ const handleEnded = (): void => {
+ const v = ref.current;
+ if (!v || PLAYLIST.length <= 1) return;
+ indexRef.current = (indexRef.current + 1) % PLAYLIST.length;
+ const next = PLAYLIST[indexRef.current];
+ if (!next) return;
+ v.src = next.src;
+ void v.play().catch(() => {});
+ };
+
+ const first = PLAYLIST[0];
+
+ return (
+
+ );
+}
+```
+
+- [ ] **Step 3: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 4: コミット**
+
+```bash
+git add apps/signage/src/config/playlist.ts apps/signage/src/components/stage.tsx
+git commit -m "feat(signage): playlist config and video stage layer"
+```
+
+---
+
+## Task 10: 表示コンポーネント（info-bar / break-screen / idle-screen / tap-to-start）
+
+**Files:**
+- Create: `apps/signage/src/components/info-bar.tsx`
+- Create: `apps/signage/src/components/break-screen.tsx`
+- Create: `apps/signage/src/components/idle-screen.tsx`
+- Create: `apps/signage/src/components/tap-to-start.tsx`
+
+- [ ] **Step 1: InfoBar（活動中の上部バー）**
+
+Create `apps/signage/src/components/info-bar.tsx`:
+
+```tsx
+'use client';
+
+import { TERM_LABELS, type TermId } from '@tecnova/shared/venue-schedule';
+import { jstHm, mmss } from '@/lib/time';
+
+interface Props {
+ term: TermId;
+ now: Date;
+ present: number;
+ secondsToBreak: number | null;
+}
+
+export function InfoBar({ term, now, present, secondsToBreak }: Props) {
+ return (
+
+
+ {TERM_LABELS[term]}の部
+
+ {jstHm(now)}
+ {secondsToBreak !== null && (
+ 休憩まで {mmss(secondsToBreak)}
+ )}
+
+ 在館 {present} 人
+
+
+ );
+}
+```
+
+- [ ] **Step 2: BreakScreen（休憩中・カウントダウン主役、クロスフェード）**
+
+Create `apps/signage/src/components/break-screen.tsx`:
+
+```tsx
+'use client';
+
+import { mmss } from '@/lib/time';
+
+interface Props {
+ show: boolean;
+ secondsToResume: number | null;
+ present: number;
+}
+
+// 動画レイヤの上に重ね、opacity でクロスフェード。動画は裏で再生継続（再読込フラッシュ防止）。
+// prefers-reduced-motion 時は globals 側のトランジション無効化に委ねつつ、ここでも duration を短縮。
+export function BreakScreen({ show, secondsToResume, present }: Props) {
+ return (
+
+
休憩中
+
+ {secondsToResume !== null ? mmss(secondsToResume) : '--:--'}
+
+
再開までの時間
+
+ 在館 {present} 人
+
+
+
tec-nova Nagasaki
+
{jstHm(now)}
+
+ {soon
+ ? 'まもなく開始'
+ : nextStartAt
+ ? `次は ${jstHm(nextStartAt)} から`
+ : '本日は終了しました'}
+
+ {present > 0 &&
在館 {present} 人
}
+