릴리스: v1.4.28 관리자 템플릿 내부 이름층 추가 정리

frontend/src/App.vue

@@ -76,7 +76,7 @@ const showRightRailAction = computed(() => false)
 const showSettingsGuideButton = computed(() => route.name === 'profile')
 const guideSteps = [
   {
-    id: 'select-game',
+    id: 'select-topic',
     title: '주제 또는 양식 선택',
     summary: '주제 템플릿을 고르거나 커스텀 티어표 만들기로 바로 시작합니다.',
     description:

frontend/src/components/admin/AdminGamesSection.vue

@@ -9,12 +9,12 @@ const props = defineProps({
   stagedRequestDraftCount: { type: Number, required: true },
   appliedRequestItemCount: { type: Number, required: true },
   openTemplateCreateModal: { type: Function, required: true },
-  isGameLoading: { type: Boolean, required: true },
+  isTemplateLoading: { type: Boolean, required: true },
   hasSelectedTemplate: { type: Boolean, required: true },
   selectedTemplate: { type: Object, default: null },
   displayThumbnailUrl: { type: String, default: '' },
   canApplyThumbnail: { type: Boolean, required: true },
-  gameVisibilitySaving: { type: Boolean, required: true },
+  templateVisibilitySaving: { type: Boolean, required: true },
   thumbFileInputRef: { type: Function, required: true },
   openThumbFilePicker: { type: Function, required: true },
   onThumb: { type: Function, required: true },
@@ -41,14 +41,14 @@ const props = defineProps({
   removeUploadDraft: { type: Function, required: true },
   hasTemplateItemOrderChanges: { type: Boolean, required: true },
   saveTemplateItemOrder: { type: Function, required: true },
-  gameItemListRef: { type: Function, required: true },
+  templateItemListRef: { type: Function, required: true },
   saveTemplateItemLabel: { type: Function, required: true },
   removeTemplateItem: { type: Function, required: true },
   selectedTemplateId: { type: String, default: '' },
 })
 
 function setGameItemListElement(el) {
-  props.gameItemListRef(el)
+  props.templateItemListRef(el)
 }
 
 function setThumbFileElement(el) {
@@ -102,7 +102,7 @@ function setThumbFileElement(el) {
     </div>
   </div>
 
-  <div v-if="props.isGameLoading" class="panel panel--empty">
+  <div v-if="props.isTemplateLoading" class="panel panel--empty">
     <div class="emptyState">
       <div class="emptyState__title">템플릿 정보를 불러오는 중이에요.</div>
       <div class="emptyState__desc">선택한 템플릿의 썸네일과 기본 아이템을 곧 표시합니다.</div>
@@ -122,7 +122,7 @@ function setThumbFileElement(el) {
           @dragleave="props.onThumbDragLeave"
           @drop="props.onThumbDrop"
         >
-          <img v-if="props.displayThumbnailUrl" class="selectedThumb selectedThumb--sidebar" :src="props.displayThumbnailUrl" :alt="props.selectedTemplate.game.name" />
+          <img v-if="props.displayThumbnailUrl" class="selectedThumb selectedThumb--sidebar" :src="props.displayThumbnailUrl" :alt="props.selectedTemplate.template.name" />
           <div v-else class="selectedThumb selectedThumb--empty selectedThumb--sidebar">대표 썸네일</div>
           <div class="thumbDropZone__copy">
             <div v-if="!props.displayThumbnailUrl" class="thumbDropZone__iconWrap">
@@ -134,10 +134,10 @@ function setThumbFileElement(el) {
       </div>
       <div class="gameSettingsCard__body">
         <div class="panel__title">템플릿 설정</div>
-        <div class="gameSettingsCard__meta">{{ props.selectedTemplate.game.name }} · {{ props.selectedTemplate.game.id }}</div>
-        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': props.gameVisibilitySaving }">
-          <input :checked="!!props.selectedTemplate.game.isPublic" type="checkbox" @change="props.toggleSelectedTemplateVisibility($event.target.checked)" />
-          <span class="toggleSwitch__label">{{ props.selectedTemplate.game.isPublic ? '템플릿 공개중' : '비공개 상태' }}</span>
+        <div class="gameSettingsCard__meta">{{ props.selectedTemplate.template.name }} · {{ props.selectedTemplate.template.id }}</div>
+        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': props.templateVisibilitySaving }">
+          <input :checked="!!props.selectedTemplate.template.isPublic" type="checkbox" @change="props.toggleSelectedTemplateVisibility($event.target.checked)" />
+          <span class="toggleSwitch__label">{{ props.selectedTemplate.template.isPublic ? '템플릿 공개중' : '비공개 상태' }}</span>
           <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
         </label>
         <div class="gameSettingsCard__actions">
@@ -216,8 +216,8 @@ function setThumbFileElement(el) {
       </div>
       <div v-if="!props.selectedTemplate?.items?.length" class="hint">아직 등록된 기본 아이템이 없어요.</div>
       <div v-else :ref="setGameItemListElement" class="thumbGrid">
-        <div v-for="item in props.selectedTemplate.items" :key="item.id" class="thumbCard" :data-game-item-id="item.id">
-          <img class="thumb thumb--game" :src="toApiUrl(item.src)" :alt="item.label" draggable="false" />
+        <div v-for="item in props.selectedTemplate.items" :key="item.id" class="thumbCard" :data-template-item-id="item.id">
+          <img class="thumb thumb--template" :src="toApiUrl(item.src)" :alt="item.label" draggable="false" />
           <input v-model="item.draftLabel" class="input input--labelEdit" placeholder="아이템 이름" data-no-drag />
           <div class="thumbCard__actions">
             <button

frontend/src/composables/useAdminGameManager.js

@@ -11,10 +11,10 @@ export function useAdminGameManager({
   thumbFile,
   itemPreviewUrls,
   itemFileInput,
-  gameItemListEl,
-  gameItemSortable,
-  savedGameItemOrderIds,
-  isGameLoading,
+  templateItemListEl,
+  templateItemSortable,
+  savedTemplateItemOrderIds,
+  isTemplateLoading,
   activeTemplateRequest,
   templateRequests,
   customItemModalOpen,
@@ -49,21 +49,21 @@ export function useAdminGameManager({
     return src.split('/').pop() || item.file?.name || 'item'
   }
 
-  function destroyGameItemSortable() {
-    if (gameItemSortable.value) {
-      gameItemSortable.value.destroy()
-      gameItemSortable.value = null
+  function destroyTemplateItemSortable() {
+    if (templateItemSortable.value) {
+      templateItemSortable.value.destroy()
+      templateItemSortable.value = null
     }
   }
 
-  async function syncGameItemSortable() {
+  async function syncTemplateItemSortable() {
     await nextTick()
-    destroyGameItemSortable()
-    if (!gameItemListEl.value || !selectedTemplate.value?.items?.length) return
+    destroyTemplateItemSortable()
+    if (!templateItemListEl.value || !selectedTemplate.value?.items?.length) return
 
-    gameItemSortable.value = Sortable.create(gameItemListEl.value, {
+    templateItemSortable.value = Sortable.create(templateItemListEl.value, {
       animation: 160,
-      draggable: '[data-game-item-id]',
+      draggable: '[data-template-item-id]',
       forceFallback: true,
       fallbackOnBody: false,
       filter: '[data-no-drag]',
@@ -124,31 +124,30 @@ export function useAdminGameManager({
 
     if (!selectedTemplateId.value) {
       selectedTemplate.value = null
-      savedGameItemOrderIds.value = []
-      destroyGameItemSortable()
+      savedTemplateItemOrderIds.value = []
+      destroyTemplateItemSortable()
       return
     }
 
     try {
-      isGameLoading.value = true
+      isTemplateLoading.value = true
       const data = await api.getTopic(selectedTemplateId.value)
       const loadedTemplate = data.template || data.topic || null
       selectedTemplate.value = {
         ...data,
-        game: loadedTemplate,
         template: loadedTemplate,
         items: (data.items || []).map((item) => ({
           ...item,
           draftLabel: item.label,
         })),
       }
-      savedGameItemOrderIds.value = (data.items || []).map((item) => item.id)
-      await syncGameItemSortable()
+      savedTemplateItemOrderIds.value = (data.items || []).map((item) => item.id)
+      await syncTemplateItemSortable()
     } catch (e) {
       selectedTemplate.value = null
       error.value = '템플릿 정보를 불러오지 못했어요.'
     } finally {
-      isGameLoading.value = false
+      isTemplateLoading.value = false
     }
   }
 
@@ -350,8 +349,8 @@ export function useAdminGameManager({
           draftLabel: item.label,
         })),
       }
-      savedGameItemOrderIds.value = (data.items || []).map((item) => item.id)
-      await syncGameItemSortable()
+      savedTemplateItemOrderIds.value = (data.items || []).map((item) => item.id)
+      await syncTemplateItemSortable()
       success.value = '기본 아이템 순서를 저장했어요.'
     } catch (e) {
       error.value = '기본 아이템 순서 저장에 실패했어요.'
@@ -360,8 +359,8 @@ export function useAdminGameManager({
 
   return {
     requestItemFilename,
-    destroyGameItemSortable,
-    syncGameItemSortable,
+    destroyTemplateItemSortable,
+    syncTemplateItemSortable,
     mergeRequestItemsIntoDrafts,
     removeUploadDraft,
     loadTemplate,

frontend/src/views/AdminView.vue

@@ -109,7 +109,7 @@ const success = ref('')
 const newTemplateId = ref('')
 const newTemplateName = ref('')
 const newTemplateIsPublic = ref(false)
-const gameVisibilitySaving = ref(false)
+const templateVisibilitySaving = ref(false)
 
 const uploadFiles = ref([])
 const uploadItemDrafts = ref([])
@@ -122,12 +122,12 @@ const itemFileInput = ref(null)
 const thumbFileInput = ref(null)
 const featuredListEl = ref(null)
 const featuredSortable = ref(null)
-const gameItemListEl = ref(null)
-const gameItemSortable = ref(null)
-let gameItemSortableSyncTimer = null
-const savedGameItemOrderIds = ref([])
+const templateItemListEl = ref(null)
+const templateItemSortable = ref(null)
+let templateItemSortableSyncTimer = null
+const savedTemplateItemOrderIds = ref([])
 const userAvatarInputs = ref({})
-const isGameLoading = ref(false)
+const isTemplateLoading = ref(false)
 const templateCreateModalOpen = ref(false)
 const previousBodyOverflow = ref('')
 
@@ -144,20 +144,20 @@ function setThumbFileInputRef(el) {
 }
 
 function scheduleGameItemSortableSync() {
-  if (gameItemSortableSyncTimer) {
-    clearTimeout(gameItemSortableSyncTimer)
-    gameItemSortableSyncTimer = null
+  if (templateItemSortableSyncTimer) {
+    clearTimeout(templateItemSortableSyncTimer)
+    templateItemSortableSyncTimer = null
   }
-  if (!gameItemListEl.value || !selectedTemplate.value?.items?.length) return
+  if (!templateItemListEl.value || !selectedTemplate.value?.items?.length) return
 
-  gameItemSortableSyncTimer = setTimeout(() => {
-    gameItemSortableSyncTimer = null
-    syncGameItemSortable()
+  templateItemSortableSyncTimer = setTimeout(() => {
+    templateItemSortableSyncTimer = null
+    syncTemplateItemSortable()
   }, 0)
 }
 
 function setGameItemListRef(el) {
-  gameItemListEl.value = el
+  templateItemListEl.value = el
   if (!el) return
   scheduleGameItemSortableSync()
 }
@@ -175,7 +175,7 @@ function normalizeAdminSrc(src) {
   }
 }
 
-const hasSelectedTemplate = computed(() => !!selectedTemplate.value?.game?.id)
+const hasSelectedTemplate = computed(() => !!selectedTemplate.value?.template?.id)
 const canApplyThumbnail = computed(() => !!thumbFile.value && !!selectedTemplateId.value)
 const canAddItem = computed(() => uploadItemDrafts.value.length > 0 && uploadItemDrafts.value.every((item) => !!item.label.trim()) && !!selectedTemplateId.value)
 const stagedRequestDraftCount = computed(() => uploadItemDrafts.value.filter((item) => item.kind === 'request').length)
@@ -188,7 +188,7 @@ const appliedRequestItemCount = computed(() => {
 })
 const hasTemplateItemOrderChanges = computed(() => {
   const currentIds = (selectedTemplate.value?.items || []).map((item) => item.id)
-  return currentIds.join('|') !== savedGameItemOrderIds.value.join('|')
+  return currentIds.join('|') !== savedTemplateItemOrderIds.value.join('|')
 })
 const customItemPageCount = computed(() => Math.max(1, Math.ceil(customItemTotal.value / customItemLimit.value)))
 const adminTierListPageCount = computed(() => Math.max(1, Math.ceil(adminTierListTotal.value / adminTierListLimit.value)))
@@ -375,12 +375,12 @@ onUnmounted(() => {
   if (typeof document !== 'undefined') document.body.style.overflow = previousBodyOverflow.value || ''
   clearPreviewUrl('item')
   clearPreviewUrl('thumb')
-  if (gameItemSortableSyncTimer) {
-    clearTimeout(gameItemSortableSyncTimer)
-    gameItemSortableSyncTimer = null
+  if (templateItemSortableSyncTimer) {
+    clearTimeout(templateItemSortableSyncTimer)
+    templateItemSortableSyncTimer = null
   }
   destroyFeaturedSortable()
-  destroyGameItemSortable()
+  destroyTemplateItemSortable()
 })
 
 function clearPreviewUrl(kind) {
@@ -452,7 +452,7 @@ watch(
 )
 
 watch(
-  () => selectedTemplate.value?.game?.id || '',
+  () => selectedTemplate.value?.template?.id || '',
   async (templateId) => {
     await refreshSelectedTemplateTierListStats(templateId)
   },
@@ -481,7 +481,7 @@ watch(
 watch(
   () => activeTab.value,
   async (tab) => {
-    if (tab === 'template-admin' && selectedTemplateId.value && !selectedTemplate.value?.game?.id) {
+    if (tab === 'template-admin' && selectedTemplateId.value && !selectedTemplate.value?.template?.id) {
       await loadTemplate()
       return
     }
@@ -524,7 +524,7 @@ watch(
 )
 
 watch(
-  () => [selectedTemplate.value?.game?.id || '', selectedTemplate.value?.items?.length || 0, !!gameItemListEl.value],
+  () => [selectedTemplate.value?.template?.id || '', selectedTemplate.value?.items?.length || 0, !!templateItemListEl.value],
   ([templateId, itemCount, hasListEl]) => {
     if (!templateId || !itemCount || !hasListEl) return
     scheduleGameItemSortableSync()
@@ -571,6 +571,7 @@ function formatImageJobSourceCategory(category) {
       return '커스텀 아이템'
     case 'tierlists':
       return '티어표 썸네일'
+    case 'topics':
     case 'games':
       return '주제/템플릿 이미지'
     case 'avatars':
@@ -931,8 +932,8 @@ const {
 })
 
 const {
-  destroyGameItemSortable,
-  syncGameItemSortable,
+  destroyTemplateItemSortable,
+  syncTemplateItemSortable,
   mergeRequestItemsIntoDrafts,
   removeUploadDraft,
   loadTemplate,
@@ -953,10 +954,10 @@ const {
   thumbFile,
   itemPreviewUrls,
   itemFileInput,
-  gameItemListEl,
-  gameItemSortable,
-  savedGameItemOrderIds,
-  isGameLoading,
+  templateItemListEl,
+  templateItemSortable,
+  savedTemplateItemOrderIds,
+  isTemplateLoading,
   activeTemplateRequest,
   templateRequests,
   customItemModalOpen,
@@ -1167,17 +1168,17 @@ async function uploadThumbnail() {
 }
 
 async function saveTemplateVisibility() {
-  if (!selectedTemplate.value?.game?.id) return
+  if (!selectedTemplate.value?.template?.id) return
   try {
-    gameVisibilitySaving.value = true
-    const data = await api.updateAdminTemplate(selectedTemplate.value.game.id, {
-      isPublic: !!selectedTemplate.value.game.isPublic,
+    templateVisibilitySaving.value = true
+    const data = await api.updateAdminTemplate(selectedTemplate.value.template.id, {
+      isPublic: !!selectedTemplate.value.template.isPublic,
     })
     const nextTemplate = data.template || {}
     selectedTemplate.value = {
       ...selectedTemplate.value,
-      game: {
-        ...selectedTemplate.value.game,
+      template: {
+        ...selectedTemplate.value.template,
         ...nextTemplate,
       },
     }
@@ -1188,17 +1189,17 @@ async function saveTemplateVisibility() {
     error.value = '템플릿 공개 상태를 저장하지 못했어요.'
     return false
   } finally {
-    gameVisibilitySaving.value = false
+    templateVisibilitySaving.value = false
   }
 }
 
 async function toggleSelectedTemplateVisibility(nextValue) {
-  if (!selectedTemplate.value?.game?.id || gameVisibilitySaving.value) return
-  const previous = !!selectedTemplate.value.game.isPublic
+  if (!selectedTemplate.value?.template?.id || templateVisibilitySaving.value) return
+  const previous = !!selectedTemplate.value.template.isPublic
   selectedTemplate.value = {
     ...selectedTemplate.value,
-    game: {
-      ...selectedTemplate.value.game,
+    template: {
+      ...selectedTemplate.value.template,
       isPublic: !!nextValue,
     },
   }
@@ -1206,8 +1207,8 @@ async function toggleSelectedTemplateVisibility(nextValue) {
   if (!saved) {
     selectedTemplate.value = {
       ...selectedTemplate.value,
-      game: {
-        ...selectedTemplate.value.game,
+      template: {
+        ...selectedTemplate.value.template,
         isPublic: previous,
       },
     }
@@ -1278,9 +1279,9 @@ async function saveTemplateItemLabel(item) {
 
 async function removeTemplate() {
   resetMessages()
-  if (!selectedTemplateId.value || !selectedTemplate.value?.game) return
+  if (!selectedTemplateId.value || !selectedTemplate.value?.template) return
 
-  const ok = window.confirm(`"${selectedTemplate.value.game.name}" 템플릿을 삭제할까요? 관련 기본 아이템과 티어표도 함께 삭제됩니다.`)
+  const ok = window.confirm(`"${selectedTemplate.value.template.name}" 템플릿을 삭제할까요? 관련 기본 아이템과 티어표도 함께 삭제됩니다.`)
   if (!ok) return
 
   try {
@@ -1290,7 +1291,7 @@ async function removeTemplate() {
     })
     if (!res.ok) throw new Error('failed')
 
-    const deletedName = selectedTemplate.value.game.name
+    const deletedName = selectedTemplate.value.template.name
     selectedTemplateId.value = ''
     selectedTemplate.value = null
     resetUploadState()
@@ -1432,7 +1433,7 @@ async function saveAdminTierListMeta() {
     adminTierLists.value = adminTierLists.value.map((tierList) => (tierList.id === updated.id ? { ...tierList, ...updated } : tierList))
     if (previewTierList.value?.id === updated.id) previewTierList.value = { ...previewTierList.value, ...updated }
     modalTargetAdminTierList.value = updated
-    await Promise.all([refreshAdminTierListStats(), refreshSelectedTemplateTierListStats(selectedTemplate.value?.game?.id || '')])
+    await Promise.all([refreshAdminTierListStats(), refreshSelectedTemplateTierListStats(selectedTemplate.value?.template?.id || '')])
     success.value = '티어표 정보를 수정했어요.'
     closeAdminTierListManageModal()
   } catch (e) {
@@ -1454,7 +1455,7 @@ async function deleteAdminTierListEntry() {
     adminTierLists.value = adminTierLists.value.filter((tierList) => tierList.id !== modalTargetAdminTierList.value.id)
     adminTierListTotal.value = Math.max(0, adminTierListTotal.value - 1)
     if (previewTierList.value?.id === modalTargetAdminTierList.value.id) previewTierList.value = null
-    await Promise.all([refreshAdminTierListStats(), refreshSelectedTemplateTierListStats(selectedTemplate.value?.game?.id || '')])
+    await Promise.all([refreshAdminTierListStats(), refreshSelectedTemplateTierListStats(selectedTemplate.value?.template?.id || '')])
     success.value = '티어표를 삭제했어요.'
     closeAdminTierListManageModal()
     if (!adminTierLists.value.length && adminTierListPage.value > 1) {
@@ -1641,7 +1642,7 @@ function templateRequestTargetLabel(request) {
 
 const displayThumbnailUrl = computed(() => {
   if (thumbPreviewUrl.value) return thumbPreviewUrl.value
-  if (selectedTemplate.value?.game?.thumbnailSrc) return toApiUrl(selectedTemplate.value.game.thumbnailSrc)
+  if (selectedTemplate.value?.template?.thumbnailSrc) return toApiUrl(selectedTemplate.value.template.thumbnailSrc)
   return ''
 })
 
@@ -1707,12 +1708,12 @@ function userAvatarFallback(user) {
               :staged-request-draft-count="stagedRequestDraftCount"
               :applied-request-item-count="appliedRequestItemCount"
               :open-template-create-modal="openTemplateCreateModal"
-              :is-game-loading="isGameLoading"
+              :is-template-loading="isTemplateLoading"
               :has-selected-template="hasSelectedTemplate"
               :selected-template="selectedTemplate"
               :display-thumbnail-url="displayThumbnailUrl"
               :can-apply-thumbnail="canApplyThumbnail"
-              :game-visibility-saving="gameVisibilitySaving"
+              :template-visibility-saving="templateVisibilitySaving"
               :thumb-file-input-ref="setThumbFileInputRef"
               :open-thumb-file-picker="openThumbFilePicker"
               :on-thumb="onThumb"
@@ -1739,7 +1740,7 @@ function userAvatarFallback(user) {
               :remove-upload-draft="removeUploadDraft"
               :has-template-item-order-changes="hasTemplateItemOrderChanges"
               :save-template-item-order="saveTemplateItemOrder"
-              :game-item-list-ref="setGameItemListRef"
+              :template-item-list-ref="setGameItemListRef"
               :save-template-item-label="saveTemplateItemLabel"
               :remove-template-item="removeTemplateItem"
               :selected-template-id="selectedTemplateId"
@@ -1823,7 +1824,7 @@ function userAvatarFallback(user) {
                       v-model="newTemplateId"
                       class="field__input"
                       maxlength="120"
-                      placeholder="game id (영문/숫자)"
+                      placeholder="topic id (영문/숫자)"
                       @keydown.enter.prevent="createTemplate"
                     />
                     <span class="field__hint">영문, 숫자, 하이픈 조합 권장 · {{ newTemplateId.length }}/120자</span>
@@ -2235,12 +2236,12 @@ function userAvatarFallback(user) {
         <div class="adminSidebar__group">
           <button class="btn btn--primary" @click="openTemplateCreateModal">새 템플릿 생성</button>
           <button class="btn btn--ghost" @click="openTemplatePickerModal('template-admin')">템플릿 선택</button>
-          <div v-if="selectedTemplate?.game" class="adminSelectionCard">
+          <div v-if="selectedTemplate?.template" class="adminSelectionCard">
             <div class="adminSelectionCard__label">선택한 템플릿</div>
-            <div class="adminSelectionCard__title">{{ selectedTemplate.game.name }}</div>
-            <div class="adminSelectionCard__meta">{{ selectedTemplate.game.id }}</div>
+            <div class="adminSelectionCard__title">{{ selectedTemplate.template.name }}</div>
+            <div class="adminSelectionCard__meta">{{ selectedTemplate.template.id }}</div>
           </div>
-          <div v-if="selectedTemplateId && !hasSelectedTemplate && !isGameLoading" class="hint hint--tight">선택된 템플릿 ID: {{ selectedTemplateId }}</div>
+          <div v-if="selectedTemplateId && !hasSelectedTemplate && !isTemplateLoading" class="hint hint--tight">선택된 템플릿 ID: {{ selectedTemplateId }}</div>
         </div>
       </section>
 
@@ -3330,7 +3331,7 @@ function userAvatarFallback(user) {
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.12);
 }
-.adminUiScope .thumb--game {
+.adminUiScope .thumb--template {
   max-width: 150px;
   margin: 0 auto;
   display: block;