메뉴 관리 개편, 추천 사이트·1뎁스 네비, 우측 Recommended 연동(v1.1.13)

상단 네비는 평면 테이블·드래그로 편집하고 한 단계 하위만 허용한다. 추천 사이트 탭·location recommended·공개 API와 우측 사이드 카드·파비콘 URL 유틸을 추가한다. 문서·배포 마이그레이션 안내·관리자 레이아웃·설정 화면 등 누적 변경을 반영한다.
2026-05-15 14:20:27 +09:00
parent 2768975752
commit ca1e17890b
24 changed files with 1509 additions and 499 deletions
--- a/pages/admin/navigation/index.vue
+++ b/pages/admin/navigation/index.vue
@@ -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"
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -3,12 +3,26 @@ definePageMeta({
  layout: 'admin'
 })

+const router = useRouter()
+
 const saving = ref(false)
 const uploadingLogo = ref(false)
 const errorMessage = ref('')
 const toast = ref(null)
 const logoInputRef = ref(null)
+const mainScrollRef = ref(null)
+const navSearchQuery = ref('')
+const activeSectionId = ref('admin-settings-section-title')
+const scrollSpySuspended = ref(false)
+/** 블로그 제목·설명 카드 편집 모드 여부 */
+const editTitleDesc = ref(false)
+/** 편집 시작 시점의 제목·설명(취소 시 복원용) */
+const titleDescSnapshot = reactive({
+  title: '',
+  description: ''
+})
 let toastTimer = null
+let scrollSpyFrame = null

 const { data: settings } = await useFetch('/admin/api/settings')

@@ -22,6 +36,142 @@ const form = reactive({
  copyrightText: settings.value?.copyrightText || '©2026 sori.studio'
 })

+/**
+ * 설정 화면 좌측 내비 구역 정의
+ * @type {ReadonlyArray<{ heading: string, items: ReadonlyArray<{ id: string, label: string, keywords: string }> }>}
+ */
+const settingsNavGroups = [
+  {
+    heading: '일반',
+    items: [
+      { id: 'admin-settings-section-title', label: '블로그 제목·설명', keywords: 'title description site name' },
+      { id: 'admin-settings-section-timezone', label: '타임존', keywords: 'timezone seoul gmt' },
+      { id: 'admin-settings-section-misc', label: '기타 설정', keywords: 'logo url copyright favicon' }
+    ]
+  },
+  {
+    heading: '사이트',
+    items: [
+      { id: 'admin-settings-section-announcement', label: '어나운스 바', keywords: 'announcement banner notice' }
+    ]
+  },
+  {
+    heading: '콘텐츠·안전',
+    items: [
+      { id: 'admin-settings-section-import-export', label: '게시물 Import/Export', keywords: 'import export backup' },
+      { id: 'admin-settings-section-spam', label: '스팸 필터', keywords: 'spam moderation comments' }
+    ]
+  }
+]
+
+/**
+ * 검색어에 맞춰 내비 그룹을 필터링한다.
+ * @returns {typeof settingsNavGroups} 표시할 그룹 목록
+ */
+const filteredSettingsNavGroups = computed(() => {
+  const q = navSearchQuery.value.trim().toLowerCase()
+  if (!q) {
+    return settingsNavGroups
+  }
+
+  return settingsNavGroups
+    .map((group) => {
+      const items = group.items.filter((item) => {
+        const hay = `${item.label} ${item.keywords}`.toLowerCase()
+        return hay.includes(q)
+      })
+      return { ...group, items }
+    })
+    .filter((group) => group.items.length > 0)
+})
+
+/**
+ * 스크롤 스파이: 본문 스크롤 위치에 맞춰 활성 섹션 id를 갱신한다.
+ * @returns {void}
+ */
+const updateActiveSectionFromScroll = () => {
+  const root = mainScrollRef.value
+  if (!root || scrollSpySuspended.value) {
+    return
+  }
+
+  const marker = root.getBoundingClientRect().top + 56
+  let nextId = settingsNavGroups[0].items[0].id
+  const flatIds = settingsNavGroups.flatMap((g) => g.items.map((i) => i.id))
+
+  for (const id of flatIds) {
+    const el = document.getElementById(id)
+    if (!el) {
+      continue
+    }
+    const top = el.getBoundingClientRect().top
+    if (top <= marker) {
+      nextId = id
+    }
+  }
+
+  activeSectionId.value = nextId
+}
+
+/**
+ * 스크롤 스파이 핸들러 (rAF 디바운스)
+ * @returns {void}
+ */
+const onMainScroll = () => {
+  if (scrollSpyFrame) {
+    cancelAnimationFrame(scrollSpyFrame)
+  }
+  scrollSpyFrame = requestAnimationFrame(() => {
+    scrollSpyFrame = null
+    updateActiveSectionFromScroll()
+  })
+}
+
+/**
+ * 해당 섹션으로 부드럽게 스크롤한다.
+ * @param {string} sectionId - 섹션 요소 id
+ * @returns {void}
+ */
+const scrollToSection = (sectionId) => {
+  const el = document.getElementById(sectionId)
+  if (!el) {
+    return
+  }
+
+  scrollSpySuspended.value = true
+  activeSectionId.value = sectionId
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  window.setTimeout(() => {
+    scrollSpySuspended.value = false
+    updateActiveSectionFromScroll()
+  }, 520)
+}
+
+/**
+ * 모바일 구역 선택 변경
+ * @param {Event} event - change 이벤트
+ * @returns {void}
+ */
+const onMobileNavChange = (event) => {
+  const target = event.target
+  if (!(target instanceof HTMLSelectElement) || !target.value) {
+    return
+  }
+  scrollToSection(target.value)
+}
+
+/**
+ * 설정 화면을 닫고 이전 관리 화면으로 돌아간다.
+ * @returns {Promise<void>}
+ */
+const closeSettings = async () => {
+  if (import.meta.client && window.history.length > 1) {
+    await router.back()
+    return
+  }
+  await navigateTo('/admin')
+}
+
 /**
 * 저장 상태 토스트 표시
 * @param {'success'|'error'|'info'} type - 토스트 타입
@@ -82,10 +232,26 @@ const uploadLogo = async (event) => {
 }

 /**
- * 사이트 설정 저장
- * @returns {Promise<void>} 저장 결과
+ * 사이트 설정 PUT 요청 본문을 구성한다.
+ * @returns {Object} API 본문
 */
-const saveSettings = async () => {
+const buildSiteSettingsPayload = () => ({
+  title: form.title,
+  description: form.description,
+  siteUrl: form.siteUrl,
+  logoText: form.logoText || '井',
+  logoUrl: form.logoUrl,
+  faviconUrl: form.faviconUrl,
+  copyrightText: form.copyrightText
+})
+
+/**
+ * 현재 폼 값으로 사이트 설정을 서버에 저장한다.
+ * @param {{ successToast?: string }} [options] - 성공 토스트 문구
+ * @returns {Promise<boolean>} 성공 여부
+ */
+const persistSiteSettings = async (options = {}) => {
+  const successToast = options.successToast || '사이트 설정이 저장되었습니다.'
  saving.value = true
  errorMessage.value = ''
  showToast('info', '사이트 설정을 저장하는 중입니다.')
@@ -93,174 +259,487 @@ const saveSettings = async () => {
  try {
    const updatedSettings = await $fetch('/admin/api/settings', {
      method: 'PUT',
-      body: {
-        title: form.title,
-        description: form.description,
-        siteUrl: form.siteUrl,
-        logoText: form.logoText || '井',
-        logoUrl: form.logoUrl,
-        faviconUrl: form.faviconUrl,
-        copyrightText: form.copyrightText
-      }
+      body: buildSiteSettingsPayload()
    })
-
    Object.assign(form, updatedSettings)
-    showToast('success', '사이트 설정이 저장되었습니다.')
+    showToast('success', successToast)
+    return true
  } catch (error) {
    errorMessage.value = error?.data?.message || '사이트 설정을 저장하지 못했습니다.'
    showToast('error', errorMessage.value)
+    return false
  } finally {
    saving.value = false
  }
 }

+/**
+ * 기타 설정 영역에서 전체 사이트 설정 저장
+ * @returns {Promise<void>}
+ */
+const saveSettings = async () => {
+  await persistSiteSettings()
+}
+
+/**
+ * 블로그 제목·설명 편집 모드 진입
+ * @returns {void}
+ */
+const beginEditTitleDesc = () => {
+  titleDescSnapshot.title = form.title
+  titleDescSnapshot.description = form.description
+  editTitleDesc.value = true
+}
+
+/**
+ * 블로그 제목·설명 편집 취소
+ * @returns {void}
+ */
+const cancelEditTitleDesc = () => {
+  form.title = titleDescSnapshot.title
+  form.description = titleDescSnapshot.description
+  editTitleDesc.value = false
+}
+
+/**
+ * 블로그 제목·설명만 저장하고 읽기 모드로 돌아간다.
+ * @returns {Promise<void>}
+ */
+const saveTitleDescSection = async () => {
+  const ok = await persistSiteSettings({ successToast: '블로그 제목·설명이 저장되었습니다.' })
+  if (ok) {
+    editTitleDesc.value = false
+  }
+}
+
+/**
+ * Escape 키: 제목·설명 편집 중이면 취소, 아니면 설정 화면 닫기
+ * @param {KeyboardEvent} event - 키보드 이벤트
+ * @returns {void}
+ */
+const onGlobalKeydown = (event) => {
+  if (event.key !== 'Escape') {
+    return
+  }
+  if (editTitleDesc.value) {
+    event.preventDefault()
+    cancelEditTitleDesc()
+    return
+  }
+  closeSettings()
+}
+
+onMounted(() => {
+  if (import.meta.client) {
+    window.addEventListener('keydown', onGlobalKeydown)
+    nextTick(() => {
+      updateActiveSectionFromScroll()
+    })
+  }
+})
+
 onBeforeUnmount(() => {
  window.clearTimeout(toastTimer)
+  if (scrollSpyFrame) {
+    cancelAnimationFrame(scrollSpyFrame)
+  }
+  if (import.meta.client) {
+    window.removeEventListener('keydown', onGlobalKeydown)
+  }
 })
 </script>

 <template>
-  <section class="admin-settings bg-paper p-6">
-    <div class="admin-settings__header mb-8">
-      <p class="admin-settings__eyebrow text-xs font-semibold uppercase text-muted">
-        Settings
-      </p>
-      <h1 class="admin-settings__title mt-2 text-3xl font-semibold">
-        사이트 설정
-      </h1>
+  <div class="admin-settings-screen flex h-full min-h-0 flex-col bg-[#f7f8fa] text-[#15171a]">
+    <div
+      id="admin-settings-done-button-container"
+      class="pointer-events-none fixed right-0 top-2 z-50 flex justify-end bg-transparent p-8 md:top-0 md:px-8"
+    >
+      <button
+        id="admin-settings-done-button"
+        class="pointer-events-auto inline-flex cursor-pointer items-center justify-center rounded text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:text-[#15171a]"
+        type="button"
+        title="닫기 (ESC)"
+        aria-label="설정 닫기"
+        @click="closeSettings"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="pointer-events-none size-5" fill="none" aria-hidden="true">
+          <line x1="0.75" y1="23.249" x2="23.25" y2="0.749" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
+          <line x1="23.25" y1="23.249" x2="0.75" y2="0.749" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
+        </svg>
+      </button>
    </div>

-    <p v-if="errorMessage" class="admin-settings__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-      {{ errorMessage }}
-    </p>
+    <div class="admin-settings-screen__shell flex min-h-0 flex-1 justify-center overflow-hidden px-0 sm:px-4 lg:px-6">
+      <div class="admin-settings-screen__body flex min-h-0 w-full max-w-[1120px] flex-1 flex-col lg:flex-row">
+        <aside class="admin-settings-screen__nav-column w-full shrink-0 border-b border-[#e6e8eb] bg-[#f7f8fa] lg:w-72 lg:max-w-[320px] lg:flex-none lg:border-b-0 lg:border-r lg:border-[#e6e8eb]">
+          <div class="admin-settings-screen__nav-inner max-h-[40vh] overflow-y-auto p-4 lg:max-h-none lg:h-full lg:overflow-y-auto lg:p-5">
+          <label class="admin-settings-screen__search relative mb-4 block">
+            <span class="sr-only">설정 검색</span>
+            <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9aa3ad]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5" />
+              <path d="M16 16l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            </svg>
+            <input
+              v-model="navSearchQuery"
+              class="admin-settings-screen__search-input w-full rounded-md border border-[#dce0e5] bg-white py-2 pr-3 pl-9 text-sm text-[#15171a] placeholder:text-[#9aa3ad] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+              type="search"
+              autocomplete="off"
+              placeholder="설정 검색"
+            >
+          </label>

-    <form class="admin-settings__form grid max-w-4xl gap-6" @submit.prevent="saveSettings">
-      <section class="admin-settings__logo rounded-xl border border-line bg-white p-5">
-        <div class="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
-          <div class="flex items-center gap-4">
-            <div class="admin-settings__logo-preview grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-2xl border border-line bg-paper">
-              <img
-                v-if="form.logoUrl"
-                class="h-full w-full object-cover"
-                :src="form.logoUrl"
-                alt="사이트 로고"
-              >
-              <span v-else class="text-2xl font-semibold text-muted">
-                {{ form.logoText || '井' }}
-              </span>
+          <p
+            v-if="filteredSettingsNavGroups.length === 0"
+            class="admin-settings-screen__nav-empty rounded-md border border-dashed border-[#dce0e5] px-3 py-4 text-center text-xs text-[#657080]"
+          >
+            검색과 일치하는 설정 항목이 없습니다.
+          </p>
+          <nav v-else class="admin-settings-screen__nav grid gap-5 text-sm" aria-label="설정 구역">
+            <template v-for="(group, gi) in filteredSettingsNavGroups" :key="group.heading">
+              <div v-if="gi > 0" class="admin-settings-screen__nav-separator h-px bg-[#dce0e5]" aria-hidden="true" />
+              <div class="admin-settings-screen__nav-group">
+                <p class="admin-settings-screen__nav-heading mb-2 px-2 text-xs font-semibold tracking-wide text-[#9aa3ad] uppercase">
+                  {{ group.heading }}
+                </p>
+                <ul class="admin-settings-screen__nav-list grid gap-0.5">
+                  <li v-for="item in group.items" :key="item.id">
+                    <button
+                      class="admin-settings-screen__nav-item flex w-full items-center gap-2 rounded-md px-2 py-2 text-left font-medium text-[#5d6673] transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
+                      :class="activeSectionId === item.id ? 'bg-[#e9ecef] text-[#15171a]' : ''"
+                      type="button"
+                      @click="scrollToSection(item.id)"
+                    >
+                      <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </nav>
+
+          <label class="admin-settings-screen__nav-jump mt-4 lg:hidden">
+            <span class="mb-1 block text-xs font-medium text-[#657080]">구역 이동</span>
+            <select
+              class="w-full rounded-md border border-[#dce0e5] bg-white px-2 py-2 text-sm"
+              :value="activeSectionId"
+              @change="onMobileNavChange"
+            >
+              <optgroup v-for="group in settingsNavGroups" :key="group.heading" :label="group.heading">
+                <option v-for="item in group.items" :key="item.id" :value="item.id">
+                  {{ item.label }}
+                </option>
+              </optgroup>
+            </select>
+          </label>
+        </div>
+      </aside>
+
+      <main
+        ref="mainScrollRef"
+        class="admin-settings-screen__content min-h-0 min-w-0 flex-1 overflow-y-auto bg-white lg:border-l lg:border-[#e6e8eb]"
+        @scroll.passive="onMainScroll"
+      >
+        <div class="admin-settings-screen__content-inner mx-auto mb-[60vh] w-full max-w-[760px] px-8 pt-16 pb-24 md:px-14 md:pt-10">
+          <p v-if="errorMessage" class="admin-settings-screen__error mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+            {{ errorMessage }}
+          </p>
+
+          <form class="admin-settings-screen__form w-full space-y-8" @submit.prevent="saveSettings">
+            <h2 class="admin-settings-screen__section-heading z-20 -mt-[5px] mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
+              일반 설정
+            </h2>
+          <section
+            id="admin-settings-section-title"
+            data-testid="title-and-description"
+            class="admin-settings-screen__card admin-settings-screen__card--title-desc relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
+          >
+            <div class="flex items-start justify-between gap-4">
+              <div class="min-w-0 flex-1">
+                <h5 class="text-base font-semibold text-[#15171a] md:text-lg">
+                  블로그 제목·설명
+                </h5>
+                <p
+                  v-if="!editTitleDesc"
+                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080] md:block"
+                >
+                  공개 사이트에서 사이트 이름과 소개로 사용되는 값입니다.
+                </p>
+              </div>
+              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
+                <template v-if="!editTitleDesc">
+                  <button
+                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
+                    type="button"
+                    @click="beginEditTitleDesc"
+                  >
+                    편집
+                  </button>
+                </template>
+                <template v-else>
+                  <button
+                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
+                    type="button"
+                    :disabled="saving"
+                    @click="cancelEditTitleDesc"
+                  >
+                    취소
+                  </button>
+                  <button
+                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
+                    type="button"
+                    :disabled="saving"
+                    @click="saveTitleDescSection"
+                  >
+                    {{ saving ? '저장 중' : '저장' }}
+                  </button>
+                </template>
+              </div>
            </div>
-            <div>
-              <h2 class="text-base font-semibold text-ink">로고</h2>
-              <p class="mt-1 max-w-md text-sm leading-6 text-muted">
-                1:1 비율 이미지로 등록합니다. 같은 이미지가 공개 로고와 파비콘으로 함께 사용됩니다.
+
+            <div
+              v-if="!editTitleDesc"
+              class="grid grid-cols-1 gap-x-8 gap-y-6 md:grid-cols-2 md:gap-y-7"
+            >
+              <div class="flex flex-col">
+                <h6 class="block text-sm font-medium tracking-normal text-[#3f4650]">
+                  사이트 이름
+                </h6>
+                <div class="mt-1 flex min-h-[1.5rem] items-center text-[#15171a]">
+                  {{ form.title?.trim() ? form.title : '—' }}
+                </div>
+              </div>
+              <div class="flex flex-col">
+                <h6 class="block text-sm font-medium tracking-normal text-[#3f4650]">
+                  사이트 설명
+                </h6>
+                <div class="mt-1 flex min-h-[1.5rem] items-start whitespace-pre-wrap text-[#15171a]">
+                  {{ form.description?.trim() ? form.description : '—' }}
+                </div>
+              </div>
+            </div>
+
+            <div v-else class="admin-settings-screen__card-body grid gap-5">
+              <label class="admin-settings-screen__field grid gap-2 text-sm">
+                <span class="font-medium text-[#3f4650]">사이트 이름</span>
+                <input
+                  v-model="form.title"
+                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+                  type="text"
+                  required
+                >
+              </label>
+              <label class="admin-settings-screen__field grid gap-2 text-sm">
+                <span class="font-medium text-[#3f4650]">사이트 설명</span>
+                <textarea
+                  v-model="form.description"
+                  class="min-h-28 resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+                  required
+                />
+              </label>
+              <div class="rounded-lg border border-[#eceff2] bg-[#f7f8fa] p-4">
+                <p class="text-xs font-semibold tracking-wide text-[#657080] uppercase">
+                  공개 화면 미리보기
+                </p>
+                <div class="mt-3 flex items-center gap-3">
+                  <div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-lg font-bold text-white">
+                    <img
+                      v-if="form.logoUrl"
+                      class="h-full w-full object-cover"
+                      :src="form.logoUrl"
+                      alt=""
+                    >
+                    <span v-else>{{ form.logoText || '井' }}</span>
+                  </div>
+                  <div class="min-w-0">
+                    <p class="truncate font-semibold text-[#15171a]">
+                      {{ form.title || 'sori.studio' }}
+                    </p>
+                    <p class="truncate text-sm text-[#657080]">
+                      {{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section
+            id="admin-settings-section-timezone"
+            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
+          >
+            <div class="admin-settings-screen__card-head mb-2">
+              <h2 class="text-lg font-semibold text-[#15171a]">
+                타임존
+              </h2>
+              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
+                게시 시각·예약 발행 등에 사용할 표준 시간대입니다. (준비 중)
              </p>
            </div>
-          </div>
-          <button
-            class="admin-settings__logo-button h-10 rounded-md border border-line bg-white px-4 text-sm font-semibold text-[#15171a] transition hover:bg-[#f3f5f7] disabled:opacity-50"
-            type="button"
-            :disabled="uploadingLogo"
-            @click="openLogoFilePicker"
+            <div class="admin-settings-screen__placeholder mt-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]">
+              이후 버전에서 타임존 선택과 현지 시각 미리보기를 제공합니다.
+            </div>
+          </section>
+
+          <section
+            id="admin-settings-section-misc"
+            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
          >
-            {{ uploadingLogo ? '업로드 중' : form.logoUrl ? '로고 변경' : '로고 등록' }}
-          </button>
-          <input
-            ref="logoInputRef"
-            class="hidden"
-            type="file"
-            accept="image/jpeg,image/png,image/webp"
-            :disabled="uploadingLogo"
-            @change="uploadLogo"
+            <div class="admin-settings-screen__card-head mb-6">
+              <h2 class="text-lg font-semibold text-[#15171a]">
+                기타 설정
+              </h2>
+              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
+                로고, 공개 URL, 푸터 저작권 문구를 관리합니다.
+              </p>
+            </div>
+
+            <div class="admin-settings-screen__card-body grid gap-6">
+              <div class="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
+                <div class="flex items-center gap-4">
+                  <div class="grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-2xl border border-[#e6e8eb] bg-[#f7f8fa]">
+                    <img
+                      v-if="form.logoUrl"
+                      class="h-full w-full object-cover"
+                      :src="form.logoUrl"
+                      alt="사이트 로고"
+                    >
+                    <span v-else class="text-2xl font-semibold text-[#9aa3ad]">
+                      {{ form.logoText || '井' }}
+                    </span>
+                  </div>
+                  <div>
+                    <h3 class="text-base font-semibold text-[#15171a]">
+                      로고
+                    </h3>
+                    <p class="mt-1 max-w-md text-sm leading-relaxed text-[#657080]">
+                      1:1 비율 이미지로 등록합니다. 같은 이미지가 공개 로고와 파비콘으로 함께 사용됩니다.
+                    </p>
+                  </div>
+                </div>
+                <button
+                  class="h-10 shrink-0 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
+                  type="button"
+                  :disabled="uploadingLogo"
+                  @click="openLogoFilePicker"
+                >
+                  {{ uploadingLogo ? '업로드 중' : form.logoUrl ? '로고 변경' : '로고 등록' }}
+                </button>
+                <input
+                  ref="logoInputRef"
+                  class="hidden"
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp"
+                  :disabled="uploadingLogo"
+                  @change="uploadLogo"
+                >
+              </div>
+
+              <label class="admin-settings-screen__field grid gap-2 text-sm">
+                <span class="font-medium text-[#3f4650]">사이트 URL</span>
+                <input
+                  v-model="form.siteUrl"
+                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+                  type="url"
+                  required
+                >
+              </label>
+
+              <label class="admin-settings-screen__field grid gap-2 text-sm">
+                <span class="font-medium text-[#3f4650]">저작권 문구</span>
+                <input
+                  v-model="form.copyrightText"
+                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+                  type="text"
+                  required
+                >
+              </label>
+            </div>
+
+            <div class="admin-settings-screen__actions mt-8 flex justify-end border-t border-[#eceff2] pt-6">
+              <button
+                class="rounded-md bg-[#15171a] px-5 py-2.5 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+                type="submit"
+                :disabled="saving"
+              >
+                {{ saving ? '저장 중' : '설정 저장' }}
+              </button>
+            </div>
+          </section>
+
+          <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
+            사이트
+          </h2>
+          <section
+            id="admin-settings-section-announcement"
+            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
          >
+            <div class="admin-settings-screen__card-head mb-2">
+              <h2 class="text-lg font-semibold text-[#15171a]">
+                어나운스 바
+              </h2>
+              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
+                사이트 상단 공지 배너 문구와 링크를 설정합니다. (준비 중)
+              </p>
+            </div>
+            <div class="admin-settings-screen__placeholder mt-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]">
+              이후 버전에서 노출 조건·스타일 옵션과 함께 제공합니다.
+            </div>
+          </section>
+
+          <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
+            콘텐츠·안전
+          </h2>
+          <section
+            id="admin-settings-section-import-export"
+            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
+          >
+            <div class="admin-settings-screen__card-head mb-2">
+              <h2 class="text-lg font-semibold text-[#15171a]">
+                게시물 Import/Export
+              </h2>
+              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
+                마크다운 등 형식으로 게시물을 가져오거나 보냅니다. (준비 중)
+              </p>
+            </div>
+            <div class="admin-settings-screen__placeholder mt-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]">
+              이후 버전에서 일괄 가져오기·보내기 도구를 제공합니다.
+            </div>
+          </section>
+
+          <section
+            id="admin-settings-section-spam"
+            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
+          >
+            <div class="admin-settings-screen__card-head mb-2">
+              <h2 class="text-lg font-semibold text-[#15171a]">
+                스팸 필터
+              </h2>
+              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
+                댓글·가입 등에서 스팸을 줄이기 위한 규칙을 설정합니다. (준비 중)
+              </p>
+            </div>
+            <div class="admin-settings-screen__placeholder mt-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]">
+              이후 버전에서 키워드·링크 제한 등 옵션을 제공합니다.
+            </div>
+          </section>
+        </form>
        </div>
-      </section>
-
-      <label class="admin-settings__field grid gap-2 text-sm">
-        <span class="admin-settings__label font-medium">사이트 이름</span>
-        <input
-          v-model="form.title"
-          class="admin-settings__input rounded border border-line bg-white px-3 py-2"
-          type="text"
-          required
-        >
-      </label>
-
-      <label class="admin-settings__field grid gap-2 text-sm">
-        <span class="admin-settings__label font-medium">사이트 설명</span>
-        <textarea
-          v-model="form.description"
-          class="admin-settings__textarea min-h-28 resize-y rounded border border-line bg-white px-3 py-2"
-          required
-        />
-      </label>
-
-      <label class="admin-settings__field grid gap-2 text-sm">
-        <span class="admin-settings__label font-medium">사이트 URL</span>
-        <input
-          v-model="form.siteUrl"
-          class="admin-settings__input rounded border border-line bg-white px-3 py-2"
-          type="url"
-          required
-        >
-      </label>
-
-      <label class="admin-settings__field grid gap-2 text-sm">
-        <span class="admin-settings__label font-medium">저작권 문구</span>
-        <input
-          v-model="form.copyrightText"
-          class="admin-settings__input rounded border border-line bg-white px-3 py-2"
-          type="text"
-          required
-        >
-      </label>
-
-      <div class="admin-settings__preview rounded-xl border border-line bg-white p-5">
-        <p class="admin-settings__preview-label text-xs font-semibold uppercase text-muted">
-          공개 화면 미리보기
-        </p>
-        <div class="admin-settings__preview-body mt-4 flex items-center gap-3">
-          <div class="admin-settings__preview-logo grid h-12 w-12 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-2xl font-bold text-white">
-            <img
-              v-if="form.logoUrl"
-              class="h-full w-full object-cover"
-              :src="form.logoUrl"
-              alt=""
-            >
-            <span v-else>{{ form.logoText || '井' }}</span>
-          </div>
-          <div>
-            <p class="admin-settings__preview-title font-semibold">
-              {{ form.title || 'sori.studio' }}
-            </p>
-            <p class="admin-settings__preview-description text-sm text-muted">
-              {{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div class="admin-settings__actions flex justify-end border-t border-line pt-5">
-        <button
-          class="admin-settings__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>
+      </main>
+    </div>
+    </div>

    <div
      v-if="toast"
-      class="admin-settings__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"
+      class="admin-settings-screen__toast fixed right-5 top-24 z-[60] rounded-md border px-4 py-3 text-sm font-semibold shadow-lg md:top-28"
      :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'
+        'border-[#e6e8eb] bg-white text-[#15171a]': toast.type === 'info'
      }"
      role="status"
    >
      {{ toast.message }}
    </div>
-  </section>
+  </div>
 </template>