사이트 용량 카드 분리
This commit is contained in:
272
components/admin/AdminBackupSummaryCard.vue
Normal file
272
components/admin/AdminBackupSummaryCard.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
summary: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
pending: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
|
||||
/**
|
||||
* 사이트 용량 숫자를 쉼표 포함 문자열로 변환한다.
|
||||
* @param {number} value - 숫자 값
|
||||
* @returns {string} 숫자 라벨
|
||||
*/
|
||||
const formatBackupNumber = (value) => Number(value || 0).toLocaleString()
|
||||
|
||||
/**
|
||||
* 사이트 용량 바이트를 읽기 쉬운 문자열로 변환한다.
|
||||
* @param {number} value - 바이트 값
|
||||
* @returns {string} 용량 라벨
|
||||
*/
|
||||
const formatBackupSize = (value) => {
|
||||
const bytes = Number(value || 0)
|
||||
|
||||
if (!bytes) {
|
||||
return '0 B'
|
||||
}
|
||||
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
let size = bytes
|
||||
let unitIndex = 0
|
||||
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024
|
||||
unitIndex += 1
|
||||
}
|
||||
|
||||
return `${size.toFixed(size >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 사이트 용량 기준 시각을 표시한다.
|
||||
* @param {string} value - ISO 날짜 문자열
|
||||
* @returns {string} 날짜 라벨
|
||||
*/
|
||||
const formatBackupGeneratedAt = (value) => {
|
||||
if (!value) {
|
||||
return '집계 대기'
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat('ko-KR', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short'
|
||||
}).format(new Date(value))
|
||||
}
|
||||
|
||||
/**
|
||||
* 사이트 용량 콘텐츠 지표 목록
|
||||
* @returns {Array<{ label: string, value: string, helper: string }>} 콘텐츠 지표
|
||||
*/
|
||||
const contentMetrics = computed(() => {
|
||||
const content = props.summary?.content || {}
|
||||
const posts = content.posts || {}
|
||||
const pages = content.pages || {}
|
||||
const tags = content.tags || {}
|
||||
const comments = content.comments || {}
|
||||
const members = content.members || {}
|
||||
|
||||
return [
|
||||
{
|
||||
label: '게시글',
|
||||
value: `${formatBackupNumber(posts.total)}개`,
|
||||
helper: `공개 ${formatBackupNumber(posts.published)} · 비공개 ${formatBackupNumber(posts.private)} · 초안 ${formatBackupNumber(posts.draft)} · 회원 ${formatBackupNumber(posts.members)}`
|
||||
},
|
||||
{
|
||||
label: '페이지',
|
||||
value: `${formatBackupNumber(pages.total)}개`,
|
||||
helper: `공개 ${formatBackupNumber(pages.published)} · 목록 ${formatBackupNumber(pages.listed)} · 추천 ${formatBackupNumber(pages.featured)}`
|
||||
},
|
||||
{
|
||||
label: '태그',
|
||||
value: `${formatBackupNumber(tags.total)}개`,
|
||||
helper: `사용 중 ${formatBackupNumber(tags.used)} · 관리 ${formatBackupNumber(tags.managed)} · 일반 ${formatBackupNumber(tags.general)}`
|
||||
},
|
||||
{
|
||||
label: '댓글',
|
||||
value: `${formatBackupNumber(comments.total)}개`,
|
||||
helper: `공개 ${formatBackupNumber(comments.published)} · 대기 ${formatBackupNumber(comments.pending)} · 차단 ${formatBackupNumber(comments.blocked)}`
|
||||
},
|
||||
{
|
||||
label: '회원',
|
||||
value: `${formatBackupNumber(members.total)}명`,
|
||||
helper: `소유자 ${formatBackupNumber(members.owner)} · 관리자 ${formatBackupNumber(members.admin)} · 회원 ${formatBackupNumber(members.member)}`
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
/**
|
||||
* 사이트 용량 저장소 행 값을 포맷한다.
|
||||
* @param {number} count - 파일 개수
|
||||
* @param {number} sizeBytes - 파일 용량
|
||||
* @returns {string} 개수·용량 라벨
|
||||
*/
|
||||
const formatBackupStatValue = (count, sizeBytes) => `${formatBackupNumber(count)}개 · ${formatBackupSize(sizeBytes)}`
|
||||
|
||||
/**
|
||||
* 사이트 용량 저장소 섹션 목록
|
||||
* @returns {{ imageRows: Array<{ label: string, value: string, child?: boolean }>, mainRows: Array<{ label: string, value: string }>, totalRow: { label: string, value: string } }} 저장소 섹션
|
||||
*/
|
||||
const storageSections = computed(() => {
|
||||
const storage = props.summary?.storage || {}
|
||||
const derivatives = storage.derivatives || {}
|
||||
const profiles = storage.profiles || {}
|
||||
const exports = storage.exports || {}
|
||||
const byKind = storage.byKind || {}
|
||||
const images = byKind.images || {}
|
||||
const videos = byKind.videos || {}
|
||||
const audio = byKind.audio || {}
|
||||
const files = byKind.files || {}
|
||||
const otherCount = Number(audio.count || 0) + Number(files.count || 0)
|
||||
const otherSize = Number(audio.sizeBytes || 0) + Number(files.sizeBytes || 0)
|
||||
const imageOriginalCount = Math.max(0, Number(images.count || 0) - Number(derivatives.count || 0) - Number(profiles.count || 0))
|
||||
const imageOriginalSize = Math.max(0, Number(images.sizeBytes || 0) - Number(derivatives.sizeBytes || 0) - Number(profiles.sizeBytes || 0))
|
||||
const totalCount = Number(images.count || 0) + Number(videos.count || 0) + otherCount + Number(exports.count || 0)
|
||||
const totalSize = Number(images.sizeBytes || 0) + Number(videos.sizeBytes || 0) + otherSize + Number(exports.sizeBytes || 0)
|
||||
const mainRows = [
|
||||
{
|
||||
label: '영상',
|
||||
value: formatBackupStatValue(videos.count, videos.sizeBytes)
|
||||
},
|
||||
{
|
||||
label: '보내기',
|
||||
value: formatBackupStatValue(exports.count, exports.sizeBytes)
|
||||
}
|
||||
]
|
||||
|
||||
if (Number(audio.count || 0) > 0) {
|
||||
mainRows.push({
|
||||
label: '오디오',
|
||||
value: formatBackupStatValue(audio.count, audio.sizeBytes)
|
||||
})
|
||||
}
|
||||
|
||||
if (Number(files.count || 0) > 0) {
|
||||
mainRows.push({
|
||||
label: '첨부 파일',
|
||||
value: formatBackupStatValue(files.count, files.sizeBytes)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
imageRows: [
|
||||
{
|
||||
label: '이미지',
|
||||
value: formatBackupStatValue(imageOriginalCount, imageOriginalSize)
|
||||
},
|
||||
{
|
||||
label: '자동생성',
|
||||
value: formatBackupStatValue(derivatives.count, derivatives.sizeBytes),
|
||||
child: true
|
||||
},
|
||||
{
|
||||
label: '프로필',
|
||||
value: formatBackupStatValue(profiles.count, profiles.sizeBytes),
|
||||
child: true
|
||||
}
|
||||
],
|
||||
mainRows,
|
||||
totalRow: {
|
||||
label: '합계',
|
||||
value: formatBackupStatValue(totalCount, totalSize)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
id="admin-settings-section-backup-summary"
|
||||
class="admin-backup-summary-card admin-settings-screen__card admin-settings-screen__card--backup-summary rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
|
||||
>
|
||||
<div class="admin-settings-screen__card-head flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div class="min-w-0">
|
||||
<h2 class="text-lg font-semibold text-[#15171a]">
|
||||
사이트 용량
|
||||
</h2>
|
||||
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
||||
콘텐츠 수량과 업로드 파일 용량을 한눈에 확인합니다.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition hover:bg-[#f4f6f8] disabled:cursor-wait disabled:opacity-60"
|
||||
type="button"
|
||||
:disabled="pending"
|
||||
@click="emit('refresh')"
|
||||
>
|
||||
{{ pending ? '집계 중' : '새로고침' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 flex flex-wrap items-center gap-2 text-xs text-[#657080]">
|
||||
<span class="rounded-full bg-[#f4f6f8] px-3 py-1">
|
||||
기준 {{ formatBackupGeneratedAt(summary?.generatedAt) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span class="font-bold text-[#15171a]">콘텐츠</span>
|
||||
<span class="text-xs text-[#657080]">DB 기준</span>
|
||||
</div>
|
||||
<div class="grid gap-2 text-xs text-[#657080] sm:grid-cols-2">
|
||||
<div
|
||||
v-for="metric in contentMetrics"
|
||||
:key="`backup-content-${metric.label}`"
|
||||
class="rounded-md border border-[#edf0f2] px-3 py-2"
|
||||
:class="metric.span ? 'sm:col-span-2' : ''"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<span>{{ metric.label }}</span>
|
||||
<strong class="font-mono text-[#15171a]">{{ metric.value }}</strong>
|
||||
</div>
|
||||
<p
|
||||
v-if="metric.helper"
|
||||
class="mt-1 text-[11px] leading-relaxed text-[#657080]"
|
||||
>
|
||||
{{ metric.helper }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span class="font-bold text-[#15171a]">파일·용량</span>
|
||||
<span class="text-xs text-[#657080]">public/uploads 기준</span>
|
||||
</div>
|
||||
<div class="grid gap-2 text-xs text-[#657080]">
|
||||
<div class="admin-backup-summary-card__image-group admin-settings-screen__backup-image-group grid gap-2">
|
||||
<div
|
||||
v-for="row in storageSections.imageRows"
|
||||
:key="`backup-storage-image-${row.label}`"
|
||||
class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2"
|
||||
:class="row.child ? 'border-dashed' : ''"
|
||||
>
|
||||
<span>{{ row.label }}</span>
|
||||
<strong class="font-mono text-[#15171a]">{{ row.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
<div
|
||||
v-for="row in storageSections.mainRows"
|
||||
:key="`backup-storage-main-${row.label}`"
|
||||
class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2"
|
||||
>
|
||||
<span>{{ row.label }}</span>
|
||||
<strong class="font-mono text-[#15171a]">{{ row.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3 rounded-md border border-[#dce0e5] bg-[#fbfcfd] px-3 py-2">
|
||||
<span class="font-bold text-[#15171a]">{{ storageSections.totalRow.label }}</span>
|
||||
<strong class="font-mono font-bold text-[#15171a]">{{ storageSections.totalRow.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -258,7 +258,8 @@
|
||||
| pages/admin/tags/index.vue | 태그 관리(메인 태그 드래그 정렬 자동 저장·more vert 메뉴, 일반 태그 배지 more vert 메뉴·검색/정렬, 태그 추가 버튼), 액션 피드백 토스트 |
|
||||
| pages/admin/tags/new.vue | 태그 생성 |
|
||||
| pages/admin/tags/[id].vue | 태그 수정 |
|
||||
| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **POST 설정**(`showPostUpdatedAt` 토글·읽기 모드 비활성 톤), 블로그 제목·설명 읽기 행, **사이트 정보**(로고 미등록 점선 박스·URL·저작권 읽기 행), **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터**(가입 금지 닉네임), **백업 현황** 텍스트 카드(콘텐츠 수량·미디어 용량·자동 생성 이미지·내보내기 파일·큰 파일), **게시물 내보내기** 독립 카드와 펼침형 전체·연도·월·직접 날짜 범위 작업 요청·목표 ZIP 용량·ZIP당 최대 게시물 수, 작업이 있을 때만 표시되는 **최근 내보내기 작업** 별도 카드(준비 완료 배지 숨김·진행 중 진행도·만료일·파일 체크 선택·전체 선택·선택 파일 다운로드·실패 작업 재시도·실패 상세 오류·작업 삭제), **게시물 가져오기** 독립 카드와 펼침형 ZIP 드롭존·적용 버튼·작업 센터 모달 이벤트 연결, 진행 중 요청 버튼 잠금 |
|
||||
| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **POST 설정**(`showPostUpdatedAt` 토글·읽기 모드 비활성 톤), 블로그 제목·설명 읽기 행, **사이트 정보**(로고 미등록 점선 박스·URL·저작권 읽기 행), **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터**(가입 금지 닉네임), **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 독립 카드와 펼침형 전체·연도·월·직접 날짜 범위 작업 요청·목표 ZIP 용량·ZIP당 최대 게시물 수, 작업이 있을 때만 표시되는 **최근 내보내기 작업** 별도 카드(준비 완료 배지 숨김·진행 중 진행도·만료일·파일 체크 선택·전체 선택·선택 파일 다운로드·실패 작업 재시도·실패 상세 오류·작업 삭제), **게시물 가져오기** 독립 카드와 펼침형 ZIP 드롭존·적용 버튼·작업 센터 모달 이벤트 연결, 진행 중 요청 버튼 잠금 |
|
||||
| components/admin/AdminBackupSummaryCard.vue | 관리자 설정 사이트 용량 카드(콘텐츠 수량·미디어 용량·자동 생성 이미지·내보내기 파일·큰 파일·새로고침 이벤트) |
|
||||
| components/admin/AdminPostImportJobModal.vue | 게시물 Import 작업 센터 모달(전체 진행률·게시물별 대기/진행중/완료/스킵/오류·완료 삭제 이벤트) |
|
||||
| lib/signup-blocked-usernames.js | 가입 금지 닉네임 정리·매칭·안내 문구 |
|
||||
| pages/admin/members/index.vue | 관리자 멤버 목록(Ghost형 테이블, 글 목록과 같은 테두리형 검색, 조건 필터, 멤버 추가 버튼, 닉네임+이메일, 등급+비활성 상태, 가입일+최근 활동, IP, 댓글 수) |
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
- 거대 컴포넌트 책임 분리 진행.
|
||||
- `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
|
||||
- `pages/admin/settings/index.vue`: Import 작업 센터 모달처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
|
||||
- `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량 카드처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
|
||||
- `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
|
||||
- `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
|
||||
- `pages/admin/media/index.vue`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# 업데이트 이력
|
||||
|
||||
## v1.11.20
|
||||
|
||||
- 관리자 설정의 사이트 용량 카드를 `AdminBackupSummaryCard` 컴포넌트로 분리.
|
||||
- 사이트 용량 콘텐츠·파일 용량 포맷팅과 행 계산 책임을 설정 화면에서 하위 컴포넌트로 이동.
|
||||
- 설정 화면은 사이트 용량 데이터 조회·새로고침 이벤트 연결만 담당하도록 정리.
|
||||
|
||||
## v1.11.19
|
||||
|
||||
- 관리자 설정의 게시물 가져오기 작업 센터 모달을 `AdminPostImportJobModal` 컴포넌트로 분리.
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "sori.studio",
|
||||
"version": "1.11.19",
|
||||
"version": "1.11.20",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "sori.studio",
|
||||
"version": "1.11.19",
|
||||
"version": "1.11.20",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sori.studio",
|
||||
"version": "1.11.19",
|
||||
"version": "1.11.20",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"imports": {
|
||||
|
||||
@@ -589,172 +589,6 @@ const formatExportFileSize = (value) => {
|
||||
return `${size.toFixed(size >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 사이트 용량 숫자를 쉼표 포함 문자열로 변환한다.
|
||||
* @param {number} value - 숫자 값
|
||||
* @returns {string} 숫자 라벨
|
||||
*/
|
||||
const formatBackupNumber = (value) => Number(value || 0).toLocaleString()
|
||||
|
||||
/**
|
||||
* 사이트 용량 바이트를 읽기 쉬운 문자열로 변환한다.
|
||||
* @param {number} value - 바이트 값
|
||||
* @returns {string} 용량 라벨
|
||||
*/
|
||||
const formatBackupSize = (value) => {
|
||||
const bytes = Number(value || 0)
|
||||
|
||||
if (!bytes) {
|
||||
return '0 B'
|
||||
}
|
||||
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
let size = bytes
|
||||
let unitIndex = 0
|
||||
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024
|
||||
unitIndex += 1
|
||||
}
|
||||
|
||||
return `${size.toFixed(size >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 사이트 용량 기준 시각을 표시한다.
|
||||
* @param {string} value - ISO 날짜 문자열
|
||||
* @returns {string} 날짜 라벨
|
||||
*/
|
||||
const formatBackupGeneratedAt = (value) => {
|
||||
if (!value) {
|
||||
return '집계 대기'
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat('ko-KR', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short'
|
||||
}).format(new Date(value))
|
||||
}
|
||||
|
||||
/**
|
||||
* 사이트 용량 콘텐츠 지표 목록
|
||||
* @returns {Array<{ label: string, value: string, helper: string }>} 콘텐츠 지표
|
||||
*/
|
||||
const backupContentMetrics = computed(() => {
|
||||
const content = backupSummary.value?.content || {}
|
||||
const posts = content.posts || {}
|
||||
const pages = content.pages || {}
|
||||
const tags = content.tags || {}
|
||||
const comments = content.comments || {}
|
||||
const members = content.members || {}
|
||||
|
||||
return [
|
||||
{
|
||||
label: '게시글',
|
||||
value: `${formatBackupNumber(posts.total)}개`,
|
||||
helper: `공개 ${formatBackupNumber(posts.published)} · 비공개 ${formatBackupNumber(posts.private)} · 초안 ${formatBackupNumber(posts.draft)} · 회원 ${formatBackupNumber(posts.members)}`
|
||||
},
|
||||
{
|
||||
label: '페이지',
|
||||
value: `${formatBackupNumber(pages.total)}개`,
|
||||
helper: `공개 ${formatBackupNumber(pages.published)} · 목록 ${formatBackupNumber(pages.listed)} · 추천 ${formatBackupNumber(pages.featured)}`
|
||||
},
|
||||
{
|
||||
label: '태그',
|
||||
value: `${formatBackupNumber(tags.total)}개`,
|
||||
helper: `사용 중 ${formatBackupNumber(tags.used)} · 관리 ${formatBackupNumber(tags.managed)} · 일반 ${formatBackupNumber(tags.general)}`
|
||||
},
|
||||
{
|
||||
label: '댓글',
|
||||
value: `${formatBackupNumber(comments.total)}개`,
|
||||
helper: `공개 ${formatBackupNumber(comments.published)} · 대기 ${formatBackupNumber(comments.pending)} · 차단 ${formatBackupNumber(comments.blocked)}`
|
||||
},
|
||||
{
|
||||
label: '회원',
|
||||
value: `${formatBackupNumber(members.total)}명`,
|
||||
helper: `소유자 ${formatBackupNumber(members.owner)} · 관리자 ${formatBackupNumber(members.admin)} · 회원 ${formatBackupNumber(members.member)}`
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
/**
|
||||
* 사이트 용량 저장소 행 값을 포맷한다.
|
||||
* @param {number} count - 파일 개수
|
||||
* @param {number} sizeBytes - 파일 용량
|
||||
* @returns {string} 개수·용량 라벨
|
||||
*/
|
||||
const formatBackupStatValue = (count, sizeBytes) => `${formatBackupNumber(count)}개 · ${formatBackupSize(sizeBytes)}`
|
||||
|
||||
/**
|
||||
* 사이트 용량 저장소 섹션 목록
|
||||
* @returns {{ imageRows: Array<{ label: string, value: string, child?: boolean }>, mainRows: Array<{ label: string, value: string }>, totalRow: { label: string, value: string } }} 저장소 섹션
|
||||
*/
|
||||
const backupStorageSections = computed(() => {
|
||||
const storage = backupSummary.value?.storage || {}
|
||||
const derivatives = storage.derivatives || {}
|
||||
const profiles = storage.profiles || {}
|
||||
const exports = storage.exports || {}
|
||||
const byKind = storage.byKind || {}
|
||||
const images = byKind.images || {}
|
||||
const videos = byKind.videos || {}
|
||||
const audio = byKind.audio || {}
|
||||
const files = byKind.files || {}
|
||||
const otherCount = Number(audio.count || 0) + Number(files.count || 0)
|
||||
const otherSize = Number(audio.sizeBytes || 0) + Number(files.sizeBytes || 0)
|
||||
const imageOriginalCount = Math.max(0, Number(images.count || 0) - Number(derivatives.count || 0) - Number(profiles.count || 0))
|
||||
const imageOriginalSize = Math.max(0, Number(images.sizeBytes || 0) - Number(derivatives.sizeBytes || 0) - Number(profiles.sizeBytes || 0))
|
||||
const totalCount = Number(images.count || 0) + Number(videos.count || 0) + otherCount + Number(exports.count || 0)
|
||||
const totalSize = Number(images.sizeBytes || 0) + Number(videos.sizeBytes || 0) + otherSize + Number(exports.sizeBytes || 0)
|
||||
const mainRows = [
|
||||
{
|
||||
label: '영상',
|
||||
value: formatBackupStatValue(videos.count, videos.sizeBytes)
|
||||
},
|
||||
{
|
||||
label: '보내기',
|
||||
value: formatBackupStatValue(exports.count, exports.sizeBytes)
|
||||
}
|
||||
]
|
||||
|
||||
if (Number(audio.count || 0) > 0) {
|
||||
mainRows.push({
|
||||
label: '오디오',
|
||||
value: formatBackupStatValue(audio.count, audio.sizeBytes)
|
||||
})
|
||||
}
|
||||
|
||||
if (Number(files.count || 0) > 0) {
|
||||
mainRows.push({
|
||||
label: '첨부 파일',
|
||||
value: formatBackupStatValue(files.count, files.sizeBytes)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
imageRows: [
|
||||
{
|
||||
label: '이미지',
|
||||
value: formatBackupStatValue(imageOriginalCount, imageOriginalSize)
|
||||
},
|
||||
{
|
||||
label: '자동생성',
|
||||
value: formatBackupStatValue(derivatives.count, derivatives.sizeBytes),
|
||||
child: true
|
||||
},
|
||||
{
|
||||
label: '프로필',
|
||||
value: formatBackupStatValue(profiles.count, profiles.sizeBytes),
|
||||
child: true
|
||||
}
|
||||
],
|
||||
mainRows,
|
||||
totalRow: {
|
||||
label: '합계',
|
||||
value: formatBackupStatValue(totalCount, totalSize)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* export 작업 진행률을 계산한다.
|
||||
* @param {Object} job - export 작업
|
||||
@@ -3641,95 +3475,11 @@ onBeforeUnmount(() => {
|
||||
<h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
|
||||
콘텐츠·안전
|
||||
</h2>
|
||||
<section
|
||||
id="admin-settings-section-backup-summary"
|
||||
class="admin-settings-screen__card admin-settings-screen__card--backup-summary rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
|
||||
>
|
||||
<div class="admin-settings-screen__card-head flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
||||
<div class="min-w-0">
|
||||
<h2 class="text-lg font-semibold text-[#15171a]">
|
||||
사이트 용량
|
||||
</h2>
|
||||
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
||||
콘텐츠 수량과 업로드 파일 용량을 한눈에 확인합니다.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition hover:bg-[#f4f6f8] disabled:cursor-wait disabled:opacity-60"
|
||||
type="button"
|
||||
:disabled="backupSummaryPending"
|
||||
@click="refreshBackupSummary"
|
||||
>
|
||||
{{ backupSummaryPending ? '집계 중' : '새로고침' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 flex flex-wrap items-center gap-2 text-xs text-[#657080]">
|
||||
<span class="rounded-full bg-[#f4f6f8] px-3 py-1">
|
||||
기준 {{ formatBackupGeneratedAt(backupSummary?.generatedAt) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span class="font-bold text-[#15171a]">콘텐츠</span>
|
||||
<span class="text-xs text-[#657080]">DB 기준</span>
|
||||
</div>
|
||||
<div class="grid gap-2 text-xs text-[#657080] sm:grid-cols-2">
|
||||
<div
|
||||
v-for="metric in backupContentMetrics"
|
||||
:key="`backup-content-${metric.label}`"
|
||||
class="rounded-md border border-[#edf0f2] px-3 py-2"
|
||||
:class="metric.span ? 'sm:col-span-2' : ''"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<span>{{ metric.label }}</span>
|
||||
<strong class="font-mono text-[#15171a]">{{ metric.value }}</strong>
|
||||
</div>
|
||||
<p
|
||||
v-if="metric.helper"
|
||||
class="mt-1 text-[11px] leading-relaxed text-[#657080]"
|
||||
>
|
||||
{{ metric.helper }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span class="font-bold text-[#15171a]">파일·용량</span>
|
||||
<span class="text-xs text-[#657080]">public/uploads 기준</span>
|
||||
</div>
|
||||
<div class="grid gap-2 text-xs text-[#657080]">
|
||||
<div class="admin-settings-screen__backup-image-group grid gap-2">
|
||||
<div
|
||||
v-for="row in backupStorageSections.imageRows"
|
||||
:key="`backup-storage-image-${row.label}`"
|
||||
class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2"
|
||||
:class="row.child ? 'border-dashed' : ''"
|
||||
>
|
||||
<span>{{ row.label }}</span>
|
||||
<strong class="font-mono text-[#15171a]">{{ row.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
<div
|
||||
v-for="row in backupStorageSections.mainRows"
|
||||
:key="`backup-storage-main-${row.label}`"
|
||||
class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2"
|
||||
>
|
||||
<span>{{ row.label }}</span>
|
||||
<strong class="font-mono text-[#15171a]">{{ row.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3 rounded-md border border-[#dce0e5] bg-[#fbfcfd] px-3 py-2">
|
||||
<span class="font-bold text-[#15171a]">{{ backupStorageSections.totalRow.label }}</span>
|
||||
<strong class="font-mono font-bold text-[#15171a]">{{ backupStorageSections.totalRow.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<AdminBackupSummaryCard
|
||||
:summary="backupSummary"
|
||||
:pending="backupSummaryPending"
|
||||
@refresh="refreshBackupSummary"
|
||||
/>
|
||||
|
||||
<section
|
||||
id="admin-settings-section-export"
|
||||
|
||||
Reference in New Issue
Block a user