게시물 가져오기 카드 분리

pages/admin/settings/index.vue

@@ -86,7 +86,6 @@ const { toast, showToast } = useAdminToast()
 const logoInputRef = ref(null)
 const homeCoverInputRef = ref(null)
 const homeCoverDarkInputRef = ref(null)
-const postImportInputRef = ref(null)
 const mainScrollRef = ref(null)
 const navSearchQuery = ref('')
 const {
@@ -834,18 +833,6 @@ const requestPostExport = async () => {
   }
 }
 
-/**
- * 게시물 Import 파일 선택창을 연다.
- * @returns {void}
- */
-const openPostImportFilePicker = () => {
-  if (importingPosts.value) {
-    return
-  }
-
-  postImportInputRef.value?.click()
-}
-
 /**
  * 게시물 Import 대상 파일을 선택한다.
  * @param {File|null|undefined} file - 선택 파일
@@ -870,30 +857,6 @@ const selectPostImportFile = (file) => {
   return true
 }
 
-/**
- * 게시물 Import 파일 선택 이벤트를 처리한다.
- * @param {Event} event - 파일 선택 이벤트
- * @returns {void}
- */
-const handlePostImportFileChange = (event) => {
-  const target = event.target
-  const file = target instanceof HTMLInputElement ? target.files?.[0] : null
-  selectPostImportFile(file)
-
-  if (target instanceof HTMLInputElement) {
-    target.value = ''
-  }
-}
-
-/**
- * 게시물 Import 파일 드롭 이벤트를 처리한다.
- * @param {DragEvent} event - 파일 드롭 이벤트
- * @returns {void}
- */
-const dropPostImportFile = (event) => {
-  selectPostImportFile(event.dataTransfer?.files?.[0])
-}
-
 /**
  * 선택된 게시물 Import 파일을 업로드한다.
  * @returns {Promise<void>}
@@ -3757,92 +3720,17 @@ onBeforeUnmount(() => {
             </div>
           </section>
 
-          <section
-            id="admin-settings-section-import"
-            class="admin-settings-screen__card 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]">
-                  내보내기로 만든 ZIP 백업을 게시물과 미디어 파일로 복원합니다. 이미 같은 slug가 있는 게시물은 건너뜁니다.
-                </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]"
-                type="button"
-                :aria-expanded="postImportExportPanel === 'import'"
-                aria-controls="admin-settings-import-panel"
-                :disabled="importingPosts"
-                @click="togglePostImportExportPanel('import')"
-              >
-                {{ postImportExportPanel === 'import' ? '접기' : '가져오기' }}
-              </button>
-            </div>
-
-            <div
-              v-if="postImportExportPanel === 'import'"
-              id="admin-settings-import-panel"
-              class="admin-settings-screen__import-actions mt-5 grid gap-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#fbfcfd] p-4"
-            >
-              <input
-                ref="postImportInputRef"
-                class="sr-only"
-                type="file"
-                accept=".zip,application/zip"
-                :disabled="importingPosts"
-                @change="handlePostImportFileChange"
-              >
-              <button
-                class="admin-settings-screen__import-dropzone grid min-h-32 cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-white px-4 py-6 text-center transition hover:border-[#15171a] hover:bg-[#f7f8fa] disabled:cursor-not-allowed disabled:opacity-60"
-                type="button"
-                :disabled="importingPosts"
-                @click="openPostImportFilePicker"
-                @dragover.prevent
-                @drop.prevent="dropPostImportFile"
-              >
-                <span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
-                  <svg class="size-6 text-[#8a94a3]" 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="M12 16V4" />
-                    <path d="m7 9 5-5 5 5" />
-                    <path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
-                  </svg>
-                  <span>{{ postImportFileName || 'ZIP 파일을 드롭하거나 선택하세요.' }}</span>
-                  <span class="text-xs font-medium text-[#8a94a3]">
-                    같은 slug의 게시물은 덮어쓰지 않고 건너뛰며, 건너뛴 게시물의 자산도 다시 저장하지 않습니다.
-                  </span>
-                </span>
-              </button>
-              <div
-                v-if="importingPosts"
-                class="admin-settings-screen__import-progress rounded-md bg-[#eef5ff] px-3 py-2 text-sm text-[#1f5f99] ring-1 ring-inset ring-[#bdd8f3]"
-                role="status"
-                aria-live="polite"
-              >
-                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"
-                  :disabled="importingPosts || !postImportFile"
-                  @click="importSelectedPostFile"
-                >
-                  {{ importingPosts ? '가져오는 중...' : '적용' }}
-                </button>
-              </div>
-            </div>
-          </section>
+          <AdminPostImportCard
+            :expanded="postImportExportPanel === 'import'"
+            :importing="importingPosts"
+            :file-name="postImportFileName"
+            :has-file="Boolean(postImportFile)"
+            :has-jobs="normalizedPostImportJobs.length > 0"
+            @toggle="togglePostImportExportPanel('import')"
+            @select-file="selectPostImportFile"
+            @submit="importSelectedPostFile"
+            @open-jobs="openPostImportJobModal()"
+          />
 
           <section
             id="admin-settings-section-spam"