인기 페이지 통계와 추천 사이트 메타데이터 추가 v1.5.9

pages/admin/navigation/index.vue

@@ -17,6 +17,8 @@ const { data: navigationItems } = await useFetch('/admin/api/navigation', {
 
 const items = ref(navigationItems.value.map((item) => ({
   ...item,
+  descriptionText: item.descriptionText || '',
+  thumbnailUrl: item.thumbnailUrl || '',
   parentId: item.parentId ?? null,
   isFolder: Boolean(item.isFolder),
   isVisible: true
@@ -50,6 +52,8 @@ const serializeNavigationItems = (list) => JSON.stringify(
       id: String(item.id || '').trim(),
       label: String(item.label || '').trim(),
       url: String(item.url || '').trim(),
+      descriptionText: String(item.descriptionText || '').trim(),
+      thumbnailUrl: String(item.thumbnailUrl || '').trim(),
       location: item.location,
       sortOrder: Number(item.sortOrder || 0),
       parentId: item.parentId ? String(item.parentId).trim() : null
@@ -601,6 +605,8 @@ const addPrimaryRoot = () => {
     id: crypto.randomUUID(),
     label: '새 메뉴',
     url: '/',
+    descriptionText: '',
+    thumbnailUrl: '',
     location: 'primary',
     parentId: null,
     sortOrder: maxOrder + 10,
@@ -620,6 +626,8 @@ const addFooterItem = () => {
     id: crypto.randomUUID(),
     label: '',
     url: '/',
+    descriptionText: '',
+    thumbnailUrl: '',
     location: 'footer',
     parentId: null,
     sortOrder: maxOrder + 10,
@@ -639,6 +647,8 @@ const addRecommendedItem = () => {
     id: crypto.randomUUID(),
     label: '',
     url: 'https://',
+    descriptionText: '',
+    thumbnailUrl: '',
     location: 'recommended',
     parentId: null,
     sortOrder: maxOrder + 10,
@@ -668,6 +678,8 @@ const saveNavigation = async () => {
           id: item.id,
           label: item.label,
           url: item.url,
+          descriptionText: item.descriptionText || '',
+          thumbnailUrl: item.thumbnailUrl || '',
           location: item.location,
           sortOrder: Number(item.sortOrder || 0),
           isVisible: true,
@@ -679,6 +691,8 @@ const saveNavigation = async () => {
 
     items.value = savedItems.map((item) => ({
       ...item,
+      descriptionText: item.descriptionText || '',
+      thumbnailUrl: item.thumbnailUrl || '',
       parentId: item.parentId ?? null,
       isFolder: Boolean(item.isFolder),
       isVisible: true
@@ -941,7 +955,7 @@ const saveNavigation = async () => {
 
     <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>만 있으면 아이콘은 생략).
+        공개 홈 우측 사이드바 Recommended 영역에 표시됩니다. 대체 텍스트가 있으면 카드 하단에 URL 대신 표시하고, 썸네일 URL이 있으면 Google 파비콘 대신 썸네일을 사용합니다.
       </p>
       <div class="flex flex-wrap gap-2">
         <button
@@ -970,6 +984,12 @@ const saveNavigation = async () => {
               <th class="admin-navigation__recommended-cell px-4 py-3">
                 URL
               </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 admin-navigation__cell-actions w-12 px-2 py-3 text-right">
                 <span class="sr-only">관리</span>
               </th>
@@ -1008,6 +1028,22 @@ const saveNavigation = async () => {
                   required
                 >
               </td>
+              <td class="admin-navigation__recommended-cell px-4 py-4">
+                <input
+                  v-model="item.descriptionText"
+                  class="w-full min-w-[10rem] rounded border border-line px-3 py-2 text-sm outline-none focus:border-[#8e9cac]"
+                  type="text"
+                  placeholder="URL 대신 표시할 문구"
+                >
+              </td>
+              <td class="admin-navigation__recommended-cell px-4 py-4">
+                <input
+                  v-model="item.thumbnailUrl"
+                  class="w-full min-w-[12rem] rounded border border-line px-3 py-2 font-mono text-sm outline-none focus:border-[#8e9cac]"
+                  type="text"
+                  placeholder="/uploads/…"
+                >
+              </td>
               <td class="admin-navigation__recommended-cell admin-navigation__cell-actions relative w-12 px-2 py-4 text-right">
                 <AdminRowMoreMenu
                   v-model:open-menu-id="openMenuId"