425 lines
18 KiB
Vue
425 lines
18 KiB
Vue
<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>
|