가져오기 작업 센터 모달 분리

components/admin/AdminPostImportJobModal.vue

@@ -0,0 +1,267 @@
+<script setup>
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false
+  },
+  job: {
+    type: Object,
+    default: null
+  },
+  deleting: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['close', 'refresh', 'delete'])
+
+/**
+ * 날짜·시간을 관리자 화면용 문자열로 변환한다.
+ * @param {string|null} value - ISO 날짜 문자열
+ * @returns {string} 표시 문자열
+ */
+const formatDateTime = (value) => {
+  if (!value) {
+    return '-'
+  }
+
+  const date = new Date(value)
+
+  if (Number.isNaN(date.getTime())) {
+    return '-'
+  }
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  }).format(date)
+}
+
+/**
+ * Import 작업 진행률을 계산한다.
+ * @param {Object|null} job - Import 작업
+ * @returns {number} 진행률
+ */
+const getProgressPercent = (job) => {
+  const totalCount = Number(job?.totalCount || 0)
+
+  if (job?.status === 'ready') {
+    return 100
+  }
+
+  if (totalCount <= 0) {
+    return job?.status === 'processing' ? 5 : 0
+  }
+
+  return Math.min(Math.round((Number(job.processedCount || 0) / totalCount) * 100), 100)
+}
+
+/**
+ * Import 작업 진행 라벨을 만든다.
+ * @param {Object|null} job - Import 작업
+ * @returns {string} 진행 라벨
+ */
+const getProgressLabel = (job) => {
+  const processedCount = Number(job?.processedCount || 0)
+  const totalCount = Number(job?.totalCount || 0)
+
+  if (totalCount <= 0) {
+    return '준비 중'
+  }
+
+  return `${processedCount.toLocaleString()} / ${totalCount.toLocaleString()}`
+}
+
+/**
+ * Import 상태 라벨을 반환한다.
+ * @param {string} status - 상태
+ * @returns {string} 상태 라벨
+ */
+const getStatusLabel = (status) => ({
+  queued: '대기',
+  processing: '진행중',
+  ready: '완료',
+  skipped: '스킵',
+  failed: '오류',
+  pending: '대기'
+})[status] || '대기'
+
+/**
+ * Import 상태 스타일을 반환한다.
+ * @param {string} status - 상태
+ * @returns {string} 클래스 문자열
+ */
+const getStatusClass = (status) => ({
+  queued: 'bg-[#eef3ff] text-[#2458b8]',
+  processing: 'bg-[#eef3ff] text-[#2458b8]',
+  ready: 'bg-[#eefbf3] text-[#147a45]',
+  skipped: 'bg-[#f3f5f7] text-[#657080]',
+  failed: 'bg-[#fff1f2] text-[#c01f32]',
+  pending: 'bg-[#f3f5f7] text-[#657080]'
+})[status] || 'bg-[#f3f5f7] text-[#657080]'
+
+/**
+ * Import 작업 삭제 가능 여부를 확인한다.
+ * @returns {boolean} 삭제 가능 여부
+ */
+const canDeleteJob = computed(() => Boolean(props.job)
+  && props.job.status !== 'queued'
+  && props.job.status !== 'processing'
+  && !props.deleting)
+</script>
+
+<template>
+  <div
+    v-if="open"
+    class="admin-post-import-job-modal fixed inset-0 z-50 flex items-start justify-center bg-black/35 px-4 py-8"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="admin-post-import-job-modal-title"
+  >
+    <div class="flex max-h-[calc(100vh-4rem)] w-full max-w-5xl flex-col overflow-hidden rounded-xl bg-white shadow-xl">
+      <header class="flex shrink-0 items-center justify-between gap-4 border-b border-[#eceff2] px-5 py-4">
+        <div class="min-w-0">
+          <h2 id="admin-post-import-job-modal-title" class="text-base font-semibold text-[#15171a]">
+            게시물 가져오기 작업 센터
+          </h2>
+          <p class="mt-1 truncate text-xs text-[#657080]">
+            {{ job?.originalFileName || '최근 작업' }}
+          </p>
+        </div>
+        <button
+          class="grid size-8 shrink-0 cursor-pointer place-items-center rounded-md text-[#657080] transition hover:bg-[#f3f5f7] hover:text-[#15171a]"
+          type="button"
+          aria-label="닫기"
+          @click="emit('close')"
+        >
+          <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </header>
+
+      <div v-if="job" class="grid min-h-0 gap-4 overflow-auto px-5 py-4">
+        <div class="grid gap-3 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4">
+          <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div class="flex flex-wrap items-center gap-2">
+              <span
+                class="inline-flex rounded-full px-2 py-1 text-xs font-semibold"
+                :class="getStatusClass(job.status)"
+              >
+                {{ getStatusLabel(job.status) }}
+              </span>
+              <span class="text-sm font-semibold text-[#15171a]">
+                {{ getProgressLabel(job) }}
+              </span>
+              <span class="text-sm text-[#657080]">
+                완료 {{ job.importedCount }} · 스킵 {{ job.skippedCount }} · 오류 {{ job.failedCount }}
+              </span>
+            </div>
+            <span class="text-xs text-[#657080]">
+              마지막 갱신: {{ formatDateTime(job.updatedAt) }}
+            </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>
+          <p v-if="job.message" class="text-xs text-[#657080]">
+            {{ job.message }}
+          </p>
+        </div>
+
+        <div class="overflow-hidden rounded-lg border border-[#e6e8eb]">
+          <div class="grid min-w-[680px] grid-cols-[minmax(0,1fr)_220px_110px] gap-4 border-b border-[#eceff2] bg-[#fbfcfd] px-4 py-3 text-xs font-semibold text-[#394047]">
+            <span>게시물 제목</span>
+            <span>프로세스</span>
+            <span>상태</span>
+          </div>
+          <div v-if="job.items.length > 0" class="max-h-[52vh] overflow-auto">
+            <div
+              v-for="item in job.items"
+              :key="item.id"
+              class="grid min-w-[680px] grid-cols-[minmax(0,1fr)_220px_110px] gap-4 border-b border-[#edf0f3] px-4 py-3 last:border-b-0"
+            >
+              <div class="min-w-0">
+                <p class="truncate text-sm font-semibold text-[#15171a]">
+                  {{ item.title || item.sourcePath }}
+                </p>
+                <p class="mt-1 truncate text-xs text-[#8a94a3]">
+                  {{ item.slug || item.sourcePath }}
+                </p>
+              </div>
+              <div class="grid content-center gap-1">
+                <div class="h-1.5 overflow-hidden rounded-full bg-[#e8edf2]">
+                  <div
+                    class="h-full rounded-full transition-[width] duration-500"
+                    :class="item.status === 'failed' ? 'bg-[#d64545]' : item.status === 'skipped' ? 'bg-[#9aa3ad]' : 'bg-[#20a04b]'"
+                    :style="{ width: `${Number(item.progress || 0)}%` }"
+                  />
+                </div>
+                <p class="truncate text-xs text-[#657080]">
+                  {{ Number(item.progress || 0) }}% {{ item.message || getStatusLabel(item.status) }}
+                </p>
+              </div>
+              <div class="flex items-center">
+                <span
+                  class="inline-flex rounded-full px-2 py-1 text-xs font-semibold"
+                  :class="getStatusClass(item.status)"
+                >
+                  {{ getStatusLabel(item.status) }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div v-else class="px-4 py-10 text-center text-sm text-[#657080]">
+            게시물 목록을 준비하는 중입니다.
+          </div>
+        </div>
+
+        <details
+          v-if="job.status === 'failed' && job.errorDetail"
+          class="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>
+
+      <footer class="flex shrink-0 items-center justify-between gap-3 border-t border-[#eceff2] px-5 py-4">
+        <button
+          class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] bg-white px-3 text-xs font-semibold text-[#15171a] transition hover:bg-[#f4f6f8]"
+          type="button"
+          @click="emit('refresh')"
+        >
+          새로고침
+        </button>
+        <div class="flex items-center gap-2">
+          <button
+            v-if="job"
+            class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md border border-[#ffd5d5] bg-white 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="!canDeleteJob"
+            @click="emit('delete', job)"
+          >
+            {{ deleting ? '삭제 중' : '완료 삭제' }}
+          </button>
+          <button
+            class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-xs font-semibold text-white transition hover:bg-black"
+            type="button"
+            @click="emit('close')"
+          >
+            닫기
+          </button>
+        </div>
+      </footer>
+    </div>
+  </div>
+</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/AdminPostImportJobModal.vue | 게시물 Import 작업 센터 모달(전체 진행률·게시물별 대기/진행중/완료/스킵/오류·완료 삭제 이벤트) |
 | lib/signup-blocked-usernames.js | 가입 금지 닉네임 정리·매칭·안내 문구 |
 | pages/admin/members/index.vue | 관리자 멤버 목록(Ghost형 테이블, 글 목록과 같은 테두리형 검색, 조건 필터, 멤버 추가 버튼, 닉네임+이메일, 등급+비활성 상태, 가입일+최근 활동, IP, 댓글 수) |
 | pages/admin/members/new.vue | 관리자 멤버 추가(썸네일 URL, 이름, 이메일, 레이블, 관리자 노트) |

docs/todo.md

@@ -4,7 +4,7 @@
 
 - 거대 컴포넌트 책임 분리 진행.
   - `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
-  - `pages/admin/settings/index.vue`: 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 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.19
+
+- 관리자 설정의 게시물 가져오기 작업 센터 모달을 `AdminPostImportJobModal` 컴포넌트로 분리.
+- Import 작업 상태 라벨·진행률·게시물별 행 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면은 Import 작업 선택·새로고침·삭제 이벤트 연결만 담당하도록 정리.
+
 ## v1.11.18
 
 - 게시물 Import를 단일 요청 처리에서 DB job 기반 백그라운드 작업으로 전환.

package-lock.json

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

package.json

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

pages/admin/settings/index.vue

@@ -1118,69 +1118,6 @@ const closePostImportJobModal = () => {
   isPostImportJobModalOpen.value = false
 }
 
-/**
- * Import 작업 진행률을 계산한다.
- * @param {Object} job - Import 작업
- * @returns {number} 진행률
- */
-const getPostImportProgressPercent = (job) => {
-  const totalCount = Number(job?.totalCount || 0)
-
-  if (job?.status === 'ready') {
-    return 100
-  }
-
-  if (totalCount <= 0) {
-    return job?.status === 'processing' ? 5 : 0
-  }
-
-  return Math.min(Math.round((Number(job.processedCount || 0) / totalCount) * 100), 100)
-}
-
-/**
- * Import 작업 진행 라벨을 만든다.
- * @param {Object} job - Import 작업
- * @returns {string} 진행 라벨
- */
-const getPostImportProgressLabel = (job) => {
-  const processedCount = Number(job?.processedCount || 0)
-  const totalCount = Number(job?.totalCount || 0)
-
-  if (totalCount <= 0) {
-    return '준비 중'
-  }
-
-  return `${processedCount.toLocaleString()} / ${totalCount.toLocaleString()}`
-}
-
-/**
- * Import 작업 상태 라벨을 반환한다.
- * @param {string} status - 상태
- * @returns {string} 상태 라벨
- */
-const getPostImportStatusLabel = (status) => ({
-  queued: '대기',
-  processing: '진행중',
-  ready: '완료',
-  skipped: '스킵',
-  failed: '오류',
-  pending: '대기'
-})[status] || '대기'
-
-/**
- * Import 작업 상태 스타일을 반환한다.
- * @param {string} status - 상태
- * @returns {string} 클래스 문자열
- */
-const getPostImportStatusClass = (status) => ({
-  queued: 'bg-[#eef3ff] text-[#2458b8]',
-  processing: 'bg-[#eef3ff] text-[#2458b8]',
-  ready: 'bg-[#eefbf3] text-[#147a45]',
-  skipped: 'bg-[#f3f5f7] text-[#657080]',
-  failed: 'bg-[#fff1f2] text-[#c01f32]',
-  pending: 'bg-[#f3f5f7] text-[#657080]'
-})[status] || 'bg-[#f3f5f7] text-[#657080]'
-
 /**
  * Import 작업 삭제 중 여부를 확인한다.
  * @param {string} jobId - 작업 ID
@@ -4244,155 +4181,14 @@ onBeforeUnmount(() => {
     </div>
     </div>
 
-    <div
-      v-if="isPostImportJobModalOpen"
-      class="admin-settings-screen__import-job-modal fixed inset-0 z-50 flex items-start justify-center bg-black/35 px-4 py-8"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="admin-settings-import-job-title"
-    >
-      <div class="flex max-h-[calc(100vh-4rem)] w-full max-w-5xl flex-col overflow-hidden rounded-xl bg-white shadow-xl">
-        <header class="flex shrink-0 items-center justify-between gap-4 border-b border-[#eceff2] px-5 py-4">
-          <div class="min-w-0">
-            <h2 id="admin-settings-import-job-title" class="text-base font-semibold text-[#15171a]">
-              게시물 가져오기 작업 센터
-            </h2>
-            <p class="mt-1 truncate text-xs text-[#657080]">
-              {{ selectedPostImportJob?.originalFileName || '최근 작업' }}
-            </p>
-          </div>
-          <button
-            class="grid size-8 shrink-0 cursor-pointer place-items-center rounded-md text-[#657080] transition hover:bg-[#f3f5f7] hover:text-[#15171a]"
-            type="button"
-            aria-label="닫기"
-            @click="closePostImportJobModal"
-          >
-            <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
-          </button>
-        </header>
-
-        <div v-if="selectedPostImportJob" class="grid min-h-0 gap-4 overflow-auto px-5 py-4">
-          <div class="grid gap-3 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4">
-            <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
-              <div class="flex flex-wrap items-center gap-2">
-                <span
-                  class="inline-flex rounded-full px-2 py-1 text-xs font-semibold"
-                  :class="getPostImportStatusClass(selectedPostImportJob.status)"
-                >
-                  {{ getPostImportStatusLabel(selectedPostImportJob.status) }}
-                </span>
-                <span class="text-sm font-semibold text-[#15171a]">
-                  {{ getPostImportProgressLabel(selectedPostImportJob) }}
-                </span>
-                <span class="text-sm text-[#657080]">
-                  완료 {{ selectedPostImportJob.importedCount }} · 스킵 {{ selectedPostImportJob.skippedCount }} · 오류 {{ selectedPostImportJob.failedCount }}
-                </span>
-              </div>
-              <span class="text-xs text-[#657080]">
-                마지막 갱신: {{ formatPostDateTime(selectedPostImportJob.updatedAt) }}
-              </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: `${getPostImportProgressPercent(selectedPostImportJob)}%` }"
-              />
-            </div>
-            <p v-if="selectedPostImportJob.message" class="text-xs text-[#657080]">
-              {{ selectedPostImportJob.message }}
-            </p>
-          </div>
-
-          <div class="overflow-hidden rounded-lg border border-[#e6e8eb]">
-            <div class="grid grid-cols-[minmax(0,1fr)_220px_110px] gap-4 border-b border-[#eceff2] bg-[#fbfcfd] px-4 py-3 text-xs font-semibold text-[#394047]">
-              <span>게시물 제목</span>
-              <span>프로세스</span>
-              <span>상태</span>
-            </div>
-            <div v-if="selectedPostImportJob.items.length > 0" class="max-h-[52vh] overflow-auto">
-              <div
-                v-for="item in selectedPostImportJob.items"
-                :key="item.id"
-                class="grid grid-cols-[minmax(0,1fr)_220px_110px] gap-4 border-b border-[#edf0f3] px-4 py-3 last:border-b-0"
-              >
-                <div class="min-w-0">
-                  <p class="truncate text-sm font-semibold text-[#15171a]">
-                    {{ item.title || item.sourcePath }}
-                  </p>
-                  <p class="mt-1 truncate text-xs text-[#8a94a3]">
-                    {{ item.slug || item.sourcePath }}
-                  </p>
-                </div>
-                <div class="grid content-center gap-1">
-                  <div class="h-1.5 overflow-hidden rounded-full bg-[#e8edf2]">
-                    <div
-                      class="h-full rounded-full transition-[width] duration-500"
-                      :class="item.status === 'failed' ? 'bg-[#d64545]' : item.status === 'skipped' ? 'bg-[#9aa3ad]' : 'bg-[#20a04b]'"
-                      :style="{ width: `${Number(item.progress || 0)}%` }"
-                    />
-                  </div>
-                  <p class="truncate text-xs text-[#657080]">
-                    {{ Number(item.progress || 0) }}% {{ item.message || getPostImportStatusLabel(item.status) }}
-                  </p>
-                </div>
-                <div class="flex items-center">
-                  <span
-                    class="inline-flex rounded-full px-2 py-1 text-xs font-semibold"
-                    :class="getPostImportStatusClass(item.status)"
-                  >
-                    {{ getPostImportStatusLabel(item.status) }}
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div v-else class="px-4 py-10 text-center text-sm text-[#657080]">
-              게시물 목록을 준비하는 중입니다.
-            </div>
-          </div>
-
-          <details
-            v-if="selectedPostImportJob.status === 'failed' && selectedPostImportJob.errorDetail"
-            class="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">{{ selectedPostImportJob.errorDetail }}</pre>
-          </details>
-        </div>
-
-        <footer class="flex shrink-0 items-center justify-between gap-3 border-t border-[#eceff2] px-5 py-4">
-          <button
-            class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] bg-white px-3 text-xs font-semibold text-[#15171a] transition hover:bg-[#f4f6f8]"
-            type="button"
-            @click="refreshPostImportJobs"
-          >
-            새로고침
-          </button>
-          <div class="flex items-center gap-2">
-            <button
-              v-if="selectedPostImportJob"
-              class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md border border-[#ffd5d5] bg-white 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="selectedPostImportJob.status === 'queued' || selectedPostImportJob.status === 'processing' || isDeletingPostImportJob(selectedPostImportJob.id)"
-              @click="deletePostImportJob(selectedPostImportJob)"
-            >
-              {{ isDeletingPostImportJob(selectedPostImportJob.id) ? '삭제 중' : '완료 삭제' }}
-            </button>
-            <button
-              class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-xs font-semibold text-white transition hover:bg-black"
-              type="button"
-              @click="closePostImportJobModal"
-            >
-              닫기
-            </button>
-          </div>
-        </footer>
-      </div>
-    </div>
+    <AdminPostImportJobModal
+      :open="isPostImportJobModalOpen"
+      :job="selectedPostImportJob"
+      :deleting="selectedPostImportJob ? isDeletingPostImportJob(selectedPostImportJob.id) : false"
+      @close="closePostImportJobModal"
+      @refresh="refreshPostImportJobs"
+      @delete="deletePostImportJob"
+    />
 
     <AdminToast :toast="toast" top-class="top-24 md:top-28" />
   </div>