マップフレームの作成

[oniwawa]

概要

変更点

-MapFrameコンポーネントを作成し、以下のpropsを設定しました

• imageSrc：画像のURLを入力、未入力の場合「MAP NO IMAGE」の文字が表示される

• alt：画像のalt

• title：枠外の水色の部分の文字を入力、未記入の場合は表示されない

• type：shortで短いタイトル、longで長いタイトルの長さを指定

関連Issue

#116

スクリーンショット（UI変更がある場合）

動作確認手順

レビューしてほしいポイント

• 幅の調整が期待通りであるか
• タイトルの文字が長くなった場合折り返されるか

セルフチェックリスト

• ローカルでの動作確認を行った
• Lint エラーが出ていない

[github-actions]

🩺 React Doctor

react-doctor v0.2.9

✔ Select projects to scan › 45th-homepage
Scanning changes: feat/oniwa/create-map-frame → main

  

  ⚠ react-doctor/design-no-redundant-size-axes
      w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)
      → Collapse `w-N h-N` to `size-N` (Tailwind v3.4+) when both axes match
      src/components/aria/DateRangePicker.tsx:50

  ⚠ react-doctor/no-derived-state-effect
      State reset in useEffect — use a key prop to reset component state when props change
      → For derived state, compute inline: `const x = fn(dep)`. For state resets on prop change, use a key prop: `<Component key={prop} />`. See https://react.dev/learn/you-might-not-need-an-effect
      src/components/layout/HeaderMenuButton.tsx:20

  ⚠ react-doctor/prefer-tag-over-role
      Prefer the semantic `<dialog>` element over `role="dialog"` on a generic tag.
      → Replace `role` with the semantic HTML element when one exists.
      src/components/layout/HeaderMenuButton.tsx:105

  ⚠ react-doctor/nextjs-image-missing-sizes
      next/image with fill but no sizes — the browser downloads the largest image. Add a sizes attribute for responsive behavior
      → Add sizes for responsive behavior: `sizes="(max-width: 768px) 100vw, 50vw"` matching your layout breakpoints
      src/components/ui/MapFrame.tsx:24

  ⚠ react-doctor/nextjs-missing-metadata
      Page without metadata or generateMetadata export — hurts SEO
      → Add `export const metadata = { title: '...', description: '...' }` or `export async function generateMetadata()`
      src/app/(frontend)/(dev)/dev/common/page.tsx:1

Agent guidance
  - Treat React Doctor diagnostics as starting hypotheses. Read the relevant code before confirming or suppressing each finding.
  - For each group, decide true positive, false positive, or needs-human-review, then assign high/medium/low confidence.
  - Do not suppress a finding without evidence from the file in question. Confidence requires code context.
  - Understand the root cause before editing. Fix the underlying code instead of changing react-doctor config or suppressing rules unless explicitly asked.
  - Investigate deeply where relevant: race conditions, security-sensitive flows, state propagation, multi-file refactors, and downstream dependency chains.
  - Ignore pure style preferences, theoretical issues without real impact, missing features, and unrelated pre-existing code.
  - Start with high-confidence fixes that preserve behavior. Leave low-confidence or product-dependent changes as notes.
  - Run `npx react-doctor@latest --verbose --diff` before and after changes, plus relevant tests after each focused batch.
  - When available, spawn subagents or isolated worktrees for independent rule families, then review and merge only the best safe fixes.
  - Split unrelated, broad, or behavior-changing work into separate PRs/branches instead of one large cleanup.
  - For confirmed issues that cannot be fixed now, create GitHub issues with the rule, file/line, confidence, impact, and proposed fix.
  - If a fix needs an API, UX, or architecture decision, stop and ask before editing.

  ┌─────┐  97 / 100 Great · 45th-homepage
  │ ◠ ◠ │  █████████████████████████████████████████████████░
  │  ▽  │  React Doctor (https://react.doctor)
  └─────┘

  5 issues
  Full diagnostics written to /tmp/react-doctor-88e3e1c9-fc33-4516-a32a-ac0efc007e1a

[github-actions]

⚡️ Lighthouse CI Results

URL	Performance	Accessibility	Best Practices	SEO	Report
http://localhost:3000/	🟢 97	🟢 100	🟢 100	🟢 100	View Report
http://localhost:3000/news	🟠 75	🟢 100	🟢 100	🟢 100	View Report
http://localhost:3000/attention	🟢 92	🟢 100	🟢 100	🟢 100	View Report

[TkymHrt]

PRありがとうございます！
コードベースだけレビューしました。
細かいところですが、コメントしてます。

[tsukachan-24]

ありがとうございます！
切欠き枠内の文字の上下にパディングが欲しいかもです。
2px or 4pxで試してみて、よさげな方を採用してください。
よろしくお願いします。

そのほかのデザインはOKです！

[oniwawa]

指摘貰った修正箇所を修正し、py-4pxで実装しました