태그 배지 구분자와 우측 Follow 아이콘을 원본 패턴으로 보정.

태그 상세 메타에서 복수 태그 글은 첫 태그만 배지로 표시하고 구분자 겹침을 제거했으며, 우측 사이드바 Follow 영역을 소셜 아이콘 링크 행으로 교체해 시각 구성을 정리했다.

Co-authored-by: Cursor <cursoragent@cursor.com>

pages/tag/[slug].vue

@@ -36,8 +36,8 @@ const tagPosts = computed(() => posts.value
     title: post.title,
     excerpt: post.excerpt,
     featuredImage: post.featuredImage,
-    tag: tag.value?.name || slug.value.toUpperCase(),
-    tagColor: tag.value?.color || '#4d4d4d',
+    tag: tags.value.find((item) => item.slug === (post.tags?.[0] || slug.value))?.name || (post.tags?.[0] || slug.value).toUpperCase(),
+    tagColor: tags.value.find((item) => item.slug === (post.tags?.[0] || slug.value))?.color || '#4d4d4d',
     isFeatured: index === 0,
     publishedAt: formatPostDate(post.publishedAt),
     to: `/post/${post.slug}`
@@ -97,14 +97,16 @@ const tagPosts = computed(() => posts.value
                 <p class="flex-1 line-clamp-2 text-[0.8rem] leading-tight site-muted">
                   {{ post.excerpt }}
                 </p>
-                <div class="flex flex-wrap items-center gap-2 text-xs site-muted [&>*:not(:last-child)]:after:ml-2 [&>*:not(:last-child)]:after:text-[var(--site-line)] [&>*:not(:last-child)]:after:content-['/'] sm:[&>*:not(:last-child)]:after:ml-1.5">
+                <div class="flex flex-wrap items-center gap-2 text-xs site-muted sm:gap-1.5">
                   <time>{{ post.publishedAt }}</time>
+                  <span class="text-[var(--site-line)]">/</span>
                   <span
                     class="rounded-sm px-1.5 py-px font-medium text-[var(--site-text)]"
                     :style="{ backgroundColor: `${post.tagColor}1a` }"
                   >
                     {{ post.tag }}
                   </span>
+                  <span class="text-[var(--site-line)]">/</span>
                   <span class="flex items-center gap-0.5">
                     <span>◌</span>
                     <span>0</span>