내보내기 작업 목록 카드 분리

components/admin/AdminPostExportJobList.vue

@@ -0,0 +1,229 @@
+<script setup>
+/**
+ * 게시물 내보내기 작업 목록 카드
+ * @property {Array} jobs - Export 작업 목록
+ * @property {Function} formatDateTime - 날짜 표시 함수
+ * @property {Function} getStatusLabel - 상태 라벨 함수
+ * @property {Function} getStatusClass - 상태 배지 클래스 함수
+ * @property {Function} shouldShowProgress - 진행도 표시 여부 함수
+ * @property {Function} getProgressLabel - 진행 숫자 라벨 함수
+ * @property {Function} getProgressPercent - 진행률 함수
+ * @property {Function} getProgressDescription - 진행 보조 설명 함수
+ * @property {Function} isRetrying - 재시도 중 여부 함수
+ * @property {Function} isDeleting - 삭제 중 여부 함수
+ * @property {Function} isDownloading - 다운로드 중 여부 함수
+ * @property {Function} areAllReadyFilesSelected - 전체 선택 여부 함수
+ * @property {Function} getReadyFiles - 준비 완료 파일 목록 함수
+ * @property {Function} getSelectedReadyFiles - 선택된 준비 완료 파일 목록 함수
+ * @property {Function} isFileSelected - 파일 선택 여부 함수
+ * @property {Function} isFileSelectionDisabled - 파일 선택 비활성 여부 함수
+ */
+defineProps({
+  jobs: {
+    type: Array,
+    default: () => []
+  },
+  formatDateTime: {
+    type: Function,
+    required: true
+  },
+  getStatusLabel: {
+    type: Function,
+    required: true
+  },
+  getStatusClass: {
+    type: Function,
+    required: true
+  },
+  shouldShowProgress: {
+    type: Function,
+    required: true
+  },
+  getProgressLabel: {
+    type: Function,
+    required: true
+  },
+  getProgressPercent: {
+    type: Function,
+    required: true
+  },
+  getProgressDescription: {
+    type: Function,
+    required: true
+  },
+  isRetrying: {
+    type: Function,
+    required: true
+  },
+  isDeleting: {
+    type: Function,
+    required: true
+  },
+  isDownloading: {
+    type: Function,
+    required: true
+  },
+  areAllReadyFilesSelected: {
+    type: Function,
+    required: true
+  },
+  getReadyFiles: {
+    type: Function,
+    required: true
+  },
+  getSelectedReadyFiles: {
+    type: Function,
+    required: true
+  },
+  isFileSelected: {
+    type: Function,
+    required: true
+  },
+  isFileSelectionDisabled: {
+    type: Function,
+    required: true
+  }
+})
+
+defineEmits(['refresh', 'retry', 'delete', 'toggle-all-files', 'download-files', 'toggle-file'])
+</script>
+
+<template>
+  <section
+    v-if="jobs.length > 0"
+    id="admin-settings-section-export-results"
+    class="admin-post-export-job-list admin-settings-screen__card admin-settings-screen__card--export-results rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
+  >
+    <div class="admin-settings-screen__export-list">
+      <div class="mb-3 flex items-center justify-between gap-3">
+        <h3 class="text-sm font-semibold text-[#15171a]">
+          최근 내보내기 작업
+        </h3>
+        <button
+          class="inline-flex h-8 cursor-pointer items-center justify-center rounded px-3 text-xs font-semibold text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
+          type="button"
+          @click="$emit('refresh')"
+        >
+          새로고침
+        </button>
+      </div>
+      <div class="admin-settings-screen__export-items grid gap-3">
+        <article
+          v-for="job in jobs"
+          :key="job.id"
+          class="admin-settings-screen__export-item rounded-lg border border-[#e6e8eb] bg-white p-4"
+        >
+          <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div class="min-w-0">
+              <div class="flex flex-wrap items-center gap-2">
+                <span
+                  v-if="job.status !== 'ready'"
+                  class="inline-flex rounded-full px-2 py-1 text-xs font-semibold ring-1 ring-inset"
+                  :class="getStatusClass(job.status)"
+                >
+                  {{ getStatusLabel(job.status) }}
+                </span>
+                <span class="text-sm font-semibold text-[#15171a]">
+                  게시물 {{ job.postCount }}개
+                </span>
+                <span class="text-sm text-[#9aa3ad]">
+                  {{ job.files.length }}개 파일
+                </span>
+                <span class="text-sm text-[#657080]">
+                  {{ job.rangeLabel || '전체' }}
+                </span>
+              </div>
+              <p class="mt-2 text-xs text-[#657080]">
+                만료: {{ formatDateTime(job.expiresAt) }}
+              </p>
+            </div>
+            <div class="flex shrink-0 items-center gap-2">
+              <button
+                v-if="job.status === 'failed'"
+                class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] px-3 text-xs font-semibold text-[#15171a] transition hover:bg-[#f4f6f8] disabled:cursor-not-allowed disabled:text-[#a6b0bb]"
+                type="button"
+                :disabled="isRetrying(job.id)"
+                @click="$emit('retry', job)"
+              >
+                {{ isRetrying(job.id) ? '재시도 중' : '재시도' }}
+              </button>
+              <button
+                class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#ffd5d5] px-3 text-xs font-semibold text-[#d64545] transition hover:bg-[#fff3f3] disabled:cursor-not-allowed disabled:border-[#e1e5ea] disabled:text-[#a6b0bb]"
+                type="button"
+                :disabled="job.status === 'queued' || job.status === 'processing' || isDeleting(job.id)"
+                @click="$emit('delete', job)"
+              >
+                {{ isDeleting(job.id) ? '삭제 중' : '삭제' }}
+              </button>
+            </div>
+          </div>
+
+          <div
+            v-if="shouldShowProgress(job)"
+            class="admin-settings-screen__export-progress mt-4 rounded-lg border border-[#edf0f3] bg-[#fbfcfd] p-3"
+          >
+            <div class="mb-2 flex items-center justify-between gap-3 text-xs">
+              <span class="font-semibold text-[#15171a]">
+                진행도 {{ getProgressLabel(job) }}
+              </span>
+              <span class="text-[#657080]">
+                {{ getProgressPercent(job) }}%
+              </span>
+            </div>
+            <div class="h-2 overflow-hidden rounded-full bg-[#e8edf2]">
+              <div
+                class="h-full rounded-full bg-[#15171a] transition-[width] duration-500"
+                :style="{ width: `${getProgressPercent(job)}%` }"
+              />
+            </div>
+            <div class="mt-2 flex flex-col gap-1 text-xs text-[#657080] md:flex-row md:items-center md:justify-between">
+              <span>{{ getProgressDescription(job) }}</span>
+              <span>마지막 갱신: {{ formatDateTime(job.updatedAt) }}</span>
+            </div>
+          </div>
+
+          <details
+            v-if="job.status === 'failed' && job.errorDetail"
+            class="admin-settings-screen__export-error mt-4 rounded-lg border border-[#ffd5d5] bg-[#fff7f7] p-3 text-xs text-[#8f2d2d]"
+          >
+            <summary class="cursor-pointer font-semibold">
+              실패 원인 보기
+            </summary>
+            <pre class="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed">{{ job.errorDetail }}</pre>
+          </details>
+
+          <div v-if="job.files.length > 0" class="admin-settings-screen__export-files mt-4 overflow-hidden rounded-md border border-[#edf0f3]">
+            <div class="flex flex-col gap-3 border-b border-[#edf0f3] bg-[#fbfcfd] px-3 py-3 md:flex-row md:items-center md:justify-between">
+              <label class="inline-flex cursor-pointer items-center gap-2 text-xs font-semibold text-[#394047] has-[:disabled]:cursor-not-allowed has-[:disabled]:text-[#a6b0bb]">
+                <input
+                  class="size-4 rounded border-[#cfd6de] text-[#15171a] focus:ring-[#15171a] disabled:cursor-not-allowed"
+                  type="checkbox"
+                  :checked="areAllReadyFilesSelected(job)"
+                  :disabled="getReadyFiles(job).length === 0 || isDownloading(job.id)"
+                  @change="$emit('toggle-all-files', job)"
+                />
+                전체 선택
+              </label>
+              <button
+                class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#15171a] bg-[#15171a] px-3 text-xs font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:border-[#dce0e5] disabled:bg-white disabled:text-[#9aa3ad]"
+                type="button"
+                :disabled="getSelectedReadyFiles(job).length === 0 || isDownloading(job.id)"
+                @click="$emit('download-files', job)"
+              >
+                {{ isDownloading(job.id) ? '다운로드 중' : `선택 파일 다운로드 ${getSelectedReadyFiles(job).length || ''}` }}
+              </button>
+            </div>
+            <AdminPostExportFileRow
+              v-for="file in job.files"
+              :key="file.id"
+              :file="file"
+              :selected="isFileSelected(job, file)"
+              :disabled="isFileSelectionDisabled(job, file)"
+              @toggle="$emit('toggle-file', job, file)"
+            />
+          </div>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

docs/map.md

@@ -258,8 +258,9 @@
 | 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 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터**(가입 금지 닉네임), **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신, 작업이 있을 때만 표시되는 **최근 내보내기 작업** 별도 카드(준비 완료 배지 숨김·진행 중 진행도·만료일·파일 체크 선택·전체 선택·선택 파일 다운로드·실패 작업 재시도·실패 상세 오류·작업 삭제), **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
+| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **POST 설정**(`showPostUpdatedAt` 토글·읽기 모드 비활성 톤), 블로그 제목·설명 읽기 행, **사이트 정보**(로고 미등록 점선 박스·URL·저작권 읽기 행), **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터**(가입 금지 닉네임), **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
 | components/admin/AdminBackupSummaryCard.vue | 관리자 설정 사이트 용량 카드(콘텐츠 수량·미디어 용량·자동 생성 이미지·내보내기 파일·큰 파일·새로고침 이벤트) |
+| components/admin/AdminPostExportJobList.vue | 관리자 설정 최근 내보내기 작업 목록 카드(상태·진행도·실패 상세·파일 선택·선택 다운로드 이벤트) |
 | components/admin/AdminPostExportRequestCard.vue | 관리자 설정 게시물 내보내기 요청 카드(범위·연도·월·직접 날짜·분할 옵션·요청 이벤트) |
 | components/admin/AdminPostImportCard.vue | 관리자 설정 게시물 가져오기 카드(ZIP input·드롭존·작업 센터 버튼·적용 이벤트) |
 | components/admin/AdminPostImportJobModal.vue | 게시물 Import 작업 센터 모달(전체 진행률·게시물별 대기/진행중/완료/스킵/오류·완료 삭제 이벤트) |

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.23
+
+- 관리자 설정의 최근 게시물 내보내기 작업 목록을 `AdminPostExportJobList` 컴포넌트로 분리.
+- Export 작업 상태·진행도·실패 상세·파일 선택·다운로드 버튼 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면에서 더 이상 사용하지 않는 Export 파일 용량 포맷 함수를 제거.
+
 ## v1.11.22
 
 - 관리자 설정의 게시물 내보내기 요청 카드를 `AdminPostExportRequestCard` 컴포넌트로 분리.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.22",
+  "version": "1.11.23",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.22",
+      "version": "1.11.23",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",

package.json

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

pages/admin/settings/index.vue

@@ -564,30 +564,6 @@ const getPostExportStatusClass = (status) => ({
   expired: 'bg-[#f1f3f5] text-[#657080] ring-[#dce0e5]'
 }[status] || 'bg-[#f1f3f5] text-[#657080] ring-[#dce0e5]')
 
-/**
- * 바이트 값을 읽기 쉬운 용량으로 변환한다.
- * @param {number} value - 바이트 값
- * @returns {string} 용량 라벨
- */
-const formatExportFileSize = (value) => {
-  const bytes = Number(value || 0)
-
-  if (!bytes) {
-    return '생성 대기'
-  }
-
-  const units = ['B', 'KB', 'MB', 'GB']
-  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]}`
-}
-
 /**
  * export 작업 진행률을 계산한다.
  * @param {Object} job - export 작업
@@ -3464,143 +3440,30 @@ onBeforeUnmount(() => {
             @request="requestPostExport"
           />
 
-          <section
-            v-if="normalizedPostExportJobs.length > 0"
-            id="admin-settings-section-export-results"
-            class="admin-settings-screen__card admin-settings-screen__card--export-results rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
-          >
-            <div class="admin-settings-screen__export-list">
-              <div class="mb-3 flex items-center justify-between gap-3">
-                <h3 class="text-sm font-semibold text-[#15171a]">
-                  최근 내보내기 작업
-                </h3>
-                <button
-                  class="inline-flex h-8 cursor-pointer items-center justify-center rounded px-3 text-xs font-semibold text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
-                  type="button"
-                  @click="refreshPostExportJobs"
-                >
-                  새로고침
-                </button>
-              </div>
-              <div class="admin-settings-screen__export-items grid gap-3">
-                <article
-                  v-for="job in normalizedPostExportJobs"
-                  :key="job.id"
-                  class="admin-settings-screen__export-item rounded-lg border border-[#e6e8eb] bg-white p-4"
-                >
-                  <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-                    <div class="min-w-0">
-                      <div class="flex flex-wrap items-center gap-2">
-                        <span
-                          v-if="job.status !== 'ready'"
-                          class="inline-flex rounded-full px-2 py-1 text-xs font-semibold ring-1 ring-inset"
-                          :class="getPostExportStatusClass(job.status)"
-                        >
-                          {{ getPostExportStatusLabel(job.status) }}
-                        </span>
-                        <span class="text-sm font-semibold text-[#15171a]">
-                          게시물 {{ job.postCount }}개
-                        </span>
-                        <span class="text-sm text-[#9aa3ad]">
-                          {{ job.files.length }}개 파일
-                        </span>
-                        <span class="text-sm text-[#657080]">
-                          {{ job.rangeLabel || '전체' }}
-                        </span>
-                      </div>
-                      <p class="mt-2 text-xs text-[#657080]">
-                        만료: {{ formatPostDateTime(job.expiresAt) }}
-                      </p>
-                    </div>
-                    <div class="flex shrink-0 items-center gap-2">
-                      <button
-                        v-if="job.status === 'failed'"
-                        class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] px-3 text-xs font-semibold text-[#15171a] transition hover:bg-[#f4f6f8] disabled:cursor-not-allowed disabled:text-[#a6b0bb]"
-                        type="button"
-                        :disabled="isRetryingPostExportJob(job.id)"
-                        @click="retryPostExportJob(job)"
-                      >
-                        {{ isRetryingPostExportJob(job.id) ? '재시도 중' : '재시도' }}
-                      </button>
-                      <button
-                        class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#ffd5d5] px-3 text-xs font-semibold text-[#d64545] transition hover:bg-[#fff3f3] disabled:cursor-not-allowed disabled:border-[#e1e5ea] disabled:text-[#a6b0bb]"
-                        type="button"
-                        :disabled="job.status === 'queued' || job.status === 'processing' || isDeletingPostExportJob(job.id)"
-                        @click="deletePostExportJob(job)"
-                      >
-                        {{ isDeletingPostExportJob(job.id) ? '삭제 중' : '삭제' }}
-                      </button>
-                    </div>
-                  </div>
-
-                  <div
-                    v-if="shouldShowPostExportProgress(job)"
-                    class="admin-settings-screen__export-progress mt-4 rounded-lg border border-[#edf0f3] bg-[#fbfcfd] p-3"
-                  >
-                    <div class="mb-2 flex items-center justify-between gap-3 text-xs">
-                      <span class="font-semibold text-[#15171a]">
-                        진행도 {{ getPostExportProgressLabel(job) }}
-                      </span>
-                      <span class="text-[#657080]">
-                        {{ getPostExportProgressPercent(job) }}%
-                      </span>
-                    </div>
-                    <div class="h-2 overflow-hidden rounded-full bg-[#e8edf2]">
-                      <div
-                        class="h-full rounded-full bg-[#15171a] transition-[width] duration-500"
-                        :style="{ width: `${getPostExportProgressPercent(job)}%` }"
-                      />
-                    </div>
-                    <div class="mt-2 flex flex-col gap-1 text-xs text-[#657080] md:flex-row md:items-center md:justify-between">
-                      <span>{{ getPostExportProgressDescription(job) }}</span>
-                      <span>마지막 갱신: {{ formatPostDateTime(job.updatedAt) }}</span>
-                    </div>
-                  </div>
-
-                  <details
-                    v-if="job.status === 'failed' && job.errorDetail"
-                    class="admin-settings-screen__export-error mt-4 rounded-lg border border-[#ffd5d5] bg-[#fff7f7] p-3 text-xs text-[#8f2d2d]"
-                  >
-                    <summary class="cursor-pointer font-semibold">
-                      실패 원인 보기
-                    </summary>
-                    <pre class="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed">{{ job.errorDetail }}</pre>
-                  </details>
-
-                  <div v-if="job.files.length > 0" class="admin-settings-screen__export-files mt-4 overflow-hidden rounded-md border border-[#edf0f3]">
-                    <div class="flex flex-col gap-3 border-b border-[#edf0f3] bg-[#fbfcfd] px-3 py-3 md:flex-row md:items-center md:justify-between">
-                      <label class="inline-flex cursor-pointer items-center gap-2 text-xs font-semibold text-[#394047] has-[:disabled]:cursor-not-allowed has-[:disabled]:text-[#a6b0bb]">
-                        <input
-                          class="size-4 rounded border-[#cfd6de] text-[#15171a] focus:ring-[#15171a] disabled:cursor-not-allowed"
-                          type="checkbox"
-                          :checked="areAllReadyPostExportFilesSelected(job)"
-                          :disabled="getReadyPostExportFiles(job).length === 0 || isDownloadingPostExportJob(job.id)"
-                          @change="toggleAllPostExportFiles(job)"
-                        />
-                        전체 선택
-                      </label>
-                      <button
-                        class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#15171a] bg-[#15171a] px-3 text-xs font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:border-[#dce0e5] disabled:bg-white disabled:text-[#9aa3ad]"
-                        type="button"
-                        :disabled="getSelectedReadyPostExportFiles(job).length === 0 || isDownloadingPostExportJob(job.id)"
-                        @click="downloadPostExportJobFiles(job)"
-                      >
-                        {{ isDownloadingPostExportJob(job.id) ? '다운로드 중' : `선택 파일 다운로드 ${getSelectedReadyPostExportFiles(job).length || ''}` }}
-                      </button>
-                    </div>
-                    <AdminPostExportFileRow
-                      v-for="file in job.files"
-                      :key="file.id"
-                      :file="file"
-                      :selected="isPostExportFileSelected(job, file)"
-                      :disabled="isPostExportFileSelectionDisabled(job, file)"
-                      @toggle="togglePostExportFileSelection(job, file)"
-                    />
-                  </div>
-                </article>
-              </div>
-            </div>
-          </section>
+          <AdminPostExportJobList
+            :jobs="normalizedPostExportJobs"
+            :format-date-time="formatPostDateTime"
+            :get-status-label="getPostExportStatusLabel"
+            :get-status-class="getPostExportStatusClass"
+            :should-show-progress="shouldShowPostExportProgress"
+            :get-progress-label="getPostExportProgressLabel"
+            :get-progress-percent="getPostExportProgressPercent"
+            :get-progress-description="getPostExportProgressDescription"
+            :is-retrying="isRetryingPostExportJob"
+            :is-deleting="isDeletingPostExportJob"
+            :is-downloading="isDownloadingPostExportJob"
+            :are-all-ready-files-selected="areAllReadyPostExportFilesSelected"
+            :get-ready-files="getReadyPostExportFiles"
+            :get-selected-ready-files="getSelectedReadyPostExportFiles"
+            :is-file-selected="isPostExportFileSelected"
+            :is-file-selection-disabled="isPostExportFileSelectionDisabled"
+            @refresh="refreshPostExportJobs"
+            @retry="retryPostExportJob"
+            @delete="deletePostExportJob"
+            @toggle-all-files="toggleAllPostExportFiles"
+            @download-files="downloadPostExportJobFiles"
+            @toggle-file="togglePostExportFileSelection"
+          />
 
           <AdminPostImportCard
             :expanded="postImportExportPanel === 'import'"