릴리스: v0.1.17 티어표 삭제와 미사용 이미지 정리 추가

frontend/src/lib/api.js

@@ -45,5 +45,9 @@ export const api = {
     request(`/api/tierlists/public?gameId=${encodeURIComponent(gameId || '')}`),
   listMyTierLists: () => request('/api/tierlists/me'),
   getTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`),
+  deleteTierList: (id) => request(`/api/tierlists/${encodeURIComponent(id)}`, { method: 'DELETE' }),
   saveTierList: (payload) => request('/api/tierlists', { method: 'POST', body: payload }),
+  deleteAdminCustomItem: (itemId) => request(`/api/admin/custom-items/${encodeURIComponent(itemId)}`, { method: 'DELETE' }),
+  deleteAdminUnusedCustomItems: ({ q = '' } = {}) =>
+    request(`/api/admin/custom-items?q=${encodeURIComponent(q)}`, { method: 'DELETE' }),
 }

frontend/src/views/AdminView.vue

@@ -19,6 +19,7 @@ const customItemQuery = ref('')
 const customItemPage = ref(1)
 const customItemLimit = ref(50)
 const customItemTotal = ref(0)
+const customItemOrphanOnly = ref(false)
 
 const users = ref([])
 
@@ -77,6 +78,7 @@ async function refreshCustomItems() {
       q: customItemQuery.value,
       page: customItemPage.value,
       limit: customItemLimit.value,
+      orphanOnly: customItemOrphanOnly.value,
     })
     customItems.value = data.items || []
     customItemTotal.value = data.total || 0
@@ -348,6 +350,11 @@ function submitCustomItemSearch() {
   refreshCustomItems()
 }
 
+function toggleCustomItemOrphanOnly() {
+  customItemPage.value = 1
+  refreshCustomItems()
+}
+
 function changeCustomItemLimit(limit) {
   customItemLimit.value = limit
   customItemPage.value = 1
@@ -361,6 +368,39 @@ function moveCustomItemPage(direction) {
   refreshCustomItems()
 }
 
+async function removeCustomItem(item) {
+  resetMessages()
+  if (item.usageCount > 0) {
+    error.value = '사용 중인 커스텀 이미지는 먼저 참조를 정리해야 삭제할 수 있어요.'
+    return
+  }
+
+  const ok = window.confirm(`"${item.label}" 미사용 커스텀 이미지를 삭제할까요?`)
+  if (!ok) return
+
+  try {
+    await api.deleteAdminCustomItem(item.id)
+    await refreshCustomItems()
+    success.value = '미사용 커스텀 이미지를 삭제했어요.'
+  } catch (e) {
+    error.value = '커스텀 이미지 삭제에 실패했어요.'
+  }
+}
+
+async function removeUnusedCustomItems() {
+  resetMessages()
+  const ok = window.confirm('현재 검색 조건에 맞는 미사용 커스텀 이미지를 모두 삭제할까요?')
+  if (!ok) return
+
+  try {
+    const data = await api.deleteAdminUnusedCustomItems({ q: customItemQuery.value })
+    await refreshCustomItems()
+    success.value = `${data.deletedCount || 0}개의 미사용 커스텀 이미지를 삭제했어요.`
+  } catch (e) {
+    error.value = '미사용 커스텀 이미지 일괄 삭제에 실패했어요.'
+  }
+}
+
 const displayThumbnailUrl = computed(() => {
   if (thumbPreviewUrl.value) return thumbPreviewUrl.value
   if (selectedGame.value?.game?.thumbnailSrc) return toApiUrl(selectedGame.value.game.thumbnailSrc)
@@ -497,10 +537,20 @@ function fmt(ts) {
               <button class="btn btn--ghost toolbar__button" @click="submitCustomItemSearch">검색</button>
               <select :value="customItemLimit" class="select toolbar__select" @change="changeCustomItemLimit(Number($event.target.value))">
                 <option :value="50">50개씩 보기</option>
-                <option :value="100">100개씩 보기</option>
+                <option :value="200">200개씩 보기</option>
               </select>
             </div>
 
+            <div class="toolbar toolbar--secondary">
+              <label class="checkRow checkRow--toolbar">
+                <input v-model="customItemOrphanOnly" type="checkbox" @change="toggleCustomItemOrphanOnly" />
+                <span>미사용 커스텀 이미지만 보기</span>
+              </label>
+              <button class="btn btn--danger toolbar__button" :disabled="!customItems.length" @click="removeUnusedCustomItems">
+                미사용 이미지 일괄 삭제
+              </button>
+            </div>
+
             <div v-if="!customItems.length" class="hint">조건에 맞는 커스텀 아이템이 없어요.</div>
             <div v-else class="customItemGrid">
               <article v-for="item in customItems" :key="item.id" class="customItemCard">
@@ -509,8 +559,12 @@ function fmt(ts) {
                   <div class="customItemCard__title">{{ item.label }}</div>
                   <div class="customItemCard__meta">파일: {{ item.src.split('/').pop() }}</div>
                   <div class="customItemCard__meta">업로더: {{ item.ownerName }}</div>
+                  <div class="customItemCard__meta">사용 중: {{ item.usageCount }}개 티어표</div>
                   <div class="customItemCard__meta">{{ fmt(item.createdAt) }}</div>
-                  <a class="btn btn--small btn--ghost" :href="toApiUrl(item.src)" :download="item.label">이미지 다운로드</a>
+                  <div class="customItemCard__actions">
+                    <a class="btn btn--small btn--ghost" :href="toApiUrl(item.src)" :download="item.label">이미지 다운로드</a>
+                    <button class="btn btn--small btn--danger" :disabled="item.usageCount > 0" @click="removeCustomItem(item)">개별 삭제</button>
+                  </div>
                 </div>
               </article>
             </div>
@@ -675,6 +729,10 @@ function fmt(ts) {
   gap: 10px;
   align-items: end;
 }
+.toolbar--secondary {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
 .toolbar__search,
 .toolbar__select {
   margin-top: 0;
@@ -892,6 +950,12 @@ function fmt(ts) {
   min-width: 0;
   flex: 1 1 auto;
 }
+.customItemCard__actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 4px;
+}
 .customItemCard__title {
   min-width: 0;
   overflow-wrap: anywhere;
@@ -971,6 +1035,9 @@ function fmt(ts) {
   align-items: center;
   opacity: 0.88;
 }
+.checkRow--toolbar {
+  margin-top: 0;
+}
 @media (max-width: 980px) {
   .section--topGrid,
   .toolbar,

frontend/src/views/MyTierListsView.vue

@@ -30,6 +30,18 @@ onMounted(async () => {
 function openList(t) {
   router.push(`/editor/${t.gameId}/${t.id}`)
 }
+
+async function removeList(t) {
+  error.value = ''
+  try {
+    const ok = window.confirm(`"${t.title}" 티어표를 삭제할까요?`)
+    if (!ok) return
+    await api.deleteTierList(t.id)
+    myLists.value = myLists.value.filter((entry) => entry.id !== t.id)
+  } catch (e) {
+    error.value = '티어표 삭제에 실패했어요.'
+  }
+}
 </script>
 
 <template>
@@ -42,12 +54,15 @@ function openList(t) {
       </div>
       <div v-if="myLists.length === 0" class="empty">아직 저장한 티어표가 없어요.</div>
       <div v-else class="list">
-        <button v-for="t in myLists" :key="t.id" class="row" @click="openList(t)">
-          <div class="row__title">{{ t.title }}</div>
-          <div class="row__meta">
-            {{ t.gameId }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
-          </div>
-        </button>
+        <article v-for="t in myLists" :key="t.id" class="row">
+          <button class="row__body" @click="openList(t)">
+            <div class="row__title">{{ t.title }}</div>
+            <div class="row__meta">
+              {{ t.gameId }} · 저장: {{ fmt(t.createdAt || t.updatedAt) }} · 업데이트: {{ fmt(t.updatedAt) }}
+            </div>
+          </button>
+          <button class="link link--danger" @click="removeList(t)">삭제</button>
+        </article>
       </div>
     </div>
   </section>
@@ -96,14 +111,26 @@ function openList(t) {
   gap: 10px;
 }
 .row {
-  text-align: left;
-  cursor: pointer;
-  padding: 12px;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 14px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(0, 0, 0, 0.16);
   color: rgba(255, 255, 255, 0.92);
 }
+.row__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: left;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
 .row__title {
   font-weight: 900;
 }
@@ -112,5 +139,8 @@ function openList(t) {
   opacity: 0.76;
   font-size: 13px;
 }
+.link--danger {
+  background: rgba(239, 68, 68, 0.14);
+  border-color: rgba(239, 68, 68, 0.28);
+}
 </style>
-