diff --git a/docs/changelog.md b/docs/changelog.md
index bea313c..d0ca613 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,10 @@
# 업데이트 요약
+## v1.6.0
+
+- 카드 썸네일과 프로필 이미지 탭에서도 목록 카드 오른쪽 위에 사용 개수 배지가 보이도록 했다.
+- 상태 라벨과 사용 개수를 분리해 같은 이미지가 여러 개 있을 때 미사용 항목을 더 쉽게 구분할 수 있다.
+
## v1.5.109
- 추천 사이트 목록을 오른쪽 사이드바에서 왼쪽 사이드바의 태그 아래로 옮겼다.
diff --git a/docs/deploy.md b/docs/deploy.md
index 5368ca1..f14a12f 100644
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,6 +1,6 @@
# 배포 가이드
-> 로컬 기준 v1.5.109에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
+> 로컬 기준 v1.6.0에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
## 빌드 유형
@@ -16,6 +16,13 @@
## 로컬 개발
+### v1.6.0 참고
+
+- 추가 DB 마이그레이션은 없다.
+- 관리자 미디어 카드 썸네일 탭에서 사용 중인 썸네일 카드 오른쪽 위에 사용 개수 숫자 배지가 표시되는지 확인한다.
+- 관리자 미디어 프로필 이미지 탭에서 회원 프로필에 연결된 이미지 오른쪽 위에 사용 개수 숫자 배지가 표시되는지 확인한다.
+- 미사용 필터 상태에서 비슷한 이미지 중 사용 개수 배지가 없는 항목만 남는지 확인한다.
+
### v1.5.109 참고
- 추가 DB 마이그레이션은 없다.
diff --git a/docs/map.md b/docs/map.md
index 36c832b..f55fac2 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -165,7 +165,7 @@
| pages/admin/pages/index.vue | 페이지 목록, 상태 표시, 화면 기준 행 more vert 메뉴(수정·삭제) |
| pages/admin/pages/new.vue | 전체 화면 페이지 작성, HTML 문서 기본 모드 저장, 저장 토스트 |
| pages/admin/pages/[id].vue | 전체 화면 페이지 수정, HTML 문서/일반 텍스트 모드 저장, 설정 패널 삭제, 저장/삭제 토스트 |
-| pages/admin/media/index.vue | 미디어 관리, **미디어 라이브러리/카드 썸네일/프로필 이미지** 탭, 글·멤버 목록과 같은 검색창, 파일 직접 추가, 모든 탭 공통 전체/미사용 배지형 필터, 현재 필터 결과의 삭제 가능 항목 전체 선택·선택 삭제, 이미지·비디오·오디오·파일 종류 필터, 원본 fallback·카드 썸네일 사용 배지(카드 썸네일 탭의 카드 배지는 숨김), 대표 이미지 원본 카드 썸네일 생성·재생성, 비디오 프레임 썸네일, 폴더 트리 more vert(폴더 삭제), 검색·드래그·상세 모달 등 |
+| pages/admin/media/index.vue | 미디어 관리, **미디어 라이브러리/카드 썸네일/프로필 이미지** 탭, 글·멤버 목록과 같은 검색창, 파일 직접 추가, 모든 탭 공통 전체/미사용 배지형 필터, 목록 카드 오른쪽 위 사용 개수 배지, 현재 필터 결과의 삭제 가능 항목 전체 선택·선택 삭제, 이미지·비디오·오디오·파일 종류 필터, 원본 fallback·카드 썸네일 사용 배지(카드 썸네일 탭의 카드 배지는 숨김), 대표 이미지 원본 카드 썸네일 생성·재생성, 비디오 프레임 썸네일, 폴더 트리 more vert(폴더 삭제), 검색·드래그·상세 모달 등 |
| pages/admin/navigation/index.vue | 메뉴 관리: 상단/하단/추천 탭, 추천 사이트 대체 텍스트·썸네일 URL, 행 more vert(메뉴 항목 삭제), 드래그 정렬, `useAdminToast` |
| components/admin/AdminRowMoreMenu.vue | 관리자 행 more vert 메뉴(트리거·화면 기준 팝오버) |
| composables/useAdminRowMenu.js | 관리자 행 메뉴 열림 상태·바깥 클릭 닫기 |
diff --git a/docs/spec.md b/docs/spec.md
index d5fbd9e..05a0f82 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -855,7 +855,7 @@ components/content/
- 관리자 미디어 업로드 API는 이미지·비디오·오디오·문서 확장자를 허용한다(에디터 슬래시·미디어 모달과 동일 목록).
- 업로드 파일 크기 제한은 종류별 환경 변수를 따른다. 이미지·아바타·로고 등은 `MAX_FILE_SIZE`(기본 10MB), 비디오는 `MAX_VIDEO_FILE_SIZE`(기본 200MB), 오디오는 `MAX_AUDIO_FILE_SIZE`(기본 50MB), 문서·ZIP 등은 `MAX_DOCUMENT_FILE_SIZE`(기본 50MB).
- 로컬 개발 업로드 파일은 `public/uploads/posts/YYYY/MM/` 아래 저장하고 `/uploads/posts/YYYY/MM/filename` URL로 제공한다.
-- 관리자 미디어 화면 상단에 **미디어 라이브러리**·**카드 썸네일**·**프로필 이미지** 탭을 두어, 라이브러리 탭에서는 원본 업로드 파일만, 카드 썸네일 탭에서는 `/posts/YYYY/MM/thumbs/*-card.webp` 파일만, 프로필 이미지 탭에서는 `/members/avatars/` 파일만 검색·탐색한다. 모든 탭에서 전체/미사용 배지형 필터를 표시하고, 카드 썸네일 탭에서는 모든 항목이 카드 파생 파일이므로 `카드` 배지는 표시하지 않는다.
+- 관리자 미디어 화면 상단에 **미디어 라이브러리**·**카드 썸네일**·**프로필 이미지** 탭을 두어, 라이브러리 탭에서는 원본 업로드 파일만, 카드 썸네일 탭에서는 `/posts/YYYY/MM/thumbs/*-card.webp` 파일만, 프로필 이미지 탭에서는 `/members/avatars/` 파일만 검색·탐색한다. 모든 탭에서 전체/미사용 배지형 필터를 표시하고, 목록 카드 오른쪽 위에는 실제 사용 개수 숫자 배지를 표시한다. 카드 썸네일 탭에서는 모든 항목이 카드 파생 파일이므로 `카드` 배지는 표시하지 않는다.
- 미디어 라이브러리 탭은 왼쪽 폴더 트리와 오른쪽 고밀도 썸네일 갤러리, 검색, 파일명 변경, 개별 삭제를 제공한다.
- 관리자는 폴더 추가 버튼으로 모달에서 새 폴더·하위 폴더 이름을 입력해 만들 수 있으며, `미분류`·`썸네일`(및 그 하위)을 제외한 폴더는 목록에서 삭제할 수 있다. 폴더 삭제 시 해당 경로 및 하위 경로로 분류돼 있던 미디어 메타는 모두 `미분류`로 되돌린다.
- 썸네일 본문(이미지·파일명) 한 번 클릭 시 상세(미리보기) 모달이 열리고, 썸네일 좌측 상단 **선택 토글**로 개별 선택한다. Shift+클릭으로 범위 선택이 가능하다. 현재 필터 결과의 전체 선택은 사용 중이 아니어서 삭제 가능한 항목만 대상으로 한다.
diff --git a/docs/update.md b/docs/update.md
index 4714f20..207104e 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,10 @@
# 업데이트 이력
+## v1.6.0
+
+- 미디어 관리: 카드 썸네일·프로필 이미지 탭의 목록 카드 오른쪽 위에도 실제 사용 개수 배지를 표시하도록 수정.
+- 미디어 관리: 상태 배지(회원·원본·카드)와 사용 개수 배지를 분리해 동일 이미지 후보를 목록에서 바로 구분할 수 있도록 정리.
+
## v1.5.109
- 공개 사이드바: 추천 사이트 Recommended 영역을 오른쪽 사이드바에서 왼쪽 사이드바 태그 아래로 이동.
diff --git a/package-lock.json b/package-lock.json
index deed336..ccbec82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "sori.studio",
- "version": "1.5.109",
+ "version": "1.6.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "sori.studio",
- "version": "1.5.109",
+ "version": "1.6.0",
"hasInstallScript": true,
"dependencies": {
"@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index a01ecb5..a26096d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "sori.studio",
- "version": "1.5.109",
+ "version": "1.6.0",
"private": true,
"type": "module",
"imports": {
diff --git a/pages/admin/media/index.vue b/pages/admin/media/index.vue
index 8c08e0f..e3df229 100644
--- a/pages/admin/media/index.vue
+++ b/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) }}
+
+ {{ getMediaUsageBadgeCount(item) }}
+
{{ getMediaBadgeLabel(item) }}