미디어 사용 개수 배지 표시

pages/admin/media/index.vue

@@ -92,7 +92,7 @@ const canRenameMediaItem = (item) => !isMediaItemLocked(item) && !isPostCardThum
 const canEditMediaCategory = (item) => !isSystemManagedMediaItem(item)
 
 /**
- * 미디어 카드 배지 라벨을 반환한다.
+ * 미디어 상태 배지 라벨을 반환한다.
  * @param {Object} item - 미디어 항목
  * @returns {string} 배지 라벨
  */
@@ -113,15 +113,11 @@ const getMediaBadgeLabel = (item) => {
     return '원본'
   }
 
-  if (item?.usage?.length) {
-    return String(item.usage.length)
-  }
-
   return ''
 }
 
 /**
- * 미디어 카드 배지 클래스를 반환한다.
+ * 미디어 상태 배지 클래스를 반환한다.
  * @param {Object} item - 미디어 항목
  * @returns {string} Tailwind 클래스
  */
@@ -141,6 +137,18 @@ const getMediaBadgeClass = (item) => {
   return 'bg-[#15171a] text-white'
 }
 
+/**
+ * 미디어 사용 개수를 반환한다.
+ * @param {Object} item - 미디어 항목
+ * @returns {number} 사용 개수
+ */
+const getMediaUsageBadgeCount = (item) => {
+  const usageCount = Array.isArray(item?.usage) ? item.usage.length : 0
+  const avatarOwnerCount = item?.avatarOwner ? 1 : 0
+
+  return usageCount + avatarOwnerCount
+}
+
 /**
  * 카드 썸네일을 생성할 수 있는 원본 이미지인지 확인한다.
  * @param {Object} item - 미디어 항목
@@ -1217,10 +1225,19 @@ watch(filteredMediaUrls, (urls) => {
               >
                 {{ getMediaItemKind(item) }}
               </span>
+              <span
+                v-if="getMediaUsageBadgeCount(item)"
+                class="admin-media__usage-count-badge pointer-events-none absolute right-1.5 top-1.5 rounded bg-[#15171a] px-1.5 py-0.5 text-[10px] font-semibold text-white"
+              >
+                {{ getMediaUsageBadgeCount(item) }}
+              </span>
               <span
                 v-if="getMediaBadgeLabel(item)"
-                class="admin-media__usage-badge pointer-events-none absolute right-1.5 top-1.5 rounded px-1.5 py-0.5 text-[10px] font-semibold"
-                :class="getMediaBadgeClass(item)"
+                class="admin-media__usage-badge pointer-events-none absolute right-1.5 rounded px-1.5 py-0.5 text-[10px] font-semibold"
+                :class="[
+                  getMediaBadgeClass(item),
+                  getMediaUsageBadgeCount(item) ? 'top-8' : 'top-1.5'
+                ]"
               >
                 {{ getMediaBadgeLabel(item) }}
               </span>