59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: 'post'
|
|
})
|
|
|
|
const previewPost = ref(null)
|
|
const previewError = ref('')
|
|
|
|
/**
|
|
* 미리보기 저장 값을 읽어 온다
|
|
* @returns {void}
|
|
*/
|
|
const loadPreviewPost = () => {
|
|
const rawPreview = localStorage.getItem('SORI_ADMIN_POST_PREVIEW')
|
|
|
|
if (!rawPreview) {
|
|
previewError.value = '미리보기 데이터가 없습니다.'
|
|
return
|
|
}
|
|
|
|
try {
|
|
previewPost.value = JSON.parse(rawPreview)
|
|
} catch {
|
|
previewError.value = '미리보기 데이터를 읽지 못했습니다.'
|
|
}
|
|
}
|
|
|
|
onMounted(loadPreviewPost)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="admin-post-preview">
|
|
<div class="admin-post-preview__banner mb-5 rounded border border-line bg-white px-4 py-3 text-sm font-semibold text-ink">
|
|
관리자 미리보기
|
|
</div>
|
|
|
|
<p v-if="previewError" class="admin-post-preview__error rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 sm:mx-auto sm:max-w-[720px] sm:px-5">
|
|
{{ previewError }}
|
|
</p>
|
|
|
|
<section v-else-if="previewPost" class="admin-post-preview__body">
|
|
<div class="mx-auto max-w-[720px] px-4 sm:px-5">
|
|
<ContentRenderer>
|
|
<ProseHeaderCard>
|
|
<p class="post-detail__eyebrow text-sm uppercase text-white/70">
|
|
PREVIEW
|
|
</p>
|
|
<h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
|
|
{{ previewPost.title || '제목 없음' }}
|
|
</h1>
|
|
</ProseHeaderCard>
|
|
|
|
<ContentMarkdownRenderer class="post-detail__content" :content="previewPost.content || ''" />
|
|
</ContentRenderer>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|