미디어 상세 모달 렌더링 분리

components/admin/AdminMediaDetailModal.vue

@@ -0,0 +1,424 @@
+<script setup>
+const props = defineProps({
+  canEditMediaCategory: {
+    type: Function,
+    required: true
+  },
+  canRegeneratePageCoverThumbnail: {
+    type: Function,
+    required: true
+  },
+  canRegeneratePostBodyThumbnail: {
+    type: Function,
+    required: true
+  },
+  canRegeneratePostThumbnail: {
+    type: Function,
+    required: true
+  },
+  canRenameMediaItem: {
+    type: Function,
+    required: true
+  },
+  deletingUrl: {
+    type: String,
+    default: ''
+  },
+  editingCategory: {
+    type: String,
+    default: ''
+  },
+  editingName: {
+    type: String,
+    default: ''
+  },
+  folders: {
+    type: Array,
+    default: () => []
+  },
+  getMediaBadgeLabel: {
+    type: Function,
+    required: true
+  },
+  getMediaItemKind: {
+    type: Function,
+    required: true
+  },
+  getMediaPreviewUrl: {
+    type: Function,
+    required: true
+  },
+  getPostBodyThumbnailResolutionLabel: {
+    type: Function,
+    required: true
+  },
+  isMediaItemLocked: {
+    type: Function,
+    required: true
+  },
+  isPageCoverThumbnailDiskItem: {
+    type: Function,
+    required: true
+  },
+  isPostBodyThumbnailDiskItem: {
+    type: Function,
+    required: true
+  },
+  isPostCardThumbnailDiskItem: {
+    type: Function,
+    required: true
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  mediaThumbnailRoot: {
+    type: String,
+    required: true
+  },
+  regeneratingBodyThumbnailUrl: {
+    type: String,
+    default: ''
+  },
+  regeneratingThumbnailUrl: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits([
+  'close',
+  'delete',
+  'download',
+  'regenerate-body-thumbnail',
+  'regenerate-page-cover-thumbnail',
+  'regenerate-post-thumbnail',
+  'rename',
+  'save-category',
+  'update:editingCategory',
+  'update:editingName'
+])
+
+/**
+ * 파일 용량을 사람이 읽을 수 있는 문자열로 변환한다.
+ * @param {number} size - 바이트 단위 파일 크기
+ * @returns {string} 표시용 파일 크기
+ */
+const formatFileSize = (size) => {
+  if (!size) {
+    return '0 B'
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB']
+  const exponent = Math.min(Math.floor(Math.log(size) / Math.log(1024)), units.length - 1)
+  const value = size / Math.pow(1024, exponent)
+
+  return `${value.toFixed(value >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`
+}
+
+/**
+ * ISO 시각을 짧은 로캘 문자열로 표시한다.
+ * @param {string | null} iso - ISO 시각
+ * @returns {string} 표시 문자열
+ */
+const formatDateTime = (iso) => {
+  if (!iso) {
+    return '—'
+  }
+
+  try {
+    return new Date(iso).toLocaleString('ko-KR', {
+      dateStyle: 'medium',
+      timeStyle: 'short'
+    })
+  } catch {
+    return '—'
+  }
+}
+</script>
+
+<template>
+  <div
+    class="admin-media-detail-modal admin-media__modal fixed inset-0 z-50 grid place-items-center bg-black/40 px-5 py-8"
+    role="dialog"
+    aria-modal="true"
+    @click.self="emit('close')"
+  >
+    <section class="admin-media__modal-panel grid max-h-[86vh] w-full max-w-5xl overflow-hidden bg-white text-ink shadow-xl lg:grid-cols-[minmax(0,1fr)_22rem]">
+      <div class="admin-media__preview grid min-h-[20rem] place-items-center bg-[#f5f5f2] p-5">
+        <img
+          v-if="props.getMediaItemKind(props.item) === 'image'"
+          class="admin-media__preview-image max-h-[72vh] max-w-full object-contain"
+          :src="props.getMediaPreviewUrl(props.item)"
+          :alt="props.item.title"
+        >
+        <video
+          v-else-if="props.getMediaItemKind(props.item) === 'video'"
+          class="admin-media__preview-image max-h-[72vh] max-w-full bg-black"
+          :src="props.item.url"
+          controls
+          preload="metadata"
+        />
+        <audio
+          v-else-if="props.getMediaItemKind(props.item) === 'audio'"
+          class="w-full max-w-xl"
+          :src="props.item.url"
+          controls
+          preload="metadata"
+        />
+        <span
+          v-else
+          class="rounded border border-line bg-white px-5 py-4 text-sm font-semibold text-muted"
+        >
+          {{ props.item.name }}
+        </span>
+      </div>
+
+      <aside class="admin-media__detail grid max-h-[86vh] content-start gap-5 overflow-y-auto border-l border-line p-5">
+        <div class="admin-media__detail-header flex flex-wrap items-start justify-between gap-3">
+          <div class="min-w-0 flex-1">
+            <p class="admin-media__detail-eyebrow text-xs font-semibold uppercase text-muted">
+              Attachment
+            </p>
+            <h2 class="admin-media__detail-title mt-1 break-all text-xl font-semibold">
+              {{ props.item.name }}
+            </h2>
+          </div>
+          <div class="admin-media__detail-header-actions flex shrink-0 flex-wrap items-center gap-2">
+            <button
+              class="admin-media__download rounded border border-line px-3 py-1.5 text-sm font-semibold text-ink hover:bg-surface"
+              type="button"
+              @click="emit('download')"
+            >
+              다운로드
+            </button>
+            <button class="admin-media__detail-close rounded border border-line px-3 py-1.5 text-sm font-semibold" type="button" @click="emit('close')">
+              닫기
+            </button>
+          </div>
+        </div>
+
+        <dl class="admin-media__info grid gap-3 text-sm">
+          <div class="admin-media__info-row">
+            <dt class="admin-media__info-label text-xs font-semibold text-muted">경로</dt>
+            <dd class="admin-media__info-value mt-1 break-all">{{ props.item.url }}</dd>
+          </div>
+          <div class="admin-media__info-row">
+            <dt class="admin-media__info-label text-xs font-semibold text-muted">용량</dt>
+            <dd class="admin-media__info-value mt-1">{{ formatFileSize(props.item.size) }}</dd>
+          </div>
+          <div v-if="props.item.thumbnailStatus" class="admin-media__info-row">
+            <dt class="admin-media__info-label text-xs font-semibold text-muted">
+              {{ props.item.thumbnailStatus.variant === 'pageCover' || props.item.thumbnailStatus.role === 'pageCover' ? '페이지 커버 이미지' : '대표 이미지' }}
+            </dt>
+            <dd class="admin-media__info-value mt-1 grid gap-1 break-all">
+              <span v-if="props.item.thumbnailStatus.role === 'card'">
+                자동 생성된 목록 카드용 썸네일입니다.
+              </span>
+              <span v-else-if="props.item.thumbnailStatus.role === 'pageCover'">
+                자동 생성된 Pages 진열장용 커버 썸네일입니다.
+              </span>
+              <template v-else>
+                <span v-if="props.item.thumbnailStatus.hasThumbnail">
+                  생성됨: {{ props.item.thumbnailStatus.thumbnailUrl }}
+                </span>
+                <span v-else-if="props.item.thumbnailStatus.isFallbackActive && props.item.thumbnailStatus.variant === 'pageCover'" class="font-semibold text-amber-700">
+                  페이지 커버 썸네일 없음. 현재 Pages 진열장에서 원본 이미지를 불러옵니다.
+                </span>
+                <span v-else-if="props.item.thumbnailStatus.isFallbackActive" class="font-semibold text-amber-700">
+                  썸네일 없음. 현재 목록에서 원본 이미지를 불러옵니다.
+                </span>
+                <span v-else-if="props.item.thumbnailStatus.variant === 'pageCover'">
+                  페이지 커버 썸네일 없음. 홈 Pages 진열장에서 사용되면 원본으로 대체됩니다.
+                </span>
+                <span v-else>
+                  썸네일 없음. 대표 이미지로 사용되면 원본으로 대체됩니다.
+                </span>
+              </template>
+              <span v-if="props.item.thumbnailStatus.originalUrl" class="text-muted">
+                원본: {{ props.item.thumbnailStatus.originalUrl }}
+              </span>
+              <button
+                v-if="props.canRegeneratePostThumbnail(props.item)"
+                class="admin-media__thumbnail-regenerate mt-1 justify-self-start rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold text-ink transition hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
+                type="button"
+                :disabled="props.regeneratingThumbnailUrl === props.item.url"
+                @click="emit('regenerate-post-thumbnail', props.item)"
+              >
+                {{ props.regeneratingThumbnailUrl === props.item.url ? '생성 중' : (props.item.thumbnailStatus.hasThumbnail ? '대표 이미지 다시 생성' : '대표 이미지 생성') }}
+              </button>
+              <button
+                v-if="props.canRegeneratePageCoverThumbnail(props.item)"
+                class="admin-media__page-cover-thumbnail-regenerate mt-1 justify-self-start rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold text-ink transition hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
+                type="button"
+                :disabled="props.regeneratingThumbnailUrl === props.item.url"
+                @click="emit('regenerate-page-cover-thumbnail', props.item)"
+              >
+                {{ props.regeneratingThumbnailUrl === props.item.url ? '생성 중' : (props.item.thumbnailStatus.hasThumbnail ? '페이지 커버 썸네일 다시 생성' : '페이지 커버 썸네일 생성') }}
+              </button>
+            </dd>
+          </div>
+          <div v-if="props.item.bodyThumbnailStatus" class="admin-media__info-row">
+            <dt class="admin-media__info-label text-xs font-semibold text-muted">본문 이미지</dt>
+            <dd class="admin-media__info-value mt-1 grid gap-1 break-all">
+              <span v-if="props.item.bodyThumbnailStatus.role === 'body'">
+                자동 생성된 본문 표시용 WebP 이미지입니다. ({{ props.getPostBodyThumbnailResolutionLabel(props.item) }})
+              </span>
+              <template v-else>
+                <span v-if="props.item.bodyThumbnailStatus.hasThumbnail">
+                  생성됨: {{ props.item.bodyThumbnailStatus.thumbnailUrl }}
+                </span>
+                <span v-else-if="props.item.bodyThumbnailStatus.isFallbackActive" class="font-semibold text-amber-700">
+                  본문 이미지 없음. 현재 본문에서 원본 이미지를 불러옵니다.
+                </span>
+                <span v-else>
+                  본문 이미지 없음. 게시물 본문에서 사용되면 원본으로 대체됩니다.
+                </span>
+              </template>
+              <span v-if="props.item.bodyThumbnailStatus.originalUrl" class="text-muted">
+                원본: {{ props.item.bodyThumbnailStatus.originalUrl }}
+              </span>
+              <button
+                v-if="props.canRegeneratePostBodyThumbnail(props.item)"
+                class="admin-media__body-thumbnail-regenerate mt-1 justify-self-start rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold text-ink transition hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
+                type="button"
+                :disabled="props.regeneratingBodyThumbnailUrl === props.item.url"
+                @click="emit('regenerate-body-thumbnail', props.item)"
+              >
+                {{ props.regeneratingBodyThumbnailUrl === props.item.url ? '생성 중' : (props.item.bodyThumbnailStatus.hasThumbnail ? '본문 이미지 다시 생성' : '본문 이미지 생성') }}
+              </button>
+            </dd>
+          </div>
+        </dl>
+
+        <div class="admin-media__category grid gap-2">
+          <label class="admin-media__category-label text-xs font-semibold text-muted" for="media-category">
+            폴더
+          </label>
+          <div class="admin-media__category-row flex gap-2">
+            <input
+              id="media-category"
+              class="admin-media__category-input min-w-0 flex-1 rounded border border-line px-3 py-2 text-sm disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-70"
+              type="text"
+              list="media-folder-options"
+              placeholder="미분류"
+              :disabled="!props.canEditMediaCategory(props.item)"
+              :value="props.editingCategory"
+              @input="emit('update:editingCategory', $event.target.value)"
+              @keydown.enter.prevent="emit('save-category')"
+            >
+            <button
+              class="admin-media__category-save rounded border border-line px-3 py-2 text-xs font-semibold disabled:cursor-not-allowed disabled:opacity-50"
+              type="button"
+              :disabled="!props.canEditMediaCategory(props.item)"
+              @click="emit('save-category')"
+            >
+              저장
+            </button>
+          </div>
+          <p v-if="props.item.avatarOwner" class="admin-media__category-hint text-xs text-muted">
+            프로필 썸네일의 논리 폴더는 「{{ props.mediaThumbnailRoot }}」로 고정됩니다.
+          </p>
+          <p v-else-if="props.isPostCardThumbnailDiskItem(props.item)" class="admin-media__category-hint text-xs text-muted">
+            대표 이미지 파일은 원본 이미지에 연결된 자동 생성 파일이라 폴더를 직접 바꾸지 않습니다.
+          </p>
+          <datalist id="media-folder-options">
+            <option v-for="folder in props.folders" :key="folder" :value="folder" />
+          </datalist>
+        </div>
+
+        <div
+          v-if="props.item.avatarOwner"
+          class="admin-media__avatar-owner rounded border border-line bg-surface p-3 text-xs"
+        >
+          <strong class="admin-media__avatar-owner-title text-ink">연결된 회원</strong>
+          <dl class="admin-media__avatar-owner-fields mt-2 grid gap-2 text-muted">
+            <div class="admin-media__avatar-owner-row">
+              <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">닉네임</dt>
+              <dd class="mt-0.5 font-semibold text-ink">{{ props.item.avatarOwner.username }}</dd>
+            </div>
+            <div class="admin-media__avatar-owner-row">
+              <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">이메일</dt>
+              <dd class="mt-0.5 break-all text-ink">{{ props.item.avatarOwner.email }}</dd>
+            </div>
+            <div class="admin-media__avatar-owner-row">
+              <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">등급</dt>
+              <dd class="mt-0.5 text-ink">{{ props.getMediaBadgeLabel(props.item) }}</dd>
+            </div>
+            <div class="admin-media__avatar-owner-row">
+              <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">마지막 접속</dt>
+              <dd class="mt-0.5 text-ink">{{ formatDateTime(props.item.avatarOwner.lastSeenAt) }}</dd>
+            </div>
+            <div v-if="props.item.avatarOwner.lastSeenIp" class="admin-media__avatar-owner-row">
+              <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">마지막 IP</dt>
+              <dd class="mt-0.5 break-all font-mono text-[11px] text-ink">{{ props.item.avatarOwner.lastSeenIp }}</dd>
+            </div>
+          </dl>
+        </div>
+
+        <div class="admin-media__usage rounded bg-surface p-3 text-xs">
+          <strong class="admin-media__usage-title text-ink">
+            사용 현황 {{ props.item.usage.length }}곳
+          </strong>
+          <ul v-if="props.item.usage.length" class="admin-media__usage-list mt-2 grid gap-1.5 text-muted">
+            <li v-for="usage in props.item.usage" :key="`${props.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">
+            {{ props.item.avatarOwner ? '프로필 연결 외에 다른 사용처는 없습니다.' : '사용 중인 곳이 없습니다.' }}
+          </p>
+        </div>
+
+        <div class="admin-media__rename grid gap-2">
+          <label class="admin-media__rename-label text-xs font-semibold text-muted" for="media-name">
+            파일명
+          </label>
+          <input
+            id="media-name"
+            class="admin-media__rename-input rounded border border-line px-3 py-2 text-sm disabled:opacity-50"
+            type="text"
+            :disabled="!props.canRenameMediaItem(props.item)"
+            :placeholder="props.item.title"
+            :value="props.editingName"
+            @input="emit('update:editingName', $event.target.value)"
+            @keydown.enter.prevent="emit('rename')"
+          >
+          <p v-if="props.isMediaItemLocked(props.item)" class="admin-media__locked text-xs text-muted">
+            게시물·페이지에서 사용 중이거나, 회원 프로필에 연결된 썸네일은 파일명 변경과 삭제가 잠깁니다.
+          </p>
+          <p v-else-if="props.isPostCardThumbnailDiskItem(props.item) || props.isPageCoverThumbnailDiskItem(props.item) || props.isPostBodyThumbnailDiskItem(props.item)" class="admin-media__locked text-xs text-muted">
+            자동 생성 이미지는 원본 이미지와의 연결을 유지하기 위해 파일명을 변경할 수 없습니다. 사용처가 없는 파생 파일만 정리용으로 삭제할 수 있습니다.
+          </p>
+        </div>
+
+        <div class="admin-media__actions flex flex-wrap gap-2">
+          <button
+            class="admin-media__rename-save rounded bg-[#15171a] px-3 py-1.5 text-xs font-semibold text-white disabled:opacity-50"
+            type="button"
+            :disabled="!props.canRenameMediaItem(props.item) || !props.editingName"
+            @click="emit('rename')"
+          >
+            파일명 저장
+          </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="props.deletingUrl === props.item.url || props.isMediaItemLocked(props.item)"
+            @click="emit('delete', props.item)"
+          >
+            {{ props.deletingUrl === props.item.url ? '삭제 중' : '삭제' }}
+          </button>
+        </div>
+      </aside>
+    </section>
+  </div>
+</template>

docs/map.md

@@ -192,6 +192,7 @@
 | components/admin/AdminPostExportFileRow.vue | 관리자 사이트 설정 내보내기 작업의 분할 파일 선택 행 |
 | components/admin/AdminMediaFolderPanel.vue | 관리자 미디어 화면의 폴더 사이드바(라이브러리 폴더 트리·폴더별 개수·드래그 드롭 이동·폴더 삭제 메뉴·폴더 추가 버튼·시스템 이미지 탭 안내 패널) |
 | components/admin/AdminMediaGrid.vue | 관리자 미디어 화면의 그리드 카드 목록(미디어 선택 체크·이미지/영상/파일 썸네일·사용처 개수·상태 배지·드래그 시작·상세 열기 이벤트) |
+| components/admin/AdminMediaDetailModal.vue | 관리자 미디어 화면의 상세 모달(미리보기·파일 정보·썸네일 상태·폴더·사용 현황·파일명·삭제 액션 표시) |
 | components/admin/AdminMediaVideoThumbnail.vue | 관리자 미디어 목록 비디오 항목의 초반 프레임 캔버스 썸네일 |
 | components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost형 툴바(왼쪽 상태 텍스트·Publish/Update/Unpublish/Unschedule, 서버 반영 상태 기준 분기), 초안만 서버 디바운스 자동 저장·자동 저장 실패 payload 반복 재시도 차단·자동 저장 실패/진행 중 이탈 차단·신규 임시 슬러그·중복 슬러그 필드 하단 오류 표시·중복 슬러그 중 Publish/Update/최종 저장 비활성화·저장 중 추가 변경 재자동저장·발행 저장 중 이탈 확인·발행·예약·멤버십·비공개 상태 저장, 미저장 비교에서 태그 표시명 보조값 제외, 공개 상태 전환 시 빈 발행 시각 현재 시각 보정, 발행 모달(중앙 배치), 설정 패널 상태와 이벤트 연결, 미리보기 emit·미저장 이탈 가드, 자동 생성 썸네일을 숨기는 원본 전용 대표 이미지 선택(서버 페이지네이션·파일명/사용처 검색·번호형 페이지 이동·작은 파생 이미지 우선 미리보기·고정 높이 모달), 대표 이미지 본문 상단 표시 토글, 추천 글 토글, 사이트 설정 기준 태그 최대 개수 제한, 태그 색상 배지 다중 입력·최근 사용 태그 5개 우선 추천·메인 태그 드롭다운·부분 검색 추천, 새 태그 입력명 유지와 `/`→`-` 슬러그 변환 |
 | components/admin/AdminPostSettingsSidebar.vue | 관리자 게시물 작성/수정 우측 설정 사이드바(Post URL·상태·발행 시각·요약·태그·대표 이미지 표시·추천 글·검색엔진 노출·본문 통계·삭제 버튼·블록 설정 패널 오버레이) |

docs/todo.md

@@ -5,7 +5,7 @@
 - 거대 컴포넌트 책임 분리 진행.
   - `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
   - `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
-  - `pages/admin/media/index.vue`: 상세 모달, 재생성 액션을 작은 단위로 분리.
+  - `pages/admin/media/index.vue`: 재생성 액션을 작은 단위로 분리.
 - 미디어 카탈로그 전환 코드 수명 정리.
   - 운영 `MEDIA_CATALOG_MODE=database` 안정화 후 `shadow`/`filesystem` 런타임 분기 축소 가능 여부 검토.
   - fallback은 운영 안정성에 필요하므로 제거 전 reconcile·로그·테스트 기준을 먼저 정리.

docs/update.md

@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v1.11.46
+
+- 관리자 미디어 화면의 상세 모달 렌더링을 `AdminMediaDetailModal` 컴포넌트로 분리.
+- 미디어 미리보기·파일 정보·사용 현황·폴더 입력·파일명 입력·썸네일 생성 버튼 표시 책임을 하위 컴포넌트로 이동.
+- 미디어 화면은 선택 항목 상태와 다운로드·저장·삭제·재생성 이벤트 연결만 담당하도록 정리.
+
 ## v1.11.45
 
 - 관리자 미디어 화면의 그리드 카드 목록 렌더링을 `AdminMediaGrid` 컴포넌트로 분리.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.45",
+  "version": "1.11.46",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.45",
+      "version": "1.11.46",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.45",
+  "version": "1.11.46",
   "private": true,
   "type": "module",
   "imports": {

pages/admin/media/index.vue

@@ -547,26 +547,6 @@ const setMediaUsageFilter = (unusedOnly) => {
   clearMediaSelection()
 }
 
-/**
- * ISO 시각을 짧은 로캘 문자열로 표시한다.
- * @param {string | null} iso - ISO 시각
- * @returns {string} 표시 문자열
- */
-const formatDateTime = (iso) => {
-  if (!iso) {
-    return '—'
-  }
-
-  try {
-    return new Date(iso).toLocaleString('ko-KR', {
-      dateStyle: 'medium',
-      timeStyle: 'short'
-    })
-  } catch {
-    return '—'
-  }
-}
-
 /**
  * 상세 모달에서 선택된 미디어를 브라우저로 내려받는다.
  * @returns {void}
@@ -681,23 +661,6 @@ const selectedDeletableMediaItems = computed(() => {
   return filteredMediaItems.value.filter((item) => selectedUrlSet.has(item.url) && !isMediaItemLocked(item))
 })
 
-/**
- * 파일 크기 표시 문자열 생성
- * @param {number} size - 파일 크기
- * @returns {string} 표시 문자열
- */
-const formatFileSize = (size) => {
-  if (size < 1024) {
-    return `${size} B`
-  }
-
-  if (size < 1024 * 1024) {
-    return `${(size / 1024).toFixed(1)} KB`
-  }
-
-  return `${(size / 1024 / 1024).toFixed(1)} MB`
-}
-
 /**
  * 미디어 선택 여부 확인
  * @param {Object} item - 미디어 항목
@@ -1538,288 +1501,38 @@ watch(() => mediaPagination.value.page, (page) => {
       </div>
     </AdminModalFrame>
 
-    <div
+    <AdminMediaDetailModal
       v-if="selectedMedia"
-      class="admin-media__modal fixed inset-0 z-50 grid place-items-center bg-black/40 px-5 py-8"
-      role="dialog"
-      aria-modal="true"
-      @click.self="closeMediaDetail"
-    >
-      <section class="admin-media__modal-panel grid max-h-[86vh] w-full max-w-5xl overflow-hidden bg-white text-ink shadow-xl lg:grid-cols-[minmax(0,1fr)_22rem]">
-        <div class="admin-media__preview grid min-h-[20rem] place-items-center bg-[#f5f5f2] p-5">
-          <img
-            v-if="getMediaItemKind(selectedMedia) === 'image'"
-            class="admin-media__preview-image max-h-[72vh] max-w-full object-contain"
-            :src="getMediaPreviewUrl(selectedMedia)"
-            :alt="selectedMedia.title"
-          >
-          <video
-            v-else-if="getMediaItemKind(selectedMedia) === 'video'"
-            class="admin-media__preview-image max-h-[72vh] max-w-full bg-black"
-            :src="selectedMedia.url"
-            controls
-            preload="metadata"
-          />
-          <audio
-            v-else-if="getMediaItemKind(selectedMedia) === 'audio'"
-            class="w-full max-w-xl"
-            :src="selectedMedia.url"
-            controls
-            preload="metadata"
-          />
-          <span
-            v-else
-            class="rounded border border-line bg-white px-5 py-4 text-sm font-semibold text-muted"
-          >
-            {{ selectedMedia.name }}
-          </span>
-        </div>
-
-        <aside class="admin-media__detail grid max-h-[86vh] content-start gap-5 overflow-y-auto border-l border-line p-5">
-          <div class="admin-media__detail-header flex flex-wrap items-start justify-between gap-3">
-            <div class="min-w-0 flex-1">
-              <p class="admin-media__detail-eyebrow text-xs font-semibold uppercase text-muted">
-                Attachment
-              </p>
-              <h2 class="admin-media__detail-title mt-1 break-all text-xl font-semibold">
-                {{ selectedMedia.name }}
-              </h2>
-            </div>
-            <div class="admin-media__detail-header-actions flex shrink-0 flex-wrap items-center gap-2">
-              <button
-                class="admin-media__download rounded border border-line px-3 py-1.5 text-sm font-semibold text-ink hover:bg-surface"
-                type="button"
-                @click="downloadSelectedMedia"
-              >
-                다운로드
-              </button>
-              <button class="admin-media__detail-close rounded border border-line px-3 py-1.5 text-sm font-semibold" type="button" @click="closeMediaDetail">
-                닫기
-              </button>
-            </div>
-          </div>
-
-          <dl class="admin-media__info grid gap-3 text-sm">
-            <div class="admin-media__info-row">
-              <dt class="admin-media__info-label text-xs font-semibold text-muted">경로</dt>
-              <dd class="admin-media__info-value mt-1 break-all">{{ selectedMedia.url }}</dd>
-            </div>
-            <div class="admin-media__info-row">
-              <dt class="admin-media__info-label text-xs font-semibold text-muted">용량</dt>
-              <dd class="admin-media__info-value mt-1">{{ formatFileSize(selectedMedia.size) }}</dd>
-            </div>
-            <div v-if="selectedMedia.thumbnailStatus" class="admin-media__info-row">
-              <dt class="admin-media__info-label text-xs font-semibold text-muted">
-                {{ selectedMedia.thumbnailStatus.variant === 'pageCover' || selectedMedia.thumbnailStatus.role === 'pageCover' ? '페이지 커버 이미지' : '대표 이미지' }}
-              </dt>
-              <dd class="admin-media__info-value mt-1 grid gap-1 break-all">
-                <span v-if="selectedMedia.thumbnailStatus.role === 'card'">
-                  자동 생성된 목록 카드용 썸네일입니다.
-                </span>
-                <span v-else-if="selectedMedia.thumbnailStatus.role === 'pageCover'">
-                  자동 생성된 Pages 진열장용 커버 썸네일입니다.
-                </span>
-                <template v-else>
-                  <span v-if="selectedMedia.thumbnailStatus.hasThumbnail">
-                    생성됨: {{ selectedMedia.thumbnailStatus.thumbnailUrl }}
-                  </span>
-                  <span v-else-if="selectedMedia.thumbnailStatus.isFallbackActive && selectedMedia.thumbnailStatus.variant === 'pageCover'" class="font-semibold text-amber-700">
-                    페이지 커버 썸네일 없음. 현재 Pages 진열장에서 원본 이미지를 불러옵니다.
-                  </span>
-                  <span v-else-if="selectedMedia.thumbnailStatus.isFallbackActive" class="font-semibold text-amber-700">
-                    썸네일 없음. 현재 목록에서 원본 이미지를 불러옵니다.
-                  </span>
-                  <span v-else-if="selectedMedia.thumbnailStatus.variant === 'pageCover'">
-                    페이지 커버 썸네일 없음. 홈 Pages 진열장에서 사용되면 원본으로 대체됩니다.
-                  </span>
-                  <span v-else>
-                    썸네일 없음. 대표 이미지로 사용되면 원본으로 대체됩니다.
-                  </span>
-                </template>
-                <span v-if="selectedMedia.thumbnailStatus.originalUrl" class="text-muted">
-                  원본: {{ selectedMedia.thumbnailStatus.originalUrl }}
-                </span>
-                <button
-                  v-if="canRegeneratePostThumbnail(selectedMedia)"
-                  class="admin-media__thumbnail-regenerate mt-1 justify-self-start rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold text-ink transition hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
-                  type="button"
-                  :disabled="regeneratingThumbnailUrl === selectedMedia.url"
-                  @click="regeneratePostThumbnail(selectedMedia)"
-                >
-                  {{ regeneratingThumbnailUrl === selectedMedia.url ? '생성 중' : (selectedMedia.thumbnailStatus.hasThumbnail ? '대표 이미지 다시 생성' : '대표 이미지 생성') }}
-                </button>
-                <button
-                  v-if="canRegeneratePageCoverThumbnail(selectedMedia)"
-                  class="admin-media__page-cover-thumbnail-regenerate mt-1 justify-self-start rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold text-ink transition hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
-                  type="button"
-                  :disabled="regeneratingThumbnailUrl === selectedMedia.url"
-                  @click="regeneratePageCoverThumbnail(selectedMedia)"
-                >
-                  {{ regeneratingThumbnailUrl === selectedMedia.url ? '생성 중' : (selectedMedia.thumbnailStatus.hasThumbnail ? '페이지 커버 썸네일 다시 생성' : '페이지 커버 썸네일 생성') }}
-                </button>
-              </dd>
-            </div>
-            <div v-if="selectedMedia.bodyThumbnailStatus" class="admin-media__info-row">
-              <dt class="admin-media__info-label text-xs font-semibold text-muted">본문 이미지</dt>
-              <dd class="admin-media__info-value mt-1 grid gap-1 break-all">
-                <span v-if="selectedMedia.bodyThumbnailStatus.role === 'body'">
-                  자동 생성된 본문 표시용 WebP 이미지입니다. ({{ getPostBodyThumbnailResolutionLabel(selectedMedia) }})
-                </span>
-                <template v-else>
-                  <span v-if="selectedMedia.bodyThumbnailStatus.hasThumbnail">
-                    생성됨: {{ selectedMedia.bodyThumbnailStatus.thumbnailUrl }}
-                  </span>
-                  <span v-else-if="selectedMedia.bodyThumbnailStatus.isFallbackActive" class="font-semibold text-amber-700">
-                    본문 이미지 없음. 현재 본문에서 원본 이미지를 불러옵니다.
-                  </span>
-                  <span v-else>
-                    본문 이미지 없음. 게시물 본문에서 사용되면 원본으로 대체됩니다.
-                  </span>
-                </template>
-                <span v-if="selectedMedia.bodyThumbnailStatus.originalUrl" class="text-muted">
-                  원본: {{ selectedMedia.bodyThumbnailStatus.originalUrl }}
-                </span>
-                <button
-                  v-if="canRegeneratePostBodyThumbnail(selectedMedia)"
-                  class="admin-media__body-thumbnail-regenerate mt-1 justify-self-start rounded border border-line bg-white px-3 py-1.5 text-xs font-semibold text-ink transition hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
-                  type="button"
-                  :disabled="regeneratingBodyThumbnailUrl === selectedMedia.url"
-                  @click="regeneratePostBodyThumbnail(selectedMedia)"
-                >
-                  {{ regeneratingBodyThumbnailUrl === selectedMedia.url ? '생성 중' : (selectedMedia.bodyThumbnailStatus.hasThumbnail ? '본문 이미지 다시 생성' : '본문 이미지 생성') }}
-                </button>
-              </dd>
-            </div>
-          </dl>
-
-          <div class="admin-media__category grid gap-2">
-            <label class="admin-media__category-label text-xs font-semibold text-muted" for="media-category">
-              폴더
-            </label>
-            <div class="admin-media__category-row flex gap-2">
-              <input
-                id="media-category"
-                v-model="editingCategory"
-                class="admin-media__category-input min-w-0 flex-1 rounded border border-line px-3 py-2 text-sm disabled:cursor-not-allowed disabled:bg-surface disabled:opacity-70"
-                type="text"
-                list="media-folder-options"
-                placeholder="미분류"
-                :disabled="!canEditMediaCategory(selectedMedia)"
-                @keydown.enter.prevent="saveMediaCategory"
-              >
-              <button
-                class="admin-media__category-save rounded border border-line px-3 py-2 text-xs font-semibold disabled:cursor-not-allowed disabled:opacity-50"
-                type="button"
-                :disabled="!canEditMediaCategory(selectedMedia)"
-                @click="saveMediaCategory"
-              >
-                저장
-              </button>
-            </div>
-            <p v-if="selectedMedia.avatarOwner" class="admin-media__category-hint text-xs text-muted">
-              프로필 썸네일의 논리 폴더는 「{{ MEDIA_THUMBNAIL_ROOT }}」로 고정됩니다.
-            </p>
-            <p v-else-if="isPostCardThumbnailDiskItem(selectedMedia)" class="admin-media__category-hint text-xs text-muted">
-              대표 이미지 파일은 원본 이미지에 연결된 자동 생성 파일이라 폴더를 직접 바꾸지 않습니다.
-            </p>
-            <datalist id="media-folder-options">
-              <option v-for="folder in normalizedFolders" :key="folder" :value="folder" />
-            </datalist>
-          </div>
-
-          <div
-            v-if="selectedMedia.avatarOwner"
-            class="admin-media__avatar-owner rounded border border-line bg-surface p-3 text-xs"
-          >
-            <strong class="admin-media__avatar-owner-title text-ink">연결된 회원</strong>
-            <dl class="admin-media__avatar-owner-fields mt-2 grid gap-2 text-muted">
-              <div class="admin-media__avatar-owner-row">
-                <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">닉네임</dt>
-                <dd class="mt-0.5 font-semibold text-ink">{{ selectedMedia.avatarOwner.username }}</dd>
-              </div>
-              <div class="admin-media__avatar-owner-row">
-                <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">이메일</dt>
-                <dd class="mt-0.5 break-all text-ink">{{ selectedMedia.avatarOwner.email }}</dd>
-              </div>
-              <div class="admin-media__avatar-owner-row">
-                <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">등급</dt>
-                <dd class="mt-0.5 text-ink">{{ getMediaBadgeLabel(selectedMedia) }}</dd>
-              </div>
-              <div class="admin-media__avatar-owner-row">
-                <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">마지막 접속</dt>
-                <dd class="mt-0.5 text-ink">{{ formatDateTime(selectedMedia.avatarOwner.lastSeenAt) }}</dd>
-              </div>
-              <div v-if="selectedMedia.avatarOwner.lastSeenIp" class="admin-media__avatar-owner-row">
-                <dt class="text-[11px] font-semibold uppercase tracking-wide text-muted">마지막 IP</dt>
-                <dd class="mt-0.5 break-all font-mono text-[11px] text-ink">{{ selectedMedia.avatarOwner.lastSeenIp }}</dd>
-              </div>
-            </dl>
-          </div>
-
-          <div class="admin-media__usage rounded bg-surface p-3 text-xs">
-            <strong class="admin-media__usage-title text-ink">
-              사용 현황 {{ selectedMedia.usage.length }}곳
-            </strong>
-            <ul v-if="selectedMedia.usage.length" class="admin-media__usage-list mt-2 grid gap-1.5 text-muted">
-              <li v-for="usage in selectedMedia.usage" :key="`${selectedMedia.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">
-              {{ selectedMedia.avatarOwner ? '프로필 연결 외에 다른 사용처는 없습니다.' : '사용 중인 곳이 없습니다.' }}
-            </p>
-          </div>
-
-          <div class="admin-media__rename grid gap-2">
-            <label class="admin-media__rename-label text-xs font-semibold text-muted" for="media-name">
-              파일명
-            </label>
-            <input
-              id="media-name"
-              v-model="editingName"
-              class="admin-media__rename-input rounded border border-line px-3 py-2 text-sm disabled:opacity-50"
-              type="text"
-              :disabled="!canRenameMediaItem(selectedMedia)"
-              :placeholder="selectedMedia.title"
-              @keydown.enter.prevent="renameMedia"
-            >
-            <p v-if="isMediaItemLocked(selectedMedia)" class="admin-media__locked text-xs text-muted">
-              게시물·페이지에서 사용 중이거나, 회원 프로필에 연결된 썸네일은 파일명 변경과 삭제가 잠깁니다.
-            </p>
-            <p v-else-if="isPostCardThumbnailDiskItem(selectedMedia) || isPageCoverThumbnailDiskItem(selectedMedia) || isPostBodyThumbnailDiskItem(selectedMedia)" class="admin-media__locked text-xs text-muted">
-              자동 생성 이미지는 원본 이미지와의 연결을 유지하기 위해 파일명을 변경할 수 없습니다. 사용처가 없는 파생 파일만 정리용으로 삭제할 수 있습니다.
-            </p>
-          </div>
-
-          <div class="admin-media__actions flex flex-wrap gap-2">
-            <button
-              class="admin-media__rename-save rounded bg-[#15171a] px-3 py-1.5 text-xs font-semibold text-white disabled:opacity-50"
-              type="button"
-              :disabled="!canRenameMediaItem(selectedMedia) || !editingName"
-              @click="renameMedia"
-            >
-              파일명 저장
-            </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 === selectedMedia.url || isMediaItemLocked(selectedMedia)"
-              @click="deleteMedia(selectedMedia)"
-            >
-              {{ deletingUrl === selectedMedia.url ? '삭제 중' : '삭제' }}
-            </button>
-          </div>
-        </aside>
-      </section>
-    </div>
+      v-model:editing-category="editingCategory"
+      v-model:editing-name="editingName"
+      :can-edit-media-category="canEditMediaCategory"
+      :can-regenerate-page-cover-thumbnail="canRegeneratePageCoverThumbnail"
+      :can-regenerate-post-body-thumbnail="canRegeneratePostBodyThumbnail"
+      :can-regenerate-post-thumbnail="canRegeneratePostThumbnail"
+      :can-rename-media-item="canRenameMediaItem"
+      :deleting-url="deletingUrl"
+      :folders="normalizedFolders"
+      :get-media-badge-label="getMediaBadgeLabel"
+      :get-media-item-kind="getMediaItemKind"
+      :get-media-preview-url="getMediaPreviewUrl"
+      :get-post-body-thumbnail-resolution-label="getPostBodyThumbnailResolutionLabel"
+      :is-media-item-locked="isMediaItemLocked"
+      :is-page-cover-thumbnail-disk-item="isPageCoverThumbnailDiskItem"
+      :is-post-body-thumbnail-disk-item="isPostBodyThumbnailDiskItem"
+      :is-post-card-thumbnail-disk-item="isPostCardThumbnailDiskItem"
+      :item="selectedMedia"
+      :media-thumbnail-root="MEDIA_THUMBNAIL_ROOT"
+      :regenerating-body-thumbnail-url="regeneratingBodyThumbnailUrl"
+      :regenerating-thumbnail-url="regeneratingThumbnailUrl"
+      @close="closeMediaDetail"
+      @delete="deleteMedia"
+      @download="downloadSelectedMedia"
+      @regenerate-body-thumbnail="regeneratePostBodyThumbnail"
+      @regenerate-page-cover-thumbnail="regeneratePageCoverThumbnail"
+      @regenerate-post-thumbnail="regeneratePostThumbnail"
+      @rename="renameMedia"
+      @save-category="saveMediaCategory"
+    />
 
     <AdminToast :toast="toast" />
   </section>