B-065 依頼A: 共通シェアボタン作成・ブログ設置・X intent修正

依頼内容

B-065シェアボタン実装の最初の依頼です。共通ShareButtonsコンポーネントの作成、ブログへの設置、既存X intent URLの修正を実装してください。

参照メモ

• 実装計画: 19c801c020c（タスク1-1, 1-2, 1-6が対象）
• 調査レポート: 19c80186ccf
• レビュー結果: 19c801f5d57（指摘事項3件あり。必ず読むこと）

実装タスク

タスク1-1: 共通ShareButtonsコンポーネント作成

新規ファイル:

• src/components/common/ShareButtons.tsx
• src/components/common/ShareButtons.module.css
• src/components/common/tests/ShareButtons.test.tsx

Props設計:

type SnsType = "x" | "line" | "hatena" | "copy";

type ShareButtonsProps = {
  url: string;           // パス名（例: "/blog/my-post"）
  title: string;         // ページタイトル
  sns?: SnsType[];       // デフォルト: ["x", "line", "hatena", "copy"]
  description?: string;  // 省略可
};

SNSのURL生成:

• X: https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(fullUrl)}（text+url分離）
• LINE: https://line.me/R/share?text=${encodeURIComponent(title + "\n" + fullUrl)}
• はてブ: https://b.hatena.ne.jp/entry/panel/?url=${encodeURIComponent(fullUrl)}&btitle=${encodeURIComponent(title)}
• コピー: navigator.clipboard.writeText(title + "\n" + fullUrl)

fullURLは window.location.origin から動的生成（既存ゲームShareButtonsと同じパターン）。

デザイン:

• "use client" コンポーネント
• CSS Modulesで横並びボタン（flex-wrap: wrap）
• 各SNSのブランドカラー: X(#000000), LINE(#06C755), はてブ(#00A4DE), コピー(#6b7280)
• テキストラベル付き: 「Xでシェア」「LINEでシェア」「はてブ」「コピー」
• タップターゲット最低44x44px
• 控えめなデザイン
• ダークモード対応

テスト項目:

1. デフォルトで4ボタン表示
2. sns propsで表示制御
3. 各SNSボタンのintent URL検証
4. コピー機能の検証
5. コピー成功メッセージ表示
6. aria-live="polite"検証

タスク1-2: ブログ記事ページへのシェアボタン設置

変更ファイル:

• src/app/blog/[slug]/page.tsx
• src/app/blog/[slug]/page.module.css

設置場所: article要素内、RelatedMemosの後、postNavの前 見出し: 「この記事をシェア」

props:

• url: /blog/${post.slug}
• title: post.title
• sns: ["x", "line", "hatena", "copy"]

タスク1-6: 既存X intent URLの修正

【重要】レビュー指摘事項:

• irodoriとnakamawakeにはShareButtonsコンポーネントが存在しない。ResultModal.tsxに直接実装されている
• generateShareText()の戻り値は変更しない。X intent URL生成部分のみtext+urlを分離する
• コピーやWeb Share APIには影響を与えないようにする

修正対象ファイル:

1. src/components/quiz/ShareButtons.tsx -- handleTwitterのURL生成を修正
2. src/components/games/kanji-kanaru/ShareButtons.tsx -- handleShareXのURL生成を修正
3. src/components/games/yoji-kimeru/ShareButtons.tsx -- 同様に修正
4. src/components/games/irodori/ResultModal.tsx -- Twitter シェア部分の修正
5. src/components/games/nakamawake/ResultModal.tsx -- Twitter シェア部分の修正
6. src/lib/games/kanji-kanaru/share.ts -- generateTwitterShareUrl修正
7. src/lib/games/yoji-kimeru/share.ts -- 同様に修正（存在する場合）
8. src/lib/games/irodori/share.ts -- 同様に修正（存在する場合）
9. src/lib/games/nakamawake/share.ts -- 同様に修正（存在する場合）

修正方針:

• X intent URLのtextパラメータからURLを除外し、urlパラメータとして分離する
• 例: https://twitter.com/intent/tweet?text=${encodeURIComponent(textOnly)}&url=${encodeURIComponent(pageUrl)}
• generateShareTextやshareTextの戻り値自体は変更しない（コピー機能で使用されるため）
• 既存テストを修正してtext+url分離に対応させる

品質チェック

実装完了後、以下を確認してください:

• npm run lint が成功
• npm run format:check が成功
• npm run test が成功
• npm run build が成功

完了したらメモで報告してください。