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

가져오기 작업 센터 모달 분리

Browse Source
This commit is contained in:
zenn
2026-07-23 18:41:38 +09:00
parent ef7c1216e4
commit d9cd7bce97
7 changed files with 287 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
components/admin/AdminPostImportJobModal.vue Normal file
View File

@@ -0,0 +1,267 @@
<script setup>
const props = defineProps({
open: {
type: Boolean,
default: false
},
job: {
type: Object,
default: null
},
deleting: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['close', 'refresh', 'delete'])
/**
* 날짜·시간을 관리자 화면용 문자열로 변환한다.
* @param {string|null} value - ISO 날짜 문자열
* @returns {string} 표시 문자열
*/
const formatDateTime = (value) => {
if (!value) {
return '-'
}
const date = new Date(value)
if (Number.isNaN(date.getTime())) {
return '-'
}
return new Intl.DateTimeFormat('ko-KR', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
}).format(date)
}
/**
* Import 작업 진행률을 계산한다.
* @param {Object|null} job - Import 작업
* @returns {number} 진행률
*/
const getProgressPercent = (job) => {
const totalCount = Number(job?.totalCount || 0)
if (job?.status === 'ready') {
return 100
}
if (totalCount <= 0) {
return job?.status === 'processing' ? 5 : 0
}
return Math.min(Math.round((Number(job.processedCount || 0) / totalCount) * 100), 100)
}
/**
* Import 작업 진행 라벨을 만든다.
* @param {Object|null} job - Import 작업
* @returns {string} 진행 라벨
*/
const getProgressLabel = (job) => {
const processedCount = Number(job?.processedCount || 0)
const totalCount = Number(job?.totalCount || 0)
if (totalCount <= 0) {
return '준비 중'
}
return `${processedCount.toLocaleString()} / ${totalCount.toLocaleString()}`
}
/**
* Import 상태 라벨을 반환한다.
* @param {string} status - 상태
* @returns {string} 상태 라벨
*/
const getStatusLabel = (status) => ({
queued: '대기',
processing: '진행중',
ready: '완료',
skipped: '스킵',
failed: '오류',
pending: '대기'
})[status] || '대기'
/**
* Import 상태 스타일을 반환한다.
* @param {string} status - 상태
* @returns {string} 클래스 문자열
*/
const getStatusClass = (status) => ({
queued: 'bg-[#eef3ff] text-[#2458b8]',
processing: 'bg-[#eef3ff] text-[#2458b8]',
ready: 'bg-[#eefbf3] text-[#147a45]',
skipped: 'bg-[#f3f5f7] text-[#657080]',
failed: 'bg-[#fff1f2] text-[#c01f32]',
pending: 'bg-[#f3f5f7] text-[#657080]'
})[status] || 'bg-[#f3f5f7] text-[#657080]'
/**
* Import 작업 삭제 가능 여부를 확인한다.
* @returns {boolean} 삭제 가능 여부
*/
const canDeleteJob = computed(() => Boolean(props.job)
&& props.job.status !== 'queued'
&& props.job.status !== 'processing'
&& !props.deleting)
</script>
<template>
<div
v-if="open"
class="admin-post-import-job-modal fixed inset-0 z-50 flex items-start justify-center bg-black/35 px-4 py-8"
role="dialog"
aria-modal="true"
aria-labelledby="admin-post-import-job-modal-title"
>
<div class="flex max-h-[calc(100vh-4rem)] w-full max-w-5xl flex-col overflow-hidden rounded-xl bg-white shadow-xl">
<header class="flex shrink-0 items-center justify-between gap-4 border-b border-[#eceff2] px-5 py-4">
<div class="min-w-0">
<h2 id="admin-post-import-job-modal-title" class="text-base font-semibold text-[#15171a]">
게시물 가져오기 작업 센터
</h2>
<p class="mt-1 truncate text-xs text-[#657080]">
{{ job?.originalFileName || '최근 작업' }}
</p>
</div>
<button
class="grid size-8 shrink-0 cursor-pointer place-items-center rounded-md text-[#657080] transition hover:bg-[#f3f5f7] hover:text-[#15171a]"
type="button"
aria-label="닫기"
@click="emit('close')"
>
<svg class="size-5" 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="M18 6 6 18" />
<path d="m6 6 12 12" />
</svg>
</button>
</header>
<div v-if="job" class="grid min-h-0 gap-4 overflow-auto px-5 py-4">
<div class="grid gap-3 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4">
<div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
<div class="flex flex-wrap items-center gap-2">
<span
class="inline-flex rounded-full px-2 py-1 text-xs font-semibold"
:class="getStatusClass(job.status)"
>
{{ getStatusLabel(job.status) }}
</span>
<span class="text-sm font-semibold text-[#15171a]">
{{ getProgressLabel(job) }}
</span>
<span class="text-sm text-[#657080]">
완료 {{ job.importedCount }} · 스킵 {{ job.skippedCount }} · 오류 {{ job.failedCount }}
</span>
</div>
<span class="text-xs text-[#657080]">
마지막 갱신: {{ formatDateTime(job.updatedAt) }}
</span>
</div>
<div class="h-2 overflow-hidden rounded-full bg-[#e8edf2]">
<div
class="h-full rounded-full bg-[#15171a] transition-[width] duration-500"
:style="{ width: `${getProgressPercent(job)}%` }"
/>
</div>
<p v-if="job.message" class="text-xs text-[#657080]">
{{ job.message }}
</p>
</div>
<div class="overflow-hidden rounded-lg border border-[#e6e8eb]">
<div class="grid min-w-[680px] grid-cols-[minmax(0,1fr)_220px_110px] gap-4 border-b border-[#eceff2] bg-[#fbfcfd] px-4 py-3 text-xs font-semibold text-[#394047]">
<span>게시물 제목</span>
<span>프로세스</span>
<span>상태</span>
</div>
<div v-if="job.items.length > 0" class="max-h-[52vh] overflow-auto">
<div
v-for="item in job.items"
:key="item.id"
class="grid min-w-[680px] grid-cols-[minmax(0,1fr)_220px_110px] gap-4 border-b border-[#edf0f3] px-4 py-3 last:border-b-0"
>
<div class="min-w-0">
<p class="truncate text-sm font-semibold text-[#15171a]">
{{ item.title || item.sourcePath }}
</p>
<p class="mt-1 truncate text-xs text-[#8a94a3]">
{{ item.slug || item.sourcePath }}
</p>
</div>
<div class="grid content-center gap-1">
<div class="h-1.5 overflow-hidden rounded-full bg-[#e8edf2]">
<div
class="h-full rounded-full transition-[width] duration-500"
:class="item.status === 'failed' ? 'bg-[#d64545]' : item.status === 'skipped' ? 'bg-[#9aa3ad]' : 'bg-[#20a04b]'"
:style="{ width: `${Number(item.progress || 0)}%` }"
/>
</div>
<p class="truncate text-xs text-[#657080]">
{{ Number(item.progress || 0) }}% {{ item.message || getStatusLabel(item.status) }}
</p>
</div>
<div class="flex items-center">
<span
class="inline-flex rounded-full px-2 py-1 text-xs font-semibold"
:class="getStatusClass(item.status)"
>
{{ getStatusLabel(item.status) }}
</span>
</div>
</div>
</div>
<div v-else class="px-4 py-10 text-center text-sm text-[#657080]">
게시물 목록을 준비하는 중입니다.
</div>
</div>
<details
v-if="job.status === 'failed' && job.errorDetail"
class="rounded-lg border border-[#ffd5d5] bg-[#fff7f7] p-3 text-xs text-[#8f2d2d]"
>
<summary class="cursor-pointer font-semibold">
실패 원인 보기
</summary>
<pre class="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed">{{ job.errorDetail }}</pre>
</details>
</div>
<footer class="flex shrink-0 items-center justify-between gap-3 border-t border-[#eceff2] px-5 py-4">
<button
class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] bg-white px-3 text-xs font-semibold text-[#15171a] transition hover:bg-[#f4f6f8]"
type="button"
@click="emit('refresh')"
>
새로고침
</button>
<div class="flex items-center gap-2">
<button
v-if="job"
class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md border border-[#ffd5d5] bg-white px-3 text-xs font-semibold text-[#d64545] transition hover:bg-[#fff3f3] disabled:cursor-not-allowed disabled:border-[#e1e5ea] disabled:text-[#a6b0bb]"
type="button"
:disabled="!canDeleteJob"
@click="emit('delete', job)"
>
{{ deleting ? '삭제 중' : '완료 삭제' }}
</button>
<button
class="inline-flex h-9 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-xs font-semibold text-white transition hover:bg-black"
type="button"
@click="emit('close')"
>
닫기
</button>
</div>
</footer>
</div>
</div>
</template>