feat: デモシフトボードとイベント駆動ツアーの追加

[yn1323]

Summary

LP からの導線として /demo/shiftboard にサインアップ不要のデモを設置し、FAB 起動型のイベント駆動ツアーでシフト操作（追加 / 編集 / 削除 / 確定）の流れを体験できるようにする。

Design

コンポーネント構成

graph TD
    A[DemoShiftBoardPage] --> B[ShiftForm]
    A --> C[DemoIntroTour]
    A --> D[DemoLauncherFab]
    A --> E[ConfirmModal]
    C --> F[Tour wrapper]
    F --> G[react-joyride useJoyride]

Loading

ツアーの進行ロジック

sequenceDiagram
    participant U as User
    participant FAB as DemoLauncherFab
    participant P as DemoShiftBoardPage
    participant T as DemoIntroTour
    participant J as react-joyride

    U->>FAB: クリック
    FAB->>P: setTourPhase("running")
    P->>T: run=true, shifts, day1
    T->>J: stepIndex = determineStepIndex(shifts, day1)
    U->>P: シフト操作（add/edit/delete）
    P->>T: shifts 更新 → stepIndex 再計算
    J-->>U: 次のステップを表示
    U->>P: 確定ボタン
    P->>J: skip() + setTourPhase("idle")
    P->>U: モーダル表示

Loading

Changes

• 汎用 Tour コンポーネント: react-joyride@3 を導入し src/components/ui/Tour/ に useJoyride + forwardRef ベースの wrapper を追加。controls.skip() を ref 越しに露出して呼び出し側から終了を宣言できるようにした
• クリック貫通 CSS: overlay の path に pointer-events: none !important を注入し、ツアー中も背後の UI（ドラッグ&ドロップ含む）を触れるようにした
• デモシフトボード画面: /demo/shiftboard ルートと DemoShiftBoardPage を追加。mock shifts を baseDate 起点で再マッピングし、isConfirmed 状態管理と通知モーダルを実装
• イベント駆動ツアー: DemoIntroTour で stepIndex controlled モードを採用。追加 / 編集 / 削除 / 確定の4ステップを shifts の状態から純粋関数で導出し、ユーザー操作に追従してステップが進む
• 起動 FAB: DemoLauncherFab を右下に固定。本体とクローズボタンを1つのピル形にまとめ、確定後も再表示できるよう tourPhase を idle に保つ
• LP 導線: /demo/shiftboard へのリンクを LP に追加（SP では非表示）
• オーバーレイ残留バグ修正: モーダルを開く前に skip() + setTourPhase("idle") で joyride に片付けさせ、同一コミットで unmount すると portal が残る問題を回避
• 文言調整: ダッシュボード / LP / FAQ のコピーをスタッフ募集タスク寄りに刷新

[github-actions]

🚀 Preview Deploy

App: https://pr-345.dev-yps-crispy-carnival.pages.dev
Convex: https://cautious-sardine-51.convex.cloud

[github-actions]

📊 Playwright Test Report

✅ テスト結果: 成功

5 passed / 0 failed / 0 skipped

Status	Test
✅	prepare Clerk testing token and sign in
✅	もっと見る・すべて表示でデータが段階的に表示される
✅	初回セットアップからシフト確定まで
✅	未提出→提出→修正→再提出のハッピーパス
✅	締切後の表示確認

View Report

デプロイ先: https://github.com/yn1323/hosting-pages