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

components/site/RightSidebar.vue

@@ -30,7 +30,7 @@ const { data: navigation } = await useFetch('/api/navigation', {
 
 /**
  * 공개 추천 사이트 목록(비가시 제외)
- * @returns {Array<{ id: string, label: string, url: string }>}
+ * @returns {Array<{ id: string, label: string, url: string, descriptionText?: string, thumbnailUrl?: string }>}
  */
 const recommendedSites = computed(() => {
   const list = navigation.value?.recommended
@@ -47,6 +47,25 @@ const recommendedSites = computed(() => {
  */
 const isExternalNavUrl = (url) => /^https?:\/\//i.test(String(url || '').trim())
 
+/**
+ * 추천 사이트 보조 문구를 반환한다.
+ * @param {Object} item - 추천 사이트 항목
+ * @returns {string} 표시 문구
+ */
+const getRecommendedDisplayText = (item) => {
+  return String(item?.descriptionText || '').trim() || String(item?.url || '').trim()
+}
+
+/**
+ * 추천 사이트 이미지 URL을 반환한다.
+ * @param {Object} item - 추천 사이트 항목
+ * @returns {string} 이미지 URL
+ */
+const getRecommendedImageUrl = (item) => {
+  const thumbnailUrl = String(item?.thumbnailUrl || '').trim()
+  return thumbnailUrl || getExternalFaviconUrl(item?.url, 64)
+}
+
 /** 소개 영역 공개 여부 */
 const showAboutSection = false
 </script>
@@ -201,12 +220,12 @@ const showAboutSection = false
             >
               <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)"
+                  v-if="getRecommendedImageUrl(item)"
                   class="h-full w-full object-cover"
-                  :src="getExternalFaviconUrl(item.url, 64)"
+                  :src="getRecommendedImageUrl(item)"
                   width="36"
                   height="36"
-                  alt=""
+                  :alt="item.thumbnailUrl ? item.label : ''"
                   loading="lazy"
                   referrerpolicy="no-referrer"
                 >
@@ -214,7 +233,7 @@ const showAboutSection = false
               </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 class="mt-0.5 block truncate text-[11px] site-muted" :class="item.descriptionText ? '' : 'font-mono'">{{ getRecommendedDisplayText(item) }}</span>
               </span>
               <span class="shrink-0 text-xs site-muted" aria-hidden="true">↗</span>
             </a>