게시물 가져오기 카드 분리

2026-07-23 18:52:17 +09:00
parent c6f43bab59
commit ac26f41abd
7 changed files with 172 additions and 128 deletions
--- a/components/admin/AdminPostImportCard.vue
+++ b/components/admin/AdminPostImportCard.vue
@@ -0,0 +1,149 @@
+<script setup>
+defineProps({
+  expanded: {
+    type: Boolean,
+    default: false
+  },
+  importing: {
+    type: Boolean,
+    default: false
+  },
+  fileName: {
+    type: String,
+    default: ''
+  },
+  hasFile: {
+    type: Boolean,
+    default: false
+  },
+  hasJobs: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['toggle', 'select-file', 'submit', 'open-jobs'])
+const inputRef = ref(null)
+
+/**
+ * 파일 선택창을 연다.
+ * @returns {void}
+ */
+const openFilePicker = () => {
+  inputRef.value?.click()
+}
+
+/**
+ * 파일 선택 이벤트를 부모로 전달한다.
+ * @param {Event} event - 파일 선택 이벤트
+ * @returns {void}
+ */
+const handleFileChange = (event) => {
+  const target = event.target
+  const file = target instanceof HTMLInputElement ? target.files?.[0] : null
+
+  emit('select-file', file || null)
+
+  if (target instanceof HTMLInputElement) {
+    target.value = ''
+  }
+}
+
+/**
+ * 파일 드롭 이벤트를 부모로 전달한다.
+ * @param {DragEvent} event - 파일 드롭 이벤트
+ * @returns {void}
+ */
+const handleFileDrop = (event) => {
+  emit('select-file', event.dataTransfer?.files?.[0] || null)
+}
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-import"
+    class="admin-post-import-card 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="expanded"
+        aria-controls="admin-settings-import-panel"
+        :disabled="importing"
+        @click="emit('toggle')"
+      >
+        {{ expanded ? '접기' : '가져오기' }}
+      </button>
+    </div>
+
+    <div
+      v-if="expanded"
+      id="admin-settings-import-panel"
+      class="admin-post-import-card__actions admin-settings-screen__import-actions mt-5 grid gap-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#fbfcfd] p-4"
+    >
+      <input
+        ref="inputRef"
+        class="sr-only"
+        type="file"
+        accept=".zip,application/zip"
+        :disabled="importing"
+        @change="handleFileChange"
+      >
+      <button
+        class="admin-post-import-card__dropzone 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="importing"
+        @click="openFilePicker"
+        @dragover.prevent
+        @drop.prevent="handleFileDrop"
+      >
+        <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>{{ fileName || 'ZIP 파일을 드롭하거나 선택하세요.' }}</span>
+          <span class="text-xs font-medium text-[#8a94a3]">
+            같은 slug의 게시물은 덮어쓰지 않고 건너뛰며, 건너뛴 게시물의 자산도 다시 저장하지 않습니다.
+          </span>
+        </span>
+      </button>
+      <div
+        v-if="importing"
+        class="admin-post-import-card__progress 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="hasJobs"
+          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="emit('open-jobs')"
+        >
+          작업 센터
+        </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="importing || !hasFile"
+          @click="emit('submit')"
+        >
+          {{ importing ? '가져오는 중...' : '적용' }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
--- a/docs/map.md
+++ b/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 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터**(가입 금지 닉네임), **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 독립 카드와 펼침형 전체·연도·월·직접 날짜 범위 작업 요청·목표 ZIP 용량·ZIP당 최대 게시물 수, 작업이 있을 때만 표시되는 **최근 내보내기 작업** 별도 카드(준비 완료 배지 숨김·진행 중 진행도·만료일·파일 체크 선택·전체 선택·선택 파일 다운로드·실패 작업 재시도·실패 상세 오류·작업 삭제), **게시물 가져오기** 독립 카드와 펼침형 ZIP 드롭존·적용 버튼·작업 센터 모달 이벤트 연결, 진행 중 요청 버튼 잠금 |
+| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **POST 설정**(`showPostUpdatedAt` 토글·읽기 모드 비활성 톤), 블로그 제목·설명 읽기 행, **사이트 정보**(로고 미등록 점선 박스·URL·저작권 읽기 행), **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터**(가입 금지 닉네임), **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 독립 카드와 펼침형 전체·연도·월·직접 날짜 범위 작업 요청·목표 ZIP 용량·ZIP당 최대 게시물 수, 작업이 있을 때만 표시되는 **최근 내보내기 작업** 별도 카드(준비 완료 배지 숨김·진행 중 진행도·만료일·파일 체크 선택·전체 선택·선택 파일 다운로드·실패 작업 재시도·실패 상세 오류·작업 삭제), **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
 | components/admin/AdminBackupSummaryCard.vue | 관리자 설정 사이트 용량 카드(콘텐츠 수량·미디어 용량·자동 생성 이미지·내보내기 파일·큰 파일·새로고침 이벤트) |
+| components/admin/AdminPostImportCard.vue | 관리자 설정 게시물 가져오기 카드(ZIP input·드롭존·작업 센터 버튼·적용 이벤트) |
 | components/admin/AdminPostImportJobModal.vue | 게시물 Import 작업 센터 모달(전체 진행률·게시물별 대기/진행중/완료/스킵/오류·완료 삭제 이벤트) |
 | lib/signup-blocked-usernames.js | 가입 금지 닉네임 정리·매칭·안내 문구 |
 | pages/admin/members/index.vue | 관리자 멤버 목록(Ghost형 테이블, 글 목록과 같은 테두리형 검색, 조건 필터, 멤버 추가 버튼, 닉네임+이메일, 등급+비활성 상태, 가입일+최근 활동, IP, 댓글 수) |
--- a/docs/todo.md
+++ b/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`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,11 @@
 # 업데이트 이력

+## v1.11.21
+
+- 관리자 설정의 게시물 가져오기 카드를 `AdminPostImportCard` 컴포넌트로 분리.
+- Import ZIP 파일 input·드롭존·작업 센터 버튼·적용 버튼 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면은 Import 파일 검증·작업 생성 요청·작업 모달 연결만 담당하도록 정리.
+
 ## v1.11.20

 - 관리자 설정의 사이트 용량 카드를 `AdminBackupSummaryCard` 컴포넌트로 분리.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "1.11.20",
+  "version": "1.11.21",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "1.11.20",
+      "version": "1.11.21",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "1.11.20",
+  "version": "1.11.21",
  "private": true,
  "type": "module",
  "imports": {
--- a/pages/admin/settings/index.vue
+++ b/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"