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-05-02 16:24:57 +09:00
parent 792460b27a
commit d5666fdcc3
18 changed files with 939 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
components/admin/AdminPageForm.vue Normal file
View File

@@ -0,0 +1,278 @@
<script setup>
const props = defineProps({
initialPage: {
type: Object,
default: () => ({})
},
submitLabel: {
type: String,
default: '저장'
},
saving: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['submit'])
const slugTouched = ref(Boolean(props.initialPage.slug))
const blockEditor = ref(null)
const mediaItems = ref([])
const isMediaPickerOpen = ref(false)
const isLoadingMedia = ref(false)
const isUploadingFeaturedImage = ref(false)
const form = reactive({
title: props.initialPage.title || '',
slug: props.initialPage.slug || '',
content: props.initialPage.content || '',
featuredImage: props.initialPage.featuredImage || ''
})
/**
* 문자열을 URL 슬러그로 변환
* @param {string} value - 원본 문자열
* @returns {string} 슬러그
*/
const toSlug = (value) => value
.trim()
.toLowerCase()
.replace(/[^a-z0-9가-힣\s-]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.replace(/^-|-$/g, '')
watch(() => form.title, (title) => {
if (!slugTouched.value) {
form.slug = toSlug(title)
}
})
/**
* 슬러그 직접 입력 상태 표시
* @returns {void}
*/
const touchSlug = () => {
slugTouched.value = true
form.slug = toSlug(form.slug)
}
/**
* 미디어 라이브러리 목록 조회
* @returns {Promise<void>}
*/
const fetchMediaItems = async () => {
isLoadingMedia.value = true
try {
mediaItems.value = await $fetch('/admin/api/media')
} finally {
isLoadingMedia.value = false
}
}
/**
* 대표 이미지 선택 창 열기
* @returns {Promise<void>}
*/
const openMediaPicker = async () => {
isMediaPickerOpen.value = true
await fetchMediaItems()
}
/**
* 대표 이미지 선택 창 닫기
* @returns {void}
*/
const closeMediaPicker = () => {
isMediaPickerOpen.value = false
}
/**
* 대표 이미지 선택
* @param {Object} item - 미디어 항목
* @returns {void}
*/
const selectFeaturedImage = (item) => {
form.featuredImage = item.url
closeMediaPicker()
}
/**
* 대표 이미지 삭제
* @returns {void}
*/
const removeFeaturedImage = () => {
form.featuredImage = ''
}
/**
* 대표 이미지 파일 업로드
* @param {Event} event - 파일 입력 이벤트
* @returns {Promise<void>}
*/
const uploadFeaturedImage = async (event) => {
const files = event.target.files
if (!files?.length) {
return
}
const formData = new FormData()
formData.append('files', files[0])
isUploadingFeaturedImage.value = true
try {
const result = await $fetch('/admin/api/uploads', {
method: 'POST',
body: formData
})
form.featuredImage = result.files?.[0]?.url || ''
} finally {
event.target.value = ''
isUploadingFeaturedImage.value = false
}
}
/**
* 제목 입력 후 본문 에디터로 이동
* @returns {void}
*/
const focusContentEditor = () => {
blockEditor.value?.focusFirstBlock()
}
/**
* 페이지 입력값 제출
* @returns {void}
*/
const submitPage = () => {
emit('submit', {
title: form.title.trim(),
slug: toSlug(form.slug || form.title),
content: form.content,
featuredImage: form.featuredImage.trim() || null
})
}
</script>
<template>
<form class="admin-page-form grid gap-6" @submit.prevent="submitPage">
<div class="admin-page-form__main grid gap-5 lg:grid-cols-[minmax(0,1fr)_18rem]">
<section class="admin-page-form__content grid gap-4">
<input
v-model="form.title"
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"
type="text"
placeholder="페이지 제목"
required
@keydown.enter.prevent="focusContentEditor"
>
<div class="admin-page-form__field grid gap-2 text-sm">
<AdminBlockEditor ref="blockEditor" v-model="form.content" />
</div>
</section>
<aside class="admin-page-form__settings grid content-start gap-4">
<label class="admin-page-form__field grid gap-2 text-sm">
<span class="admin-page-form__label font-medium">슬러그</span>
<input
v-model="form.slug"
class="admin-page-form__input rounded border border-line bg-white px-3 py-2"
type="text"
pattern="[a-z0-9가-힣]+(-[a-z0-9가-힣]+)*"
required
@input="touchSlug"
>
</label>
<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-line 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-line 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-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>
</div>
</div>
</aside>
</div>
<div class="admin-page-form__actions flex justify-end gap-3 border-t border-line pt-5">
<NuxtLink class="admin-page-form__cancel rounded border border-line bg-white px-4 py-2 text-sm font-semibold" to="/admin/pages">
취소
</NuxtLink>
<button
class="admin-page-form__submit rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
type="submit"
:disabled="saving"
>
{{ saving ? '저장 중' : submitLabel }}
</button>
</div>
<div
v-if="isMediaPickerOpen"
class="admin-page-form__media-picker fixed inset-0 z-50 grid place-items-center bg-black/40 px-5 py-8"
role="dialog"
aria-modal="true"
@click.self="closeMediaPicker"
>
<section class="admin-page-form__media-picker-panel max-h-[80vh] w-full max-w-4xl overflow-hidden bg-white text-ink shadow-xl">
<div class="admin-page-form__media-picker-header flex items-center justify-between border-b border-line px-5 py-4">
<h2 class="admin-page-form__media-picker-title text-lg font-semibold">
대표 이미지 선택
</h2>
<button class="admin-page-form__media-picker-close rounded border border-line px-3 py-1.5 text-sm font-semibold" type="button" @click="closeMediaPicker">
닫기
</button>
</div>
<div class="admin-page-form__media-picker-body max-h-[62vh] overflow-y-auto p-5">
<p v-if="isLoadingMedia" class="admin-page-form__media-picker-loading text-sm text-muted">
미디어를 불러오는 중입니다.
</p>
<div v-else-if="mediaItems.length" class="admin-page-form__media-picker-grid grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-6">
<button
v-for="item in mediaItems"
:key="item.url"
class="admin-page-form__media-picker-item overflow-hidden border border-line bg-white text-left"
type="button"
@click="selectFeaturedImage(item)"
>
<img class="admin-page-form__media-picker-image aspect-square w-full bg-surface object-cover" :src="item.url" :alt="item.title">
<span class="admin-page-form__media-picker-name block truncate px-2 py-1.5 text-xs font-semibold text-ink">{{ item.name }}</span>
</button>
</div>
<p v-else class="admin-page-form__media-picker-empty border border-dashed border-line p-8 text-center text-sm text-muted">
선택할 미디어가 없습니다.
</p>
</div>
</section>
</div>
</form>
</template>