検索ページ用ユーザー一覧を作成して置換

[mehm8128]

User description

検索結果で「チームメンバー」って文字があって、ContestTeamのコンポーネントを検索結果ページで使ってるのがよくなかったため、新しく別で作成

---

PR Type

Enhancement

---

Description

• 検索ページ用の新しいユーザー一覧コンポーネントを作成し、既存のコンポーネントを置換しました。
• ユーザーリストアイテムコンポーネントを新規作成し、ユーザーアイコンと名前を表示する機能を追加しました。
• 検索ページで使用するメンバーリストコンポーネントをContestTeamからSearchに変更しました。

---

Changes walkthrough 📝

Relevant files

Enhancement

UserList.vue 検索ページ用のユーザー一覧コンポーネントを新規作成                                                                src/components/Search/UserList.vue 新しいユーザー一覧コンポーネントを作成 メンバーリストを表示するためのテンプレートとスタイルを追加 +36/-0    UserListItem.vue ユーザーリストアイテムコンポーネントを新規作成                                                                    src/components/Search/UserListItem.vue ユーザーアイコンと名前を表示するリストアイテムコンポーネントを作成 スタイルを追加 +30/-0    SearchPage.vue 検索ページのメンバーリストコンポーネントを置換                                                                    src/pages/SearchPage.vue 検索ページで使用するメンバーリストコンポーネントを置換 +1/-1

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[Pugma]

/improve

[github-actions]

Failed to generate code suggestions for PR

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5]	2
🧪 Relevant tests	No
🔒 Security concerns	No
⚡ Key issues to review	コンポーネントの命名: MemberListItem という名前が UserListItem.vue でインポートされていますが、実際のファイル名と一致していません。これは混乱を招く可能性があります。
	プロパティのバインディング: UserListItem.vue の コンポーネントに :user-id="member.name" とありますが、これはおそらく :user-id="member.id" の間違いではないでしょうか？名前ではなく、ユーザーIDを渡すべきです。

[github-actions]

Failed to generate code suggestions for PR

[Pugma]

/improve

[github-actions]

Failed to generate code suggestions for PR

[Pugma]

/improve --extended

[github-actions]

Failed to generate code suggestions for PR

[Pugma]

/improve

[github-actions]

Failed to generate code suggestions for PR

[mehm8128]

/improve

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Enhancement	Rename the component in the template to match its file and import name for clarity Consider using a more descriptive component name in the template for clarity and consistency. Instead of , use to match the imported component name and file name. src/components/Search/UserList.vue [15-18] -<member-list-item +<user-list-item v-for="member in members" :key="member.id" :member="member" /> Suggestion importance[1-10]: 9 Why: The suggestion improves code clarity and consistency by ensuring the component name in the template matches the imported component name and file name. This change reduces confusion and potential errors.	9
Accessibility	Improve accessibility by adding a title attribute to the router link Add a title attribute to the to improve accessibility and provide additional context on hover, which can be particularly useful for users who rely on assistive technologies. src/components/Search/UserListItem.vue [12] -<router-link :class="$style.link" :to="`/users/${member.id}`"> +<router-link :class="$style.link" :to="`/users/${member.id}`" :title="`View profile of ${member.name}`"> Suggestion importance[1-10]: 8 Why: Adding a title attribute enhances accessibility by providing additional context for users relying on assistive technologies, which is a significant improvement.	8
Maintainability	Use a computed property for constructing user profile URLs to enhance readability and manageability Consider using a computed property for the user profile URL to simplify the template and enhance readability. This change centralizes the logic for URL construction, making it easier to manage and modify. src/components/Search/UserListItem.vue [12] -<router-link :class="$style.link" :to="`/users/${member.id}`"> +<router-link :class="$style.link" :to="userProfileUrl"> Suggestion importance[1-10]: 7 Why: Using a computed property centralizes the URL construction logic, improving readability and maintainability. However, it is a minor enhancement rather than a critical fix.	7
	Use a CSS variable for text color to ensure consistency with theme changes To ensure that the text color adapts dynamically to theme changes, consider using a CSS variable for the text color in the .name class. This approach promotes better theme consistency and easier maintenance. src/components/Search/UserListItem.vue [26-27] .name { - color: $color-text; + color: var(--text-color); } Suggestion importance[1-10]: 6 Why: Using a CSS variable for the text color improves maintainability and ensures the text color adapts to theme changes. This is a useful but minor improvement.	6

[Pugma]

ありがとうございます
いいと思うのでこのままマージしちゃってもいいですが、一点だけ確認をお願いします！

[Pugma]

member-listの方はこういう表記になっていたんですが、ここでタグを変更した理由はありますか…？

Suggested change

	<div :class="$style.container">
	<section :class="$style.container">

[mehm8128]

基本的にsectionタグの中(の一番上)には見出しを置いた方がいいのですが、今回特に置く見出しがなかった(すぐ上にh1があったし)のでsectionじゃなくて単純にdivにしたって感じです

[Pugma]

:haakusimasita:
じゃあこれでマージしちゃって大丈夫です！