From 3f01b8b8089fe3ffa7ea94dc320457eb8226490b Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 16 Apr 2026 10:47:33 +0900
Subject: [PATCH] =?UTF-8?q?theme:=20=ED=83=9C=EA=B7=B8=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=B3=B4=EB=8D=94=20=EB=B0=8F=20=ED=98=B8=EB=B2=84?=
 =?UTF-8?q?=20=EC=83=89=EC=83=81=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

태그 카드의 좌측 보더와 호버 배경이 각 태그의 accent_color를 항상 기준으로 표현되도록 수정했다.
원본 Thred 태그 목록과 동일한 시각 동작을 맞추기 위해 관련 작업 이력을 문서에 반영했다.

Made-with: Cursor
---
 docs/update.md | 36 +++++++++++++++++++++++++++++++
 tags-index.hbs | 58 +++++++++++++++++++++++++++++---------------------
 2 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/docs/update.md b/docs/update.md
index e34157f..eba15d7 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,41 @@
 # 업데이트 로그
 
+## v0.1.39 - 2026-04-16
+- `tags-index.hbs` 태그 카드 목록 마크업을 원본(Thred) 구조 기준으로 변환 수정.
+- `tags-index.hbs` 태그 카드 좌측 보더/호버 배경이 각 태그 `accent_color`를 항상 사용하도록 수정.
+
+## v0.1.38 - 2026-04-14
+- `npm run zip:version` 압축 스크립트 추가.
+- 현재 버전 기준 업로드용 zip 생성 흐름 정리.
+
+## v0.1.37 - 2026-04-14
+- 목록 페이지네이션을 링크 이동형에서 `Load More` 확장형으로 변경.
+- 다음 페이지 HTML에서 목록만 파싱해 이어 붙이는 클라이언트 로직 추가.
+- 다음 페이지가 없을 때 하단 버튼이 노출되지 않도록 수정.
+
+## v0.1.36 - 2026-04-14
+- 로컬 Ghost `routes.yaml`에 `/tags/`, `/authors/` 커스텀 라우트 추가.
+- 좌측 네비게이션 `Tags`, `Authors` 링크가 각각 `tags-index.hbs`, `authors-index.hbs`를 타도록 로컬 환경 정리.
+- `tag.hbs`는 개별 태그 아카이브, `/tags/`는 태그 목록 인덱스 역할로 구분 정리.
+
+## v0.1.35 - 2026-04-14
+- `author.hbs` 작성자 아바타 크기와 fallback 표시 수정.
+- `tag.hbs`의 불필요한 `{{#tag}}` 블록 제거.
+- 태그 아카이브 페이지 `pagination` 컨텍스트 오류 수정.
+
+## v0.1.34 - 2026-04-14
+- 우측 사이드바 마크업을 훅 클래스 유지형 Tailwind 구조로 다시 정리.
+- 작성자 소개, 사이트 소개, 추천 목록, 구독 폼, 푸터 영역에 Tailwind 보조 클래스 재적용.
+
+## v0.1.33 - 2026-04-14
+- 좌측 사이드바 데스크톱 닫힘 상태를 `display:none` 대신 폭/투명도 전환으로 수정.
+- 좌측 사이드바 열기·닫기 애니메이션 복구.
+
+## v0.1.32 - 2026-04-14
+- 공통 셸 레이아웃 훅 클래스를 유지한 채 Tailwind 보조 클래스 재적용.
+- 헤더 `1296px` 셸 정렬과 중앙 검색바 배치 복구 방향 정리.
+- 좌우 사이드바 폭 계산과 토글 동작을 깨지 않는 하이브리드 마크업으로 수정.
+
 ## v0.1.31 - 2026-04-14
 - `npm run dev:watch` 스크립트 추가.
 - 로컬 파일 변경 감지 후 자동 `dev:sync` 반영 흐름 추가.
diff --git a/tags-index.hbs b/tags-index.hbs
index f53c081..59a4ee2 100644
--- a/tags-index.hbs
+++ b/tags-index.hbs
@@ -1,30 +1,40 @@
 {{!< default}}
 
 <main class="content-area">
-    <section class="stack-section">
-        <header class="section-header text-center">
-            <h1 class="section-title">Tags</h1>
-            <p class="section-description">Browse by topic</p>
-        </header>
+    <section class="px-5 sm:px-6" data-page-hero="">
+    <div class="max-w-site py-6 md:py-8 mx-auto flex flex-col gap-6 text-center">
+      <div class="flex-1 max-w-xl flex flex-col gap-2 justify-center mx-auto items-center">
+        <h1 class="text-xl md:text-2xl lg:text-3xl font-semibold text-balance leading-[1.125]">Tags</h1>
+          <p class="text-base text-balance text-typ-tone max-w-md leading-snug [&amp;_a]:underline [&amp;_a]:decoration-2 [&amp;_a]:underline-offset-2 [&amp;_a:hover]:text-brand">Browse by topic</p>
+      </div>
+    </div>
+  </section>
 
-        {{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
-            <div class="tag-directory grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-                {{#foreach tags}}
-                    <a class="tag-directory__card group relative flex min-h-[128px] flex-col rounded-[14px] border border-[var(--border)] bg-[var(--surface)] p-4 text-left transition-colors hover:bg-[var(--surface-muted)]" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
-                        <span class="tag-directory__accent absolute inset-y-0 left-0 w-[3px] rounded-l-[14px] bg-[var(--tag-accent,var(--accent))]"></span>
-                        <span class="flex items-start justify-between gap-3">
-                            <strong class="text-[15px] font-semibold tracking-[-0.02em]">{{name}}</strong>
-                            <img class="h-4 w-4 shrink-0 opacity-70 transition-opacity group-hover:opacity-100" src="{{asset "icons/arrow_outward.svg"}}" alt="">
-                        </span>
-                        {{#if description}}
-                            <p class="mt-2 line-clamp-3 text-[13px] leading-5 text-[var(--text-soft)]">{{description}}</p>
-                        {{else}}
-                            <p class="mt-2 line-clamp-3 text-[13px] leading-5 text-[var(--text-soft)]">Posts filed under {{name}}.</p>
-                        {{/if}}
-                        <span class="mt-auto pt-3 text-[13px] font-medium text-[var(--text-soft)]">{{plural count.posts empty="0 posts" singular="% post" plural="% posts"}}</span>
-                    </a>
-                {{/foreach}}
-            </div>
-        {{/get}}
+  <section class="px-5 sm:px-6 mb-8" data-tags="">
+    {{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
+      <ul class="tag-directory max-w-site mx-auto gap-4 sm:gap-5 grid sm:grid-cols-2 lg:grid-cols-3">
+        {{#foreach tags}}
+          <li class="tag-directory__item h-full" data-tag-card="{{slug}}">
+            <a class="tag-directory__card relative h-full flex flex-col gap-2 p-4 border border-brd rounded-theme border-l-[3px] border-l-[var(--color-accent)] rounded-l-none hover:bg-[color-mix(in_srgb,var(--color-accent)_5%,transparent)] hover:border-[color-mix(in_srgb,var(--color-accent)_25%,var(--border))] hover:border-l-[var(--color-accent)]" href="{{url}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{else}} style="--color-accent: var(--accent);"{{/if}}>
+              <h2 class="text-sm font-medium leading-tight flex items-center justify-between gap-1">{{name}}</h2>
+              <i class="icon icon-arrow-up-right size-4 stroke-2 absolute top-4 right-4" role="presentation">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                  <path d="M17 7l-10 10"></path>
+                  <path d="M8 7l9 0l0 9"></path>
+                </svg>
+              </i>
+              {{#if description}}
+                <p class="flex-1 text-[0.8rem] text-typ-tone leading-tight line-clamp-3 text-overflow-ellipsis">{{description}}</p>
+              {{else}}
+                <p class="flex-1 text-[0.8rem] text-typ-tone leading-tight line-clamp-3 text-overflow-ellipsis">Posts filed under {{name}}.</p>
+              {{/if}}
+              <span class="text-[0.8rem] text-typ-tone leading-tight font-medium">{{plural count.posts empty="0 posts" singular="% post" plural="% posts"}}</span>
+            </a>
+          </li>
+        {{/foreach}}
+      </ul>
+    {{/get}}
+  </section>
     </section>
 </main>