実装依頼

B-069「ゲームモーダルのコード重複リファクタリング」とB-076「スクロールロック対策」を実装してください。

参照メモ

以下のメモを すべて 読んでから作業を開始してください。

• 計画メモ: 19c84c535f9
• レビュー結果メモ: 19c84c861a1

作業内容

計画メモに記載された7タスク構成の実施計画に従って実装してください。

レビューで指摘された重要事項（必ず対応）:

1. GameDialogにfooter propを追加 — ResultModalの「統計を見る」ボタンなど、「閉じる」ボタンの直前に任意コンテンツを挿入できるようにする
2. CSSクラス名の統一 — irodori/nakamawakeの statsButton と kanji-kanaru/yoji-kimeruの shareButtonStats を統一する

レビューで推奨された事項（可能な範囲で対応）:

• GameDialogのprops interfaceにJSDocコメントを付与
• composesパターンの統一的な採用

完了条件

• 12個のモーダルが共通コンポーネント（GameDialog + useDialog）を使用していること
• 4つのシェアユーティリティが共通share.tsに統合されていること
• GameShareButtonsが全ゲームで使用されていること
• スクロールロックがCSS :has() で実装されていること
• 「統計を見る」ボタンなど既存の動作が維持されていること
• 新規テストがすべて通ること
• 既存の全テストが通ること（npm run test）
• npm run lint && npm run format:check が通ること
• npm run build が成功すること
• 作業完了後、結果をメモで報告してください

B-069+B-076 実装完了報告

実装結果

計画メモ(19c84c535f9)の7タスク構成に従い、レビュー指摘事項(19c84c861a1)を含めてすべて実装完了しました。

完了した作業

タスク1: 共通シェアユーティリティの抽出

• src/lib/games/shared/share.ts を新規作成（copyToClipboard, fallbackCopy, generateTwitterShareUrl, escapeRegExp）
• 4つのゲーム固有share.tsから重複関数を削除し、共通モジュールからre-exportする形に変更
• ゲーム固有のgenerateShareText, generateResultImage, downloadImageはそのまま残存

タスク2: useDialogフックの作成

• src/components/games/shared/useDialog.ts を新規作成
• dialogRef, handleClose, handleBackdropClickを提供するカスタムフック
• UseDialogReturn型を明確に定義

タスク3: GameDialogラッパーコンポーネントの作成

• src/components/games/shared/GameDialog.tsx を新規作成
• src/components/games/shared/GameDialog.module.css を新規作成
• Props: open, onClose, titleId, title, children, width(default 400), className, headerContent, footer
• レビュー指摘A対応: footer propを追加（「統計を見る」ボタンを「閉じる」ボタンの直前に配置可能に）
• レビュー指摘B対応: props interfaceにJSDocコメントを付与

タスク4: スクロールロックの実装

• src/app/globals.css に body:has(dialog[open]) { overflow: hidden; } を追加（1行）

タスク5: GameShareButtonsコンポーネントの作成

• src/components/games/shared/GameShareButtons.tsx を新規作成
• src/components/games/shared/GameShareButtons.module.css を新規作成
• レビュー指摘D対応: composesパターンを統一的に採用

タスク6: 全12モーダルのリファクタリング

• HowToPlayModal x 4: GameDialog使用に書き換え
• ResultModal x 4: GameDialog + GameShareButtons使用に書き換え
• StatsModal x 4: GameDialog使用に書き換え
• headerContent propを使用してnakamawake/kanji-kanaru/yoji-kimeruのresultEmojiを対応

タスク7: CSS整理

• 8つのCSSファイルから.modal, .modal::backdrop, .modalTitle, .modalClose, .modalClose:hoverを削除
• irodori/nakamawakeのResultModal.module.cssからシェアボタン関連CSSを削除
• kanji-kanaru/yoji-kimeruのmodule.cssからシェアボタン関連CSSを削除
• レビュー指摘C対応: shareButtonStatsをstatsButtonに統一（4ゲームすべて同じクラス名に）

削除したファイル

• src/components/games/kanji-kanaru/ShareButtons.tsx
• src/components/games/yoji-kimeru/ShareButtons.tsx

新規テスト

• src/lib/games/shared/__tests__/share.test.ts (5 tests)
• src/components/games/shared/__tests__/useDialog.test.ts (4 tests)
• src/components/games/shared/__tests__/GameDialog.test.tsx (8 tests)
• src/components/games/shared/__tests__/GameShareButtons.test.tsx (7 tests)

検証結果

• npm run test: 126ファイル, 1439テスト全パス（新規4ファイル24テスト含む）
• npm run lint: エラー0, 警告0
• npm run format:check: 全ファイルOK
• npm run build: 成功

レビュー指摘への対応状況

指摘	状況
A: footer prop追加	対応済み
B: JSDocコメント付与	対応済み
C: CSS名統一(statsButton)	対応済み
D: composesパターン統一	対応済み