ホーム画面の背景とヘッダーを作成 #14
ホーム画面の背景とヘッダーを作成 #14
Conversation
Hosoda-abo
requested review from
cocoa04263,
Copilot,
gooharu,
moshi18 and
taki3210
There was a problem hiding this comment.
Pull Request Overview
This PR transforms the Next.js starter page into a custom dashboard interface with a Japanese theme. The changes replace the default Next.js landing page with a personalized user interface featuring a header with user information and navigation controls.
- Replaced the default Next.js template content with a custom dashboard layout
- Added a header section with user profile information and action buttons
- Implemented global styling to prevent page scrolling
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/app/page.tsx | Completely redesigned the home page from Next.js template to a custom dashboard with header and main content sections |
| src/app/globals.css | Added global styles to disable scrolling on html and body elements |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <button className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium"> | ||
| 今までの記録 | ||
| </button> | ||
| <button className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium"> | ||
| 設定 | ||
| </button> |
There was a problem hiding this comment.
The button styling is duplicated. Extract the common className into a constant or create a reusable Button component to avoid repetition and improve maintainability.
| <button className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium"> | ||
| 今までの記録 | ||
| </button> | ||
| <button className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium"> |
There was a problem hiding this comment.
The buttons lack proper accessibility attributes. Add type=\"button\" to prevent form submission behavior and consider adding aria-label attributes for better screen reader support.
| <button className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium"> | |
| 今までの記録 | |
| </button> | |
| <button className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium"> | |
| <button | |
| type="button" | |
| aria-label="今までの記録" | |
| className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium" | |
| > | |
| 今までの記録 | |
| </button> | |
| <button | |
| type="button" | |
| aria-label="設定" | |
| className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium" | |
| > |
src/app/globals.css
Outdated
| html, | ||
| body { | ||
| height: 100%; | ||
| overflow: hidden; |
There was a problem hiding this comment.
The html, body selector duplicates the existing body rule at line 23. Consider consolidating these styles into a single rule block to avoid duplicate selectors and potential conflicts.
src/app/globals.css
Outdated
| html, | ||
| body { | ||
| height: 100%; | ||
| overflow: hidden; |
There was a problem hiding this comment.
Setting overflow: hidden on the body prevents all scrolling, which can create accessibility issues for keyboard navigation and users who rely on scrolling. Consider using a more targeted approach or ensuring all content fits within the viewport.
| overflow: hidden; | |
| /* overflow: hidden; removed to restore scrolling */ |
kantacky
left a comment
kantacky
left a comment
There was a problem hiding this comment.
UIの変更があれば、差分がわかるスクリーンショットをPRの説明に含められると良さそう
デザインをちょっと変更してるので見て欲しい
色に関しては後で調整予定