사이트 설정 백업 현황 추가

pages/admin/settings/index.vue

@@ -193,6 +193,13 @@ const {
 } = await useFetch('/admin/api/posts/export-jobs', {
   default: () => []
 })
+const {
+  data: backupSummary,
+  pending: backupSummaryPending,
+  refresh: refreshBackupSummary
+} = await useFetch('/admin/api/settings/backup-summary', {
+  default: () => null
+})
 
 const form = reactive({
   title: settings.value?.title || 'sori.studio',
@@ -516,6 +523,149 @@ 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)}`
+    }
+  ]
+})
+
+/**
+ * 백업 현황 저장소 지표 목록
+ * @returns {Array<{ label: string, value: string, helper: string }>} 저장소 지표
+ */
+const backupStorageMetrics = computed(() => {
+  const storage = backupSummary.value?.storage || {}
+  const total = storage.total || {}
+  const originals = storage.originals || {}
+  const derivatives = storage.derivatives || {}
+  const profiles = storage.profiles || {}
+  const exports = storage.exports || {}
+  const byKind = storage.byKind || {}
+
+  return [
+    {
+      label: '업로드 미디어',
+      value: `${formatBackupNumber(total.count)}개`,
+      helper: `누적 ${formatBackupSize(total.sizeBytes)}`
+    },
+    {
+      label: '원본 미디어',
+      value: `${formatBackupNumber(originals.count)}개`,
+      helper: formatBackupSize(originals.sizeBytes)
+    },
+    {
+      label: '자동 생성 이미지',
+      value: `${formatBackupNumber(derivatives.count)}개`,
+      helper: formatBackupSize(derivatives.sizeBytes)
+    },
+    {
+      label: '프로필 이미지',
+      value: `${formatBackupNumber(profiles.count)}개`,
+      helper: formatBackupSize(profiles.sizeBytes)
+    },
+    {
+      label: '내보내기 파일',
+      value: `${formatBackupNumber(exports.count)}개`,
+      helper: formatBackupSize(exports.sizeBytes)
+    },
+    {
+      label: '이미지·영상',
+      value: `${formatBackupNumber(byKind.images?.count)} / ${formatBackupNumber(byKind.videos?.count)}개`,
+      helper: `이미지 ${formatBackupSize(byKind.images?.sizeBytes)} · 영상 ${formatBackupSize(byKind.videos?.sizeBytes)}`
+    }
+  ]
+})
+
+/**
+ * 백업 현황 큰 파일 목록
+ * @returns {Array<Object>} 큰 파일 목록
+ */
+const backupLargestFiles = computed(() => Array.isArray(backupSummary.value?.storage?.largestFiles)
+  ? backupSummary.value.storage.largestFiles
+  : [])
+
 /**
  * export 작업 진행률을 계산한다.
  * @param {Object} job - export 작업
@@ -617,6 +767,7 @@ const settingsNavGroups = [
   {
     heading: '콘텐츠·안전',
     items: [
+      { id: 'admin-settings-section-backup-summary', label: '백업 현황', keywords: 'backup storage media count volume 용량 통계', iconId: 'post-export' },
       { id: 'admin-settings-section-export', label: '게시물 내보내기', keywords: 'export backup 내보내기', iconId: 'post-export' },
       { id: 'admin-settings-section-import', label: '게시물 가져오기', keywords: 'import restore 가져오기', iconId: 'post-import' },
       { id: 'admin-settings-section-spam', label: '스팸 필터', keywords: 'spam moderation comments', iconId: 'spam' }
@@ -3314,6 +3465,101 @@ 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">
+              <h3 class="text-sm font-bold text-[#15171a]">
+                콘텐츠
+              </h3>
+              <div class="grid gap-3 sm:grid-cols-2">
+                <div
+                  v-for="metric in backupContentMetrics"
+                  :key="`backup-content-${metric.label}`"
+                  class="admin-settings-screen__backup-metric rounded-lg border border-[#edf0f2] bg-[#fbfcfd] px-4 py-3"
+                >
+                  <div class="flex items-start justify-between gap-3">
+                    <span class="text-sm font-semibold text-[#657080]">{{ metric.label }}</span>
+                    <strong class="text-sm font-bold text-[#15171a]">{{ metric.value }}</strong>
+                  </div>
+                  <p class="mt-2 text-xs leading-relaxed text-[#657080]">
+                    {{ metric.helper }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div class="mt-6 grid gap-3 border-t border-[#eceff2] pt-5">
+              <h3 class="text-sm font-bold text-[#15171a]">
+                파일·용량
+              </h3>
+              <div class="grid gap-3 sm:grid-cols-2">
+                <div
+                  v-for="metric in backupStorageMetrics"
+                  :key="`backup-storage-${metric.label}`"
+                  class="admin-settings-screen__backup-metric rounded-lg border border-[#edf0f2] bg-[#fbfcfd] px-4 py-3"
+                >
+                  <div class="flex items-start justify-between gap-3">
+                    <span class="text-sm font-semibold text-[#657080]">{{ metric.label }}</span>
+                    <strong class="text-sm font-bold text-[#15171a]">{{ metric.value }}</strong>
+                  </div>
+                  <p class="mt-2 text-xs leading-relaxed text-[#657080]">
+                    {{ metric.helper }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-if="backupLargestFiles.length"
+              class="mt-6 grid gap-3 border-t border-[#eceff2] pt-5"
+            >
+              <h3 class="text-sm font-bold text-[#15171a]">
+                큰 파일
+              </h3>
+              <div class="grid gap-2">
+                <div
+                  v-for="file in backupLargestFiles"
+                  :key="file.url"
+                  class="admin-settings-screen__backup-file grid gap-1 rounded-lg border border-[#edf0f2] px-4 py-3 text-sm md:grid-cols-[minmax(0,1fr)_auto] md:items-center md:gap-4"
+                >
+                  <span class="min-w-0 truncate font-semibold text-[#15171a]">
+                    {{ file.name }}
+                  </span>
+                  <span class="font-mono text-xs font-semibold text-[#657080]">
+                    {{ formatBackupSize(file.sizeBytes) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </section>
+
           <section
             id="admin-settings-section-export"
             class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"