feat/admin ページのレイアウトを Figma に揃える

[anko9801]

User description

fix: #163

---

PR Type

Enhancement

---

Description

• 管理者ページのレイアウトをFigmaに合わせて更新しました。
• 管理者の追加と削除のUIを改善し、操作をより直感的にしました。
• タグ削除機能のUIを改善し、ユーザーエクスペリエンスを向上させました。

---

Changes walkthrough 📝

	Relevant files
Enhancement	AdminPage.vue 管理者ページのUIとレイアウトの改善                                                                              src/pages/AdminPage.vue 管理者ページのレイアウトを更新 管理者の追加と削除のUIを改善 タグ削除機能のUIを改善 +52/-46

---

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

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit a0904fe)

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review コードの整合性 props.options?.length ?? 0 の記述が (props.options?.length ?? 0) に変更されていますが、この変更は意図的なものでしょうか？括弧の追加は特に必要ないように見えますが、意図的な変更であればその理由を明確にする必要があります。 UIコンポーネントの整合性 新しいUIの構造とスタイルが既存のデザインガイドラインや他のページと整合性が取れているか確認が必要です。特に、InputSelectMultiple や SimpleButton の使用方法が以前のコードから大きく変更されています。

[reiroop]

/review

[reiroop]

/improve

[github-actions]

Persistent review updated to latest commit f6dc652

[reiroop]

/review

[reiroop]

/improve

[github-actions]

Persistent review updated to latest commit a0904fe

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to a0904fe

Category	Suggestion	Score
Possible bug	props.options が未定義の場合に length が undefined になるのを防ぐための修正です。 props.options?.length ?? 0 の部分を props.options?.length || 0 に変更してください。これにより、props.options が undefined または null の場合に 0 が返され、length が undefined になる可能性を排除できます。 src/components/shared/InputSelectMultiple.vue [184] -: (props.options?.length ?? 0) +: (props.options?.length || 0) Suggestion importance[1-10]: 8 Why: The suggestion correctly addresses a potential issue where props.options could be undefined or null, which would result in length being undefined. By using || 0, it ensures that 0 is returned in such cases, improving the robustness of the code.	8

---

Previous suggestions

Suggestions up to commit f6dc652

Category	Suggestion	Score
Possible bug	length が 0 の場合に割り算をスキップするように修正してください。 props.options が null または undefined の場合、length が 0 になるため、focusingListItemIndex.value の計算で割り算によるエラーが発生する可能性があります。length が 0 の場合には、この計算をスキップする条件を追加することをお勧めします。 src/components/shared/InputSelectMultiple.vue [184-185] : (props.options?.length ?? 0) -focusingListItemIndex.value = (focusingListItemIndex.value + 1) % length +if (length > 0) { + focusingListItemIndex.value = (focusingListItemIndex.value + 1) % length +} Suggestion importance[1-10]: 9 Why: The suggestion correctly identifies a potential division by zero error when length is 0 and provides a solution to skip the calculation, which is crucial for preventing runtime errors.	9
Enhancement	calcWidth 関数にデフォルトの幅を設定してください。 calcWidth 関数の戻り値が常に props.class の文字列のみを返すように変更されていますが、これにより以前の w-70 が削除されてしまっています。もしデフォルトの幅を設定する意図がある場合は、条件を追加してデフォルト値を設定することをお勧めします。 src/components/shared/InputSelectMultiple.vue [244] -return `${props.class}` +return `${props.class} w-70` Suggestion importance[1-10]: 7 Why: The suggestion highlights the removal of a default width (w-70) and recommends reintroducing it, which could be important for maintaining consistent styling. However, it is not as critical as preventing runtime errors.	7