게시물 가져오기 작업 센터 추가

pages/admin/settings/index.vue

@@ -67,10 +67,12 @@ const deletingPostExportJobIds = ref([])
 const downloadingPostExportJobIds = ref([])
 const selectedPostExportFileIds = ref({})
 const retryingPostExportJobIds = ref([])
+const deletingPostImportJobIds = ref([])
 const importingPosts = ref(false)
 const postImportFile = ref(null)
 const postImportFileName = ref('')
-const postImportResult = ref(null)
+const selectedPostImportJobId = ref('')
+const isPostImportJobModalOpen = ref(false)
 const postExportDateRangeMode = ref('all')
 const postExportYear = ref(new Date().getFullYear())
 const postExportMonth = ref(new Date().getMonth() + 1)
@@ -122,28 +124,6 @@ const postExportDateRangeModeOptions = [
   { value: 'custom', label: '직접 지정' }
 ]
 
-const postImportStatusSummary = computed(() => {
-  if (!postImportResult.value) {
-    return ''
-  }
-
-  const result = postImportResult.value
-  const segments = [
-    `게시물 ${Number(result.importedCount || 0)}개 가져옴`
-  ]
-
-  if (Number(result.skippedCount || 0) > 0) {
-    segments.push(`${Number(result.skippedCount || 0)}개 건너뜀`)
-  }
-
-  segments.push(`신규 자산 ${Number(result.assetCount || 0)}개`)
-
-  if (Number(result.reusedAssetCount || 0) > 0) {
-    segments.push(`재사용 자산 ${Number(result.reusedAssetCount || 0)}개`)
-  }
-
-  return segments.join(', ')
-})
 /** 블로그 제목·설명 카드 편집 모드 여부 */
 const editTitleDesc = ref(false)
 /** 사이트 정보 카드 편집 모드 여부 */
@@ -234,6 +214,7 @@ const adsSnapshot = reactive({
 })
 let scrollSpyFrame = null
 let postExportRefreshTimer = null
+let postImportRefreshTimer = null
 
 const { data: settings } = await useFetch('/admin/api/settings')
 const {
@@ -242,6 +223,12 @@ const {
 } = await useFetch('/admin/api/posts/export-jobs', {
   default: () => []
 })
+const {
+  data: postImportJobs,
+  refresh: refreshPostImportJobs
+} = await useFetch('/admin/api/posts/import-jobs', {
+  default: () => []
+})
 const {
   data: backupSummary,
   pending: backupSummaryPending,
@@ -403,6 +390,12 @@ const hasAdsChanges = computed(() => editAds.value && (
  */
 const normalizedPostExportJobs = computed(() => Array.isArray(postExportJobs.value) ? postExportJobs.value : [])
 
+/**
+ * 최신 게시물 Import 작업 목록
+ * @returns {Array} Import 작업 목록
+ */
+const normalizedPostImportJobs = computed(() => Array.isArray(postImportJobs.value) ? postImportJobs.value : [])
+
 /**
  * 진행 중인 게시물 export 작업이 있는지 확인한다.
  * @returns {boolean} 진행 중 작업 여부
@@ -411,6 +404,20 @@ const hasActivePostExportJobs = computed(() => normalizedPostExportJobs.value.so
   job.status === 'queued' || job.status === 'processing'
 )))
 
+/**
+ * 진행 중인 게시물 Import 작업이 있는지 확인한다.
+ * @returns {boolean} 진행 중 작업 여부
+ */
+const hasActivePostImportJobs = computed(() => normalizedPostImportJobs.value.some((job) => (
+  job.status === 'queued' || job.status === 'processing'
+)))
+
+/**
+ * 선택된 Import 작업
+ * @returns {Object|null} Import 작업
+ */
+const selectedPostImportJob = computed(() => normalizedPostImportJobs.value.find((job) => job.id === selectedPostImportJobId.value) || normalizedPostImportJobs.value[0] || null)
+
 /**
  * Export 연도 선택지
  * @returns {Array<number>} 연도 목록
@@ -1026,7 +1033,6 @@ const selectPostImportFile = (file) => {
 
   postImportFile.value = file
   postImportFileName.value = file.name
-  postImportResult.value = null
   return true
 }
 
@@ -1069,30 +1075,149 @@ const importSelectedPostFile = async () => {
   }
 
   importingPosts.value = true
-  postImportResult.value = null
   showToast('info', '게시물 가져오기를 시작합니다.')
 
   try {
     const formData = new FormData()
     formData.append('file', postImportFile.value)
 
-    const result = await $fetch('/admin/api/posts/import', {
+    const job = await $fetch('/admin/api/posts/import', {
       method: 'POST',
       body: formData
     })
 
-    postImportResult.value = result
+    selectedPostImportJobId.value = job.id
+    isPostImportJobModalOpen.value = true
     postImportFile.value = null
     postImportFileName.value = ''
-    showToast('success', postImportStatusSummary.value || '게시물 가져오기가 완료되었습니다.')
+    await refreshPostImportJobs()
+    showToast('success', '게시물 가져오기 작업을 시작했습니다.')
   } catch (error) {
-    const message = error?.data?.message || '게시물 가져오기를 완료하지 못했습니다.'
+    const message = error?.data?.message || '게시물 가져오기 작업을 시작하지 못했습니다.'
     showToast('error', message)
   } finally {
     importingPosts.value = false
   }
 }
 
+/**
+ * Import 작업 센터를 연다.
+ * @param {Object|null} job - 선택 작업
+ * @returns {void}
+ */
+const openPostImportJobModal = (job = null) => {
+  selectedPostImportJobId.value = job?.id || normalizedPostImportJobs.value[0]?.id || ''
+  isPostImportJobModalOpen.value = true
+}
+
+/**
+ * Import 작업 센터를 닫는다.
+ * @returns {void}
+ */
+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
+ * @returns {boolean} 삭제 중 여부
+ */
+const isDeletingPostImportJob = (jobId) => deletingPostImportJobIds.value.includes(jobId)
+
+/**
+ * Import 작업을 삭제한다.
+ * @param {Object} job - Import 작업
+ * @returns {Promise<void>}
+ */
+const deletePostImportJob = async (job) => {
+  if (!job?.id || isDeletingPostImportJob(job.id)) {
+    return
+  }
+
+  deletingPostImportJobIds.value = [...deletingPostImportJobIds.value, job.id]
+  showToast('info', '가져오기 작업 기록을 삭제하는 중입니다.')
+
+  try {
+    await $fetch(`/admin/api/posts/import-jobs/${job.id}`, {
+      method: 'DELETE'
+    })
+    await refreshPostImportJobs()
+    if (selectedPostImportJobId.value === job.id) {
+      selectedPostImportJobId.value = normalizedPostImportJobs.value[0]?.id || ''
+    }
+    showToast('success', '가져오기 작업 기록을 삭제했습니다.')
+  } catch (error) {
+    errorMessage.value = error?.data?.message || '가져오기 작업 기록을 삭제하지 못했습니다.'
+    showToast('error', errorMessage.value)
+  } finally {
+    deletingPostImportJobIds.value = deletingPostImportJobIds.value.filter((id) => id !== job.id)
+  }
+}
+
 /**
  * Export 파일 다운로드 URL을 만든다.
  * @param {Object} file - Export 파일
@@ -2228,6 +2353,11 @@ onMounted(() => {
         refreshPostExportJobs()
       }
     }, 5000)
+    postImportRefreshTimer = window.setInterval(() => {
+      if (hasActivePostImportJobs.value || isPostImportJobModalOpen.value) {
+        refreshPostImportJobs()
+      }
+    }, 2000)
     nextTick(() => {
       updateActiveSectionFromScroll()
     })
@@ -2236,6 +2366,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.clearInterval(postExportRefreshTimer)
+  window.clearInterval(postImportRefreshTimer)
   if (scrollSpyFrame) {
     cancelAnimationFrame(scrollSpyFrame)
   }
@@ -4003,9 +4134,17 @@ onBeforeUnmount(() => {
                 role="status"
                 aria-live="polite"
               >
-                게시물을 가져오는 중입니다. 대량 ZIP은 시간이 걸릴 수 있으니 이 화면을 닫지 마세요.
+                ZIP 파일을 서버 작업 대기열에 등록하는 중입니다.
               </div>
               <div class="flex items-center justify-end">
+                <button
+                  v-if="normalizedPostImportJobs.length > 0"
+                  class="mr-auto 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]"
+                  type="button"
+                  @click="openPostImportJobModal()"
+                >
+                  작업 센터
+                </button>
                 <button
                   class="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-sm font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:bg-[#c7cdd4]"
                   type="button"
@@ -4015,36 +4154,6 @@ onBeforeUnmount(() => {
                   {{ importingPosts ? '가져오는 중...' : '적용' }}
                 </button>
               </div>
-              <div
-                v-if="postImportResult"
-                class="rounded-md bg-[#f4fbf7] px-3 py-2 text-sm text-[#147a45] ring-1 ring-inset ring-[#b9e7cd]"
-              >
-                {{ postImportStatusSummary }}
-                <ul v-if="postImportResult.skippedPosts?.length" class="mt-2 grid gap-1 text-xs leading-relaxed text-[#24633f]">
-                  <li
-                    v-for="post in postImportResult.skippedPosts"
-                    :key="`${post.slug}-${post.reason}`"
-                  >
-                    건너뜀: {{ post.title }} ({{ post.slug }})
-                  </li>
-                </ul>
-              </div>
-              <div
-                v-if="postImportResult?.warningCount"
-                class="rounded-md bg-[#fff8e8] px-3 py-2 text-sm text-[#8a5a00] ring-1 ring-inset ring-[#f0d28a]"
-              >
-                <p class="font-semibold">
-                  경고 {{ postImportResult.warningCount }}개가 있습니다.
-                </p>
-                <ul class="mt-2 grid gap-1 text-xs leading-relaxed">
-                  <li
-                    v-for="warning in postImportResult.warnings"
-                    :key="warning"
-                  >
-                    {{ warning }}
-                  </li>
-                </ul>
-              </div>
             </div>
           </section>
 
@@ -4135,6 +4244,156 @@ 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>
+
     <AdminToast :toast="toast" top-class="top-24 md:top-28" />
   </div>
 </template>