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

This commit is contained in:
2026-07-23 18:56:47 +09:00
parent ac26f41abd
commit ddebb5ce93
7 changed files with 292 additions and 142 deletions

View File

@@ -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"