태그 상세 페이지 레이아웃을 Thred 스타일로 재구성.

상단 헤더 간격과 본문 리스트형 게시물 카드를 원본 구조에 맞춰 정리하고, 썸네일·타이포·메타 배치를 통일해 tag 상세 화면의 시각 흐름을 보정했다.

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

pages/tag/[slug].vue

@@ -44,13 +44,72 @@ const tagPosts = computed(() => posts.value
 
 <template>
   <MainColumn>
-    <TagHeader
-      :title="tag?.name || slug.toUpperCase()"
-      :description="tag?.description || ''"
-    />
-    <PostCard v-for="post in tagPosts" :key="post.to" :post="post" />
-    <section v-if="tagPosts.length === 0" class="tag-posts site-section">
-      <div class="tag-posts__empty site-section-body text-sm text-muted">
+    <section class="px-5 pt-4 sm:px-6 sm:pt-5">
+      <div class="mx-auto flex max-w-[720px] flex-col gap-4 border-b border-[var(--site-line)] pb-4 sm:pb-5">
+        <div class="flex flex-col gap-1">
+          <h1 class="text-lg font-medium leading-tight sm:text-xl">
+            {{ tag?.name || slug.toUpperCase() }}
+          </h1>
+          <p class="max-w-lg text-sm leading-snug site-muted">
+            {{ tag?.description || '이 주제와 관련된 게시물을 모아볼 수 있습니다.' }}
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <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)]">
+          <article
+            v-for="post in tagPosts"
+            :key="post.to"
+            class="group relative flex flex-row gap-3 py-4"
+          >
+            <NuxtLink
+              :to="post.to"
+              class="relative aspect-square min-w-16 flex-1 sm:aspect-video"
+            >
+              <figure class="overflow-hidden rounded-[10px]">
+                <img
+                  v-if="post.featuredImage"
+                  :src="post.featuredImage"
+                  :alt="post.title"
+                  class="aspect-square w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90 sm:aspect-video"
+                  loading="lazy"
+                >
+                <div
+                  v-else
+                  class="aspect-square w-full rounded-[inherit] bg-[linear-gradient(135deg,#253444,#8f9dad)] sm:aspect-video"
+                />
+              </figure>
+            </NuxtLink>
+
+            <div class="relative flex-[3] md:flex-[4]">
+              <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">
+                    {{ 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">
+                  <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)]">
+                    {{ post.tag }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section v-if="tagPosts.length === 0" class="px-5 py-4 sm:px-6">
+      <div class="mx-auto max-w-[720px] text-sm site-muted">
         이 태그에 연결된 글이 없습니다.
       </div>
     </section>