미디어 필터와 이미지 액션 정리

2026-06-17 10:28:53 +09:00
parent 11f8402cb6
commit 54d32af617
9 changed files with 68 additions and 93 deletions
--- a/components/admin/AdminMarkdownEditor.vue
+++ b/components/admin/AdminMarkdownEditor.vue
@@ -2352,20 +2352,6 @@ const handlePreviewKeydownCapture = (event) => {
  onPreviewDeleteLine(lineIndex)
 }

-/**
- * 라이브 모드 이미지 설정 패널을 연다.
- * @param {number} lineIndex - 이미지 원본 줄 번호(0-based)
- * @returns {void}
- */
-const onPreviewEditImage = (lineIndex) => {
-  if (typeof lineIndex !== 'number' || lineIndex < 0) {
-    return
-  }
-
-  activeLogicalLineIndex.value = lineIndex
-  ensureBlockPanelEngaged()
-}
-
 /**
 * 라이브 모드에서 현재 줄을 이전 줄 끝에 병합한다.
 * @param {{ lineIndex: number, mergedLine: string }} payload - 병합 위치·결과 줄
@@ -3653,7 +3639,6 @@ const handleKeydown = (event) => {
        @insert-after-line="onPreviewInsertAfterLine"
        @delete-line="onPreviewDeleteLine"
        @merge-with-previous-line="onPreviewMergeWithPreviousLine"
-        @edit-image="onPreviewEditImage"
        @line-focus="handleLiveLineFocus"
        @line-blur="handleLiveLineBlur"
        @slash-update="onLiveSlashUpdate"
--- a/components/content/ContentMarkdownRenderer.vue
+++ b/components/content/ContentMarkdownRenderer.vue
@@ -79,7 +79,6 @@ const emit = defineEmits([
  'insert-after-line',
  'delete-line',
  'merge-with-previous-line',
-  'edit-image',
  'line-focus',
  'line-blur',
  'slash-update',
@@ -2034,33 +2033,6 @@ const deletePreviewCardBlock = (block) => {
  })
 }

-/**
- * 라이브 이미지 설정 패널을 요청한다.
- * @param {Object} block - 이미지 블록
- * @returns {void}
- */
-const editImageBlock = (block) => {
-  if (!props.interactive || typeof block.meta?.startLine !== 'number') {
-    return
-  }
-
-  emit('edit-image', block.meta.startLine)
-}
-
-/**
- * 라이브 갤러리의 특정 이미지 설정 패널을 요청한다.
- * @param {Object} block - 갤러리 블록
- * @param {number} imageIndex - 이미지 인덱스
- * @returns {void}
- */
-const editGalleryImage = (block, imageIndex) => {
-  if (!props.interactive || typeof block.meta?.startLine !== 'number') {
-    return
-  }
-
-  emit('edit-image', block.meta.startLine + imageIndex + 1)
-}
-
 /**
 * 라이브 갤러리에서 특정 이미지만 삭제한다.
 * @param {Object} block - 갤러리 블록
@@ -3170,14 +3142,6 @@ onBeforeUnmount(() => {
        @keydown="onPreviewCardKeydown($event, block)"
      >
        <div class="content-markdown-renderer__image-actions absolute right-2 top-2 z-10 flex gap-1.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
-          <button
-            class="content-markdown-renderer__image-edit content-markdown-renderer__preview-card-action rounded bg-[#15171a]/85 px-2.5 py-1 text-xs font-semibold text-white shadow transition-colors hover:bg-[#15171a] focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--site-accent)]"
-            type="button"
-            aria-label="이미지 편집"
-            @click.stop="editImageBlock(block)"
-          >
-            편집
-          </button>
          <button
            class="content-markdown-renderer__image-delete content-markdown-renderer__preview-card-action rounded bg-[#15171a]/85 px-2.5 py-1 text-xs font-semibold text-white shadow transition-colors hover:bg-red-600 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--site-accent)]"
            type="button"
@@ -3377,14 +3341,6 @@ onBeforeUnmount(() => {
              v-if="interactive"
              class="content-markdown-renderer__gallery-item-actions absolute right-2 top-2 z-10 flex gap-1.5"
            >
-              <button
-                class="content-markdown-renderer__gallery-image-edit content-markdown-renderer__preview-card-action rounded bg-[#15171a]/85 px-2.5 py-1 text-xs font-semibold text-white shadow transition-colors hover:bg-[#15171a] focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--site-accent)]"
-                type="button"
-                aria-label="갤러리 이미지 편집"
-                @click.stop="editGalleryImage(block, row.startIndex + rowImageIndex)"
-              >
-                편집
-              </button>
              <button
                class="content-markdown-renderer__gallery-image-delete content-markdown-renderer__preview-card-action rounded bg-[#15171a]/85 px-2.5 py-1 text-xs font-semibold text-white shadow transition-colors hover:bg-red-600 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--site-accent)]"
                type="button"
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,11 @@
 # 업데이트 요약

+## v1.5.108
+
+- 미디어 관리의 전체/미사용 필터를 모든 미디어 탭에서 바로 보이게 정리했다.
+- 카드 썸네일과 프로필 이미지 탭에서도 미사용 항목을 빠르게 모아 선택할 수 있다.
+- 글쓰기 라이브 모드 이미지 hover 메뉴에서 중복되는 편집 버튼을 없애고 삭제만 남겼다.
+
 ## v1.5.107

 - 글쓰기 되돌리기 후 커서가 줄 앞쪽으로 튀는 불편을 줄였다.
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,6 +1,6 @@
 # 배포 가이드

-> 로컬 기준 v1.5.107에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
+> 로컬 기준 v1.5.108에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.

 ## 빌드 유형

@@ -16,6 +16,13 @@

 ## 로컬 개발

+### v1.5.108 참고
+
+- 추가 DB 마이그레이션은 없다.
+- 관리자 미디어 미디어 라이브러리·카드 썸네일·프로필 이미지 탭에서 전체/미사용 배지형 필터가 모두 표시되는지 확인한다.
+- 카드 썸네일·프로필 이미지 탭에서 미사용 필터를 누른 뒤 전체 선택·선택 삭제가 가능한지 확인한다.
+- 게시물 글쓰기 라이브 모드에서 이미지와 갤러리 이미지 hover 시 삭제 버튼만 보이고, 이미지 설정은 해당 블록 포커스 시 오른쪽 패널에서 열리는지 확인한다.
+
 ### v1.5.107 참고

 - 추가 DB 마이그레이션은 없다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -128,7 +128,7 @@
 | 파일 | 화면 위치 |
 |------|-----------|
 | components/content/ContentRenderer.vue | 게시물/페이지 본문 |
-| components/content/ContentMarkdownRenderer.vue | 마크다운 문자열 기반 본문 렌더링, 문단 text-base(16px), 빈 줄 spacer 보존·hard break `<br>` 처리, 표준 마크다운 표 파싱·렌더링, 공개 게시물 인아티클 광고를 본문 길이에 따라 0~2회 삽입, Obsidian식 위첨자·아래첨자 인라인 렌더링, 확장 블록 파싱, `:::` fenced 블록 원본 범위 보정, 닫히지 않은 코드 펜스 하위 콘텐츠 보호, 인용 막대 색상 옵션(`> [!bg=...]`), 라이브 문단 `>` 즉시 인용 변환과 ` ``` `·`!!!` Enter 코드 블록·콜아웃 단축 생성, 라이브 콜아웃·인용 포커스 기반 오른쪽 설정 패널 연결, 라이브 인용·콜아웃 멀티라인 편집 줄 범위 포커스와 위/아래 방향키 외부 문단 이탈, 인용 Backspace 문단 복귀, 라이브 방향키 이동 시 편집 가능한 줄·카드형 블록 탐색, 라이브 코드·콜아웃·토글 내부 줄 삭제와 마지막 줄 블록 삭제, 라이브 이미지·갤러리 드래그 병합·추가·분리 UI, 갤러리 비율 기반 행 레이아웃, 라이브 갤러리 개별 이미지 편집·삭제, 리스트 마커 파란 계열 통일 |
+| components/content/ContentMarkdownRenderer.vue | 마크다운 문자열 기반 본문 렌더링, 문단 text-base(16px), 빈 줄 spacer 보존·hard break `<br>` 처리, 표준 마크다운 표 파싱·렌더링, 공개 게시물 인아티클 광고를 본문 길이에 따라 0~2회 삽입, Obsidian식 위첨자·아래첨자 인라인 렌더링, 확장 블록 파싱, `:::` fenced 블록 원본 범위 보정, 닫히지 않은 코드 펜스 하위 콘텐츠 보호, 인용 막대 색상 옵션(`> [!bg=...]`), 라이브 문단 `>` 즉시 인용 변환과 ` ``` `·`!!!` Enter 코드 블록·콜아웃 단축 생성, 라이브 콜아웃·인용 포커스 기반 오른쪽 설정 패널 연결, 라이브 인용·콜아웃 멀티라인 편집 줄 범위 포커스와 위/아래 방향키 외부 문단 이탈, 인용 Backspace 문단 복귀, 라이브 방향키 이동 시 편집 가능한 줄·카드형 블록 탐색, 라이브 코드·콜아웃·토글 내부 줄 삭제와 마지막 줄 블록 삭제, 라이브 이미지·갤러리 드래그 병합·추가·분리 UI, 갤러리 비율 기반 행 레이아웃, 라이브 이미지·갤러리 hover 삭제 액션, 리스트 마커 파란 계열 통일 |
 | components/content/ContentMarkdownEditableInline.vue | 라이브 모드 공통 인라인 편집 영역, 일반 인라인 마크다운·Obsidian식 첨자 렌더링과 plain text 멀티라인 본문·끝 줄바꿈 보존, 한글 IME 조합 확정 Enter의 블록별 동작 연결, Shift 위/아래 인접 블록 선택 확장·단계적 `Cmd/Ctrl+A` 처리, 멀티라인 Enter 텍스트 값 치환, 첫 줄 빈 줄 포함 줄바꿈 유지 |
 | components/content/ContentMarkdownInlineSegments.vue | 공개·라이브 본문 공통 인라인 세그먼트 렌더링(링크·굵게·기울임·인라인 코드·첨자·인라인 색상) |
 | lib/markdown-live-selection.js | 라이브 모드 Selection Bridge, 인접 contenteditable 범위 확장·블록/문서 전체 선택·교차 선택 삭제 마크다운 반영, 콜아웃·인용 전체 선택 삭제 시 빈 본문 줄 보존, Selection focus 기준 연속 확장 |
@@ -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 | 관리자 행 메뉴 열림 상태·바깥 클릭 닫기 |
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -713,7 +713,7 @@ components/content/
 - 공개 상세 화면의 `og:image`와 Twitter large image 카드는 대표 이미지를 기본값으로 사용한다.
 - 이미지 블록은 관리자 업로드 API로 이미지를 업로드하고 `![](url)` 또는 파일명 캡션 토글 시 `![](url "파일명")` 형식으로 저장한다. 단독 이미지 파일 URL(`jpg`, `png`, `webp`, `gif`, `avif`, `svg`) 한 줄은 임베드가 아니라 이미지 블록으로 렌더링한다.
 - 이미지/갤러리 삽입 시 캡션은 기본 비우며, 블록 설정 패널에서 **파일명을 캡션으로 사용** 토글로 이미지 아래에 URL 파일명을 표시한다.
- 라이브 모드 이미지 블록은 hover/focus 시 우측 상단에 `편집`·`삭제` 버튼을 표시한다. `편집`은 기존 오른쪽 이미지 설정 패널을 열어 이미지 URL·캡션·파일명 캡션 사용 여부를 수정한다.
+- 라이브 모드 이미지 블록은 hover/focus 시 우측 상단에 `삭제` 버튼만 표시한다. 이미지 URL·캡션·파일명 캡션 사용 여부 수정은 해당 이미지 블록에 포커스했을 때 오른쪽 이미지 설정 패널에서 처리한다.
 - 이미지 블록 표시 옵션은 `regular`, `wide`, `full` 값을 사용하며 `regular`는 width 옵션을 생략한다.
 - 갤러리 블록은 `:::gallery` fenced block 안에 이미지 마크다운 행을 여러 개 저장한다.
 - 관리자 갤러리 미디어 선택은 여러 이미지를 선택한 뒤 확인 버튼으로 적용한다.
@@ -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+클릭으로 범위 선택이 가능하다. 현재 필터 결과의 전체 선택은 사용 중이 아니어서 삭제 가능한 항목만 대상으로 한다.
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,11 @@
 # 업데이트 이력

+## v1.5.108
+
+- 미디어 관리: 전체/미사용 필터를 미디어 라이브러리·카드 썸네일·프로필 이미지 탭 공통 배지형 필터로 표시하도록 수정.
+- 미디어 관리: 전체 선택이 현재 필터에서 삭제 가능한 항목만 대상으로 동작하도록 유지하면서 미사용 정리 흐름을 명확히 정리.
+- 게시물 글쓰기: 라이브 모드 이미지·갤러리 hover 액션에서 중복되는 편집 버튼을 제거하고 삭제 버튼만 남기도록 수정.
+
 ## v1.5.107

 - 게시물 글쓰기: `Cmd/Ctrl+Z` 되돌리기·다시 실행 시 본문 값과 함께 선택 위치를 복원하도록 수정.
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "1.5.107",
+  "version": "1.5.108",
  "private": true,
  "type": "module",
  "imports": {
--- a/pages/admin/media/index.vue
+++ b/pages/admin/media/index.vue
@@ -215,14 +215,23 @@ const mediaKindFilterOptions = computed(() => {
  ]
 })

-const unusedMediaCount = computed(() => scopeItems.value.filter((item) => {
+const mediaUsageFilterOptions = computed(() => {
  const folder = activeFolder.value
-  const matchesFolder = systemManagedTab.value
-    ? true
-    : (!folder || item.category === folder || item.category?.startsWith(`${folder}/`))
+  const mediaKind = activeMediaKind.value
+  const baseItems = scopeItems.value.filter((item) => {
+    const matchesFolder = systemManagedTab.value
+      ? true
+      : (!folder || item.category === folder || item.category?.startsWith(`${folder}/`))
+    const matchesKind = mediaKind === 'all' || getMediaItemKind(item) === mediaKind

-  return matchesFolder && !isMediaItemLocked(item)
-}).length)
+    return matchesFolder && matchesKind
+  })
+
+  return [
+    { id: 'all', label: '전체', count: baseItems.length, unusedOnly: false },
+    { id: 'unused', label: '미사용', count: baseItems.filter((item) => !isMediaItemLocked(item)).length, unusedOnly: true }
+  ]
+})

 /**
 * 상단 탭 전환 시 목록 상태를 초기화한다.
@@ -254,11 +263,16 @@ const setMediaKindFilter = (kind) => {
 }

 /**
- * 미사용 미디어만 보기 필터를 토글한다.
+ * 미디어 사용 상태 필터를 선택한다.
+ * @param {boolean} unusedOnly - 미사용 항목만 볼지 여부
 * @returns {void}
 */
-const toggleUnusedMediaFilter = () => {
-  showUnusedOnly.value = !showUnusedOnly.value
+const setMediaUsageFilter = (unusedOnly) => {
+  if (showUnusedOnly.value === unusedOnly) {
+    return
+  }
+
+  showUnusedOnly.value = unusedOnly
  clearMediaSelection()
 }

@@ -995,31 +1009,32 @@ watch(filteredMediaUrls, (urls) => {
          >
        </div>
      </div>
-      <div
-        v-if="activeTab === 'library'"
-        class="admin-media__filters flex flex-wrap gap-1.5"
-      >
+      <div class="admin-media__filters flex flex-wrap gap-1.5">
+        <template v-if="activeTab === 'library'">
+          <button
+            v-for="option in mediaKindFilterOptions"
+            :key="option.id"
+            class="admin-media__kind-filter rounded-full border px-3 py-1.5 text-xs font-semibold transition"
+            :class="activeMediaKind === option.id ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-line bg-white text-muted hover:text-ink'"
+            type="button"
+            @click="setMediaKindFilter(option.id)"
+          >
+            {{ option.label }}
+            <span class="ml-1 opacity-70">{{ option.count }}</span>
+          </button>
+        </template>
        <button
-          v-for="option in mediaKindFilterOptions"
-          :key="option.id"
-          class="admin-media__kind-filter rounded-full border px-3 py-1.5 text-xs font-semibold transition"
-          :class="activeMediaKind === option.id ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-line bg-white text-muted hover:text-ink'"
+          v-for="option in mediaUsageFilterOptions"
+          :key="`usage-${option.id}`"
+          class="admin-media__usage-filter rounded-full border px-3 py-1.5 text-xs font-semibold transition"
+          :class="showUnusedOnly === option.unusedOnly ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-line bg-white text-muted hover:text-ink'"
          type="button"
-          @click="setMediaKindFilter(option.id)"
+          :aria-pressed="showUnusedOnly === option.unusedOnly"
+          @click="setMediaUsageFilter(option.unusedOnly)"
        >
          {{ option.label }}
          <span class="ml-1 opacity-70">{{ option.count }}</span>
        </button>
-        <button
-          class="admin-media__unused-filter rounded-full border px-3 py-1.5 text-xs font-semibold transition"
-          :class="showUnusedOnly ? 'border-[#15171a] bg-[#15171a] text-white' : 'border-line bg-white text-muted hover:text-ink'"
-          type="button"
-          :aria-pressed="showUnusedOnly"
-          @click="toggleUnusedMediaFilter"
-        >
-          미사용
-          <span class="ml-1 opacity-70">{{ unusedMediaCount }}</span>
-        </button>
      </div>
    </div>