From 34314a5c7d832b0473fb0e0263efd3cf5937e20a Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 7 May 2026 18:00:53 +0900
Subject: [PATCH] =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A9=94=ED=83=80=20=ED=91=9C?=
 =?UTF-8?q?=ED=98=84=EC=9D=84=20=EC=9B=90=EB=B3=B8=20=ED=8C=A8=ED=84=B4?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=84=B8=EB=B6=80=20=EB=B3=B4=EC=A0=95.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

featured 강조, 태그 컬러 배지, 메타 구분자 스타일을 정리해 tag 상세 게시물 리스트의 시각 밀도를 원본 Thred 화면에 가깝게 맞췄다.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/update.md       |  1 +
 pages/tag/[slug].vue | 21 +++++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/docs/update.md b/docs/update.md
index ad29f8d..28fc092 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -12,6 +12,7 @@
 - 왼쪽 사이드바 네비게이션/카테고리/작성자 섹션의 내부 패딩과 텍스트 이동량을 미세 조정.
 - 태그 목록 페이지를 원본 Thred 구조에 맞춰 중앙 히어로와 3열 태그 카드 레이아웃으로 재구성.
 - 태그 상세 페이지(`tag/[slug]`)를 원본 Thred 구조에 맞춰 헤더 간격과 리스트형 게시물 카드 레이아웃으로 재구성.
+- 태그 상세 페이지 게시물 메타 영역에 featured 강조, 태그 컬러 배지, 구분자 스타일을 원본 패턴에 맞춰 보정.
 - 기술 명세 현재 버전을 v0.0.45로 갱신.
 
 ## v0.0.44
diff --git a/pages/tag/[slug].vue b/pages/tag/[slug].vue
index 2458f25..5c9b869 100644
--- a/pages/tag/[slug].vue
+++ b/pages/tag/[slug].vue
@@ -32,11 +32,13 @@ const tag = computed(() => tags.value.find((item) => item.slug === slug.value))
 
 const tagPosts = computed(() => posts.value
   .filter((post) => post.tags.includes(slug.value))
-  .map((post) => ({
+  .map((post, index) => ({
     title: post.title,
     excerpt: post.excerpt,
     featuredImage: post.featuredImage,
     tag: tag.value?.name || slug.value.toUpperCase(),
+    tagColor: tag.value?.color || '#4d4d4d',
+    isFeatured: index === 0,
     publishedAt: formatPostDate(post.publishedAt),
     to: `/post/${post.slug}`
   })))
@@ -59,11 +61,11 @@ const tagPosts = computed(() => posts.value
 
     <section class="px-5 sm:px-6">
       <div class="mx-auto flex max-w-[720px] flex-col gap-8">
-        <div class="flex flex-col divide-y divide-[var(--site-line)]">
+        <div class="flex flex-col divide-y divide-[var(--site-line)]" data-post-feed="latest">
           <article
             v-for="post in tagPosts"
             :key="post.to"
-            class="group relative flex flex-row gap-3 py-4"
+            class="group relative flex flex-row gap-3 py-4 text-[var(--site-text)]"
           >
             <NuxtLink
               :to="post.to"
@@ -88,18 +90,25 @@ const tagPosts = computed(() => posts.value
               <div class="flex h-full flex-col gap-1.5">
                 <h2 class="max-w-[90%] text-sm font-medium leading-tight">
                   <NuxtLink :to="post.to" class="transition-opacity duration-200 hover:opacity-75">
+                    <span v-if="post.isFeatured" class="mr-1 inline-flex text-[var(--site-accent)]">⚡</span>
                     {{ post.title }}
                   </NuxtLink>
                 </h2>
                 <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 sm:gap-1.5">
+                <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">
                   <time>{{ post.publishedAt }}</time>
-                  <span class="text-[var(--site-line)]">/</span>
-                  <span class="rounded-sm bg-[color:color-mix(in_srgb,var(--site-text)_10%,transparent)] px-1.5 py-px font-medium text-[var(--site-text)]">
+                  <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="flex items-center gap-0.5">
+                    <span>◌</span>
+                    <span>0</span>
+                  </span>
                 </div>
               </div>
             </div>