各ページのCSSを調整

[TkymHrt]

User description

概要

各ページのCSSを調整
タイポの修正

変更内容

カメラページ、お題ページ、ランキングページで修正
ランキングページでapiをweek → all

動作確認

---

PR Type

enhancement, bug_fix

---

Description

• ホームページ、ランキングページ、AssignmentBadge、ImageList、TopicTabsコンポーネントのCSSスタイルを調整し、デザインを改善しました。
• ランキングページとImageListコンポーネントでタイポを修正しました。
• ランキングデータ取得APIのエンドポイントを修正しました。
• ImageListコンポーネントに画像エラー時のプレースホルダー画像を追加しました。

---

Changes walkthrough 📝

	Relevant files
Enhancement	page.tsx ホームページのCSSスタイルとレイアウトの調整                                                                    app/src/app/page.tsx CSSのスタイルを調整し、テキストの色とサイズを変更 レイアウトの微調整 +4/-7      AssignmentBadge.tsx AssignmentBadgeコンポーネントのCSS調整                                                          app/src/components/AssignmentBadge.tsx CSSスタイルを調整し、レイアウトを変更 +3/-3      TopicTabs.tsx TopicTabsコンポーネントのCSSスタイル改善                                                              app/src/components/view/ranking/TopicTabs.tsx CSSスタイルを調整し、ボタンのデザインを改善 +24/-24
Bug_fix	page.tsx ランキングページのタイポ修正とCSS改善                                                                          app/src/app/ranking/page.tsx タイポを修正（"nomal"を"normal"に） CSSスタイルを調整し、ボタンのデザインを改善 +7/-5      ImageList.tsx ImageListコンポーネントのタイポ修正とエラーハンドリング追加                                              app/src/components/view/ranking/ImageList.tsx タイポを修正（"nomal"を"normal"に） 画像エラー時のプレースホルダー画像を追加 +19/-12  RankingListAll.tsx ランキングデータ取得APIのエンドポイント修正                                                                    app/src/components/view/ranking/RankingListAll.tsx APIエンドポイントを/api/score/weekから/api/score/allに変更 +1/-1

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review UI Improvement 新しい見出し要素が追加され、スタイルが変更されましたが、デザインの一貫性を保つために他の部分との整合性を確認する必要があります。 State Management rankingTypeの初期値が"normal"に設定されていますが、他の部分での使用方法を確認し、適切に管理されているかを検証する必要があります。 Error Handling 画像のエラー処理が追加されましたが、プレースホルダー画像のURLがハードコーディングされています。将来的に変更が必要になる可能性があります。

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Possible issue	型の整合性を確認して、初期値が正しいことを保証します。 rankingTypeの初期値を"normal"に設定する際、正しい型を使用しているか確認してください。 app/src/app/ranking/page.tsx [18] +const [rankingType, setRankingType] = useState<"normal" | "image">("normal"); - Suggestion importance[1-10]: 3 Why: この提案は型の確認を促していますが、実際には既に正しい型が使用されているため、影響は小さいです。	3
	定数が正しく定義されていることを確認します。 setMode関数を呼び出す際に、MODE.NORMALが正しく定義されているか確認してください。 app/src/components/view/ranking/ImageList.tsx [13] +setMode(MODE.NORMAL); - Suggestion importance[1-10]: 3 Why: MODE.NORMALは正しく定義されているため、確認する必要はありませんが、提案は有用です。	3
	APIエンドポイントの正確性を確認し、エラーハンドリングを強化します。 fetchメソッドのURLが正しいか確認し、必要に応じてエラーハンドリングを強化してください。 app/src/components/view/ranking/RankingListAll.tsx [13] +return fetch("/api/score/all") - Suggestion importance[1-10]: 3 Why: URLは正しいですが、エラーハンドリングの強化は常に良いプラクティスです。	3
Possible bug	画像のエラーハンドリングが正しく機能することを確認します。 handleImageError関数が呼ばれた際に、imageUrlが正しく更新されるか確認してください。 app/src/components/view/ranking/ImageList.tsx [71-74] +const handleImageError = () => { + setImageUrl("https://placehold.jp/150x150.png"); +}; - Suggestion importance[1-10]: 3 Why: handleImageError関数は正しく実装されていますが、確認を促す提案は有用です。	3