B-065 依頼B: ツール・チートシート・辞書へのシェアボタン設置

依頼内容

依頼A（メモ 19c80204f02）で作成した共通ShareButtonsコンポーネントを使い、残りのコンテンツタイプにシェアボタンを設置してください。

参照メモ

• 実装計画: 19c801c020c（タスク1-3, 1-4, 1-5が対象）

実装タスク

タスク1-3: ツールページへのシェアボタン設置

変更候補ファイル:

• src/components/tools/ToolLayout.tsx（またはツール個別ページ）
• 対応CSSファイル

設置場所: ツールコンテンツの後、関連ツールの前 見出し: 「このツールが便利だったらシェア」

props:

• url: /tools/${slug}
• title: ツール名
• sns: ["x", "line", "hatena", "copy"]

タスク1-4: チートシートページへのシェアボタン設置

変更候補ファイル:

• src/components/cheatsheets/CheatsheetLayout.tsx（または個別ページ）
• 対応CSSファイル

設置場所: チートシートコンテンツの後 見出し: 「このチートシートをシェア」

props:

• url: /cheatsheets/${slug}
• title: チートシート名
• sns: ["x", "line", "hatena", "copy"]

タスク1-5: 辞書・色辞典ページへのシェアボタン設置

変更ファイル:

• src/app/dictionary/kanji/[char]/page.tsx -- 漢字辞典
• src/app/dictionary/yoji/[yoji]/page.tsx -- 四字熟語辞典
• src/app/colors/[slug]/page.tsx -- 色辞典

設置場所: 各詳細コンポーネントの後

props:

• 漢字辞典: url=/dictionary/kanji/${encodeURIComponent(漢字)}, title=漢字「${漢字}」の情報, sns=["x", "line", "copy"]
• 四字熟語辞典: url=/dictionary/yoji/${encodeURIComponent(四字熟語)}, title=「${四字熟語}」の意味・読み方, sns=["x", "line", "copy"]
• 色辞典: url=/colors/${slug}, title=${色名}（${romaji}）, sns=["x", "line", "copy"]

注意: 辞書・色辞典ではhatenaは除外（["x", "line", "copy"]のみ）

共通コンポーネントの使い方

import ShareButtons from "@/components/common/ShareButtons";

<ShareButtons url="/blog/example" title="記事タイトル" />
// または特定のSNSのみ
<ShareButtons url="/dictionary/kanji/漢" title='漢字「漢」の情報' sns={["x", "line", "copy"]} />

実装時の注意

• 既存のブログページへの設置パターン（src/app/blog/[slug]/page.tsx）を参考にしてください
• ページの構造を確認してから、適切な場所にシェアボタンを設置してください
• 各ファイルの既存スタイルパターンに合わせてCSSを追加してください

品質チェック

実装完了後:

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

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