미디어 사용 현황 표시 추가

pages/admin/media/index.vue

@@ -23,7 +23,8 @@ const filteredMediaItems = computed(() => {
   return mediaItems.value.filter((item) => [
     item.name,
     item.url,
-    item.category
+    item.category,
+    ...item.usage.map((usage) => usage.title)
   ].some((value) => value.toLowerCase().includes(query)))
 })
 
@@ -69,6 +70,13 @@ const cancelRename = () => {
  * @returns {Promise<void>}
  */
 const renameMedia = async () => {
+  const editingItem = mediaItems.value.find((item) => item.url === editingUrl.value)
+
+  if (editingItem?.usage.length) {
+    errorMessage.value = '사용 중인 미디어는 파일명을 변경할 수 없습니다.'
+    return
+  }
+
   errorMessage.value = ''
 
   try {
@@ -92,6 +100,11 @@ const renameMedia = async () => {
  * @returns {Promise<void>}
  */
 const deleteMedia = async (item) => {
+  if (item.usage.length) {
+    errorMessage.value = '사용 중인 미디어는 삭제할 수 없습니다.'
+    return
+  }
+
   if (!confirm(`"${item.name}" 파일을 삭제할까요?`)) {
     return
   }
@@ -166,14 +179,40 @@ const deleteMedia = async (item) => {
           <p class="admin-media__meta text-xs text-muted">
             {{ item.category }} · {{ formatFileSize(item.size) }}
           </p>
+          <div class="admin-media__usage rounded bg-surface p-3 text-xs">
+            <strong class="admin-media__usage-title text-ink">
+              사용 현황 {{ item.usage.length }}곳
+            </strong>
+            <ul v-if="item.usage.length" class="admin-media__usage-list mt-2 grid gap-1.5 text-muted">
+              <li v-for="usage in item.usage" :key="`${item.url}-${usage.type}-${usage.id}-${usage.location}`" class="admin-media__usage-item">
+                <NuxtLink
+                  v-if="usage.adminUrl"
+                  class="admin-media__usage-link font-semibold text-ink hover:opacity-70"
+                  :to="usage.adminUrl"
+                >
+                  {{ usage.title }}
+                </NuxtLink>
+                <span v-else class="admin-media__usage-name font-semibold text-ink">{{ usage.title }}</span>
+                <span class="admin-media__usage-meta"> · {{ usage.typeLabel }} · {{ usage.label }}</span>
+              </li>
+            </ul>
+            <p v-else class="admin-media__usage-empty mt-2 text-muted">
+              사용 중인 곳이 없습니다.
+            </p>
+          </div>
           <div class="admin-media__actions flex gap-2">
-            <button class="admin-media__rename-button rounded border border-line px-3 py-1.5 text-xs font-semibold" type="button" @click="startRename(item)">
+            <button
+              class="admin-media__rename-button rounded border border-line px-3 py-1.5 text-xs font-semibold disabled:opacity-50"
+              type="button"
+              :disabled="item.usage.length > 0"
+              @click="startRename(item)"
+            >
               파일명 변경
             </button>
             <button
               class="admin-media__delete rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700 disabled:opacity-50"
               type="button"
-              :disabled="deletingUrl === item.url"
+              :disabled="deletingUrl === item.url || item.usage.length > 0"
               @click="deleteMedia(item)"
             >
               {{ deletingUrl === item.url ? '삭제 중' : '삭제' }}