관리자 기능과 태그 표시 설정 추가
This commit is contained in:
178
components/admin/AdminPostForm.vue
Normal file
178
components/admin/AdminPostForm.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
initialPost: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
submitLabel: {
|
||||
type: String,
|
||||
default: '저장'
|
||||
},
|
||||
saving: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['submit'])
|
||||
|
||||
const slugTouched = ref(Boolean(props.initialPost.slug))
|
||||
|
||||
const form = reactive({
|
||||
title: props.initialPost.title || '',
|
||||
slug: props.initialPost.slug || '',
|
||||
excerpt: props.initialPost.excerpt || '',
|
||||
content: props.initialPost.content || '',
|
||||
featuredImage: props.initialPost.featuredImage || '',
|
||||
status: props.initialPost.status || 'draft',
|
||||
tagsText: props.initialPost.tags?.join(', ') || ''
|
||||
})
|
||||
|
||||
/**
|
||||
* 문자열을 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)
|
||||
}
|
||||
|
||||
/**
|
||||
* 쉼표 구분 태그 문자열을 슬러그 배열로 변환
|
||||
* @param {string} value - 태그 입력 문자열
|
||||
* @returns {Array<string>} 태그 슬러그 목록
|
||||
*/
|
||||
const parseTags = (value) => [...new Set(value
|
||||
.split(',')
|
||||
.map((tag) => toSlug(tag))
|
||||
.filter(Boolean))]
|
||||
|
||||
/**
|
||||
* 게시물 입력값 제출
|
||||
* @returns {void}
|
||||
*/
|
||||
const submitPost = () => {
|
||||
const publishedAt = form.status === 'published'
|
||||
? props.initialPost.publishedAt || new Date().toISOString()
|
||||
: null
|
||||
|
||||
emit('submit', {
|
||||
title: form.title.trim(),
|
||||
slug: toSlug(form.slug || form.title),
|
||||
excerpt: form.excerpt.trim(),
|
||||
content: form.content,
|
||||
featuredImage: form.featuredImage.trim() || null,
|
||||
status: form.status,
|
||||
publishedAt,
|
||||
tags: parseTags(form.tagsText)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="admin-post-form grid gap-6" @submit.prevent="submitPost">
|
||||
<div class="admin-post-form__main grid gap-5 lg:grid-cols-[minmax(0,1fr)_18rem]">
|
||||
<section class="admin-post-form__content grid gap-4">
|
||||
<label class="admin-post-form__field grid gap-2 text-sm">
|
||||
<span class="admin-post-form__label font-medium">제목</span>
|
||||
<input
|
||||
v-model="form.title"
|
||||
class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
|
||||
type="text"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="admin-post-form__field grid gap-2 text-sm">
|
||||
<span class="admin-post-form__label font-medium">본문</span>
|
||||
<textarea
|
||||
v-model="form.content"
|
||||
class="admin-post-form__textarea min-h-[28rem] rounded border border-line bg-white px-3 py-3 font-mono text-sm leading-6"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<aside class="admin-post-form__settings grid content-start gap-4">
|
||||
<label class="admin-post-form__field grid gap-2 text-sm">
|
||||
<span class="admin-post-form__label font-medium">상태</span>
|
||||
<select v-model="form.status" class="admin-post-form__select rounded border border-line bg-white px-3 py-2">
|
||||
<option value="draft">초안</option>
|
||||
<option value="published">발행</option>
|
||||
<option value="private">비공개</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="admin-post-form__field grid gap-2 text-sm">
|
||||
<span class="admin-post-form__label font-medium">슬러그</span>
|
||||
<input
|
||||
v-model="form.slug"
|
||||
class="admin-post-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>
|
||||
|
||||
<label class="admin-post-form__field grid gap-2 text-sm">
|
||||
<span class="admin-post-form__label font-medium">요약</span>
|
||||
<textarea
|
||||
v-model="form.excerpt"
|
||||
class="admin-post-form__textarea min-h-24 rounded border border-line bg-white px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="admin-post-form__field grid gap-2 text-sm">
|
||||
<span class="admin-post-form__label font-medium">태그</span>
|
||||
<input
|
||||
v-model="form.tagsText"
|
||||
class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
|
||||
type="text"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="admin-post-form__field grid gap-2 text-sm">
|
||||
<span class="admin-post-form__label font-medium">대표 이미지 URL</span>
|
||||
<input
|
||||
v-model="form.featuredImage"
|
||||
class="admin-post-form__input rounded border border-line bg-white px-3 py-2"
|
||||
type="url"
|
||||
>
|
||||
</label>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="admin-post-form__actions flex justify-end gap-3 border-t border-line pt-5">
|
||||
<NuxtLink class="admin-post-form__cancel rounded border border-line bg-white px-4 py-2 text-sm font-semibold" to="/admin/posts">
|
||||
취소
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="admin-post-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>
|
||||
</form>
|
||||
</template>
|
||||
150
components/admin/AdminTagForm.vue
Normal file
150
components/admin/AdminTagForm.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
initialTag: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
submitLabel: {
|
||||
type: String,
|
||||
default: '저장'
|
||||
},
|
||||
saving: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['submit'])
|
||||
|
||||
const slugTouched = ref(Boolean(props.initialTag.slug))
|
||||
|
||||
const form = reactive({
|
||||
name: props.initialTag.name || '',
|
||||
slug: props.initialTag.slug || '',
|
||||
description: props.initialTag.description || '',
|
||||
sortOrder: props.initialTag.sortOrder ?? 0,
|
||||
color: props.initialTag.color || '#15171a'
|
||||
})
|
||||
|
||||
/**
|
||||
* 문자열을 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.name, (name) => {
|
||||
if (!slugTouched.value) {
|
||||
form.slug = toSlug(name)
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 슬러그 직접 입력 상태 표시
|
||||
* @returns {void}
|
||||
*/
|
||||
const touchSlug = () => {
|
||||
slugTouched.value = true
|
||||
form.slug = toSlug(form.slug)
|
||||
}
|
||||
|
||||
/**
|
||||
* 태그 입력값 제출
|
||||
* @returns {void}
|
||||
*/
|
||||
const submitTag = () => {
|
||||
emit('submit', {
|
||||
name: form.name.trim(),
|
||||
slug: toSlug(form.slug || form.name),
|
||||
description: form.description.trim(),
|
||||
sortOrder: Number(form.sortOrder) || 0,
|
||||
color: form.color
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="admin-tag-form grid gap-6" @submit.prevent="submitTag">
|
||||
<section class="admin-tag-form__panel grid gap-5 border border-line bg-white p-5">
|
||||
<label class="admin-tag-form__field grid gap-2 text-sm">
|
||||
<span class="admin-tag-form__label font-medium">이름</span>
|
||||
<input
|
||||
v-model="form.name"
|
||||
class="admin-tag-form__input rounded border border-line bg-white px-3 py-2"
|
||||
type="text"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="admin-tag-form__field grid gap-2 text-sm">
|
||||
<span class="admin-tag-form__label font-medium">슬러그</span>
|
||||
<input
|
||||
v-model="form.slug"
|
||||
class="admin-tag-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>
|
||||
|
||||
<label class="admin-tag-form__field grid gap-2 text-sm">
|
||||
<span class="admin-tag-form__label font-medium">설명</span>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
class="admin-tag-form__textarea min-h-28 rounded border border-line bg-white px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="admin-tag-form__display grid gap-4 md:grid-cols-2">
|
||||
<label class="admin-tag-form__field grid gap-2 text-sm">
|
||||
<span class="admin-tag-form__label font-medium">정렬 순서</span>
|
||||
<input
|
||||
v-model.number="form.sortOrder"
|
||||
class="admin-tag-form__input rounded border border-line bg-white px-3 py-2"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="admin-tag-form__field grid gap-2 text-sm">
|
||||
<span class="admin-tag-form__label font-medium">색상 코드</span>
|
||||
<span class="admin-tag-form__color-row flex items-center gap-3">
|
||||
<input
|
||||
v-model="form.color"
|
||||
class="admin-tag-form__color h-10 w-12 rounded border border-line bg-white p-1"
|
||||
type="color"
|
||||
>
|
||||
<input
|
||||
v-model="form.color"
|
||||
class="admin-tag-form__input min-w-0 flex-1 rounded border border-line bg-white px-3 py-2"
|
||||
type="text"
|
||||
pattern="#[0-9a-fA-F]{6}"
|
||||
required
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="admin-tag-form__actions flex justify-end gap-3">
|
||||
<NuxtLink class="admin-tag-form__cancel rounded border border-line bg-white px-4 py-2 text-sm font-semibold" to="/admin/tags">
|
||||
취소
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="admin-tag-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>
|
||||
</form>
|
||||
</template>
|
||||
@@ -1,3 +1,9 @@
|
||||
<script setup>
|
||||
const { data: tags } = await useFetch('/api/tags', {
|
||||
default: () => []
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="left-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
|
||||
<div class="left-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
|
||||
@@ -36,35 +42,14 @@
|
||||
<span>⌃</span>
|
||||
</div>
|
||||
<div class="left-sidebar__category-grid mt-4 grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/books">
|
||||
<span class="h-4 w-1 rounded-full bg-orange-500" /> Books
|
||||
</NuxtLink>
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/business">
|
||||
<span class="h-4 w-1 rounded-full bg-indigo-500" /> Business
|
||||
</NuxtLink>
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/dev">
|
||||
<span class="h-4 w-1 rounded-full bg-cyan-500" /> Tech
|
||||
</NuxtLink>
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/science">
|
||||
<span class="h-4 w-1 rounded-full bg-teal-400" /> Science
|
||||
</NuxtLink>
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/design">
|
||||
<span class="h-4 w-1 rounded-full bg-fuchsia-500" /> Design
|
||||
</NuxtLink>
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/music">
|
||||
<span class="h-4 w-1 rounded-full bg-pink-500" /> Music
|
||||
</NuxtLink>
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/health">
|
||||
<span class="h-4 w-1 rounded-full bg-green-500" /> Health
|
||||
</NuxtLink>
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/play">
|
||||
<span class="h-4 w-1 rounded-full bg-violet-500" /> Gaming
|
||||
</NuxtLink>
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/travel">
|
||||
<span class="h-4 w-1 rounded-full bg-purple-500" /> Travel
|
||||
</NuxtLink>
|
||||
<NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/diy">
|
||||
<span class="h-4 w-1 rounded-full bg-yellow-400" /> DIY
|
||||
<NuxtLink
|
||||
v-for="tag in tags"
|
||||
:key="tag.id"
|
||||
class="left-sidebar__category flex items-center gap-3"
|
||||
:to="`/tags/${tag.slug}`"
|
||||
>
|
||||
<span class="left-sidebar__category-color h-4 w-1 rounded-full" :style="{ backgroundColor: tag.color }" />
|
||||
<span class="left-sidebar__category-name">{{ tag.name }}</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user