메뉴 관리 개편, 추천 사이트·1뎁스 네비, 우측 Recommended 연동(v1.1.13)
상단 네비는 평면 테이블·드래그로 편집하고 한 단계 하위만 허용한다. 추천 사이트 탭·location recommended·공개 API와 우측 사이드 카드·파비콘 URL 유틸을 추가한다. 문서·배포 마이그레이션 안내·관리자 레이아웃·설정 화면 등 누적 변경을 반영한다.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { buildNavigationEditorTree } from '~/lib/navigation-editor-tree.js'
|
||||
import { buildNavigationEditorTree, flattenNavigationEditorWrappers } from '~/lib/navigation-editor-tree.js'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
@@ -21,12 +21,16 @@ const items = ref(navigationItems.value.map((item) => ({
|
||||
})))
|
||||
|
||||
const navDraggingId = ref('')
|
||||
const navDragParentKey = ref('')
|
||||
const navDragOverId = ref('')
|
||||
/** 'before' | 'into' | 'after' — 행 위·중·아래 드롭 구역 */
|
||||
const navDragOverZone = ref('')
|
||||
|
||||
const footerDraggingId = ref('')
|
||||
const footerDragOverId = ref('')
|
||||
|
||||
const recommendedDraggingId = ref('')
|
||||
const recommendedDragOverId = ref('')
|
||||
|
||||
/**
|
||||
* 네비게이션 항목을 저장 API와 동일한 형태로 직렬화한다.
|
||||
* @param {Array<Object>} list - 항목 목록
|
||||
@@ -61,12 +65,38 @@ const isNavigationDirty = computed(() => serializeNavigationItems(items.value) !
|
||||
|
||||
const primaryTree = computed(() => buildNavigationEditorTree(items.value, 'primary'))
|
||||
|
||||
const primaryRows = computed(() => flattenNavigationEditorWrappers(primaryTree.value))
|
||||
|
||||
/**
|
||||
* 상단 메뉴 평면 행에 표시할 개요 번호(예: 1, 2, 2.1, 2.2, 3)
|
||||
* @returns {string[]}
|
||||
*/
|
||||
const primaryOutlineLabels = computed(() => {
|
||||
const rows = primaryRows.value
|
||||
const labels = []
|
||||
/** @type {number[]} */
|
||||
const counters = []
|
||||
for (const row of rows) {
|
||||
const d = row.depth
|
||||
counters.length = d + 1
|
||||
counters[d] = (counters[d] || 0) + 1
|
||||
labels.push(counters.slice(0, d + 1).join('.'))
|
||||
}
|
||||
return labels
|
||||
})
|
||||
|
||||
const footerItemsSorted = computed(() =>
|
||||
items.value
|
||||
.filter((item) => item.location === 'footer' && !item.parentId)
|
||||
.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
|
||||
)
|
||||
|
||||
const recommendedItemsSorted = computed(() =>
|
||||
items.value
|
||||
.filter((item) => item.location === 'recommended' && !item.parentId)
|
||||
.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
|
||||
)
|
||||
|
||||
/**
|
||||
* 하위 항목 id를 모두 모은 뒤 삭제한다.
|
||||
* @param {string} rootId - 루트 id
|
||||
@@ -89,31 +119,166 @@ const removeItemCascade = (rootId) => {
|
||||
}
|
||||
|
||||
/**
|
||||
* 상단 메뉴 동일 부모 형제 사이에서 순서만 바꾼다.
|
||||
* @param {string|null} parentId - 부모 id
|
||||
* @param {string} sourceId - 이동할 id
|
||||
* @param {string} targetId - 놓인 위치 기준 id
|
||||
* 항목 id로 레코드를 찾는다.
|
||||
* @param {string} id - 항목 id
|
||||
* @returns {Object|undefined}
|
||||
*/
|
||||
const getNavItem = (id) => items.value.find((i) => String(i.id) === String(id))
|
||||
|
||||
/**
|
||||
* nodeId가 ancestorId의 하위(직·간접)인지
|
||||
* @param {string} nodeId - 후손 후보
|
||||
* @param {string} ancestorId - 조상 id
|
||||
* @returns {boolean}
|
||||
*/
|
||||
const isUnderTree = (nodeId, ancestorId) => {
|
||||
let cur = getNavItem(nodeId)
|
||||
while (cur) {
|
||||
const p = cur.parentId ? String(cur.parentId) : ''
|
||||
if (!p) {
|
||||
return false
|
||||
}
|
||||
if (p === String(ancestorId)) {
|
||||
return true
|
||||
}
|
||||
cur = getNavItem(p)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* 동일 부모(primary) 형제들의 sortOrder를 10 간격으로 다시 부여한다.
|
||||
* @param {string|null|undefined} parentId - 부모 id, 루트면 null
|
||||
* @returns {void}
|
||||
*/
|
||||
const reorderPrimarySiblings = (parentId, sourceId, targetId) => {
|
||||
const pid = parentId || null
|
||||
const siblings = items.value
|
||||
.filter((i) => i.location === 'primary' && (pid ? i.parentId === pid : !i.parentId))
|
||||
const normalizeOrdersForParent = (parentId) => {
|
||||
const pid = parentId == null || parentId === '' ? null : String(parentId)
|
||||
const sibs = items.value
|
||||
.filter((i) => {
|
||||
if (i.location !== 'primary') {
|
||||
return false
|
||||
}
|
||||
const p = i.parentId ? String(i.parentId) : ''
|
||||
if (pid === null) {
|
||||
return !p
|
||||
}
|
||||
return p === pid
|
||||
})
|
||||
.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
|
||||
const ids = siblings.map((s) => String(s.id))
|
||||
const si = ids.indexOf(String(sourceId))
|
||||
const ti = ids.indexOf(String(targetId))
|
||||
if (si < 0 || ti < 0 || si === ti) {
|
||||
return
|
||||
}
|
||||
const nextOrder = [...siblings]
|
||||
const [mv] = nextOrder.splice(si, 1)
|
||||
nextOrder.splice(ti, 0, mv)
|
||||
nextOrder.forEach((row, idx) => {
|
||||
sibs.forEach((row, idx) => {
|
||||
row.sortOrder = (idx + 1) * 10
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 상단 메뉴 한 항목을 드롭 구역에 맞춰 이동·부모 변경한다.
|
||||
* @param {string} sourceId - 드래그한 항목 id
|
||||
* @param {string} targetId - 드롭 대상 행 id
|
||||
* @param {'before'|'into'|'after'} mode - 드롭 구역
|
||||
* @returns {boolean} 성공 여부
|
||||
*/
|
||||
const movePrimaryItem = (sourceId, targetId, mode) => {
|
||||
const src = getNavItem(sourceId)
|
||||
const tgt = getNavItem(targetId)
|
||||
if (!src || !tgt || src.location !== 'primary' || tgt.location !== 'primary') {
|
||||
return false
|
||||
}
|
||||
if (String(sourceId) === String(targetId)) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (mode === 'into') {
|
||||
if (tgt.parentId != null && String(tgt.parentId).trim() !== '') {
|
||||
showToast('error', '상단 메뉴는 하위 한 단계까지만 가능합니다. 루트 항목 가운데에만 하위로 넣을 수 있습니다.')
|
||||
return false
|
||||
}
|
||||
const srcHasPrimaryChildren = items.value.some(
|
||||
(i) => i.location === 'primary' && String(i.parentId || '') === String(sourceId)
|
||||
)
|
||||
if (srcHasPrimaryChildren) {
|
||||
showToast('error', '이미 하위 메뉴가 있는 항목은 다른 항목의 하위로 넣을 수 없습니다.')
|
||||
return false
|
||||
}
|
||||
if (isUnderTree(targetId, sourceId)) {
|
||||
showToast('error', '자신의 하위 메뉴 안으로는 옮길 수 없습니다.')
|
||||
return false
|
||||
}
|
||||
const oldPid = src.parentId ? String(src.parentId) : null
|
||||
const tgtId = String(tgt.id)
|
||||
src.parentId = tgtId
|
||||
const children = items.value.filter((i) => i.location === 'primary' && String(i.parentId || '') === tgtId)
|
||||
const maxOrder = Math.max(0, ...children.map((c) => c.sortOrder || 0))
|
||||
src.sortOrder = maxOrder + 10
|
||||
normalizeOrdersForParent(tgtId)
|
||||
if (String(oldPid || '') !== tgtId) {
|
||||
normalizeOrdersForParent(oldPid)
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
if (isUnderTree(targetId, sourceId)) {
|
||||
showToast('error', '하위 메뉴와 같은 줄에 끼울 수 없습니다.')
|
||||
return false
|
||||
}
|
||||
if (String(tgt.parentId || '') === String(sourceId)) {
|
||||
showToast('error', '자신의 바로 아래 항목 앞·뒤로는 옮길 수 없습니다.')
|
||||
return false
|
||||
}
|
||||
|
||||
const newParentId = tgt.parentId ?? null
|
||||
const newParentStr = newParentId ? String(newParentId) : ''
|
||||
if (newParentStr && isUnderTree(newParentStr, sourceId)) {
|
||||
showToast('error', '이동할 수 없는 위치입니다.')
|
||||
return false
|
||||
}
|
||||
|
||||
const oldPid = src.parentId ? String(src.parentId) : null
|
||||
src.parentId = tgt.parentId ?? null
|
||||
|
||||
const pKey = newParentStr
|
||||
const without = items.value
|
||||
.filter((i) => {
|
||||
if (i.location !== 'primary') {
|
||||
return false
|
||||
}
|
||||
const ip = i.parentId ? String(i.parentId) : ''
|
||||
if (!pKey) {
|
||||
return !ip
|
||||
}
|
||||
return ip === pKey
|
||||
})
|
||||
.filter((i) => String(i.id) !== String(sourceId))
|
||||
.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
|
||||
|
||||
const ti = without.findIndex((i) => String(i.id) === String(targetId))
|
||||
if (ti < 0) {
|
||||
return false
|
||||
}
|
||||
const insertIdx = mode === 'before' ? ti : ti + 1
|
||||
const reordered = [...without.slice(0, insertIdx), src, ...without.slice(insertIdx)]
|
||||
reordered.forEach((row, idx) => {
|
||||
row.sortOrder = (idx + 1) * 10
|
||||
})
|
||||
normalizeOrdersForParent(oldPid)
|
||||
if (String(oldPid || '') !== String(newParentStr || '')) {
|
||||
normalizeOrdersForParent(newParentStr || null)
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 입력·버튼 위에서는 행 드래그를 시작하지 않는다.
|
||||
* @param {DragEvent} event - 이벤트
|
||||
* @returns {boolean}
|
||||
*/
|
||||
const shouldBlockNavRowDrag = (event) => {
|
||||
const el = event.target
|
||||
if (!el || typeof el.closest !== 'function') {
|
||||
return false
|
||||
}
|
||||
return Boolean(el.closest('input, button, textarea, select, a'))
|
||||
}
|
||||
|
||||
/**
|
||||
* 하단 메뉴 순서 변경
|
||||
* @param {string} sourceId - 이동할 id
|
||||
@@ -136,22 +301,90 @@ const reorderFooter = (sourceId, targetId) => {
|
||||
}
|
||||
|
||||
/**
|
||||
* 상단 트리 드래그 시작
|
||||
* @param {{ parentKey: string, itemId: string }} payload - 부모 키와 항목 id
|
||||
* 추천 사이트 순서 변경
|
||||
* @param {string} sourceId - 이동할 id
|
||||
* @param {string} targetId - 기준 id
|
||||
* @returns {void}
|
||||
*/
|
||||
const onPrimaryDragStart = ({ parentKey, itemId }) => {
|
||||
navDragParentKey.value = parentKey
|
||||
navDraggingId.value = itemId
|
||||
const reorderRecommended = (sourceId, targetId) => {
|
||||
const list = recommendedItemsSorted.value.map((i) => i)
|
||||
const ids = list.map((s) => String(s.id))
|
||||
const si = ids.indexOf(String(sourceId))
|
||||
const ti = ids.indexOf(String(targetId))
|
||||
if (si < 0 || ti < 0 || si === ti) {
|
||||
return
|
||||
}
|
||||
const [mv] = list.splice(si, 1)
|
||||
list.splice(ti, 0, mv)
|
||||
list.forEach((row, idx) => {
|
||||
row.sortOrder = (idx + 1) * 10
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 상단 트리 드래그 오버
|
||||
* 상단 행 드래그 시작
|
||||
* @param {DragEvent} event - 이벤트
|
||||
* @param {string} itemId - 항목 id
|
||||
* @returns {void}
|
||||
*/
|
||||
const onPrimaryDragOver = (itemId) => {
|
||||
const onPrimaryDragStart = (event, itemId) => {
|
||||
if (shouldBlockNavRowDrag(event)) {
|
||||
event.preventDefault()
|
||||
return
|
||||
}
|
||||
if (!event.dataTransfer) {
|
||||
return
|
||||
}
|
||||
navDraggingId.value = itemId
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
}
|
||||
|
||||
/**
|
||||
* 상단 행 드래그 오버(행 높이 기준 위·중·아래 구역)
|
||||
* @param {DragEvent} event - 이벤트
|
||||
* @param {string} itemId - 행 id
|
||||
* @returns {void}
|
||||
*/
|
||||
const onPrimaryDragOverRow = (event, itemId) => {
|
||||
event.preventDefault()
|
||||
if (!navDraggingId.value) {
|
||||
return
|
||||
}
|
||||
const tr = event.currentTarget
|
||||
if (!(tr instanceof HTMLElement)) {
|
||||
return
|
||||
}
|
||||
const rect = tr.getBoundingClientRect()
|
||||
const y = event.clientY - rect.top
|
||||
const ratio = rect.height > 0 ? y / rect.height : 0.5
|
||||
let zone = 'into'
|
||||
if (ratio < 0.33) {
|
||||
zone = 'before'
|
||||
} else if (ratio > 0.66) {
|
||||
zone = 'after'
|
||||
}
|
||||
const overItem = getNavItem(itemId)
|
||||
if (zone === 'into' && overItem?.parentId != null && String(overItem.parentId).trim() !== '') {
|
||||
zone = ratio < 0.5 ? 'before' : 'after'
|
||||
}
|
||||
navDragOverId.value = itemId
|
||||
navDragOverZone.value = zone
|
||||
}
|
||||
|
||||
/**
|
||||
* 상단 행 드롭
|
||||
* @param {DragEvent} event - 이벤트
|
||||
* @param {string} targetId - 대상 행 id
|
||||
* @returns {void}
|
||||
*/
|
||||
const onPrimaryDropRow = (event, targetId) => {
|
||||
event.preventDefault()
|
||||
if (!navDraggingId.value) {
|
||||
return
|
||||
}
|
||||
const mode = /** @type {'before'|'into'|'after'} */ (navDragOverZone.value || 'into')
|
||||
movePrimaryItem(navDraggingId.value, targetId, mode)
|
||||
onPrimaryDragEnd()
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -160,37 +393,8 @@ const onPrimaryDragOver = (itemId) => {
|
||||
*/
|
||||
const onPrimaryDragEnd = () => {
|
||||
navDraggingId.value = ''
|
||||
navDragParentKey.value = ''
|
||||
navDragOverId.value = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 상단 트리 드롭
|
||||
* @param {{ parentKey: string, targetId: string }} payload - 부모 키와 대상 id
|
||||
* @returns {void}
|
||||
*/
|
||||
const onPrimaryDrop = ({ parentKey, targetId }) => {
|
||||
if (navDragParentKey.value !== parentKey) {
|
||||
showToast('error', '같은 단계의 메뉴 안에서만 순서를 바꿀 수 있습니다.')
|
||||
onPrimaryDragEnd()
|
||||
return
|
||||
}
|
||||
const parentId = parentKey === 'root' ? null : parentKey
|
||||
reorderPrimarySiblings(parentId, navDraggingId.value, targetId)
|
||||
onPrimaryDragEnd()
|
||||
}
|
||||
|
||||
/**
|
||||
* 입력·버튼 위에서는 행 드래그를 시작하지 않는다.
|
||||
* @param {DragEvent} event - 이벤트
|
||||
* @returns {boolean}
|
||||
*/
|
||||
const shouldBlockFooterRowDrag = (event) => {
|
||||
const el = event.target
|
||||
if (!el || typeof el.closest !== 'function') {
|
||||
return false
|
||||
}
|
||||
return Boolean(el.closest('input, button, textarea, select, a'))
|
||||
navDragOverZone.value = ''
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -200,7 +404,7 @@ const shouldBlockFooterRowDrag = (event) => {
|
||||
* @returns {void}
|
||||
*/
|
||||
const onFooterDragStart = (event, id) => {
|
||||
if (shouldBlockFooterRowDrag(event)) {
|
||||
if (shouldBlockNavRowDrag(event)) {
|
||||
event.preventDefault()
|
||||
return
|
||||
}
|
||||
@@ -247,19 +451,131 @@ const onFooterDragEnd = () => {
|
||||
footerDragOverId.value = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 추천 사이트 행 드래그 시작
|
||||
* @param {DragEvent} event - 이벤트
|
||||
* @param {string} id - 항목 id
|
||||
* @returns {void}
|
||||
*/
|
||||
const onRecommendedDragStart = (event, id) => {
|
||||
if (shouldBlockNavRowDrag(event)) {
|
||||
event.preventDefault()
|
||||
return
|
||||
}
|
||||
if (!event.dataTransfer) {
|
||||
return
|
||||
}
|
||||
recommendedDraggingId.value = id
|
||||
event.dataTransfer.effectAllowed = 'move'
|
||||
}
|
||||
|
||||
/**
|
||||
* 추천 사이트 행 드래그 오버
|
||||
* @param {DragEvent} event - 이벤트
|
||||
* @param {string} id - 항목 id
|
||||
* @returns {void}
|
||||
*/
|
||||
const onRecommendedDragOver = (event, id) => {
|
||||
event.preventDefault()
|
||||
recommendedDragOverId.value = id
|
||||
}
|
||||
|
||||
/**
|
||||
* 추천 사이트 행 드롭
|
||||
* @param {DragEvent} event - 이벤트
|
||||
* @param {string} targetId - 대상 id
|
||||
* @returns {void}
|
||||
*/
|
||||
const onRecommendedDrop = (event, targetId) => {
|
||||
event.preventDefault()
|
||||
if (!recommendedDraggingId.value) {
|
||||
return
|
||||
}
|
||||
reorderRecommended(recommendedDraggingId.value, targetId)
|
||||
recommendedDraggingId.value = ''
|
||||
recommendedDragOverId.value = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 추천 사이트 드래그 종료
|
||||
* @returns {void}
|
||||
*/
|
||||
const onRecommendedDragEnd = () => {
|
||||
recommendedDraggingId.value = ''
|
||||
recommendedDragOverId.value = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 추천 사이트 행 하이라이트
|
||||
* @param {string} id - 항목 id
|
||||
* @returns {string}
|
||||
*/
|
||||
const recommendedRowClass = (id) => {
|
||||
const parts = []
|
||||
if (recommendedDragOverId.value === id) {
|
||||
parts.push('bg-[#f9f9f7]')
|
||||
}
|
||||
if (recommendedDraggingId.value === id) {
|
||||
parts.push('opacity-50')
|
||||
}
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
/**
|
||||
* 하단 행 하이라이트(태그 관리와 동일)
|
||||
* @param {string} id - 항목 id
|
||||
* @returns {string}
|
||||
*/
|
||||
const footerRowClass = (id) => {
|
||||
const parts = []
|
||||
if (footerDragOverId.value === id) {
|
||||
return 'bg-[#f9f9f7]'
|
||||
parts.push('bg-[#f9f9f7]')
|
||||
}
|
||||
if (footerDraggingId.value === id) {
|
||||
return 'opacity-50'
|
||||
parts.push('opacity-50')
|
||||
}
|
||||
return ''
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
/**
|
||||
* 드래그 중 대상 행에 표시할 드롭 구역 안내(형제 끼움 vs 하위 편입)
|
||||
* @param {string} rowId - 행 항목 id
|
||||
* @returns {string}
|
||||
*/
|
||||
const primaryDragZoneCaption = (rowId) => {
|
||||
if (!navDraggingId.value || navDragOverId.value !== rowId || !navDragOverZone.value) {
|
||||
return ''
|
||||
}
|
||||
const z = navDragOverZone.value
|
||||
if (z === 'before') {
|
||||
return '앞에 끼움'
|
||||
}
|
||||
if (z === 'after') {
|
||||
return '뒤에 끼움'
|
||||
}
|
||||
return '하위로 넣기'
|
||||
}
|
||||
|
||||
/**
|
||||
* 상단 테이블 행 드래그·드롭 하이라이트(형제 구역=파랑 끝선, 하위=앰버 링)
|
||||
* @param {string} id - 항목 id
|
||||
* @returns {string}
|
||||
*/
|
||||
const primaryRowClass = (id) => {
|
||||
const parts = ['cursor-move', 'relative']
|
||||
if (navDragOverId.value === id) {
|
||||
if (navDragOverZone.value === 'before') {
|
||||
parts.push('border-t-[3px] border-blue-600 bg-blue-50/40')
|
||||
} else if (navDragOverZone.value === 'after') {
|
||||
parts.push('border-b-[3px] border-blue-600 bg-blue-50/40')
|
||||
} else if (navDragOverZone.value === 'into') {
|
||||
parts.push('bg-amber-50/50 ring-2 ring-inset ring-amber-500')
|
||||
}
|
||||
}
|
||||
if (navDraggingId.value === id) {
|
||||
parts.push('opacity-50')
|
||||
}
|
||||
return parts.join(' ')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -281,27 +597,6 @@ const addPrimaryRoot = () => {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 상단 특정 항목의 하위 추가
|
||||
* @param {string} parentId - 부모 id
|
||||
* @returns {void}
|
||||
*/
|
||||
const addPrimaryChild = (parentId) => {
|
||||
const pid = String(parentId)
|
||||
const siblings = items.value.filter((i) => i.location === 'primary' && String(i.parentId || '') === pid)
|
||||
const maxOrder = Math.max(0, ...siblings.map((r) => r.sortOrder || 0))
|
||||
items.value.push({
|
||||
id: crypto.randomUUID(),
|
||||
label: '새 하위 메뉴',
|
||||
url: '#',
|
||||
location: 'primary',
|
||||
parentId: pid,
|
||||
sortOrder: maxOrder + 10,
|
||||
isVisible: true,
|
||||
isFolder: false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 하단 항목 추가
|
||||
* @returns {void}
|
||||
@@ -321,6 +616,25 @@ const addFooterItem = () => {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 추천 사이트 항목 추가
|
||||
* @returns {void}
|
||||
*/
|
||||
const addRecommendedItem = () => {
|
||||
const list = items.value.filter((i) => i.location === 'recommended' && !i.parentId)
|
||||
const maxOrder = Math.max(0, ...list.map((r) => r.sortOrder || 0))
|
||||
items.value.push({
|
||||
id: crypto.randomUUID(),
|
||||
label: '',
|
||||
url: 'https://',
|
||||
location: 'recommended',
|
||||
parentId: null,
|
||||
sortOrder: maxOrder + 10,
|
||||
isVisible: true,
|
||||
isFolder: false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 네비게이션 항목 목록 저장
|
||||
* @returns {Promise<void>} 저장 결과
|
||||
@@ -379,7 +693,7 @@ const saveNavigation = async () => {
|
||||
메뉴 관리
|
||||
</h1>
|
||||
<p class="admin-navigation__lead mt-2 max-w-xl text-sm text-muted">
|
||||
상단·하단을 탭으로 나눕니다. 순서는 <span class="font-semibold text-ink">태그 관리의 메인 태그</span>와 같이 행을 드래그합니다(번호·여백에서 잡고 이동). 입력란 위에서는 드래그가 시작되지 않습니다. 하위 메뉴가 있으면 공개 사이드바에서 접는 그룹으로 보입니다.
|
||||
상단은 <span class="font-semibold text-ink">상단 메뉴 추가</span>로만 항목을 만들고, 행을 드래그해 순서·깊이를 정합니다. 상단 메뉴는 <span class="font-semibold text-ink">루트 아래 한 단계</span>만 허용됩니다(하위 항목 행에는 가운데 드롭이 적용되지 않으며, 이미 하위가 있는 항목은 다른 항목의 하위로 넣을 수 없습니다). 같은 행의 <span class="font-semibold text-ink">위쪽 1/3</span>에 놓으면 앞에 끼우고, <span class="font-semibold text-ink">아래쪽 1/3</span>이면 뒤에 끼우며, <span class="font-semibold text-ink">가운데</span>에 놓으면 <span class="font-semibold text-ink">루트 항목</span>의 하위로만 들어갑니다. 드래그 중에는 행 끝의 <span class="font-semibold text-blue-700">파란 선</span>이 형제 앞·뒤 끼움, <span class="font-semibold text-amber-800">앰버 테두리</span>가 하위 편입을 뜻하며, 개요 열에 짧은 안내가 함께 뜹니다. 왼쪽 개요 번호는 <span class="font-semibold text-ink">1 · 2.1 · 2.2</span>처럼 깊이별로 이어 붙입니다. 입력란 위에서는 드래그가 시작되지 않습니다. 하단·추천 사이트 탭은 평면 목록만 드래그로 순서 변경합니다. 추천 사이트는 공개 홈 우측 사이드 Recommended에 카드 형태로 노출되며, <span class="font-semibold text-ink">https://</span> 주소는 저장 후 브라우저에서 Google 파비콘 프록시 URL로 아이콘을 불러옵니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="admin-navigation__header-actions flex flex-wrap gap-2">
|
||||
@@ -411,6 +725,14 @@ const saveNavigation = async () => {
|
||||
>
|
||||
하단 네비게이션
|
||||
</button>
|
||||
<button
|
||||
class="admin-navigation__tab -mb-px border-b-2 px-4 py-2 text-sm font-semibold transition-colors"
|
||||
:class="activeTab === 'recommended' ? 'border-ink text-ink' : 'border-transparent text-muted hover:text-ink'"
|
||||
type="button"
|
||||
@click="activeTab = 'recommended'"
|
||||
>
|
||||
추천 사이트
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'primary'" class="admin-navigation__panel-primary space-y-4">
|
||||
@@ -428,19 +750,86 @@ const saveNavigation = async () => {
|
||||
상단 메뉴가 없습니다. 위 버튼으로 항목을 추가하세요.
|
||||
</div>
|
||||
|
||||
<AdminNavPrimaryBranch
|
||||
v-else
|
||||
:wraps="primaryTree"
|
||||
parent-key="root"
|
||||
:dragging-id="navDraggingId"
|
||||
:drag-over-id="navDragOverId"
|
||||
@drag-start="onPrimaryDragStart"
|
||||
@drag-over="onPrimaryDragOver"
|
||||
@drag-end="onPrimaryDragEnd"
|
||||
@drop="onPrimaryDrop"
|
||||
@add-child="addPrimaryChild"
|
||||
@remove="removeItemCascade"
|
||||
/>
|
||||
<div v-else class="admin-navigation__primary-table overflow-hidden rounded border border-line bg-white">
|
||||
<table class="admin-navigation__primary-table-inner w-full border-collapse text-left text-sm">
|
||||
<thead class="admin-navigation__primary-head bg-[#f5f5f2] text-xs uppercase text-muted">
|
||||
<tr>
|
||||
<th class="admin-navigation__primary-cell px-3 py-3">
|
||||
개요
|
||||
</th>
|
||||
<th class="admin-navigation__primary-cell px-4 py-3">
|
||||
라벨
|
||||
</th>
|
||||
<th class="admin-navigation__primary-cell px-4 py-3">
|
||||
URL
|
||||
</th>
|
||||
<th class="admin-navigation__primary-cell px-4 py-3">
|
||||
관리
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="admin-navigation__primary-body divide-y divide-line bg-white">
|
||||
<tr
|
||||
v-for="(row, index) in primaryRows"
|
||||
:key="row.item.id"
|
||||
class="admin-navigation__primary-row"
|
||||
:class="primaryRowClass(row.item.id)"
|
||||
draggable="true"
|
||||
@dragstart="onPrimaryDragStart($event, row.item.id)"
|
||||
@dragover="onPrimaryDragOverRow($event, row.item.id)"
|
||||
@drop="onPrimaryDropRow($event, row.item.id)"
|
||||
@dragend="onPrimaryDragEnd"
|
||||
>
|
||||
<td
|
||||
class="admin-navigation__primary-cell w-[5.75rem] min-w-[5.75rem] px-3 py-3 align-middle"
|
||||
>
|
||||
<div class="admin-navigation__primary-outline flex flex-col items-end gap-0.5">
|
||||
<span class="tabular-nums text-sm font-medium text-ink">
|
||||
{{ primaryOutlineLabels[index] }}
|
||||
</span>
|
||||
<span
|
||||
v-if="primaryDragZoneCaption(row.item.id)"
|
||||
class="admin-navigation__primary-drop-hint max-w-[5.5rem] text-right text-[10px] font-semibold leading-tight"
|
||||
:class="navDragOverZone === 'into' ? 'text-amber-800' : 'text-blue-700'"
|
||||
>
|
||||
{{ primaryDragZoneCaption(row.item.id) }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="admin-navigation__primary-cell px-4 py-3 align-middle"
|
||||
:style="{ paddingLeft: `${16 + row.depth * 28}px` }"
|
||||
>
|
||||
<input
|
||||
v-model="row.item.label"
|
||||
class="admin-navigation__primary-label w-full min-w-[8rem] rounded border border-line px-3 py-2 text-sm outline-none focus:border-[#8e9cac]"
|
||||
type="text"
|
||||
placeholder="라벨"
|
||||
required
|
||||
>
|
||||
</td>
|
||||
<td class="admin-navigation__primary-cell px-4 py-3 align-middle">
|
||||
<input
|
||||
v-model="row.item.url"
|
||||
class="admin-navigation__primary-url w-full min-w-[10rem] rounded border border-line px-3 py-2 font-mono text-sm outline-none focus:border-[#8e9cac]"
|
||||
type="text"
|
||||
placeholder="URL (# 또는 /경로)"
|
||||
required
|
||||
>
|
||||
</td>
|
||||
<td class="admin-navigation__primary-cell px-4 py-3 align-middle">
|
||||
<button
|
||||
class="admin-navigation__primary-remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700"
|
||||
type="button"
|
||||
@click="removeItemCascade(row.item.id)"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'footer'" class="admin-navigation__panel-footer space-y-4">
|
||||
@@ -524,6 +913,90 @@ const saveNavigation = async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'recommended'" class="admin-navigation__panel-recommended space-y-4">
|
||||
<p class="admin-navigation__recommended-note max-w-xl text-sm text-muted">
|
||||
공개 홈 우측 사이드바 Recommended 영역에 표시됩니다. <code class="rounded bg-[#f0f1f3] px-1 py-0.5 text-xs">https://</code> 링크는 아이콘에 Google 파비콘 프록시를 사용합니다(내부 경로 <code class="rounded bg-[#f0f1f3] px-1 py-0.5 text-xs">/</code>만 있으면 아이콘은 생략).
|
||||
</p>
|
||||
<div class="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="addRecommendedItem"
|
||||
>
|
||||
추천 사이트 추가
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="recommendedItemsSorted.length === 0" class="admin-navigation__empty rounded border border-dashed border-line bg-white p-8 text-center text-sm text-muted">
|
||||
추천 사이트가 없습니다.
|
||||
</div>
|
||||
|
||||
<div v-else class="admin-navigation__recommended-table overflow-hidden rounded border border-line">
|
||||
<table class="admin-navigation__recommended-table-inner w-full border-collapse text-left text-sm">
|
||||
<thead class="admin-navigation__recommended-head bg-[#f5f5f2] text-xs uppercase text-muted">
|
||||
<tr>
|
||||
<th class="admin-navigation__recommended-cell px-4 py-3">
|
||||
#
|
||||
</th>
|
||||
<th class="admin-navigation__recommended-cell px-4 py-3">
|
||||
제목
|
||||
</th>
|
||||
<th class="admin-navigation__recommended-cell px-4 py-3">
|
||||
URL
|
||||
</th>
|
||||
<th class="admin-navigation__recommended-cell px-4 py-3">
|
||||
관리
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="admin-navigation__recommended-body divide-y divide-line bg-white">
|
||||
<tr
|
||||
v-for="(item, index) in recommendedItemsSorted"
|
||||
:key="item.id"
|
||||
class="admin-navigation__recommended-row cursor-move"
|
||||
:class="recommendedRowClass(item.id)"
|
||||
draggable="true"
|
||||
@dragstart="onRecommendedDragStart($event, item.id)"
|
||||
@dragover="onRecommendedDragOver($event, item.id)"
|
||||
@drop="onRecommendedDrop($event, item.id)"
|
||||
@dragend="onRecommendedDragEnd"
|
||||
>
|
||||
<td class="admin-navigation__recommended-cell px-4 py-4 text-muted">
|
||||
{{ index + 1 }}
|
||||
</td>
|
||||
<td class="admin-navigation__recommended-cell px-4 py-4">
|
||||
<input
|
||||
v-model="item.label"
|
||||
class="w-full min-w-[8rem] rounded border border-line px-3 py-2 text-sm outline-none focus:border-[#8e9cac]"
|
||||
type="text"
|
||||
placeholder="사이트 이름"
|
||||
required
|
||||
>
|
||||
</td>
|
||||
<td class="admin-navigation__recommended-cell px-4 py-4">
|
||||
<input
|
||||
v-model="item.url"
|
||||
class="w-full min-w-[10rem] rounded border border-line px-3 py-2 font-mono text-sm outline-none focus:border-[#8e9cac]"
|
||||
type="text"
|
||||
placeholder="https://…"
|
||||
required
|
||||
>
|
||||
</td>
|
||||
<td class="admin-navigation__recommended-cell px-4 py-4">
|
||||
<button
|
||||
class="rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700"
|
||||
type="button"
|
||||
@click="removeItemCascade(item.id)"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="toast"
|
||||
class="admin-navigation__toast fixed right-5 top-5 z-[100] max-w-sm rounded border px-4 py-3 text-sm font-semibold shadow-lg"
|
||||
|
||||
Reference in New Issue
Block a user