미디어 상세 모달 렌더링 분리
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user