사이트 용량 카드 분리

components/admin/AdminBackupSummaryCard.vue

@@ -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>

docs/map.md

@@ -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, 댓글 수) |

docs/todo.md

@@ -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`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.

docs/update.md

@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v1.11.20
+
+- 관리자 설정의 사이트 용량 카드를 `AdminBackupSummaryCard` 컴포넌트로 분리.
+- 사이트 용량 콘텐츠·파일 용량 포맷팅과 행 계산 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면은 사이트 용량 데이터 조회·새로고침 이벤트 연결만 담당하도록 정리.
+
 ## v1.11.19
 
 - 관리자 설정의 게시물 가져오기 작업 센터 모달을 `AdminPostImportJobModal` 컴포넌트로 분리.

package-lock.json

@@ -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",

package.json

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

pages/admin/settings/index.vue

@@ -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
+          <AdminBackupSummaryCard
-            id="admin-settings-section-backup-summary"
+            :summary="backupSummary"
-            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)]"
+            :pending="backupSummaryPending"
-          >
+            @refresh="refreshBackupSummary"
-            <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>
 
           <section
             id="admin-settings-section-export"