From 59ea51e550d8e826e6156a48cbc3e31867862e40 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 7 May 2026 17:56:32 +0900
Subject: [PATCH] =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A5=BC=20Thred=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=EC=9C=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

원본 구조에 맞춰 중앙 히어로와 3열 태그 카드를 적용하고, 태그 컬러 보더와 hover 오버레이/화살표 인터랙션을 반영해 사용자 화면의 시각 일관성을 맞췄다.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/map.md          |  2 +-
 docs/update.md       |  1 +
 pages/tags/index.vue | 56 +++++++++++++++++++++++++++++---------------
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/docs/map.md b/docs/map.md
index 9874c05..74d332c 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -79,7 +79,7 @@
 | pages/posts/index.vue | 게시물 전체 목록 |
 | pages/posts/[slug].vue | `/post/:slug` 리다이렉트 |
 | pages/post/[slug].vue | 블로그 글 상세, 게시물 SEO/OG 메타 출력 |
-| pages/tags/index.vue | 태그 전체 목록 |
+| pages/tags/index.vue | 태그 전체 목록, 중앙 히어로와 3열 태그 카드, 좌측 컬러 보더/hover 오버레이 |
 | pages/tags/[slug].vue | `/tag/:slug` 리다이렉트 |
 | pages/tag/[slug].vue | 태그별 글 목록 |
 | pages/pages/[slug].vue | 고정 페이지 상세 |
diff --git a/docs/update.md b/docs/update.md
index c4900a9..9d4d653 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -10,6 +10,7 @@
 - 왼쪽 사이드바 전환과 네비게이션 hover 효과 구현을 커스텀 CSS에서 Tailwind 유틸리티 클래스로 전환.
 - 왼쪽 네비게이션과 카테고리 영역의 패딩, 간격, hover 동작을 원본 Thred 마크업 패턴에 맞춰 재정렬.
 - 왼쪽 사이드바 네비게이션/카테고리/작성자 섹션의 내부 패딩과 텍스트 이동량을 미세 조정.
+- 태그 목록 페이지를 원본 Thred 구조에 맞춰 중앙 히어로와 3열 태그 카드 레이아웃으로 재구성.
 - 기술 명세 현재 버전을 v0.0.45로 갱신.
 
 ## v0.0.44
diff --git a/pages/tags/index.vue b/pages/tags/index.vue
index a9e488c..7985143 100644
--- a/pages/tags/index.vue
+++ b/pages/tags/index.vue
@@ -17,29 +17,47 @@ const getPostCount = (slug) => posts.value.filter((post) => post.tags.includes(s
 
 <template>
   <MainColumn>
-    <section class="tags-index site-section">
-      <div class="tags-index__header site-section-header">
-        <p class="tags-index__eyebrow text-xs font-semibold uppercase text-muted">
-          Tags
-        </p>
-        <h1 class="tags-index__title mt-3 text-4xl font-semibold leading-tight">
-          태그
-        </h1>
+    <section class="tags-page-hero px-5 sm:px-6">
+      <div class="mx-auto flex max-w-[720px] flex-col gap-6 py-6 text-center md:py-8">
+        <div class="mx-auto flex max-w-xl flex-1 flex-col items-center justify-center gap-2">
+          <h1 class="text-xl font-semibold leading-[1.125] md:text-2xl lg:text-3xl">
+            Tags
+          </h1>
+          <p class="max-w-md text-base leading-snug site-muted">
+            Browse by topic
+          </p>
+        </div>
       </div>
-      <div class="tags-index__body site-section-body grid gap-3">
-        <NuxtLink
+    </section>
+
+    <section class="tags-page-list mb-8 px-5 sm:px-6">
+      <ul class="mx-auto grid max-w-[720px] gap-4 sm:gap-5 lg:grid-cols-3">
+        <li
           v-for="tag in tags"
           :key="tag.id"
-          class="tags-index__item flex items-center justify-between gap-4 rounded border border-line bg-white px-4 py-3 hover:opacity-80"
-          :to="`/tag/${tag.slug}`"
+          class="h-full"
+          :data-tag-card="tag.slug"
         >
-          <span class="tags-index__name flex items-center gap-3 font-semibold">
-            <span class="tags-index__color h-4 w-1 rounded-full" :style="{ backgroundColor: tag.color }" />
-            {{ tag.name }}
-          </span>
-          <span class="tags-index__count text-sm text-muted">{{ getPostCount(tag.slug) }} posts</span>
-        </NuxtLink>
-      </div>
+          <NuxtLink
+            class="group relative flex h-full flex-col gap-2 rounded-[12px] rounded-l-none border border-[var(--site-line)] border-l-[3px] p-4 transition-colors duration-200 hover:border-l-[color:var(--tag-color)]"
+            :style="{ '--tag-color': tag.color, borderLeftColor: tag.color }"
+            :to="`/tag/${tag.slug}`"
+          >
+            <h2 class="flex items-center justify-between gap-1 pr-5 text-sm font-medium leading-tight">
+              {{ tag.name }}
+            </h2>
+            <span class="absolute top-4 right-4 text-sm transition-transform duration-200 group-hover:translate-x-[1px] group-hover:-translate-y-[1px]">↗</span>
+            <p class="flex-1 text-[0.8rem] leading-tight site-muted line-clamp-3">
+              {{ tag.description || `${tag.name} 관련 주제를 확인하세요.` }}
+            </p>
+            <span class="text-[0.8rem] font-medium leading-tight site-muted">
+              {{ getPostCount(tag.slug) }} posts
+            </span>
+            <span class="pointer-events-none absolute inset-0 rounded-[12px] rounded-l-none border border-transparent transition-colors duration-200 group-hover:border-[color:var(--tag-color)] group-hover:opacity-25" />
+            <span class="pointer-events-none absolute inset-0 rounded-[12px] rounded-l-none opacity-0 transition-opacity duration-200 group-hover:opacity-[0.06]" :style="{ backgroundColor: tag.color }" />
+          </NuxtLink>
+        </li>
+      </ul>
     </section>
   </MainColumn>
 </template>