企画フレームの作成

[kiyo-jin]

概要

• 企画フレーム（EventFrame）の作成

変更点

• src/components/ui/EventFrame.tsxの作成
• src/app/(frontend)/(dev)/dev/common/page.tsxにEventFrameを配置

関連Issue

• 企画フレームの作成 #117

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

動作確認手順

1.src/app/(frontend)/(dev)/dev/common/page.tsxで確認
2.

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

• TooltipTrigger delay={300} closeDelay={300}と適当に値を設定しました。

セルフチェックリスト

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

[github-actions]

🩺 React Doctor

react-doctor v0.2.9

✔ Select projects to scan › 45th-homepage
Scanning changes: feat/kiyo/create-event-flame → 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-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.

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

  4 issues
  Full diagnostics written to /tmp/react-doctor-ec7a6d07-de6f-4598-9577-c8fcaab95f47

[github-actions]

⚡️ Lighthouse CI Results

URL	Performance	Accessibility	Best Practices	SEO	Report
http://localhost:3000/	🟢 96	🟢 100	🟢 100	🟢 100	View Report
http://localhost:3000/news	🟠 69	🟢 100	🟢 100	🟢 100	View Report
http://localhost:3000/attention	🟢 93	🟢 100	🟢 100	🟢 100	View Report

[Copilot]

Pull request overview

企画フレーム（EventFrame）コンポーネントを新規追加し、開発用ページで表示確認できるようにするPRです。

Changes:

• EventFrame（カードUI + 文字数に応じた表示/省略 + 省略時Tooltip）を新規作成
• 共通の Tooltip コンポーネントに offset 指定を追加
• devページに EventFrame のプレビューを追加

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
src/components/ui/EventFrame.tsx	企画フレームUIを追加し、長い企画名は省略＋Tooltipで全文表示
src/components/aria/Tooltip.tsx	Tooltipの見た目を変更し、offset を外部指定可能に変更
src/app/(frontend)/(dev)/dev/common/page.tsx	dev共通コンポーネント一覧にEventFrameプレビューを追加

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[TkymHrt]

PRありがとー
動作や見た目も大丈夫そうです！
コード部分いくつかコメントしました。

[TkymHrt]

ariaラベル欲しいね
パフォーマンス対策でprefetchも一旦は false で！

Suggested change

	<Link
	href={href}
	<Link
	href={href}
	aria-label={name}
	prefetch={false}

[TkymHrt]

imageAlt いるんかな？
カード内に企画名書いているから重複だよねー
デフォ""でオプショナルでもいいかも

[TkymHrt]

意味が分かりづらいから変えたいかも
LARGE_TEXT_MAX_LENGTH とか？

[TkymHrt]

画像が読み込めないときのフォールバックほしいな

[kiyo-jin]

• ロゴを乗っける感じでいい？

[tsukachan-24]

ロゴ載せる感じでOKです

[TkymHrt]

存在しない画像渡しているからエラーでてる
動作確認までお願いね～