From 4d7aaa90ca817c40c9d14bfb574ea7c4dbf14351 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 7 May 2026 17:59:14 +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=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=EC=9D=84=20Thred=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9E=AC=EA=B5=AC=EC=84=B1.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

diff --git a/docs/map.md b/docs/map.md
index 74d332c..e10cd31 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -81,7 +81,7 @@
 | pages/post/[slug].vue | 블로그 글 상세, 게시물 SEO/OG 메타 출력 |
 | pages/tags/index.vue | 태그 전체 목록, 중앙 히어로와 3열 태그 카드, 좌측 컬러 보더/hover 오버레이 |
 | pages/tags/[slug].vue | `/tag/:slug` 리다이렉트 |
-| pages/tag/[slug].vue | 태그별 글 목록 |
+| pages/tag/[slug].vue | 태그별 글 목록, 상단 태그 헤더 + 리스트형 게시물 카드 |
 | pages/pages/[slug].vue | 고정 페이지 상세 |
 
 ## 서버 API
diff --git a/docs/update.md b/docs/update.md
index 9d4d653..ad29f8d 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -11,6 +11,7 @@
 - 왼쪽 네비게이션과 카테고리 영역의 패딩, 간격, hover 동작을 원본 Thred 마크업 패턴에 맞춰 재정렬.
 - 왼쪽 사이드바 네비게이션/카테고리/작성자 섹션의 내부 패딩과 텍스트 이동량을 미세 조정.
 - 태그 목록 페이지를 원본 Thred 구조에 맞춰 중앙 히어로와 3열 태그 카드 레이아웃으로 재구성.
+- 태그 상세 페이지(`tag/[slug]`)를 원본 Thred 구조에 맞춰 헤더 간격과 리스트형 게시물 카드 레이아웃으로 재구성.
 - 기술 명세 현재 버전을 v0.0.45로 갱신.
 
 ## v0.0.44
diff --git a/pages/tag/[slug].vue b/pages/tag/[slug].vue
index df04f9c..2458f25 100644
--- a/pages/tag/[slug].vue
+++ b/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>