[Pro] front を mobile と同等機能まで追従させる（親issue）

[ippei-shimizu]

概要

Pro リリース（release/pro-202605）において mobile は練習機能を含む機能開発が完了しているが、front が追従できていない。front も mobile と同じ機能・UI/UX を実装するため、差分を洗い出して issue に分割した。

	PR	追加行数	変更ファイル
mobile	ippei-shimizu/buzzbase_mobile#80	+30,513	289
front	ippei-shimizu/buzzbase_front#313	+2,141	32
back	ippei-shimizu/buzzbase_back#216	—	—

back の API は v2 に全機能分が揃っており、front 側の実装だけで大半が完結する。

front の PR #313 に含まれるのは Pro LP / Stripe Checkout / ProGate / ProUpgradeModal / useEntitlement / 法務ページ（特商法・利用規約・プライバシーポリシー）のみで、Pro 配下の実機能は未着手。

---

Phase 0: 基盤（最優先・他のほぼ全てがブロックされている）

• Fix: [front] ProStatusProvider が未マウントで Pro 判定が全て無効になっている #451 Fix: ProStatusProvider が未マウントで Pro 判定が全て無効になっている
• Fix: [front] Pro 課金者にも AdSense 広告が表示される（no_ads 未適用） #452 Fix: Pro 課金者にも AdSense 広告が表示される（no_ads 未適用）
• Update: [front] Pro entitlement 定義（app/types/pro.ts）を back と同期する #453 Update: Pro entitlement 定義（app/types/pro.ts）を back と同期する
• Feature: [front] Pro 訴求 UI コンポーネント群（Upsell カード / サンプルラベル / オーバーレイ）を追加する #454 Feature: Pro 訴求 UI コンポーネント群（Upsell カード / サンプルラベル / オーバーレイ）

Phase 1: Pro 課金・サブスク管理

• Feature: [front] Pro 加入状態管理画面（/account/subscription）を新設する #455 Feature: Pro 加入状態管理画面（/account/subscription）を新設する
• Feature: [front] Web(Stripe) 解約導線と IAP 加入者向け解約案内を実装する #456 Feature: Web(Stripe) 解約導線と IAP 加入者向け解約案内
• Feature: [front] Pro プラン変更（月額↔年額）UI を実装する #457 Feature: Pro プラン変更（月額↔年額）UI
• Feature: [front] トライアル終了予告・課金失敗（billing_issue）の常設バナーを実装する #458 Feature: トライアル終了予告・課金失敗バナー
• Feature: [front] Feature Flag（pro_features / cancellation_survey）に対応する #459 Feature: Feature Flag（pro_features / cancellation_survey）対応
• Feature: [front] 解約アンケート（cancellation_feedbacks）を実装する #460 Feature: 解約アンケート（cancellation_feedbacks）
• Feature: [front] Checkout 完了後の Pro ステータス反映待ちと再同期ボタンを実装する #461 Feature: Checkout 完了後の Pro ステータス反映待ちと再同期ボタン
• Update: [front] Pro LP の訴求内容を実際の entitlement に合わせて刷新する #462 Update: Pro LP の訴求内容を実際の entitlement に合わせて刷新する

Phase 2: 既存成績画面の Pro 開放・フィルタ追従（低コスト・高効果）

• Fix: [front] 成績詳細の Pro 機能が Coming soon 固定になっている（entitlement 判定へ切替） #463 Fix: 成績詳細の Pro 機能が Coming soon 固定になっている
• Feature: [front] 打撃推移・防御率推移に「シーズン」粒度を追加する（Pro） #464 Feature: 打撃推移・防御率推移に「シーズン」粒度を追加する（Pro）
• Update: [front] 成績・試合一覧・グループ詳細のフィルタに大会・月範囲を追加する #465 Update: 成績・試合一覧・グループ詳細のフィルタに大会・月範囲を追加する
• Update: [front] マイページ成績タブを v2 dashboard stats へ移行する #466 Update: マイページ成績タブを v2 dashboard stats へ移行する

Phase 3: 練習ドメイン（front に一切存在しない）

• Feature: [front] 練習ドメインの型・定数・API サービス層を整備する #467 Feature: 練習ドメインの型・定数・API サービス層を整備する
• Feature: [front] 練習メニュー管理（一覧・作成・編集・削除）を実装する #468 Feature: 練習メニュー管理（一覧・作成・編集・削除）
• Feature: [front] 練習記録（日次セッション）入力画面を実装する #469 Feature: 練習記録（日次セッション）入力画面
• Feature: [front] コンディション記録（Pro限定）の入力・表示を実装する #470 Feature: コンディション記録（Pro限定）の入力・表示
• Feature: [front] 練習記録の一覧・検索・詳細画面を実装する #471 Feature: 練習記録の一覧・検索・詳細画面
• Feature: [front] メニューセット（練習プランセット）の CRUD を実装する #472 Feature: メニューセット（練習プランセット）の CRUD
• Feature: [front] 練習メニュー別の積み上げサマリーと推移グラフ（Pro）を実装する #473 Feature: 練習メニュー別の積み上げサマリーと推移グラフ（Pro）

Phase 4: ノート・振り返り

• Feature: [front] 野球ノートを v2 API へ移行する #474 Feature: 野球ノートを v2 API へ移行する
• Feature: [front] 振り返りテンプレートの管理とノートフォームへの組み込み #475 Feature: 振り返りテンプレートの管理とノートフォームへの組み込み
• Feature: [front] ノートタグ（Pro）と一覧の検索・絞り込み・月次ページング #476 Feature: ノートタグ（Pro）と一覧の検索・絞り込み・月次ページング
• Feature: [front] 野球ノートへのメディア添付（画像・動画）を実装する #477 Feature: 野球ノートへのメディア添付（画像・動画）
• Feature: [front] 改善テーマ（課題）機能一式とノートへの紐付けを実装する #478 Feature: 改善テーマ（課題）機能一式とノートへの紐付け

Phase 5: 目標・レビュー

• Feature: [front] 目標機能一式（設定・進捗・達成管理）を実装する #479 Feature: 目標機能一式（設定・進捗・達成管理）
• Feature: [front] 目標達成バッジ一覧と月次達成サマリーモーダルを実装する #480 Feature: 目標達成バッジ一覧と月次達成サマリーモーダル
• Feature: [front] 定期レビュー（週次/月次レポート・Pro）を実装する #481 Feature: 定期レビュー（週次/月次レポート・Pro）

Phase 6: スケジュール・素振り・活動可視化

• Feature: [front] 練習スケジュール（予定）の登録・編集・削除を実装する #482 Feature: 練習スケジュール（予定）の登録・編集・削除
• Feature: [front] 予定カレンダー（月/週/日ビュー）を実装する #483 Feature: 予定カレンダー（月/週/日ビュー）
• Feature: [front] 週の練習プランと「今日のやること」を実装する #484 Feature: 週の練習プランと「今日のやること」
• Feature: [front] 素振りカウンター（設定 → カウント → 完了）を実装する #485 Feature: 素振りカウンター（設定 → カウント → 完了）
• Feature: [front] 草グラフ（アクティビティヒートマップ）と Streak を実装する #486 Feature: 草グラフ（アクティビティヒートマップ）と Streak
• Feature: [front] 相関インサイト「練習と成績のつながり」を実装する（Pro） #487 Feature: 相関インサイト「練習と成績のつながり」（Pro）
• Feature: [front] ホームに「練習・活動」面を新設する #488 Feature: ホームに「練習・活動」面を新設する
• Feature: [front] 予定リマインダーの Web 実現方式を決定して実装する #489 Feature: 予定リマインダーの Web 実現方式を決定して実装する

Phase 7: 既存領域の UX 追従

• Feature: [front] グループ導線のオンボーディング（参加ツールチップ / 未参加バッジ / 招待カード） #490 Feature: グループ導線のオンボーディング（ツールチップ / バッジ / 招待カード）
• Update: [front] 通知一覧に未読表示・相対時刻・削除を追加する #491 Update: 通知一覧に未読表示・相対時刻・削除を追加する
• Fix: [front] 通知一覧を開いても運営お知らせの未読バッジが消えない #492 Fix: 通知一覧を開いても運営お知らせの未読バッジが消えない
• Feature: [front] プロフィールにフォローリクエストバナーを表示する #493 Feature: プロフィールにフォローリクエストバナーを表示する
• Update: [front] 試合記録フローの中断確認と入力状態リセットを追加する #494 Update: 試合記録フローの中断確認と入力状態リセット
• Fix: [front/mobile] Pro 上限エラー（403 / 422）を専用文言で表示する #495 Fix: Pro 上限エラー（403 / 422）を専用文言で表示する
• Feature: [front] PostHog コンバージョン計測を導入する #496 Feature: PostHog コンバージョン計測を導入する
• Feature: [front] 初回オンボーディング（Web版ウォークスルー）を実装する #497 Feature: 初回オンボーディング（Web版ウォークスルー）
• Update: [front] シーズン管理の UX 細部を mobile と揃える #498 Update: シーズン管理の UX 細部を mobile と揃える

---

差分なしと判断した領域

以下は front が既に mobile と実質パリティに達しており、issue 化していない。

• 打席記録 v2 API（作成/更新/削除/by_game）と3ステップウィザード・編集タブ構成
• 打席詳細入力の全項目（BSO カウント / 初球打ち / ランナー状況 / イニング / 打球の質 / タイミング / 球種 / 対戦投手 / 登板状況 / 自己分析メモ）と投手マスタ CRUD
• 試合記録ウィザードのフロー分岐（RecordPattern、no_play のサマリー直行）
• グループ招待リンク（発行 / 共有 / コード参加）とグループランキング表（打撃6・投手6カテゴリ）
• 非公開アカウント（is_private / profile_visible_to?）の表示制御とフォローリクエスト状態
• プロフィール編集の送信フィールド、フォロワー/フォロー中一覧、ユーザー検索
• シーズン管理の CRUD（front が mobile より先行。Update: [front] シーズン管理の UX 細部を mobile と揃える #498 は導線の細部のみ）
• 成績の計算式ページ、試合結果サマリータブ、アワード（受賞歴）

Push 通知（device_tokens）は Web 対象外のため、#489 で方式を決めるまで差分扱いしない。

---

横断的な要検討事項

1. 決済手段: back 実装により Web は Stripe Checkout で独立して課金できる構成（platform: web）で確定済み。ただし Stripe の webhook handler が checkout_session_completed のみで、更新・解約・課金失敗・返金イベントが未処理の可能性が高い。Web 加入者の cancelled / billing_issue / expired への遷移が機能しないと Feature: [front] Web(Stripe) 解約導線と IAP 加入者向け解約案内を実装する #456 / Feature: [front] トライアル終了予告・課金失敗（billing_issue）の常設バナーを実装する #458 を作っても状態が更新されないため、back 側 issue の先行が必要。
2. POST /api/v1/pro/sync は RevenueCat 専用（RevenueCat::SubscriberSync を呼ぶ）。Stripe 加入者に対する挙動が不明なため Feature: [front] Checkout 完了後の Pro ステータス反映待ちと再同期ボタンを実装する #461 の前に確認が必要。
3. Stripe Customer Portal を使うか自前 UI か: 支払い方法更新・請求書・解約を Stripe 側に委譲すれば billing_issue 時の導線が標準で得られる。back に Portal Session 生成エンドポイントがないため方針決定が必要。
4. Web でのブラウザ制約: 素振りのバックグラウンド継続実行（shadow_swing_background）は Web では成立しない。バイブレーションは iOS Safari 非対応。動画トリミングも実装コストが高い。これらの Pro 差別化を Web でどう扱うか要判断（Feature: [front] 素振りカウンター（設定 → カウント → 完了）を実装する #485 / Feature: [front] 野球ノートへのメディア添付（画像・動画）を実装する #477）。
5. 無料枠の定数が三重管理になる: FREE_CALENDAR_WINDOW_MONTHS = 3 や MENU_SET_FREE_LIMIT = 2 等が back / mobile / front に重複する。API から上限値を返す設計を検討したい。
6. entitlement 定数の手動同期が破綻しかけている: back から TS 型を自動生成する仕組み（rake タスク or JSON 配信）を別途検討する価値がある。
7. オンボーディング完了状態の保存場所: mobile は端末ローカル。front を localStorage にするとデバイス間で共有されない（Feature: [front] 初回オンボーディング（Web版ウォークスルー）を実装する #497）。