관리자 화면 분리 및 요청/아이템 관리 흐름 정리

frontend/src/components/admin/AdminItemsSection.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { toApiUrl } from '../../lib/runtime'
+
+const props = defineProps({
+  customItems: { type: Array, required: true },
+  openCustomItemModal: { type: Function, required: true },
+  customItemPage: { type: Number, required: true },
+  customItemPageCount: { type: Number, required: true },
+  customItemTotal: { type: Number, required: true },
+  moveCustomItemPage: { type: Function, required: true },
+})
+</script>
+
+<template>
+  <div class="panel">
+    <div v-if="!props.customItems.length" class="hint">조건에 맞는 관리 대상 아이템이 없어요.</div>
+    <div v-else class="customItemGrid">
+      <button v-for="item in props.customItems" :key="item.id" type="button" class="customItemCard" @click="props.openCustomItemModal(item)">
+        <span class="customItemCard__badge" :class="{ 'customItemCard__badge--template': item.sourceType === 'template' }">{{ item.sourceLabel }}</span>
+        <img class="customItemCard__image" :src="toApiUrl(item.src)" :alt="item.label" />
+        <div class="customItemCard__title" :title="item.label">{{ item.label }}</div>
+      </button>
+    </div>
+
+    <div class="pager">
+      <button class="btn btn--ghost" :disabled="props.customItemPage <= 1" @click="props.moveCustomItemPage(-1)">이전</button>
+      <div class="pager__info">{{ props.customItemPage }} / {{ props.customItemPageCount }} 페이지 · 총 {{ props.customItemTotal }}개</div>
+      <button class="btn btn--ghost" :disabled="props.customItemPage >= props.customItemPageCount" @click="props.moveCustomItemPage(1)">다음</button>
+    </div>
+  </div>
+</template>