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

상단 네비는 평면 테이블·드래그로 편집하고 한 단계 하위만 허용한다.
추천 사이트 탭·location recommended·공개 API와 우측 사이드 카드·파비콘 URL 유틸을 추가한다.
문서·배포 마이그레이션 안내·관리자 레이아웃·설정 화면 등 누적 변경을 반영한다.

components/admin/AdminNavPrimaryBranch.vue

@@ -1,214 +0,0 @@
-<script setup>
-import AdminNavPrimaryBranch from './AdminNavPrimaryBranch.vue'
-
-const props = defineProps({
-  /** buildNavigationEditorTree 결과 */
-  wraps: {
-    type: Array,
-    required: true
-  },
-  /** 들여쓰기 단계 */
-  depth: {
-    type: Number,
-    default: 0
-  },
-  /** 루트면 `'root'`, 아니면 부모 항목 id */
-  parentKey: {
-    type: String,
-    default: 'root'
-  },
-  /** 드래그 중인 항목 id */
-  draggingId: {
-    type: String,
-    default: ''
-  },
-  /** 드롭 대상 위에 올린 항목 id */
-  dragOverId: {
-    type: String,
-    default: ''
-  }
-})
-
-const emit = defineEmits([
-  'drag-start',
-  'drag-over',
-  'drag-end',
-  'drop',
-  'add-child',
-  'remove'
-])
-
-/**
- * 입력·버튼 위에서는 행 드래그를 시작하지 않는다.
- * @param {DragEvent} event - 이벤트
- * @returns {boolean} true면 드래그를 막는다
- */
-const shouldBlockRowDrag = (event) => {
-  const el = event.target
-  if (!el || typeof el.closest !== 'function') {
-    return false
-  }
-  return Boolean(el.closest('input, button, textarea, select, a'))
-}
-
-/**
- * 드래그 시작
- * @param {DragEvent} event - 이벤트
- * @param {string} itemId - 항목 id
- * @returns {void}
- */
-const onDragStart = (event, itemId) => {
-  if (shouldBlockRowDrag(event)) {
-    event.preventDefault()
-    return
-  }
-  if (!event.dataTransfer) {
-    return
-  }
-  emit('drag-start', { parentKey: props.parentKey, itemId })
-  event.dataTransfer.effectAllowed = 'move'
-}
-
-/**
- * 드래그 오버
- * @param {DragEvent} event - 이벤트
- * @param {string} itemId - 항목 id
- * @returns {void}
- */
-const onDragOver = (event, itemId) => {
-  event.preventDefault()
-  emit('drag-over', itemId)
-}
-
-/**
- * 드롭
- * @param {DragEvent} event - 이벤트
- * @param {string} itemId - 대상 id
- * @returns {void}
- */
-const onDrop = (event, itemId) => {
-  event.preventDefault()
-  emit('drop', { parentKey: props.parentKey, targetId: itemId })
-}
-
-/**
- * 드래그 종료
- * @returns {void}
- */
-const onDragEnd = () => {
-  emit('drag-end')
-}
-
-/**
- * 행 하이라이트 클래스(태그 관리 메인 태그 테이블과 동일 톤)
- * @param {string} itemId - 항목 id
- * @returns {string}
- */
-const rowStateClass = (itemId) => {
-  const id = String(itemId)
-  if (props.dragOverId === id) {
-    return 'bg-[#f9f9f7]'
-  }
-  if (props.draggingId === id) {
-    return 'opacity-50'
-  }
-  return ''
-}
-</script>
-
-<template>
-  <div class="admin-nav-primary-branch" :class="depth ? 'mt-2 border-l border-line pl-3' : ''">
-    <div class="admin-nav-primary-branch__shell overflow-hidden rounded border border-line">
-      <table class="admin-nav-primary-branch__table w-full border-collapse text-left text-sm">
-        <thead v-if="depth === 0" class="admin-nav-primary-branch__head bg-[#f5f5f2] text-xs uppercase text-muted">
-          <tr>
-            <th class="admin-nav-primary-branch__cell px-4 py-3">
-              #
-            </th>
-            <th class="admin-nav-primary-branch__cell px-4 py-3">
-              라벨
-            </th>
-            <th class="admin-nav-primary-branch__cell px-4 py-3">
-              URL
-            </th>
-            <th class="admin-nav-primary-branch__cell px-4 py-3">
-              관리
-            </th>
-          </tr>
-        </thead>
-        <tbody class="admin-nav-primary-branch__body divide-y divide-line bg-white">
-          <template v-for="(wrap, index) in wraps" :key="wrap.item.id">
-            <tr
-              class="admin-nav-primary-branch__row cursor-move"
-              :class="rowStateClass(wrap.item.id)"
-              draggable="true"
-              @dragstart="onDragStart($event, wrap.item.id)"
-              @dragover="onDragOver($event, wrap.item.id)"
-              @drop="onDrop($event, wrap.item.id)"
-              @dragend="onDragEnd"
-            >
-              <td class="admin-nav-primary-branch__cell px-4 py-3 align-middle text-muted">
-                {{ index + 1 }}
-              </td>
-              <td class="admin-nav-primary-branch__cell px-4 py-3 align-middle">
-                <input
-                  v-model="wrap.item.label"
-                  class="admin-nav-primary-branch__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-nav-primary-branch__cell px-4 py-3 align-middle">
-                <input
-                  v-model="wrap.item.url"
-                  class="admin-nav-primary-branch__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-nav-primary-branch__cell px-4 py-3 align-middle">
-                <div class="admin-nav-primary-branch__actions flex flex-wrap gap-2">
-                  <button
-                    class="admin-nav-primary-branch__add-child rounded border border-line px-3 py-1.5 text-xs font-semibold"
-                    type="button"
-                    @click="emit('add-child', wrap.item.id)"
-                  >
-                    하위
-                  </button>
-                  <button
-                    class="admin-nav-primary-branch__remove rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700"
-                    type="button"
-                    @click="emit('remove', wrap.item.id)"
-                  >
-                    삭제
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr v-if="wrap.children.length" class="admin-nav-primary-branch__nest bg-white">
-              <td class="p-0" colspan="4">
-                <div class="admin-nav-primary-branch__nest-inner border-t border-line bg-[#fafaf8] px-2 py-3">
-                  <AdminNavPrimaryBranch
-                    :wraps="wrap.children"
-                    :depth="depth + 1"
-                    :parent-key="String(wrap.item.id)"
-                    :dragging-id="draggingId"
-                    :drag-over-id="dragOverId"
-                    @drag-start="emit('drag-start', $event)"
-                    @drag-over="emit('drag-over', $event)"
-                    @drag-end="emit('drag-end')"
-                    @drop="emit('drop', $event)"
-                    @add-child="emit('add-child', $event)"
-                    @remove="emit('remove', $event)"
-                  />
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>

components/site/LeftSidebar.vue

@@ -15,7 +15,8 @@ const { data: tags } = await useFetch('/api/tags', {
 const { data: navigation } = await useFetch('/api/navigation', {
   default: () => ({
     primary: [],
-    footer: []
+    footer: [],
+    recommended: []
   })
 })
 

components/site/RightSidebar.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { getExternalFaviconUrl } from '~/lib/external-favicon-url.js'
+
 const followLinks = [
   { id: 'facebook', label: 'Facebook', href: 'https://facebook.com', icon: 'facebook' },
   { id: 'x', label: 'X', href: 'https://x.com', icon: 'x' },
@@ -18,6 +20,33 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
   })
 })
 
+const { data: navigation } = await useFetch('/api/navigation', {
+  default: () => ({
+    primary: [],
+    footer: [],
+    recommended: []
+  })
+})
+
+/**
+ * 공개 추천 사이트 목록(비가시 제외)
+ * @returns {Array<{ id: string, label: string, url: string }>}
+ */
+const recommendedSites = computed(() => {
+  const list = navigation.value?.recommended
+  if (!Array.isArray(list)) {
+    return []
+  }
+  return list.filter((x) => x?.isVisible !== false)
+})
+
+/**
+ * 새 탭으로 열 외부 URL인지
+ * @param {string} url - 링크
+ * @returns {boolean}
+ */
+const isExternalNavUrl = (url) => /^https?:\/\//i.test(String(url || '').trim())
+
 /** 소개 영역 공개 여부 */
 const showAboutSection = false
 </script>
@@ -159,24 +188,44 @@ const showAboutSection = false
         </div>
       </div>
 
-      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
+      <div
+        v-if="recommendedSites.length"
+        class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0"
+      >
         <div class="right-sidebar__row flex items-center justify-between">
           <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
             Recommended
           </p>
-          <span>↗</span>
-        </div>
-        <div class="right-sidebar__links mt-4 grid gap-3 text-sm">
-          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/post/hello-sori-studio">
-            sori.studio 첫 글과 방향
-          </NuxtLink>
-          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/projects">
-            Projects and services
-          </NuxtLink>
-          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/links">
-            Links and portal
-          </NuxtLink>
         </div>
+        <ul class="right-sidebar__recommended-list mt-4 list-none flex flex-col gap-2.5 p-0">
+          <li v-for="item in recommendedSites" :key="item.id">
+            <a
+              class="right-sidebar__recommended-card site-interactive flex items-center gap-3 rounded-xl border border-[var(--site-line)] bg-[var(--site-panel)] px-3 py-2.5 transition-colors hover:border-[var(--site-accent)]"
+              :href="item.url"
+              :target="isExternalNavUrl(item.url) ? '_blank' : undefined"
+              :rel="isExternalNavUrl(item.url) ? 'nofollow noopener noreferrer' : undefined"
+            >
+              <span class="right-sidebar__recommended-icon grid h-9 w-9 shrink-0 place-items-center overflow-hidden rounded-lg bg-[var(--site-paper)] text-xs font-bold text-[var(--site-text)] ring-1 ring-[var(--site-line)]">
+                <img
+                  v-if="getExternalFaviconUrl(item.url)"
+                  class="h-full w-full object-cover"
+                  :src="getExternalFaviconUrl(item.url, 64)"
+                  width="36"
+                  height="36"
+                  alt=""
+                  loading="lazy"
+                  referrerpolicy="no-referrer"
+                >
+                <span v-else class="px-1 text-center leading-none">{{ (item.label || '?').slice(0, 1) }}</span>
+              </span>
+              <span class="min-w-0 flex-1">
+                <span class="block truncate text-sm font-semibold text-[var(--site-text)]">{{ item.label }}</span>
+                <span class="mt-0.5 block truncate font-mono text-[11px] site-muted">{{ item.url }}</span>
+              </span>
+              <span class="shrink-0 text-xs site-muted" aria-hidden="true">↗</span>
+            </a>
+          </li>
+        </ul>
       </div>
 
       <div v-if="showAboutSection" class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">

components/site/SidebarPrimaryNavList.vue

@@ -15,9 +15,9 @@ const toggleBranch = inject('sidebarPrimaryNavToggle')
 const navBarBeforeBase =
   "before:pointer-events-none before:content-[''] before:h-4 before:w-1 before:flex-none before:rounded-sm before:rounded-l-none before:transition-[width,height,border-radius,background-color] before:duration-200 hover:px-3 hover:before:h-2 hover:before:w-2 hover:before:rounded-full"
 
-/** 비활성 경로: 기본 회색 막대, 호버 시 원형·믹스 색 */
+/** 비활성 경로: 테두리 톤에 가깝게 밝게 섞인 막대, 호버 시 원형·믹스 색 */
 const navBarBeforeInactive =
-  `${navBarBeforeBase} before:bg-[var(--site-line)] hover:before:bg-[color:color-mix(in_srgb,var(--site-text)_28%,var(--site-line))]`
+  `${navBarBeforeBase} before:bg-[color:color-mix(in_srgb,var(--site-line)_88%,var(--site-panel)_12%)] hover:before:bg-[color:color-mix(in_srgb,var(--site-text)_28%,var(--site-line))]`
 
 /** 현재 페이지와 일치하는 내부 링크: 브랜드(`--site-accent`) 막대·호버 원형 */
 const navBarBeforeActive =
@@ -122,7 +122,7 @@ const navLinkClass = (url) => {
           :class="isExpanded(node.id) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
         >
           <div class="sidebar-primary-nav-list__sub-clip min-h-0 overflow-hidden">
-            <ul class="sidebar-primary-nav-list__sub ml-0 border-l border-[var(--site-line)] pl-2 pt-0">
+            <ul class="sidebar-primary-nav-list__sub ml-0 mt-2 pl-3 pt-0">
               <SidebarPrimaryNavList :nodes="node.children" />
             </ul>
           </div>