게시물 내보내기 요청 카드 분리

2026-07-23 18:56:47 +09:00
parent ac26f41abd
commit ddebb5ce93
7 changed files with 292 additions and 142 deletions
--- a/components/admin/AdminPostExportRequestCard.vue
+++ b/components/admin/AdminPostExportRequestCard.vue
@@ -0,0 +1,261 @@
+<script setup>
+/**
+ * 게시물 내보내기 요청 카드
+ * @property {boolean} expanded - 펼침 여부
+ * @property {string} dateRangeMode - 내보내기 범위 모드
+ * @property {number} year - 내보내기 연도
+ * @property {number} month - 내보내기 월
+ * @property {string} dateFrom - 직접 범위 시작일
+ * @property {string} dateTo - 직접 범위 종료일
+ * @property {number} maxFileSizeMb - 목표 ZIP 용량
+ * @property {number} chunkSize - ZIP당 최대 게시물 수
+ * @property {Array} dateRangeModeOptions - 범위 옵션
+ * @property {Array} yearOptions - 연도 옵션
+ * @property {Array} monthOptions - 월 옵션
+ * @property {boolean} canRequest - 요청 가능 여부
+ * @property {boolean} requesting - 요청 중 여부
+ * @property {boolean} hasActiveJobs - 진행 중 작업 여부
+ * @property {string} requestTitle - 요청 버튼 안내 문구
+ */
+defineProps({
+  expanded: {
+    type: Boolean,
+    default: false
+  },
+  dateRangeMode: {
+    type: String,
+    default: 'all'
+  },
+  year: {
+    type: [Number, String],
+    default: () => new Date().getFullYear()
+  },
+  month: {
+    type: [Number, String],
+    default: 1
+  },
+  dateFrom: {
+    type: String,
+    default: ''
+  },
+  dateTo: {
+    type: String,
+    default: ''
+  },
+  maxFileSizeMb: {
+    type: [Number, String],
+    default: 500
+  },
+  chunkSize: {
+    type: [Number, String],
+    default: 500
+  },
+  dateRangeModeOptions: {
+    type: Array,
+    default: () => []
+  },
+  yearOptions: {
+    type: Array,
+    default: () => []
+  },
+  monthOptions: {
+    type: Array,
+    default: () => []
+  },
+  canRequest: {
+    type: Boolean,
+    default: false
+  },
+  requesting: {
+    type: Boolean,
+    default: false
+  },
+  hasActiveJobs: {
+    type: Boolean,
+    default: false
+  },
+  requestTitle: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits([
+  'toggle',
+  'request',
+  'update:dateRangeMode',
+  'update:year',
+  'update:month',
+  'update:dateFrom',
+  'update:dateTo',
+  'update:maxFileSizeMb',
+  'update:chunkSize'
+])
+
+/**
+ * 입력 이벤트 값을 문자열로 전달한다.
+ * @param {Event} event - 입력 이벤트
+ * @param {string} eventName - 전달할 이벤트 이름
+ * @returns {void}
+ */
+const emitTextInputValue = (event, eventName) => {
+  emit(eventName, event.target?.value || '')
+}
+
+/**
+ * 숫자 입력 이벤트 값을 전달한다.
+ * @param {Event} event - 입력 이벤트
+ * @param {string} eventName - 전달할 이벤트 이름
+ * @returns {void}
+ */
+const emitNumberInputValue = (event, eventName) => {
+  const value = event.target?.value ?? ''
+  emit(eventName, value === '' ? '' : Number(value))
+}
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-export"
+    class="admin-post-export-request-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]">
+          게시물을 Obsidian 호환 ZIP 백업으로 만들고, 준비된 분할 파일을 내려받습니다.
+        </p>
+      </div>
+      <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"
+        type="button"
+        :aria-expanded="expanded"
+        aria-controls="admin-settings-export-panel"
+        @click="emit('toggle')"
+      >
+        {{ expanded ? '접기' : '내보내기' }}
+      </button>
+    </div>
+
+    <div
+      v-if="expanded"
+      id="admin-settings-export-panel"
+      class="admin-post-export-request-card__actions admin-settings-screen__export-actions mt-4 grid gap-4 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4"
+    >
+      <div class="min-w-0">
+        <p class="text-sm font-semibold text-[#15171a]">
+          Obsidian 호환 백업 준비
+        </p>
+        <p class="mt-1 text-sm leading-relaxed text-[#657080]">
+          전체·연도·월·직접 범위로 게시물을 골라 목표 용량 기준 ZIP 백업을 만듭니다.
+        </p>
+      </div>
+      <div class="grid gap-3">
+        <div class="admin-post-export-request-card__range admin-settings-screen__export-range grid gap-2 md:grid-cols-4">
+          <div class="grid gap-1 text-xs font-semibold text-[#5d6673]">
+            <span>범위</span>
+            <AdminSelectInput
+              :model-value="dateRangeMode"
+              :options="dateRangeModeOptions"
+              label="내보내기 범위"
+              select-class="admin-settings-screen__export-select h-10 rounded-md border-[#dce0e5] text-sm font-semibold text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              width-class="w-full"
+              @update:model-value="emit('update:dateRangeMode', $event)"
+            />
+          </div>
+          <div
+            v-if="dateRangeMode === 'year' || dateRangeMode === 'month'"
+            class="grid gap-1 text-xs font-semibold text-[#5d6673]"
+          >
+            <span>연도</span>
+            <AdminSelectInput
+              :model-value="year"
+              :options="yearOptions"
+              label="내보내기 연도"
+              select-class="admin-settings-screen__export-select h-10 rounded-md border-[#dce0e5] text-sm font-semibold text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              width-class="w-full"
+              @update:model-value="emit('update:year', $event)"
+            />
+          </div>
+          <div
+            v-if="dateRangeMode === 'month'"
+            class="grid gap-1 text-xs font-semibold text-[#5d6673]"
+          >
+            <span>월</span>
+            <AdminSelectInput
+              :model-value="month"
+              :options="monthOptions"
+              label="내보내기 월"
+              select-class="admin-settings-screen__export-select h-10 rounded-md border-[#dce0e5] text-sm font-semibold text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              width-class="w-full"
+              @update:model-value="emit('update:month', $event)"
+            />
+          </div>
+          <label
+            v-if="dateRangeMode === 'custom'"
+            class="grid gap-1 text-xs font-semibold text-[#5d6673]"
+          >
+            시작일
+            <input
+              :value="dateFrom"
+              class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              type="date"
+              @input="emitTextInputValue($event, 'update:dateFrom')"
+            >
+          </label>
+          <label
+            v-if="dateRangeMode === 'custom'"
+            class="grid gap-1 text-xs font-semibold text-[#5d6673]"
+          >
+            종료일
+            <input
+              :value="dateTo"
+              class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              type="date"
+              @input="emitTextInputValue($event, 'update:dateTo')"
+            >
+          </label>
+        </div>
+        <div class="admin-post-export-request-card__split admin-settings-screen__export-split grid gap-2 md:grid-cols-2">
+          <label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
+            목표 ZIP 용량 (MB)
+            <input
+              :value="maxFileSizeMb"
+              class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              type="number"
+              min="10"
+              max="2048"
+              step="10"
+              @input="emitNumberInputValue($event, 'update:maxFileSizeMb')"
+            >
+          </label>
+          <label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
+            ZIP당 최대 게시물 수
+            <input
+              :value="chunkSize"
+              class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              type="number"
+              min="1"
+              max="500"
+              step="1"
+              @input="emitNumberInputValue($event, 'update:chunkSize')"
+            >
+          </label>
+        </div>
+        <div class="flex items-center justify-end">
+          <button
+            class="admin-post-export-request-card__request admin-settings-screen__export-request 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="!canRequest"
+            :title="requestTitle"
+            @click="emit('request')"
+          >
+            {{ requesting ? '요청 중...' : hasActiveJobs ? '내보내기 진행 중' : '내보내기 요청' }}
+          </button>
+        </div>
+      </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당 최대 게시물 수, 작업이 있을 때만 표시되는 **최근 내보내기 작업** 별도 카드(준비 완료 배지 숨김·진행 중 진행도·만료일·파일 체크 선택·전체 선택·선택 파일 다운로드·실패 작업 재시도·실패 상세 오류·작업 삭제), **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
+| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **POST 설정**(`showPostUpdatedAt` 토글·읽기 모드 비활성 톤), 블로그 제목·설명 읽기 행, **사이트 정보**(로고 미등록 점선 박스·URL·저작권 읽기 행), **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터**(가입 금지 닉네임), **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신, 작업이 있을 때만 표시되는 **최근 내보내기 작업** 별도 카드(준비 완료 배지 숨김·진행 중 진행도·만료일·파일 체크 선택·전체 선택·선택 파일 다운로드·실패 작업 재시도·실패 상세 오류·작업 삭제), **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
 | components/admin/AdminBackupSummaryCard.vue | 관리자 설정 사이트 용량 카드(콘텐츠 수량·미디어 용량·자동 생성 이미지·내보내기 파일·큰 파일·새로고침 이벤트) |
+| components/admin/AdminPostExportRequestCard.vue | 관리자 설정 게시물 내보내기 요청 카드(범위·연도·월·직접 날짜·분할 옵션·요청 이벤트) |
 | components/admin/AdminPostImportCard.vue | 관리자 설정 게시물 가져오기 카드(ZIP input·드롭존·작업 센터 버튼·적용 이벤트) |
 | components/admin/AdminPostImportJobModal.vue | 게시물 Import 작업 센터 모달(전체 진행률·게시물별 대기/진행중/완료/스킵/오류·완료 삭제 이벤트) |
 | lib/signup-blocked-usernames.js | 가입 금지 닉네임 정리·매칭·안내 문구 |
--- 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.22
+
+- 관리자 설정의 게시물 내보내기 요청 카드를 `AdminPostExportRequestCard` 컴포넌트로 분리.
+- Export 범위·연도·월·직접 날짜·분할 옵션·요청 버튼 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면은 Export 요청 body 생성·작업 등록·작업 목록 갱신만 담당하도록 정리.
+
 ## v1.11.21

 - 관리자 설정의 게시물 가져오기 카드를 `AdminPostImportCard` 컴포넌트로 분리.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "1.11.21",
+  "version": "1.11.22",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "1.11.21",
+      "version": "1.11.22",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "1.11.21",
+  "version": "1.11.22",
  "private": true,
  "type": "module",
  "imports": {
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -3444,143 +3444,25 @@ onBeforeUnmount(() => {
            @refresh="refreshBackupSummary"
          />

-          <section
-            id="admin-settings-section-export"
-            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]">
-                  게시물을 Obsidian 호환 ZIP 백업으로 만들고, 준비된 분할 파일을 내려받습니다.
-                </p>
-              </div>
-              <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"
-                type="button"
-                :aria-expanded="postImportExportPanel === 'export'"
-                aria-controls="admin-settings-export-panel"
-                @click="togglePostImportExportPanel('export')"
-              >
-                {{ postImportExportPanel === 'export' ? '접기' : '내보내기' }}
-              </button>
-            </div>
-
-            <div
-              v-if="postImportExportPanel === 'export'"
-              id="admin-settings-export-panel"
-              class="admin-settings-screen__export-actions mt-4 grid gap-4 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4"
-            >
-              <div class="min-w-0">
-                <p class="text-sm font-semibold text-[#15171a]">
-                  Obsidian 호환 백업 준비
-                </p>
-                <p class="mt-1 text-sm leading-relaxed text-[#657080]">
-                  전체·연도·월·직접 범위로 게시물을 골라 목표 용량 기준 ZIP 백업을 만듭니다.
-                </p>
-              </div>
-              <div class="grid gap-3">
-                <div class="admin-settings-screen__export-range grid gap-2 md:grid-cols-4">
-                  <div class="grid gap-1 text-xs font-semibold text-[#5d6673]">
-                    <span>범위</span>
-                    <AdminSelectInput
-                      v-model="postExportDateRangeMode"
-                      :options="postExportDateRangeModeOptions"
-                      label="내보내기 범위"
-                      select-class="admin-settings-screen__export-select h-10 rounded-md border-[#dce0e5] text-sm font-semibold text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      width-class="w-full"
-                    />
-                  </div>
-                  <div
-                    v-if="postExportDateRangeMode === 'year' || postExportDateRangeMode === 'month'"
-                    class="grid gap-1 text-xs font-semibold text-[#5d6673]"
-                  >
-                    <span>연도</span>
-                    <AdminSelectInput
-                      v-model="postExportYear"
-                      :options="postExportYearSelectOptions"
-                      label="내보내기 연도"
-                      select-class="admin-settings-screen__export-select h-10 rounded-md border-[#dce0e5] text-sm font-semibold text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      width-class="w-full"
-                    />
-                  </div>
-                  <div
-                    v-if="postExportDateRangeMode === 'month'"
-                    class="grid gap-1 text-xs font-semibold text-[#5d6673]"
-                  >
-                    <span>월</span>
-                    <AdminSelectInput
-                      v-model="postExportMonth"
-                      :options="postExportMonthSelectOptions"
-                      label="내보내기 월"
-                      select-class="admin-settings-screen__export-select h-10 rounded-md border-[#dce0e5] text-sm font-semibold text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      width-class="w-full"
-                    />
-                  </div>
-                  <label
-                    v-if="postExportDateRangeMode === 'custom'"
-                    class="grid gap-1 text-xs font-semibold text-[#5d6673]"
-                  >
-                    시작일
-                    <input
-                      v-model="postExportDateFrom"
-                      class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      type="date"
-                    >
-                  </label>
-                  <label
-                    v-if="postExportDateRangeMode === 'custom'"
-                    class="grid gap-1 text-xs font-semibold text-[#5d6673]"
-                  >
-                    종료일
-                    <input
-                      v-model="postExportDateTo"
-                      class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      type="date"
-                    >
-                  </label>
-                </div>
-                <div class="admin-settings-screen__export-split grid gap-2 md:grid-cols-2">
-                  <label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
-                    목표 ZIP 용량 (MB)
-                    <input
-                      v-model.number="postExportMaxFileSizeMb"
-                      class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      type="number"
-                      min="10"
-                      max="2048"
-                      step="10"
-                    >
-                  </label>
-                  <label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
-                    ZIP당 최대 게시물 수
-                    <input
-                      v-model.number="postExportChunkSize"
-                      class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-                      type="number"
-                      min="1"
-                      max="500"
-                      step="1"
-                    >
-                  </label>
-                </div>
-                <div class="flex items-center justify-end">
-                  <button
-                    class="admin-settings-screen__export-request 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="!canRequestPostExport"
-                    :title="postExportRequestTitle"
-                    @click="requestPostExport"
-                  >
-                    {{ requestingPostExport ? '요청 중...' : hasActivePostExportJobs ? '내보내기 진행 중' : '내보내기 요청' }}
-                  </button>
-                </div>
-              </div>
-            </div>
-
-          </section>
+          <AdminPostExportRequestCard
+            v-model:date-range-mode="postExportDateRangeMode"
+            v-model:year="postExportYear"
+            v-model:month="postExportMonth"
+            v-model:date-from="postExportDateFrom"
+            v-model:date-to="postExportDateTo"
+            v-model:max-file-size-mb="postExportMaxFileSizeMb"
+            v-model:chunk-size="postExportChunkSize"
+            :expanded="postImportExportPanel === 'export'"
+            :date-range-mode-options="postExportDateRangeModeOptions"
+            :year-options="postExportYearSelectOptions"
+            :month-options="postExportMonthSelectOptions"
+            :can-request="canRequestPostExport"
+            :requesting="requestingPostExport"
+            :has-active-jobs="hasActivePostExportJobs"
+            :request-title="postExportRequestTitle"
+            @toggle="togglePostImportExportPanel('export')"
+            @request="requestPostExport"
+          />

          <section
            v-if="normalizedPostExportJobs.length > 0"