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:45:52 +09:00
parent 27cf05aba6
commit 04b8a7006a
18 changed files with 497 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
pages/admin/navigation/index.vue Normal file
View File

@@ -0,0 +1,207 @@
<script setup>
definePageMeta({
layout: 'admin'
})
const saving = ref(false)
const errorMessage = ref('')
const toast = ref(null)
let toastTimer = null
const { data: navigationItems } = await useFetch('/admin/api/navigation', {
default: () => []
})
const items = ref(navigationItems.value.map((item) => ({ ...item })))
/**
* 저장 상태 토스트 표시
* @param {'success'|'error'|'info'} type - 토스트 타입
* @param {string} message - 표시 메시지
* @returns {void}
*/
const showToast = (type, message) => {
window.clearTimeout(toastTimer)
toast.value = { type, message }
toastTimer = window.setTimeout(() => {
toast.value = null
}, 3200)
}
/**
* 새 네비게이션 항목 추가
* @param {'primary'|'footer'} location - 표시 위치
* @returns {void}
*/
const addNavigationItem = (location = 'primary') => {
items.value.push({
id: `new-${Date.now()}`,
label: '',
url: '/',
location,
sortOrder: items.value.length * 10 + 10,
isVisible: true
})
}
/**
* 네비게이션 항목 삭제
* @param {number} index - 항목 인덱스
* @returns {void}
*/
const removeNavigationItem = (index) => {
items.value.splice(index, 1)
}
/**
* 네비게이션 항목 목록 저장
* @returns {Promise<void>} 저장 결과
*/
const saveNavigation = async () => {
saving.value = true
errorMessage.value = ''
showToast('info', '네비게이션을 저장하는 중입니다.')
try {
const savedItems = await $fetch('/admin/api/navigation', {
method: 'PUT',
body: {
items: items.value.map((item) => ({
label: item.label,
url: item.url,
location: item.location,
sortOrder: Number(item.sortOrder || 0),
isVisible: Boolean(item.isVisible)
}))
}
})
items.value = savedItems.map((item) => ({ ...item }))
showToast('success', '네비게이션이 저장되었습니다.')
} catch (error) {
errorMessage.value = error?.data?.message || '네비게이션을 저장하지 못했습니다.'
showToast('error', errorMessage.value)
} finally {
saving.value = false
}
}
onBeforeUnmount(() => {
window.clearTimeout(toastTimer)
})
</script>
<template>
<section class="admin-navigation bg-paper p-6">
<div class="admin-navigation__header mb-8 flex items-start justify-between gap-4">
<div>
<p class="admin-navigation__eyebrow text-xs font-semibold uppercase text-muted">
Navigation
</p>
<h1 class="admin-navigation__title mt-2 text-3xl font-semibold">
메뉴 관리
</h1>
</div>
<div class="admin-navigation__header-actions flex flex-wrap gap-2">
<button class="admin-navigation__add rounded border border-line bg-white px-4 py-2 text-sm font-semibold" type="button" @click="addNavigationItem('primary')">
상단 메뉴 추가
</button>
<button class="admin-navigation__add rounded border border-line bg-white px-4 py-2 text-sm font-semibold" type="button" @click="addNavigationItem('footer')">
하단 메뉴 추가
</button>
</div>
</div>
<p v-if="errorMessage" class="admin-navigation__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
{{ errorMessage }}
</p>
<form class="admin-navigation__form grid gap-5" @submit.prevent="saveNavigation">
<div class="admin-navigation__table overflow-hidden border border-line bg-white">
<table class="admin-navigation__table-inner w-full border-collapse text-left text-sm">
<thead class="admin-navigation__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
<tr>
<th class="admin-navigation__cell px-4 py-3">표시</th>
<th class="admin-navigation__cell px-4 py-3">라벨</th>
<th class="admin-navigation__cell px-4 py-3">URL</th>
<th class="admin-navigation__cell px-4 py-3">위치</th>
<th class="admin-navigation__cell px-4 py-3">순서</th>
<th class="admin-navigation__cell px-4 py-3">관리</th>
</tr>
</thead>
<tbody class="admin-navigation__table-body divide-y divide-line">
<tr v-for="(item, index) in items" :key="item.id || index" class="admin-navigation__row">
<td class="admin-navigation__cell px-4 py-3">
<input v-model="item.isVisible" class="admin-navigation__checkbox h-4 w-4" type="checkbox">
</td>
<td class="admin-navigation__cell px-4 py-3">
<input
v-model="item.label"
class="admin-navigation__input w-full rounded border border-line px-3 py-2"
type="text"
required
>
</td>
<td class="admin-navigation__cell px-4 py-3">
<input
v-model="item.url"
class="admin-navigation__input w-full rounded border border-line px-3 py-2"
type="text"
required
pattern="^(\/|https?:\/\/).*"
>
</td>
<td class="admin-navigation__cell px-4 py-3">
<select v-model="item.location" class="admin-navigation__select rounded border border-line px-3 py-2">
<option value="primary">상단</option>
<option value="footer">하단</option>
</select>
</td>
<td class="admin-navigation__cell px-4 py-3">
<input
v-model.number="item.sortOrder"
class="admin-navigation__sort w-24 rounded border border-line px-3 py-2"
type="number"
min="0"
step="1"
>
</td>
<td class="admin-navigation__cell px-4 py-3">
<button class="admin-navigation__remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700" type="button" @click="removeNavigationItem(index)">
삭제
</button>
</td>
</tr>
</tbody>
</table>
</div>
<p v-if="items.length === 0" class="admin-navigation__empty rounded border border-dashed border-line bg-white p-8 text-center text-sm text-muted">
메뉴 항목이 없습니다.
</p>
<div class="admin-navigation__actions flex justify-end border-t border-line pt-5">
<button
class="admin-navigation__submit rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
type="submit"
:disabled="saving"
>
{{ saving ? '저장 중' : '메뉴 저장' }}
</button>
</div>
</form>
<div
v-if="toast"
class="admin-navigation__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"
:class="{
'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
'border-line bg-white text-ink': toast.type === 'info'
}"
role="status"
>
{{ toast.message }}
</div>
</section>
</template>