refactor: レイアウト整理・型共通化・メタデータおよびパフォーマンス改善 - #387
Open
tanahiro2010 wants to merge 37 commits into
Open
Conversation
それに伴いロールの型を作成
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough共通型 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/bioCard.tsx (1)
26-29:avatarが未定義の場合のフォールバックを検討してください。
avatarはオプショナルですが、undefinedの場合にAvatarコンポーネントがどのように表示されるか確認が必要です。MUI Joy のAvatarはデフォルトでプレースホルダーを表示しますが、明示的なフォールバック（例：イニシャル表示）を追加することでUXが向上する可能性があります。💡 フォールバック例
<Avatar src={avatar} sx={{ '--Avatar-size': '4rem' }} - /> + > + {!avatar && name?.charAt(0).toUpperCase()} + </Avatar>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/bioCard.tsx` around lines 26 - 29, The Avatar is rendered with src={avatar} but avatar is optional; add an explicit fallback so when avatar is undefined the Avatar shows a meaningful alternative (e.g., initials or an icon). Update the BioCard component to compute a fallback (derive initials from user name or provide a default icon string) and pass it into the Avatar via children or replace src when avatar is falsy; modify the Avatar usage in bioCard.tsx (the Avatar component and avatar prop) to conditionally render the fallback content and keep the existing sx styling.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/bioCard.tsx`:
- Around line 26-29: The Avatar is rendered with src={avatar} but avatar is
optional; add an explicit fallback so when avatar is undefined the Avatar shows
a meaningful alternative (e.g., initials or an icon). Update the BioCard
component to compute a fallback (derive initials from user name or provide a
default icon string) and pass it into the Avatar via children or replace src
when avatar is falsy; modify the Avatar usage in bioCard.tsx (the Avatar
component and avatar prop) to conditionally render the fallback content and keep
the existing sx styling.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 7f92f5bc-e08f-4dc8-84ec-eb6c4e5623d6
📒 Files selected for processing (3)
src/app/member/page.tsxsrc/components/bioCard.tsxsrc/type/member.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/updates/`[slug]/page.tsx:
- Around line 16-23: generateMetadata currently assumes updates.find(...)
returns a value and produces "undefined - undefined" when not found; update the
function (generateMetadata) to check the result of updates.find(...) (variable
update) and call notFound() from next/navigation when update is falsy, mirroring
the main page behavior, and ensure notFound is imported if not already present;
alternatively provide a safe fallback title only if you intentionally want
metadata without 404, but the preferred fix is to call notFound() when update is
undefined.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 6da00ce9-c03a-4998-9571-65410a518f6f
📒 Files selected for processing (7)
src/app/announce/[slug]/page.tsxsrc/app/announce/page.tsxsrc/app/howto/page.tsxsrc/app/member/page.tsxsrc/app/sponsor/page.tsxsrc/app/updates/[slug]/page.tsxsrc/type/member.ts
💤 Files with no reviewable changes (3)
- src/app/howto/page.tsx
- src/app/sponsor/page.tsx
- src/app/announce/page.tsx
✅ Files skipped from review due to trivial changes (2)
- src/app/announce/[slug]/page.tsx
- src/type/member.ts
Comment on lines
+16
to
+23
| export async function generateMetadata(props: UpdateDetailPageProps) { | ||
| const { slug } = await props.params; | ||
| const update = updates.find((u) => u.slug === slug); | ||
|
|
||
| return { | ||
| title: `${update?.title} - ${update?.date}`, | ||
| } | ||
| } |
There was a problem hiding this comment.
update が見つからない場合のエラーハンドリングが欠けています。
slug に一致する更新情報が存在しない場合、update が undefined となり、タイトルが "undefined - undefined" になります。メインページコンポーネント（29行目）では notFound() を呼び出していますが、generateMetadata では同様の処理がありません。
🛠️ 修正案
export async function generateMetadata(props: UpdateDetailPageProps) {
const { slug } = await props.params;
const update = updates.find((u) => u.slug === slug);
+ if (!update) {
+ return {
+ title: '更新情報が見つかりません',
+ };
+ }
+
return {
- title: `${update?.title} - ${update?.date}`,
+ title: `${update.title} - ${update.date}`,
}
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/updates/`[slug]/page.tsx around lines 16 - 23, generateMetadata
currently assumes updates.find(...) returns a value and produces "undefined -
undefined" when not found; update the function (generateMetadata) to check the
result of updates.find(...) (variable update) and call notFound() from
next/navigation when update is falsy, mirroring the main page behavior, and
ensure notFound is imported if not already present; alternatively provide a safe
fallback title only if you intentionally want metadata without 404, but the
preferred fix is to call notFound() when update is undefined.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/button.tsx`:
- Line 28: The Button component is discarding the forwarded ref by naming the
second forwardRef parameter "_" which prevents external refs from reaching the
DOM; update the forwardRef callback signature to accept the ref (e.g., (props,
ref) => ...) and pass it into the rendered element (attach ref to the <button>
element), ensuring the generic HTMLButtonElement ref type from
forwardRef<HTMLButtonElement, Props<AS>> is preserved so methods like focus()
work.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 676a7e5d-63ea-4f65-a8a2-730095d0a514
📒 Files selected for processing (2)
src/components/button.tsxsrc/components/hamburger.tsx
💤 Files with no reviewable changes (1)
- src/components/hamburger.tsx
tanahiro2010
changed the title
tanahiro2010
changed the title
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
tanahiro2010
commented
Jul 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
このプルリクエストでは、コンポーネントのモジュール化、コードの一貫性向上、保守性の改善を目的としたリファクタリングおよび改善を行いました。
主な変更点として、型の共通化、レイアウトコンポーネントの整理、メタデータ処理の強化、Reactコンポーネントの最適化などがあります。
■ コンポーネントのモジュール化と再利用性の向上
src/components/layout/footer.tsxに新たにFooterコンポーネントを作成し、RootLayout内のインライン実装を置き換えHeaderコンポーネントをsrc/components/layout/header.tsxに移動し、構造を明確化→ レイアウト関連コンポーネントを集約し、責務を整理
■ 型の共通化とpropsの一貫性向上
MemberData型およびMemberRoleをsrc/type/member.tsに定義し、BioCardやメンバーページで共通利用→ 型の重複を解消し、保守性と型安全性を向上
■ メタデータおよびSEOの改善
generateMetadataを改善announce/[slug]およびupdates/[slug]における Open Graph URL の不整合を修正src/app/layout.tsxにグローバルな metadata と viewport 設定を追加し、SEOおよびレスポンシブ対応を強化■ React / Next.js ベストプラクティスへの対応
Reactのimportを削除し、最新のNext.js / React仕様に準拠BioCardにおけるpropsの展開やkey={member.name}の利用など、レンダリング効率と型安全性を改善slideshow.tsxにてuseMemoを用いた設定の最適化を行い、パフォーマンスと可読性を向上UpdateTitle.tsxにてuseCallbackを使用し、コールバック関数の最適化を実施■ 軽微なコードクリーンアップ
これらの変更により、コード構造の整理、保守性の向上、そしてアプリケーション全体のパフォーマンス改善を実現しています。