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

[reiroop]

LGTMです！ありがとうございます
できればレスポンシブ対応したいなーって気持ちはあるのですが、adminページなので使う人も回数もそんなに多くないですしとりあえず今はいいかも？って感じです。