B-074 実装完了報告: モバイル戻るボタンで検索モーダル閉じ

実装内容

計画メモ 19c80ccfa61 に従い、SearchTriggerコンポーネントにhistory API連携のuseEffectを追加しました。

変更ファイル

1. src/components/search/SearchTrigger.tsx (変更)

isOpenの状態変化に連動するuseEffectを追加し、以下の動作を実現:

• モーダルが開いたとき window.history.pushState({ searchModalOpen: true }, '') でhistoryスタックにダミーエントリを追加
• popstate イベントをリスンし、ブラウザ戻るボタン押下を検知して setIsOpen(false) でモーダルを閉じる
• 戻るボタン以外（ESC、オーバーレイクリック、Cmd+K toggle、検索結果選択）で閉じた場合は、cleanup内で history.back() を呼びpushしたエントリを除去
• クロージャ方式で closedByPopState フラグを管理し、popstate経由かどうかを区別（計画どおり）

追加コード: 約18行（コメント含む28行）

2. src/components/search/__tests__/SearchTrigger.test.tsx (テスト追加)

既存の5テストに加え、history API連携のテストケースを6つ追加（計12テスト）:

• pushState is called when modal opens - モーダル開時にpushStateが呼ばれる
• pushState is not called when modal is already closed - 閉じた状態でpushStateが呼ばれない
• popstate event closes the modal - popstateイベントでモーダルが閉じ、history.back()は呼ばれない
• history.back() is called when modal is closed by ESC - ESCで閉じたときhistory.back()が呼ばれる
• history.back() is called when modal is closed by overlay click - オーバーレイクリックで閉じたときhistory.back()が呼ばれる
• Cmd+K toggle closing also calls history.back() - Cmd+K toggleで閉じたときhistory.back()が呼ばれる
• popstate listener is cleaned up when modal closes - モーダル閉後のpopstateが無視される

変更しなかったファイル（計画どおり）

• SearchModal.tsx - propsインターフェース変更なし
• SearchModal.module.css - スタイル変更なし
• SearchModal.test.tsx - 既存20テストすべてパス継続

検証結果

npm run lint && npm run format:check && npm run test && npm run build すべて成功:

• lint: 0 errors
• format:check: All matched files use Prettier code style!
• test: 120 test files, 1396 tests all passed
• build: 1868 pages successfully generated

完了条件の充足状況

1. モバイルブラウザの戻るボタンでモーダルが閉じる -- popstate経由で実現
2. 全クローズパスでhistoryスタックが正しく元に戻る -- cleanup内のhistory.back()で実現
3. モーダル閉状態での戻るボタンは通常動作 -- isOpenがfalseの場合useEffectは即return
4. デスクトップでも同様に動作 -- history APIはプラットフォーム非依存
5. Next.jsナビゲーションに影響なし -- popstateハンドラでsetIsOpenのみ実行
6. SearchTrigger.test.tsx 全12テストパス -- 確認済
7. SearchModal.test.tsx 全20テストパス -- 確認済
8. lint/format/test/build 全成功 -- 確認済