150 lines
5.2 KiB
Vue
150 lines
5.2 KiB
Vue
<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>
|