zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

설정 내보내기 가져오기 분리 v1.5.30

Browse Source
This commit is contained in:
zenn
2026-06-02 11:03:41 +09:00
parent c2e69d9048
commit e2df9d55ac
9 changed files with 213 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
pages/admin/settings/index.vue
View File

@@ -25,6 +25,7 @@ const deletingPostExportJobIds = ref([])
const downloadingPostExportJobIds = ref([])
const retryingPostExportJobIds = ref([])
const importingPosts = ref(false)
const postImportFile = ref(null)
const postImportFileName = ref('')
const postImportResult = ref(null)
const postExportDateRangeMode = ref('all')
@@ -245,7 +246,7 @@ const canRequestPostExport = computed(() => {
*/
const postExportRequestTitle = computed(() => {
if (hasActivePostExportJobs.value) {
return '진행 중인 Export 작업이 끝난 뒤 새 요청을 만들 수 있습니다.'
return '진행 중인 내보내기 작업이 끝난 뒤 새 요청을 만들 수 있습니다.'
}
if (postExportDateRangeMode.value === 'custom' && !canRequestPostExport.value) {
@@ -256,7 +257,7 @@ const postExportRequestTitle = computed(() => {
return 'ZIP당 최대 게시물 수와 목표 용량을 확인해 주세요.'
}
return '게시물 Export 작업을 요청합니다.'
return '게시물 내보내기 작업을 요청합니다.'
})
/**
@@ -453,7 +454,8 @@ const settingsNavGroups = [
{
heading: '콘텐츠·안전',
items: [
{ id: 'admin-settings-section-import-export', label: '게시물 Import/Export', keywords: 'import export backup', iconId: 'import-export' },
{ id: 'admin-settings-section-export', label: '게시물 내보내기', keywords: 'export backup 내보내기', iconId: 'import-export' },
{ id: 'admin-settings-section-import', label: '게시물 가져오기', keywords: 'import restore 가져오기', iconId: 'import-export' },
{ id: 'admin-settings-section-spam', label: '스팸 필터', keywords: 'spam moderation comments', iconId: 'spam' }
]
}
@@ -592,7 +594,7 @@ const requestPostExport = async () => {
requestingPostExport.value = true
errorMessage.value = ''
showToast('info', '게시물 Export 작업을 등록하는 중입니다.')
showToast('info', '게시물 내보내기 작업을 등록하는 중입니다.')
try {
await $fetch('/admin/api/posts/export-jobs', {
@@ -600,9 +602,9 @@ const requestPostExport = async () => {
body: createPostExportRequestBody()
})
await refreshPostExportJobs()
showToast('success', '게시물 Export 작업이 등록되었습니다.')
showToast('success', '게시물 내보내기 작업이 등록되었습니다.')
} catch (error) {
errorMessage.value = error?.data?.message || '게시물 Export 작업을 등록하지 못했습니다.'
errorMessage.value = error?.data?.message || '게시물 내보내기 작업을 등록하지 못했습니다.'
showToast('error', errorMessage.value)
} finally {
requestingPostExport.value = false
@@ -618,32 +620,67 @@ const openPostImportFilePicker = () => {
}
/**
* 게시물 Import 파일을 업로드한다.
* @param {Event} event - 파일 선택 이벤트
* @returns {Promise<void>}
* 게시물 Import 대상 파일을 선택한다.
* @param {File|null|undefined} file - 선택 파일
* @returns {boolean} 선택 성공 여부
*/
const importPostsFromFile = async (event) => {
const target = event.target
const file = target instanceof HTMLInputElement ? target.files?.[0] : null
const selectPostImportFile = (file) => {
if (!file) {
return
return false
}
if (!file.name.toLowerCase().endsWith('.zip')) {
showToast('error', 'ZIP 파일만 Import할 수 있습니다.')
showToast('error', 'ZIP 파일만 가져올 수 있습니다.')
return false
}
postImportFile.value = file
postImportFileName.value = file.name
postImportResult.value = null
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>}
*/
const importSelectedPostFile = async () => {
if (!postImportFile.value) {
showToast('error', '가져올 ZIP 파일을 먼저 선택해 주세요.')
return
}
importingPosts.value = true
postImportFileName.value = file.name
postImportResult.value = null
showToast('info', '게시물 Import를 시작합니다.')
showToast('info', '게시물 가져오기를 시작합니다.')
try {
const formData = new FormData()
formData.append('file', file)
formData.append('file', postImportFile.value)
const result = await $fetch('/admin/api/posts/import', {
method: 'POST',
@@ -651,13 +688,14 @@ const importPostsFromFile = async (event) => {
})
postImportResult.value = result
showToast('success', `게시물 ${result.importedCount}개를 Import했습니다.`)
postImportFile.value = null
postImportFileName.value = ''
showToast('success', `게시물 ${result.importedCount}개를 가져왔습니다.`)
} catch (error) {
const message = error?.data?.message || '게시물 Import를 완료하지 못했습니다.'
const message = error?.data?.message || '게시물 가져오기를 완료하지 못했습니다.'
showToast('error', message)
} finally {
importingPosts.value = false
target.value = ''
}
}
@@ -734,16 +772,16 @@ const retryPostExportJob = async (job) => {
}
retryingPostExportJobIds.value = [...retryingPostExportJobIds.value, job.id]
showToast('info', '실패한 Export 작업을 다시 대기열에 등록하는 중입니다.')
showToast('info', '실패한 내보내기 작업을 다시 대기열에 등록하는 중입니다.')
try {
await $fetch(`/admin/api/posts/export-jobs/${job.id}/retry`, {
method: 'POST'
})
await refreshPostExportJobs()
showToast('success', 'Export 작업을 다시 시작했습니다.')
showToast('success', '내보내기 작업을 다시 시작했습니다.')
} catch (error) {
errorMessage.value = error?.data?.message || 'Export 작업을 다시 시작하지 못했습니다.'
errorMessage.value = error?.data?.message || '내보내기 작업을 다시 시작하지 못했습니다.'
showToast('error', errorMessage.value)
} finally {
retryingPostExportJobIds.value = retryingPostExportJobIds.value.filter((id) => id !== job.id)
@@ -768,16 +806,16 @@ const deletePostExportJob = async (job) => {
}
deletingPostExportJobIds.value = [...deletingPostExportJobIds.value, job.id]
showToast('info', 'Export 백업 파일을 삭제하는 중입니다.')
showToast('info', '내보내기 백업 파일을 삭제하는 중입니다.')
try {
await $fetch(`/admin/api/posts/export-jobs/${job.id}`, {
method: 'DELETE'
})
await refreshPostExportJobs()
showToast('success', 'Export 백업 파일을 삭제했습니다.')
showToast('success', '내보내기 백업 파일을 삭제했습니다.')
} catch (error) {
errorMessage.value = error?.data?.message || 'Export 백업 파일을 삭제하지 못했습니다.'
errorMessage.value = error?.data?.message || '내보내기 백업 파일을 삭제하지 못했습니다.'
showToast('error', errorMessage.value)
} finally {
deletingPostExportJobIds.value = deletingPostExportJobIds.value.filter((id) => id !== job.id)
@@ -1845,8 +1883,8 @@ onBeforeUnmount(() => {
v-if="!editHomeCover"
class="admin-settings-screen__home-cover-readonly grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
>
<div class="grid gap-6">
<div class="admin-settings-screen__home-cover-mode grid gap-2">
<div class="grid min-w-0 gap-6">
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
<div class="flex items-center justify-between gap-3">
<h3 class="text-sm font-bold text-[#15171a]">
라이트모드
@@ -1854,9 +1892,10 @@ onBeforeUnmount(() => {
</div>
<div
v-if="form.homeCoverImageUrl"
class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]"
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
>
<HomeHero
class="!max-w-full"
:image-url="form.homeCoverImageUrl"
:dark-image-url="''"
:title="form.homeCoverTitle"
@@ -1865,13 +1904,13 @@ onBeforeUnmount(() => {
</div>
<div
v-else
class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-[720px] place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
>
라이트모드 이미지가 없습니다.
</div>
</div>
<div class="admin-settings-screen__home-cover-mode grid gap-2">
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
<div class="flex items-center justify-between gap-3">
<h3 class="text-sm font-bold text-[#15171a]">
다크모드
@@ -1879,9 +1918,10 @@ onBeforeUnmount(() => {
</div>
<div
v-if="form.homeCoverDarkImageUrl"
class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]"
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
>
<HomeHero
class="!max-w-full"
:image-url="form.homeCoverDarkImageUrl"
:dark-image-url="''"
:title="form.homeCoverTitle"
@@ -1890,7 +1930,7 @@ onBeforeUnmount(() => {
</div>
<div
v-else
class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-[720px] place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
>
다크모드 전용 이미지가 없습니다. 공개 화면에서는 라이트모드 이미지를 대신 사용합니다.
</div>
@@ -1898,9 +1938,9 @@ onBeforeUnmount(() => {
</div>
</div>
<div v-else class="admin-settings-screen__home-cover-edit grid gap-6 border-t border-[#eceff2] pt-5">
<div class="grid gap-6">
<div class="admin-settings-screen__home-cover-mode grid gap-2">
<div v-else class="admin-settings-screen__home-cover-edit grid min-w-0 gap-6 border-t border-[#eceff2] pt-5">
<div class="grid min-w-0 gap-6">
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div class="min-w-0">
<h3 class="text-sm font-bold text-[#15171a]">
@@ -1932,9 +1972,10 @@ onBeforeUnmount(() => {
</div>
<div
v-if="form.homeCoverImageUrl"
class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]"
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
>
<HomeHero
class="!max-w-full"
:image-url="form.homeCoverImageUrl"
:dark-image-url="''"
:title="form.homeCoverTitle"
@@ -1943,7 +1984,7 @@ onBeforeUnmount(() => {
</div>
<button
v-else
class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-[720px] cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
type="button"
:disabled="uploadingHomeCover"
@click="openHomeCoverFilePicker"
@@ -1969,7 +2010,7 @@ onBeforeUnmount(() => {
>
</div>
<div class="admin-settings-screen__home-cover-mode grid gap-2">
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div class="min-w-0">
<h3 class="text-sm font-bold text-[#15171a]">
@@ -2001,9 +2042,10 @@ onBeforeUnmount(() => {
</div>
<div
v-if="form.homeCoverDarkImageUrl"
class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]"
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
>
<HomeHero
class="!max-w-full"
:image-url="form.homeCoverDarkImageUrl"
:dark-image-url="''"
:title="form.homeCoverTitle"
@@ -2012,7 +2054,7 @@ onBeforeUnmount(() => {
</div>
<button
v-else
class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-[720px] cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
type="button"
:disabled="uploadingHomeCoverDark"
@click="openHomeCoverDarkFilePicker"
@@ -2192,61 +2234,26 @@ onBeforeUnmount(() => {
콘텐츠·안전
</h2>
<section
id="admin-settings-section-import-export"
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 mb-2">
<h2 class="text-lg font-semibold text-[#15171a]">
게시물 Import/Export
</h2>
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
게시물 백업을 서버 작업으로 등록하고, 준비된 분할 파일을 내려받습니다.
</p>
</div>
<div class="admin-settings-screen__import-export-actions mt-5 grid gap-3 md:grid-cols-2">
<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="admin-settings-screen__import-export-action flex min-h-20 cursor-pointer items-center justify-between gap-4 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4 text-left transition hover:border-[#c5cbd3] hover:bg-white"
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')"
>
<span class="min-w-0">
<span class="block text-sm font-semibold text-[#15171a]">Export 요청</span>
<span class="mt-1 block text-sm leading-relaxed text-[#657080]">
기간과 분할 기준을 정해 백업을 만듭니다.
</span>
</span>
<span
class="grid size-8 shrink-0 place-items-center rounded-full border border-[#dce0e5] text-[#394047] transition"
:class="postImportExportPanel === 'export' ? 'rotate-180 bg-white' : 'bg-[#f4f6f8]'"
aria-hidden="true"
>
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
</span>
</button>
<button
class="admin-settings-screen__import-export-action flex min-h-20 cursor-pointer items-center justify-between gap-4 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4 text-left transition hover:border-[#c5cbd3] hover:bg-white"
type="button"
:aria-expanded="postImportExportPanel === 'import'"
aria-controls="admin-settings-import-panel"
@click="togglePostImportExportPanel('import')"
>
<span class="min-w-0">
<span class="block text-sm font-semibold text-[#15171a]">Import 하기</span>
<span class="mt-1 block text-sm leading-relaxed text-[#657080]">
백업 ZIP 가져오기 영역을 엽니다.
</span>
</span>
<span
class="grid size-8 shrink-0 place-items-center rounded-full border border-[#dce0e5] text-[#394047] transition"
:class="postImportExportPanel === 'import' ? 'rotate-180 bg-white' : 'bg-[#f4f6f8]'"
aria-hidden="true"
>
<svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
</span>
{{ postImportExportPanel === 'export' ? '접기' : '내보내기' }}
</button>
</div>
@@ -2377,80 +2384,16 @@ onBeforeUnmount(() => {
:title="postExportRequestTitle"
@click="requestPostExport"
>
{{ requestingPostExport ? '요청 중...' : hasActivePostExportJobs ? 'Export 진행 중' : 'Export 요청' }}
{{ requestingPostExport ? '요청 중...' : hasActivePostExportJobs ? '내보내기 진행 중' : '내보내기 요청' }}
</button>
</div>
</div>
</div>
<div
v-if="postImportExportPanel === 'import'"
id="admin-settings-import-panel"
class="admin-settings-screen__import-actions mt-4 grid gap-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#fbfcfd] p-4"
>
<div class="min-w-0">
<p class="text-sm font-semibold text-[#15171a]">
백업 ZIP 가져오기
</p>
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
Export로 만든 Obsidian 호환 ZIP을 게시물과 미디어 파일로 다시 가져옵니다.
</p>
</div>
<div class="grid gap-3 rounded-md border border-[#e6e8eb] bg-white p-4">
<input
ref="postImportInputRef"
class="sr-only"
type="file"
accept=".zip,application/zip"
@change="importPostsFromFile"
>
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div class="min-w-0">
<p class="text-sm font-semibold text-[#15171a]">
{{ postImportFileName || 'ZIP 파일을 선택해 주세요.' }}
</p>
<p class="mt-1 text-xs leading-relaxed text-[#657080]">
같은 슬러그가 있으면 덮어쓰지 않고 새 슬러그로 Import합니다.
</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 disabled:cursor-not-allowed disabled:bg-[#c7cdd4]"
type="button"
:disabled="importingPosts"
@click="openPostImportFilePicker"
>
{{ importingPosts ? 'Import 중...' : 'ZIP 선택' }}
</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]"
>
게시물 {{ postImportResult.importedCount }}개, 자산 {{ postImportResult.assetCount }}개를 가져왔습니다.
</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>
</div>
<div class="admin-settings-screen__export-list mt-5">
<div class="mb-3 flex items-center justify-between gap-3">
<h3 class="text-sm font-semibold text-[#15171a]">
최근 Export 작업
최근 내보내기 작업
</h3>
<button
class="inline-flex h-8 cursor-pointer items-center justify-center rounded px-3 text-xs font-semibold text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
@@ -2464,7 +2407,7 @@ onBeforeUnmount(() => {
v-if="normalizedPostExportJobs.length === 0"
class="admin-settings-screen__export-empty rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]"
>
아직 등록된 Export 작업이 없습니다.
아직 등록된 내보내기 작업이 없습니다.
</div>
<div v-else class="admin-settings-screen__export-items grid gap-3">
<article
@@ -2594,6 +2537,97 @@ 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 백업을 게시물과 미디어 파일로 복원합니다.
</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"
@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"
@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]">
같은 슬러그가 있으면 덮어쓰지 않고 새 슬러그로 가져옵니다.
</span>
</span>
</button>
<div class="flex items-center justify-end">
<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
v-if="postImportResult"
class="rounded-md bg-[#f4fbf7] px-3 py-2 text-sm text-[#147a45] ring-1 ring-inset ring-[#b9e7cd]"
>
게시물 {{ postImportResult.importedCount }}개, 자산 {{ postImportResult.assetCount }}개를 가져왔습니다.
</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>
<section
id="admin-settings-section-spam"
class="admin-settings-screen__card admin-settings-screen__card--spam relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"