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

페이지 작성 화면을 게시글 작성 화면과 통일 v1.5.2

Browse Source
This commit is contained in:
zenn
2026-05-26 11:18:44 +09:00
parent a25306389b
commit 62ceaa3591
11 changed files with 357 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

419
components/admin/AdminPageForm.vue
View File

@@ -4,25 +4,40 @@ const props = defineProps({
type: Object, type: Object,
default: () => ({}) default: () => ({})
}, },
submitLabel: {
type: String,
default: '저장'
},
saving: { saving: {
type: Boolean, type: Boolean,
default: false default: false
},
deleting: {
type: Boolean,
default: false
},
canViewPage: {
type: Boolean,
default: false
},
publicUrl: {
type: String,
default: ''
},
showDelete: {
type: Boolean,
default: false
} }
}) })
const emit = defineEmits(['submit']) const emit = defineEmits(['submit', 'delete'])
const slugTouched = ref(Boolean(props.initialPage.slug)) const slugTouched = ref(Boolean(props.initialPage.slug))
const blockEditor = ref(null) const blockEditor = ref(null)
const htmlEditor = ref(null) const htmlEditor = ref(null)
const editorMode = ref('write')
const mediaItems = ref([]) const mediaItems = ref([])
const isMediaPickerOpen = ref(false) const isMediaPickerOpen = ref(false)
const isLoadingMedia = ref(false) const isLoadingMedia = ref(false)
const isUploadingFeaturedImage = ref(false) const isUploadingFeaturedImage = ref(false)
const isSettingsOpen = ref(true)
const savedPageSnapshot = ref('')
const form = reactive({ const form = reactive({
title: props.initialPage.title || '', title: props.initialPage.title || '',
@@ -45,6 +60,37 @@ const toSlug = (value) => value
.replace(/-+/g, '-') .replace(/-+/g, '-')
.replace(/^-|-$/g, '') .replace(/^-|-$/g, '')
const pageSlug = computed(() => toSlug(form.slug || form.title))
const viewPageUrl = computed(() => props.publicUrl || (pageSlug.value ? `/pages/${pageSlug.value}` : ''))
const pageUrlHint = computed(() => `/pages/${pageSlug.value || 'page-slug'}/`)
/**
* 페이지 폼의 저장 비교용 문자열을 생성한다.
* @returns {string} 직렬화된 폼 상태
*/
const serializePageForm = () => JSON.stringify({
title: form.title.trim(),
slug: pageSlug.value,
renderMode: form.renderMode,
content: form.content,
featuredImage: form.featuredImage.trim() || null
})
const hasUnsavedPageChanges = computed(() => serializePageForm() !== savedPageSnapshot.value)
const headerStatusText = computed(() => {
if (props.saving) {
return 'Saving...'
}
if (hasUnsavedPageChanges.value) {
return 'Unsaved changes'
}
if (props.initialPage.id) {
return 'Saved'
}
return 'New page'
})
watch(() => form.title, (title) => { watch(() => form.title, (title) => {
if (!slugTouched.value) { if (!slugTouched.value) {
form.slug = toSlug(title) form.slug = toSlug(title)
@@ -60,6 +106,14 @@ const touchSlug = () => {
form.slug = toSlug(form.slug) form.slug = toSlug(form.slug)
} }
/**
* 페이지 설정 패널을 토글한다.
* @returns {void}
*/
const toggleSettingsPanel = () => {
isSettingsOpen.value = !isSettingsOpen.value
}
/** /**
* 미디어 라이브러리 목록 조회 * 미디어 라이브러리 목록 조회
* @returns {Promise<void>} * @returns {Promise<void>}
@@ -139,9 +193,12 @@ const uploadFeaturedImage = async (event) => {
/** /**
* 제목 입력 후 본문 에디터로 이동 * 제목 입력 후 본문 에디터로 이동
* @param {KeyboardEvent} event - 키보드 이벤트
* @returns {void} * @returns {void}
*/ */
const focusContentEditor = () => { const focusContentEditor = (event) => {
event?.preventDefault()
if (form.renderMode === 'html_document') { if (form.renderMode === 'html_document') {
htmlEditor.value?.focus() htmlEditor.value?.focus()
return return
@@ -159,45 +216,140 @@ const setRenderMode = (mode) => {
form.renderMode = mode form.renderMode = mode
} }
/**
* 페이지 입력값을 생성한다.
* @returns {Object} 페이지 입력값
*/
const createPayload = () => ({
title: form.title.trim(),
slug: pageSlug.value,
renderMode: form.renderMode,
content: form.content,
featuredImage: form.featuredImage.trim() || null
})
/** /**
* 페이지 입력값 제출 * 페이지 입력값 제출
* @returns {void} * @returns {void}
*/ */
const submitPage = () => { const submitPage = () => {
emit('submit', { emit('submit', createPayload())
title: form.title.trim(),
slug: toSlug(form.slug || form.title),
renderMode: form.renderMode,
content: form.content,
featuredImage: form.featuredImage.trim() || null
})
} }
/**
* 현재 폼 상태를 저장 완료 기준점으로 표시한다.
* @returns {void}
*/
const markSaved = () => {
savedPageSnapshot.value = serializePageForm()
}
onMounted(markSaved)
defineExpose({
markSaved
})
</script> </script>
<template> <template>
<form class="admin-page-form grid gap-6" @submit.prevent="submitPage"> <form class="admin-page-form flex h-screen min-h-screen overflow-hidden bg-white" @submit.prevent="submitPage">
<div class="admin-page-form__main grid gap-5 lg:grid-cols-[minmax(0,1fr)_18rem]"> <div class="admin-page-form__workspace flex min-w-0 flex-1 flex-col bg-white">
<section class="admin-page-form__content grid gap-4"> <header class="admin-page-form__toolbar flex h-[56px] shrink-0 items-center bg-white px-8">
<input <div class="admin-page-form__toolbar-inner flex h-[34px] min-w-0 flex-1 items-center justify-between">
v-model="form.title" <div class="admin-page-form__toolbar-left flex h-full min-w-0 flex-1 items-center gap-3">
class="admin-page-form__title-input border-0 bg-transparent px-0 py-2 text-5xl font-semibold leading-tight text-ink outline-none placeholder:text-soft" <NuxtLink class="admin-page-form__toolbar-link inline-flex shrink-0 items-center gap-2 rounded px-2 py-1.5 text-sm font-medium text-[#394047] transition-colors hover:bg-[#f1f3f4] hover:text-black" to="/admin/pages">
type="text" <span class="admin-page-form__toolbar-back text-lg leading-none" aria-hidden="true">&lt;</span>
placeholder="페이지 제목" <span>Pages</span>
required </NuxtLink>
@keydown.enter.prevent="focusContentEditor" <NuxtLink
> v-if="canViewPage && viewPageUrl"
class="admin-page-form__toolbar-status-link inline-flex items-center gap-1 truncate rounded px-2 py-1.5 text-sm font-medium text-[#8E9CAC] transition-colors hover:bg-[#f1f3f4] hover:text-[#394047]"
:to="viewPageUrl"
target="_blank"
rel="noopener noreferrer"
>
<span>View page</span>
<span aria-hidden="true">↗</span>
</NuxtLink>
<span v-else class="admin-page-form__toolbar-status truncate rounded px-2 py-1.5 text-sm text-[#8E9CAC]">
{{ headerStatusText }}
</span>
</div>
<div v-if="form.renderMode === 'markdown'" class="admin-page-form__field grid gap-2 text-sm"> <div class="admin-page-form__toolbar-actions flex h-full shrink-0 items-center gap-2">
<AdminBlockEditor ref="blockEditor" v-model="form.content" /> <div
v-show="form.renderMode === 'markdown'"
id="admin-page-form-mode-toggle-host"
class="admin-page-form__mode-toggle-host flex shrink-0 items-center"
/>
<button
class="admin-page-form__toolbar-save rounded px-3 py-1.5 text-sm font-bold transition-colors disabled:cursor-default disabled:text-[#8E9CAC] disabled:hover:bg-transparent enabled:text-[#394047] enabled:hover:bg-[#f1f3f4]"
type="submit"
:disabled="saving || !form.title.trim() || !hasUnsavedPageChanges"
>
{{ saving ? 'Saving...' : 'Save' }}
</button>
<button
class="admin-page-form__settings-toggle grid size-[34px] place-items-center rounded text-[#394047] transition-colors hover:bg-[#f1f3f4] hover:text-black"
type="button"
:aria-pressed="isSettingsOpen"
aria-label="페이지 설정 패널 전환"
@click="toggleSettingsPanel"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2.16699C14.3242 2.16699 14.4998 2.39365 14.5 2.57129V13.4287C14.5 13.606 14.3242 13.834 14 13.834H11.5V2.16699H14ZM2 2.16699H10.5V13.834H2C1.6756 13.834 1.5 13.6064 1.5 13.4287V2.57129C1.50024 2.39409 1.67607 2.16699 2 2.16699Z" stroke="currentColor" />
</svg>
</button>
</div>
</div> </div>
<label v-else class="admin-page-form__field admin-page-form__html-field grid gap-2 text-sm"> </header>
<span class="admin-page-form__label font-medium">HTML 문서</span>
<textarea <main class="admin-page-form__editor-scroll min-h-0 flex-1 overflow-y-auto">
ref="htmlEditor" <section class="admin-page-form__content mx-auto w-full max-w-[804px] px-8 pb-16 pt-16">
v-model="form.content" <div class="admin-page-form__feature-block mb-9">
class="admin-page-form__html-editor min-h-[68vh] resize-y rounded border border-line bg-[#15171a] px-4 py-4 font-mono text-sm leading-6 text-white outline-none placeholder:text-white/35 focus:border-[#8e9cac]" <figure v-if="form.featuredImage" class="admin-page-form__featured-editor group relative overflow-hidden bg-white">
spellcheck="false" <img class="admin-page-form__featured-editor-image aspect-[16/9] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
placeholder="<!doctype html> <figcaption class="admin-page-form__featured-editor-actions pointer-events-none absolute inset-0 flex items-end justify-end gap-2 bg-gradient-to-t from-black/40 via-black/5 to-transparent p-4 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100">
<button class="admin-page-form__featured-change rounded bg-white/95 px-3 py-1.5 text-xs font-semibold text-[#15171a] shadow-sm transition-colors hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" type="button" @click="openMediaPicker">
변경
</button>
<button class="admin-page-form__featured-remove rounded bg-[#fff1f2]/95 px-3 py-1.5 text-xs font-semibold text-red-700 shadow-sm transition-colors hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" type="button" @click="removeFeaturedImage">
삭제
</button>
</figcaption>
</figure>
<div v-else class="admin-page-form__feature-empty flex h-6 items-start">
<button class="admin-page-form__feature-add inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-[#8e9cac] transition-colors hover:bg-[#eff1f2] hover:text-[#394047]" type="button" @click="openMediaPicker">
<span aria-hidden="true">+</span>
<span>대표 이미지 추가</span>
</button>
</div>
</div>
<input
v-model="form.title"
class="admin-page-form__title-input mb-2 w-full border-0 bg-transparent px-0 py-0 text-3xl font-bold leading-tight text-ink outline-none placeholder:text-[#8e9cac]"
type="text"
placeholder="제목"
@keydown.enter="focusContentEditor"
>
<div v-if="form.renderMode === 'markdown'" class="admin-page-form__field admin-page-form__content-editor text-sm">
<AdminMarkdownEditor
ref="blockEditor"
v-model="form.content"
v-model:editor-mode="editorMode"
mode-toggle-teleport-to="#admin-page-form-mode-toggle-host"
/>
</div>
<label v-else class="admin-page-form__field admin-page-form__html-field grid gap-2 text-sm">
<span class="admin-page-form__label sr-only">HTML 문서</span>
<textarea
ref="htmlEditor"
v-model="form.content"
class="admin-page-form__html-editor min-h-[68vh] w-full resize-y rounded border border-[#e3e6e8] bg-white px-4 py-4 font-mono text-sm leading-6 text-[#15171a] outline-none placeholder:text-[#8e9cac] focus:border-[#8e9cac]"
spellcheck="false"
placeholder="<!doctype html>
<html lang=&quot;ko&quot;> <html lang=&quot;ko&quot;>
<head> <head>
<meta charset=&quot;utf-8&quot;> <meta charset=&quot;utf-8&quot;>
@@ -209,95 +361,130 @@ const submitPage = () => {
<body> <body>
</body> </body>
</html>" </html>"
/> />
<span class="admin-page-form__hint text-xs text-muted"> </label>
이 모드는 공개 URL에서 저장한 HTML을 그대로 응답합니다. </section>
</span> </main>
</label> </div>
</section>
<aside class="admin-page-form__settings grid content-start gap-4"> <aside
<div class="admin-page-form__field grid gap-2 text-sm"> class="admin-page-form__settings flex h-screen shrink-0 flex-col overflow-hidden border-[#e3e6e8] bg-white transition-[width,border-color] duration-300 ease-out"
<span class="admin-page-form__label font-medium">페이지 형식</span> :class="isSettingsOpen ? 'w-[420px] border-l' : 'w-0 border-l-0'"
<div class="admin-page-form__mode-control grid grid-cols-2 rounded border border-line bg-white p-1"> :aria-hidden="!isSettingsOpen"
<button >
class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition" <div class="admin-page-form__settings-inner relative flex h-full w-[420px] flex-col">
:class="form.renderMode === 'markdown' ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-surface hover:text-ink'" <div class="admin-page-form__settings-header flex h-[56px] shrink-0 items-center justify-between px-6">
type="button" <h2 class="admin-page-form__settings-title text-xl font-bold text-black">
@click="setRenderMode('markdown')" 페이지 설정
> </h2>
기본 <button class="admin-page-form__settings-close grid size-8 place-items-center rounded text-neutral-900 transition-colors hover:bg-[#eff1f2] hover:text-neutral-500" type="button" aria-label="페이지 설정 닫기" @click="toggleSettingsPanel">
</button> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16" width="16" class="h-[1.1rem] w-[1.1rem]" aria-hidden="true">
<button <path stroke-linecap="round" stroke-width="0.4" fill="currentColor" stroke="#000000" stroke-linejoin="round" d="M.44,21.44a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0l9.26-9.26a.25.25,0,0,1,.36,0l9.26,9.26a1.5,1.5,0,0,0,2.12,0,1.49,1.49,0,0,0,0-2.12L14.3,12.18a.25.25,0,0,1,0-.36l9.26-9.26A1.5,1.5,0,0,0,21.44.44L12.18,9.7a.25.25,0,0,1-.36,0L2.56.44A1.5,1.5,0,0,0,.44,2.56L9.7,11.82a.25.25,0,0,1,0,.36Z" />
class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition" </svg>
:class="form.renderMode === 'html_document' ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-surface hover:text-ink'" </button>
type="button"
@click="setRenderMode('html_document')"
>
HTML
</button>
</div>
</div> </div>
<label class="admin-page-form__field grid gap-2 text-sm"> <div class="admin-page-form__settings-body grid flex-1 content-start gap-4 overflow-y-auto px-6 pb-8 pt-8">
<span class="admin-page-form__label font-medium">슬러그</span> <div class="admin-page-form__field grid gap-1 text-sm">
<input <div class="admin-page-form__page-url-header flex h-[22px] items-center justify-between">
v-model="form.slug" <span class="admin-page-form__label font-bold text-[#15171a]">Page URL</span>
class="admin-page-form__input rounded border border-line bg-white px-3 py-2" <NuxtLink
type="text" v-if="canViewPage && viewPageUrl"
pattern="[a-z0-9가-힣]+(-[a-z0-9가-힣]+)*" class="admin-page-form__view-page inline-flex items-center gap-1 rounded px-3 py-1.5 text-xs text-[#8e9cac] transition-colors hover:bg-[#eff1f2] hover:text-[#394047]"
required :to="viewPageUrl"
@input="touchSlug" target="_blank"
> >
</label> <span>View Page</span>
<span aria-hidden="true">↗</span>
<div class="admin-page-form__field grid gap-2 text-sm"> </NuxtLink>
<span class="admin-page-form__label font-medium">대표 이미지</span> </div>
<figure v-if="form.featuredImage" class="admin-page-form__featured overflow-hidden rounded border border-line bg-white"> <label class="admin-page-form__page-url-input flex h-[38px] items-center gap-2 rounded border border-[#e3e6e8] bg-[#eff1f2] px-3 py-1 transition-colors hover:border-[#c8ced3] focus-within:border-[#8e9cac]">
<img class="admin-page-form__featured-image aspect-[4/3] w-full bg-surface object-cover" :src="form.featuredImage" alt=""> <span class="admin-page-form__page-url-icon text-sm text-[#394047]" aria-hidden="true">⌘</span>
<figcaption class="admin-page-form__featured-actions grid gap-2 p-3"> <input
<p class="admin-page-form__featured-url break-all text-xs text-muted"> v-model="form.slug"
{{ form.featuredImage }} class="admin-page-form__input min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-black outline-none"
</p> type="text"
<div class="admin-page-form__featured-buttons flex flex-wrap gap-2"> pattern="[a-z0-9가-힣]+(-[a-z0-9가-힣]+)*"
<button class="admin-page-form__featured-change rounded border border-line px-3 py-1.5 text-xs font-semibold" type="button" @click="openMediaPicker"> required
변경 @input="touchSlug"
</button> >
<label class="admin-page-form__featured-reupload cursor-pointer rounded border border-line px-3 py-1.5 text-xs font-semibold">
새 업로드
<input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
</label>
<button class="admin-page-form__featured-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeFeaturedImage">
삭제
</button>
</div>
</figcaption>
</figure>
<div v-else class="admin-page-form__featured-empty grid gap-2 rounded border border-dashed border-line bg-white p-4">
<button class="admin-page-form__featured-select rounded border border-line px-3 py-2 text-sm font-semibold" type="button" @click="openMediaPicker">
미디어에서 선택
</button>
<label class="admin-page-form__featured-upload cursor-pointer rounded bg-[#15171a] px-3 py-2 text-center text-sm font-semibold text-white">
{{ isUploadingFeaturedImage ? '업로드 중' : '새 이미지 업로드' }}
<input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
</label> </label>
<p class="admin-page-form__page-url-hint text-xs text-[#7c8b9a]">
{{ pageUrlHint }}
</p>
</div>
<div class="admin-page-form__field grid gap-2 text-sm">
<span class="admin-page-form__label font-medium">페이지 형식</span>
<div class="admin-page-form__mode-control grid grid-cols-2 rounded border border-[#e3e6e8] bg-[#eff1f2] p-1">
<button
class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
:class="form.renderMode === 'markdown' ? 'bg-[#15171a] text-white' : 'text-[#7c8b9a] hover:bg-white hover:text-[#15171a]'"
type="button"
@click="setRenderMode('markdown')"
>
기본
</button>
<button
class="admin-page-form__mode-button rounded px-3 py-2 text-sm font-semibold transition"
:class="form.renderMode === 'html_document' ? 'bg-[#15171a] text-white' : 'text-[#7c8b9a] hover:bg-white hover:text-[#15171a]'"
type="button"
@click="setRenderMode('html_document')"
>
HTML
</button>
</div>
</div>
<div class="admin-page-form__field grid gap-2 text-sm">
<span class="admin-page-form__label font-medium">대표 이미지</span>
<figure v-if="form.featuredImage" class="admin-page-form__featured overflow-hidden rounded border border-[#e3e6e8] bg-white">
<img class="admin-page-form__featured-image aspect-[4/3] w-full bg-surface object-cover" :src="form.featuredImage" alt="">
<figcaption class="admin-page-form__featured-actions grid gap-2 p-3">
<p class="admin-page-form__featured-url break-all text-xs text-muted">
{{ form.featuredImage }}
</p>
<div class="admin-page-form__featured-buttons flex flex-wrap gap-2">
<button class="admin-page-form__featured-change rounded border border-[#e3e6e8] px-3 py-1.5 text-xs font-semibold" type="button" @click="openMediaPicker">
변경
</button>
<label class="admin-page-form__featured-reupload cursor-pointer rounded border border-[#e3e6e8] px-3 py-1.5 text-xs font-semibold">
새 업로드
<input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
</label>
<button class="admin-page-form__featured-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeFeaturedImage">
삭제
</button>
</div>
</figcaption>
</figure>
<div v-else class="admin-page-form__featured-empty grid gap-2 rounded border border-dashed border-[#e3e6e8] bg-white p-4">
<button class="admin-page-form__featured-select rounded border border-[#e3e6e8] px-3 py-2 text-sm font-semibold" type="button" @click="openMediaPicker">
미디어에서 선택
</button>
<label class="admin-page-form__featured-upload cursor-pointer rounded bg-[#15171a] px-3 py-2 text-center text-sm font-semibold text-white">
{{ isUploadingFeaturedImage ? '업로드 중' : '새 이미지 업로드' }}
<input class="sr-only" type="file" accept="image/*" @change="uploadFeaturedImage">
</label>
</div>
</div> </div>
</div> </div>
</aside>
</div>
<div class="admin-page-form__actions flex justify-end gap-3 border-t border-line pt-5"> <div v-if="showDelete" class="admin-page-form__settings-footer border-t border-[#e3e6e8] p-6">
<NuxtLink class="admin-page-form__cancel rounded border border-line bg-white px-4 py-2 text-sm font-semibold" to="/admin/pages"> <button
취소 class="admin-page-form__delete-button flex h-[44px] w-full items-center justify-center gap-2 rounded border border-[#d7dce0] bg-white text-sm font-bold text-[#394047] transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-700 disabled:opacity-50"
</NuxtLink> type="button"
<button :disabled="deleting"
class="admin-page-form__submit rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50" @click="emit('delete')"
type="submit" >
:disabled="saving" <svg class="size-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
> <path d="M4 7h16M10 11v6M14 11v6M6 7l1 14h10l1-14M9 7V4h6v3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" />
{{ saving ? '저장 중' : submitLabel }} </svg>
</button> <span>{{ deleting ? 'Deleting page' : 'Delete page' }}</span>
</div> </button>
</div>
</div>
</aside>
<div <div
v-if="isMediaPickerOpen" v-if="isMediaPickerOpen"

4
docs/changelog.md
View File

@@ -1,5 +1,9 @@
# 업데이트 요약 # 업데이트 요약
## v1.5.2
- 페이지 작성/수정 화면을 게시글 작성 화면처럼 전체 화면 에디터, 상단 저장 툴바, 오른쪽 설정 패널 구조로 변경했다.
## v1.5.1 ## v1.5.1
- 고정 페이지에서 전체 HTML 문서를 붙여넣어 `/pages/:slug`에서 단일 랜딩 페이지처럼 보여줄 수 있는 HTML 문서 모드를 추가했다. - 고정 페이지에서 전체 HTML 문서를 붙여넣어 `/pages/:slug`에서 단일 랜딩 페이지처럼 보여줄 수 있는 HTML 문서 모드를 추가했다.

4
docs/history.md
View File

@@ -1,5 +1,9 @@
# 의사결정 이력 # 의사결정 이력
## 2026-05-26 v1.5.2 — 페이지 작성 화면을 게시글 작성 화면과 통일
고정 페이지는 랜딩 페이지 작성 용도로 확장되므로 일반 관리자 폼보다 게시글 작성과 같은 집중형 전체 화면 에디터가 더 적합하다. 게시글과 페이지의 작성 화면이 다르면 저장 위치, 설정 위치, 본문 입력 방식이 매번 달라져 운영 피로가 커진다. 따라서 페이지 작성/수정도 상단 툴바와 오른쪽 접이식 설정 패널을 쓰고, 페이지 형식 선택과 URL·대표 이미지·삭제 액션은 설정 패널로 모은다. 기본 콘텐츠 입력도 게시글과 같은 Markdown-first 에디터를 사용해 작성 경험을 통일한다.
## 2026-05-26 v1.5.1 — 고정 페이지에 원문 HTML 문서 모드 추가 ## 2026-05-26 v1.5.1 — 고정 페이지에 원문 HTML 문서 모드 추가
고정 페이지는 아직 운영에서 본격 사용 전이므로 구조를 크게 바꿀 수 있다. 랜딩 페이지처럼 한 주소에서 단일 `index.html` 문서를 보여주는 목적에는 Nuxt 컴포넌트 안의 `v-html`보다 서버에서 `text/html`로 원문을 응답하는 방식이 맞다. 따라서 페이지에는 `render_mode`를 두고, 기본 Markdown 모드는 기존 경로를 유지하되 `html_document` 모드만 서버 미들웨어가 `/pages/:slug` 요청을 가로채 저장된 HTML을 그대로 반환한다. 이 모드는 관리자만 저장하는 신뢰 콘텐츠를 전제로 한다. 고정 페이지는 아직 운영에서 본격 사용 전이므로 구조를 크게 바꿀 수 있다. 랜딩 페이지처럼 한 주소에서 단일 `index.html` 문서를 보여주는 목적에는 Nuxt 컴포넌트 안의 `v-html`보다 서버에서 `text/html`로 원문을 응답하는 방식이 맞다. 따라서 페이지에는 `render_mode`를 두고, 기본 Markdown 모드는 기존 경로를 유지하되 `html_document` 모드만 서버 미들웨어가 `/pages/:slug` 요청을 가로채 저장된 HTML을 그대로 반환한다. 이 모드는 관리자만 저장하는 신뢰 콘텐츠를 전제로 한다.

6
docs/map.md
View File

@@ -80,7 +80,7 @@
| components/admin/AdminSettingsNavIcon.vue | 사이트 설정 좌측 내비 항목 아이콘(`iconId`별 SVG·미구현 placeholder) | | components/admin/AdminSettingsNavIcon.vue | 사이트 설정 좌측 내비 항목 아이콘(`iconId`별 SVG·미구현 placeholder) |
| components/admin/AdminMediaVideoThumbnail.vue | 관리자 미디어 목록 비디오 항목의 초반 프레임 캔버스 썸네일 | | components/admin/AdminMediaVideoThumbnail.vue | 관리자 미디어 목록 비디오 항목의 초반 프레임 캔버스 썸네일 |
| components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost형 툴바(영문 상태·Publish/Update/Unpublish/Unschedule, 서버 반영 상태 기준 분기), 초안만 서버 디바운스 자동 저장·신규 임시 슬러그·발행·예약 글은 Update로만 반영, 발행 모달(중앙 배치), 좌우 설정 패널, 미리보기 emit·미저장 이탈 가드, 추천 글 토글, 태그 색상 배지 다중 입력·메인 태그 드롭다운·부분 검색 추천 | | components/admin/AdminPostForm.vue | 관리자 글 작성/수정 폼, Ghost형 툴바(영문 상태·Publish/Update/Unpublish/Unschedule, 서버 반영 상태 기준 분기), 초안만 서버 디바운스 자동 저장·신규 임시 슬러그·발행·예약 글은 Update로만 반영, 발행 모달(중앙 배치), 좌우 설정 패널, 미리보기 emit·미저장 이탈 가드, 추천 글 토글, 태그 색상 배지 다중 입력·메인 태그 드롭다운·부분 검색 추천 |
| components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, Markdown/HTML 문서 모드 선택, HTML 붙여넣기 textarea, 대표 이미지 선택 | | components/admin/AdminPageForm.vue | 관리자 페이지 작성/수정 폼, 게시글 작성과 같은 전체 화면 에디터·상단 저장 툴바·접이식 오른쪽 설정 패널, Markdown/HTML 문서 모드 선택, HTML 붙여넣기 textarea, 대표 이미지 선택 |
| components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령·미디어 모달(이미지·갤러리·비디오·오디오·파일), 커서 블록 컨텍스트·`block-panel` emit, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 블록 패널 바깥 클릭 닫기·미디어 모달 중 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원 | | components/admin/AdminMarkdownEditor.vue | 관리자 글 Markdown-first 에디터, 라이브·소스 모드 `/` 슬래시 명령·미디어 모달(이미지·갤러리·비디오·오디오·파일), 커서 블록 컨텍스트·`block-panel` emit, 라이브 이미지 설정 패널·이미지↔갤러리 드래그 변환(`merge-images-to-gallery`·`insert-image-to-gallery`·`extract-gallery-image`), 블록 패널 바깥 클릭 닫기·미디어 모달 중 유지, 소스 모드 wrap 라인 번호 보정·라이브↔소스 위치 복원 |
| components/admin/AdminEditorBlockPanel.vue | 게시물 설정 사이드바 오버레이 블록 설정(이미지·갤러리·임베드), 갤러리 선택 이미지 강조 | | components/admin/AdminEditorBlockPanel.vue | 게시물 설정 사이드바 오버레이 블록 설정(이미지·갤러리·임베드), 갤러리 선택 이미지 강조 |
| components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 콜아웃 Emoji on/off·이모지 프리셋·배경 프리셋 선택(우측 고정 설정 패널), 갤러리 복수 미디어 선택·이미지 수별 열 배치·삽입 위치 표시 드래그 순서 변경, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 placeholder 표시 | | components/admin/AdminBlockEditor.vue | 관리자 글 블록형 에디터, 이미지/갤러리/콜아웃/토글/임베드 블록, 콜아웃 Emoji on/off·이모지 프리셋·배경 프리셋 선택(우측 고정 설정 패널), 갤러리 복수 미디어 선택·이미지 수별 열 배치·삽입 위치 표시 드래그 순서 변경, 한글 조합 입력 처리, Shift+Enter 줄바꿈, 코드 블록 단축 변환, AFFiNE 참고 세로 막대형 블록 핸들 선택/삭제/드래그 이동과 삽입선 표시, 하단 빈 입력 블록 유지, 본문 placeholder 표시 |
@@ -130,8 +130,8 @@
| pages/admin/posts/[id].vue | 글 수정, `AdminPostForm`, 저장·초안 디바운스 자동 저장(`autoSaving`)·이탈 직전 플러시·삭제·토스트 | | pages/admin/posts/[id].vue | 글 수정, `AdminPostForm`, 저장·초안 디바운스 자동 저장(`autoSaving`)·이탈 직전 플러시·삭제·토스트 |
| pages/admin/posts/preview.vue | 글 미리보기(공개 상세와 동일한 중앙 컬럼·수평 패딩) | | pages/admin/posts/preview.vue | 글 미리보기(공개 상세와 동일한 중앙 컬럼·수평 패딩) |
| pages/admin/pages/index.vue | 페이지 목록, 화면 기준 행 more vert 메뉴(수정·삭제) | | pages/admin/pages/index.vue | 페이지 목록, 화면 기준 행 more vert 메뉴(수정·삭제) |
| pages/admin/pages/new.vue | 페이지 작성, Markdown/HTML 문서 모드 저장, 저장 토스트 | | pages/admin/pages/new.vue | 전체 화면 페이지 작성, Markdown/HTML 문서 모드 저장, 저장 토스트 |
| pages/admin/pages/[id].vue | 페이지 수정, Markdown/HTML 문서 모드 저장, 저장/삭제 토스트 | | pages/admin/pages/[id].vue | 전체 화면 페이지 수정, Markdown/HTML 문서 모드 저장, 설정 패널 삭제, 저장/삭제 토스트 |
| pages/admin/media/index.vue | 미디어 관리, **미디어 라이브러리/썸네일** 탭, 이미지·비디오·오디오·파일 종류 필터, 미사용 필터, 비디오 프레임 썸네일, 폴더 트리 more vert(폴더 삭제), 검색·드래그·상세 모달 등 | | pages/admin/media/index.vue | 미디어 관리, **미디어 라이브러리/썸네일** 탭, 이미지·비디오·오디오·파일 종류 필터, 미사용 필터, 비디오 프레임 썸네일, 폴더 트리 more vert(폴더 삭제), 검색·드래그·상세 모달 등 |
| pages/admin/navigation/index.vue | 메뉴 관리: 상단/하단/추천 탭, 행 more vert(메뉴 항목 삭제), 드래그 정렬, `useAdminToast` | | pages/admin/navigation/index.vue | 메뉴 관리: 상단/하단/추천 탭, 행 more vert(메뉴 항목 삭제), 드래그 정렬, `useAdminToast` |
| components/admin/AdminRowMoreMenu.vue | 관리자 행 more vert 메뉴(트리거·화면 기준 팝오버) | | components/admin/AdminRowMoreMenu.vue | 관리자 행 more vert 메뉴(트리거·화면 기준 팝오버) |

4
docs/spec.md
View File

@@ -636,8 +636,10 @@ components/content/
### 관리자 페이지 편집 ### 관리자 페이지 편집
- 고정 페이지 작성/수정 화면은 기본 모드에서 게시물과 같은 블록형 에디터를 사용한다. - 고정 페이지 작성/수정 화면은 게시글 작성 화면과 같은 전체 화면 에디터 구조를 사용한다. 상단 툴바에 목록 이동, 저장 상태, 저장 버튼, 설정 패널 토글을 두고 오른쪽 설정 패널은 접고 펼칠 수 있다.
- 고정 페이지 작성/수정 화면의 기본 모드는 게시글 작성과 같은 Markdown-first 에디터를 사용한다.
- 고정 페이지 HTML 문서 모드는 전체 HTML 붙여넣기용 textarea를 사용하고, 공개 URL에서 Nuxt 레이아웃 없이 원문 HTML로 응답한다. - 고정 페이지 HTML 문서 모드는 전체 HTML 붙여넣기용 textarea를 사용하고, 공개 URL에서 Nuxt 레이아웃 없이 원문 HTML로 응답한다.
- 페이지 형식, Page URL, 대표 이미지, 삭제 액션은 오른쪽 설정 패널에서 관리한다.
- 고정 페이지는 제목, 슬러그, 렌더링 방식, 본문, 대표 이미지를 저장한다. - 고정 페이지는 제목, 슬러그, 렌더링 방식, 본문, 대표 이미지를 저장한다.
- 고정 페이지는 게시물 목록과 태그 목록에 노출하지 않는다. - 고정 페이지는 게시물 목록과 태그 목록에 노출하지 않는다.
- 고정 페이지 공개 보기 경로는 `/pages/:slug`를 사용한다. - 고정 페이지 공개 보기 경로는 `/pages/:slug`를 사용한다.

7
docs/update.md
View File

@@ -1,5 +1,12 @@
# 업데이트 이력 # 업데이트 이력
## v1.5.2
- 관리자 페이지 작성/수정: 게시글 작성 화면과 같은 전체 화면 에디터, 상단 저장 툴바, 접이식 오른쪽 설정 패널 구조로 변경.
- 관리자 페이지 작성/수정: 페이지 형식 선택, Page URL, 대표 이미지, 삭제 액션을 오른쪽 설정 패널로 이동.
- 관리자 페이지 작성/수정: 기본 모드 본문 에디터를 게시글과 같은 Markdown-first 에디터로 통일.
- 관리자 레이아웃: 페이지 작성/수정 경로도 전체 화면 에디터 모드로 처리하도록 수정.
## v1.5.1 ## v1.5.1
- 고정 페이지: 기본 Markdown 모드와 원문 HTML 문서 모드 선택 추가. - 고정 페이지: 기본 Markdown 모드와 원문 HTML 문서 모드 선택 추가.

14
layouts/admin.vue
View File

@@ -13,6 +13,8 @@ const publicBlogBaseUrl = computed(() => {
const isPostEditorRoute = computed(() => route.path === '/admin/posts/new' const isPostEditorRoute = computed(() => route.path === '/admin/posts/new'
|| (route.path.startsWith('/admin/posts/') && route.path !== '/admin/posts/preview')) || (route.path.startsWith('/admin/posts/') && route.path !== '/admin/posts/preview'))
const isPageEditorRoute = computed(() => route.path === '/admin/pages/new'
|| (route.path.startsWith('/admin/pages/') && route.path !== '/admin/pages'))
const editorDocumentClass = 'admin-post-editor-document' const editorDocumentClass = 'admin-post-editor-document'
const settingsDocumentClass = 'admin-settings-document' const settingsDocumentClass = 'admin-settings-document'
@@ -90,7 +92,7 @@ const syncAdminShellDocumentClass = () => {
return return
} }
const editorOn = isPostEditorRoute.value const editorOn = isPostEditorRoute.value || isPageEditorRoute.value
const settingsOn = isAdminSettingsRoute.value && !editorOn const settingsOn = isAdminSettingsRoute.value && !editorOn
document.documentElement.classList.toggle(editorDocumentClass, editorOn) document.documentElement.classList.toggle(editorDocumentClass, editorOn)
document.body.classList.toggle(editorDocumentClass, editorOn) document.body.classList.toggle(editorDocumentClass, editorOn)
@@ -133,12 +135,12 @@ const logoutAdmin = async () => {
<div <div
class="admin-layout bg-[#f7f8fa] text-ink" class="admin-layout bg-[#f7f8fa] text-ink"
:class="[ :class="[
(isPostEditorRoute || isAdminSettingsRoute) ? 'h-screen overflow-hidden bg-white' : 'min-h-screen', (isPostEditorRoute || isPageEditorRoute || isAdminSettingsRoute) ? 'h-screen overflow-hidden bg-white' : 'min-h-screen',
{ 'admin-layout--light-controls': !isPostEditorRoute } { 'admin-layout--light-controls': !isPostEditorRoute && !isPageEditorRoute }
]" ]"
> >
<aside <aside
v-if="!isPostEditorRoute && !isAdminSettingsRoute" v-if="!isPostEditorRoute && !isPageEditorRoute && !isAdminSettingsRoute"
class="admin-layout__sidebar fixed inset-y-0 left-0 hidden w-80 flex-col border-r border-[#e6e8eb] bg-[#f7f8fa] px-5 py-6 text-[#15171a] lg:flex" class="admin-layout__sidebar fixed inset-y-0 left-0 hidden w-80 flex-col border-r border-[#e6e8eb] bg-[#f7f8fa] px-5 py-6 text-[#15171a] lg:flex"
> >
<NuxtLink class="admin-layout__brand flex items-center gap-3 px-2 text-[0.95rem] font-semibold tracking-[-0.01em]" to="/admin"> <NuxtLink class="admin-layout__brand flex items-center gap-3 px-2 text-[0.95rem] font-semibold tracking-[-0.01em]" to="/admin">
@@ -309,10 +311,10 @@ const logoutAdmin = async () => {
<main <main
class="admin-layout__main" class="admin-layout__main"
:class="[ :class="[
isPostEditorRoute || isAdminSettingsRoute isPostEditorRoute || isPageEditorRoute || isAdminSettingsRoute
? 'h-screen overflow-hidden bg-white' ? 'h-screen overflow-hidden bg-white'
: 'min-h-screen bg-paper px-8 py-8 xl:px-12 xl:py-10', : 'min-h-screen bg-paper px-8 py-8 xl:px-12 xl:py-10',
{ 'lg:ml-80': !isPostEditorRoute && !isAdminSettingsRoute } { 'lg:ml-80': !isPostEditorRoute && !isPageEditorRoute && !isAdminSettingsRoute }
]" ]"
> >
<slot /> <slot />

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "sori.studio", "name": "sori.studio",
"version": "1.5.1", "version": "1.5.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "sori.studio", "name": "sori.studio",
"version": "1.5.1", "version": "1.5.2",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@nuxtjs/tailwindcss": "^6.14.0", "@nuxtjs/tailwindcss": "^6.14.0",

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "sori.studio", "name": "sori.studio",
"version": "1.5.1", "version": "1.5.2",
"private": true, "private": true,
"type": "module", "type": "module",
"imports": { "imports": {

47
pages/admin/pages/[id].vue
View File

@@ -8,6 +8,7 @@ const id = computed(() => String(route.params.id || ''))
const saving = ref(false) const saving = ref(false)
const deleting = ref(false) const deleting = ref(false)
const errorMessage = ref('') const errorMessage = ref('')
const pageForm = ref(null)
const toast = ref(null) const toast = ref(null)
let toastTimer = null let toastTimer = null
@@ -20,6 +21,8 @@ if (!page.value) {
}) })
} }
const publicPageUrl = computed(() => page.value?.slug ? `/pages/${page.value.slug}` : '')
/** /**
* 저장 상태 토스트 표시 * 저장 상태 토스트 표시
* @param {'success'|'error'|'info'} type - 토스트 타입 * @param {'success'|'error'|'info'} type - 토스트 타입
@@ -70,6 +73,7 @@ const savePage = async (payload) => {
}) })
page.value = updatedPage page.value = updatedPage
pageForm.value?.markSaved()
showToast('success', '변경 내용이 저장되었습니다.') showToast('success', '변경 내용이 저장되었습니다.')
} catch (error) { } catch (error) {
errorMessage.value = error?.data?.message || '페이지를 저장하지 못했습니다.' errorMessage.value = error?.data?.message || '페이지를 저장하지 못했습니다.'
@@ -113,38 +117,21 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
<section class="admin-page-edit bg-paper p-6"> <section class="admin-page-edit relative bg-white">
<div class="admin-page-edit__header mb-8 flex items-start justify-between gap-4"> <p v-if="errorMessage" class="admin-page-edit__error mx-6 mt-6 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
<div>
<p class="admin-page-edit__eyebrow text-xs font-semibold uppercase text-muted">
Pages
</p>
<h1 class="admin-page-edit__title mt-2 text-3xl font-semibold">
페이지 수정
</h1>
</div>
<div class="admin-page-edit__actions flex gap-2">
<NuxtLink
class="admin-page-edit__view rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
:to="`/pages/${page.slug}`"
target="_blank"
>
보기
</NuxtLink>
<button
class="admin-page-edit__delete rounded border border-red-200 bg-white px-4 py-2 text-sm font-semibold text-red-700 disabled:opacity-50"
type="button"
:disabled="deleting"
@click="deletePage"
>
{{ deleting ? '삭제 중' : '삭제' }}
</button>
</div>
</div>
<p v-if="errorMessage" class="admin-page-edit__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
{{ errorMessage }} {{ errorMessage }}
</p> </p>
<AdminPageForm :initial-page="page" submit-label="변경 저장" :saving="saving" @submit="savePage" /> <AdminPageForm
ref="pageForm"
:initial-page="page"
:saving="saving"
:can-view-page="Boolean(page?.slug)"
:public-url="publicPageUrl"
:deleting="deleting"
show-delete
@submit="savePage"
@delete="deletePage"
/>
<div <div
v-if="toast" v-if="toast"
class="admin-page-edit__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg" class="admin-page-edit__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"

16
pages/admin/pages/new.vue
View File

@@ -5,6 +5,7 @@ definePageMeta({
const saving = ref(false) const saving = ref(false)
const errorMessage = ref('') const errorMessage = ref('')
const pageForm = ref(null)
const toast = ref(null) const toast = ref(null)
let toastTimer = null let toastTimer = null
@@ -38,6 +39,7 @@ const savePage = async (payload) => {
body: payload body: payload
}) })
pageForm.value?.markSaved()
sessionStorage.setItem('SORI_ADMIN_PAGE_TOAST', JSON.stringify({ sessionStorage.setItem('SORI_ADMIN_PAGE_TOAST', JSON.stringify({
type: 'success', type: 'success',
message: '페이지가 저장되었습니다.' message: '페이지가 저장되었습니다.'
@@ -57,19 +59,11 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
<section class="admin-page-editor bg-paper p-6"> <section class="admin-page-editor bg-white">
<div class="admin-page-editor__header mb-8"> <p v-if="errorMessage" class="admin-page-editor__error mx-6 mt-6 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
<p class="admin-page-editor__eyebrow text-xs font-semibold uppercase text-muted">
Pages
</p>
<h1 class="admin-page-editor__title mt-2 text-3xl font-semibold">
새 페이지 작성
</h1>
</div>
<p v-if="errorMessage" class="admin-page-editor__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
{{ errorMessage }} {{ errorMessage }}
</p> </p>
<AdminPageForm submit-label="페이지 저장" :saving="saving" @submit="savePage" /> <AdminPageForm ref="pageForm" :saving="saving" @submit="savePage" />
<div <div
v-if="toast" v-if="toast"
class="admin-page-editor__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg" class="admin-page-editor__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"