Feat/request page のデザインを調整

[reiroop]

User description

• フィルターが一時的に消えています
• 最外部のmarginが調整されています
• タイトル部分が左寄せになりました
• 一覧の要素にpaddingが追加されています
• 一部表記が変更されました
• アイコンが追加されました
• レスポンシブ対応をしています

---

PR Type

enhancement

---

Description

• RequestItem.vueにユーザーアイコンを追加し、UIを改善しました。
• RequestsPage.vueでレスポンシブデザインを改善し、フィルターコンポーネントを削除しました。
• ページネーションバーの位置を調整し、全体的なレイアウトを改善しました。

---

Changes walkthrough 📝

	Relevant files
Enhancement	RequestItem.vue RequestItemコンポーネントのUIとレイアウトを改善                                                      src/components/requests/RequestItem.vue ユーザーアイコンを追加 レイアウトの調整（padding, gapの追加） 金額表示のフォントとサイズを調整 +21/-13  RequestsPage.vue RequestsPageのデザインとレイアウトを調整                                                              src/pages/RequestsPage.vue レスポンシブデザインの改善 フィルターコンポーネントの削除 ページネーションバーの位置調整 +27/-28

---

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

[mehm8128]

気になったところ雑にレビューしました
Figmaでauto layoutになってるところは基本flexかgridで作ってpaddingとかgapとかでスペーシングして、できるだけmarginとかはつけないように修正するときれいになりそうです(Figma適当だった頃に昔の僕がmarginつけてたのが悪いけど)

[mehm8128]

/review

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit b52424e)

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review UI Consistency 新しいユーザーアイコンの追加とレイアウトの変更が行われていますが、アイコンのサイズや配置に関する一貫性が確認されているか再確認が必要です。特に、UserIcon コンポーネントの max-w-7 クラスが適切かどうかを検討してください。 Responsive Design レスポンシブデザインの調整が行われていますが、特にスマホサイズでの表示に関するTodoが完了しているか確認が必要です。max-w-6xl クラスの使用が適切かどうかも再検討してください。

[mehm8128]

/improve

[mehm8128]

マージミスってそうですが大丈夫ですか？
git reset --hard b59aa7dで直るかな

[reiroop]

マージミスってそうですが大丈夫ですか？ git reset --hard b59aa7dで直るかな

直せました、ありがとうございます

[mehm8128]

作業中ならすぐじゃなくても大丈夫ですが、conflictの解消もお願いします🙏

[reiroop]

/review

[reiroop]

/improve

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 23fba99

Category	Suggestion	Score
Layout issue	flex-grow クラスを削除して、レイアウトの問題を解決します。 RouterLink コンポーネント内で flex-grow クラスが複数の div 要素に適用されていますが、これにより予期しないレイアウトの問題が発生する可能性があります。特に、親要素が flex ディスプレイを使用している場合、子要素のサイズが不均等になることがあります。これを解決するために、特定の div から flex-grow を削除することを検討してください。 src/components/requests/RequestItem.vue [36-42] -<div class="flex flex-grow flex-wrap"> - <div class="flex-grow"> +<div class="flex flex-wrap"> + <div> <span class="text-xl">{{ request.title }}</span> <div class="mt-2"> <TagsGroup :tags="request.tags" /> </div> </div> Suggestion importance[1-10]: 8 Why: The suggestion to remove flex-grow from certain div elements is valid as it addresses potential layout issues that can arise from uneven sizing of child elements. This is a significant improvement for layout consistency.	8
Design consistency	アイコンのパディング設定を削除して、デザインの一貫性を保ちます。 UserIcon コンポーネントの class 属性に h-5 p-0 を設定していますが、p-0 はパディングをゼロに設定するもので、アイコンの見た目に影響を与える可能性があります。デザインの一貫性を保つために、このパディング設定を削除することを検討してください。 src/components/requests/RequestItem.vue [46] -<UserIcon class="h-5 p-0" :name="userMap[request.createdBy]" /> +<UserIcon class="h-5" :name="userMap[request.createdBy]" /> Suggestion importance[1-10]: 7 Why: Removing the padding setting from the UserIcon component can help maintain design consistency. This suggestion is valid as it addresses a potential design inconsistency, though it is not critical.	7

---

Previous suggestions

Suggestions

Category	Suggestion	Score
Possible bug	SimpleButton の属性を標準的な Vue.js のスタイルに合わせて修正します。 SimpleButton コンポーネントに font-size="lg" と padding="md" を指定していますが、これらの属性は Vue.js の標準的な属性ではありません。カスタムコンポーネントでこれらの属性を適切に処理しているか確認し、必要に応じて修正してください。 src/pages/RequestsPage.vue [68] -<SimpleButton font-size="lg" padding="md"> +<SimpleButton class="text-lg p-4"> Suggestion importance[1-10]: 8 Why: The suggestion identifies a potential bug with non-standard attributes in the SimpleButton component, which could lead to unexpected behavior if not handled properly. This is important for ensuring the component functions as intended.	8
Possible issue	RouterLink のパディングを元の設定に戻します。 RouterLink のクラス属性が flex px-6 py-4 に変更されていますが、この変更により、リンクのパディングが以前よりも大きくなっています。これが意図的なデザイン変更でない場合は、元のパディングに戻すことを検討してください。 src/components/requests/RequestItem.vue [32] -<RouterLink class="flex px-6 py-4" :to="'/requests/' + request.id"> +<RouterLink class="flex p-2" :to="'/requests/' + request.id"> Suggestion importance[1-10]: 7 Why: The suggestion correctly identifies a potential unintended design change. Reverting the padding could be important for maintaining the intended UI layout.	7
Maintainability	レスポンシブデザインを考慮して、不要な最小幅設定を削除します。 新しいページデザインで min-w-160 クラスを使用していますが、これによりコンテンツの最小幅が設定されています。レスポンシブデザインの観点から、この設定が適切であるか確認し、必要に応じて調整してください。 src/pages/RequestsPage.vue [63] -<div class="min-w-160 flex flex-col"> +<div class="flex flex-col"> Suggestion importance[1-10]: 6 Why: The suggestion to remove the min-w-160 class addresses a potential issue with responsive design, which is important for maintainability and user experience on different devices.	6
Enhancement	アイコンのパディングを調整して、UI の一貫性を向上させます。 UserIcon コンポーネントのクラス属性に h-5 p-0 を指定していますが、これはアイコンのサイズとパディングを制御します。デザインの一貫性を保つために、他の UI 要素との間隔を調整することをお勧めします。 src/components/requests/RequestItem.vue [45] -<UserIcon class="h-5 p-0" :name="userMap[request.createdBy]" /> +<UserIcon class="h-5 p-1" :name="userMap[request.createdBy]" /> Suggestion importance[1-10]: 5 Why: The suggestion to adjust padding for UserIcon is minor and subjective, focusing on UI consistency. It does not address a critical issue or bug.	5

[github-actions]

Persistent review updated to latest commit 23fba99

[github-actions]

Persistent review updated to latest commit b52424e

[mehm8128]

tailwind移行時に壊れたっぽいところメインですがちょっと気になったところ書きました
あとはそんなに問題なさそうです

[mehm8128]

status chip

• 完全な丸になってなさそう
• Figmaで中身塗りつぶさないやつ使ってるので、そっちの方がいいかもです