홈: Categories 카드 액센트·그리드·설명 처리 보정 (v0.2.5)

Made-with: Cursor

docs/deploy.md

@@ -1,7 +1,7 @@
 # 배포 가이드
 
 ## 현재 버전
-- `v0.2.4`
+- `v0.2.5`
 
 ## Git 기본 설정
 - 저장소 작성자 정보는 아래 값으로 통일한다.

docs/history.md

@@ -1,5 +1,8 @@
 # 의사결정 이력
 
+## 2026-04-17 v0.2.5
+홈 Categories 행에서 `flex`+`basis-full` 제목 배치 때문에 좌·우 열 폭이 태그마다 달라 보였고, 설명이 없을 때 게시물 수로 채우면 원본 Thred와 다른 정보가 들어갔다. 그래서 데스크톱 기준 2:3 그리드로 좌측(제목·선택 설명·View all)과 우측(글 5개) 폭을 고정했고, 설명 미입력 시에는 문구를 생략했다. 좌측 세로 바는 Ghost 태그 `accent_color`를 `--color-accent`에 넣어 `before:bg-accent`로 표시하며, 미설정 태그는 동일 두께의 중립색 막대로 통일했다.
+
 ## 2026-04-17 v0.2.4
 참고 사이트(Thred) 홈은 Latest 아래에 태그별로 짧은 설명과 상위 글 제목만 나열하는 Categories 블록이 있다. Ghost에서는 태그·글을 서버에서 한 번에 조합하기 어렵고, 좌측 사이드바와 동일한 노출 순서를 유지해야 하므로, `get tags`로 후보를 렌더한 뒤 기존 `initializeCategoryPriority()`로 slug 우선순위와 최대 10개를 맞추고, 각 태그마다 중첩 `get posts`(filter `tag:slug`, 5개)로 목록만 채우는 partial을 분리해 홈 `post-feed` 하단에 포함하는 방식으로 정리했다.
 

docs/map.md

@@ -1,7 +1,7 @@
 # 파일-화면 매핑 가이드
 
 ## 현재 버전
-- `v0.2.4`
+- `v0.2.5`
 
 ## 공통 레이아웃
 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드

docs/spec.md

@@ -1,7 +1,7 @@
 # 기술 명세
 
 ## 현재 버전
-- `v0.2.4`
+- `v0.2.5`
 
 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -29,7 +29,7 @@
 - `tags-index.hbs`는 Ghost `routes.yaml` 커스텀 라우트로 `/tags/`에 연결됨
 - 로컬 개발 환경의 실제 라우트 설정은 `.docker/ghost/content/settings/routes.yaml`을 기준으로 사용함
 - 홈 메인 피드는 히어로, Featured 수평 슬라이드, Latest 리스트 구성을 사용함
-- 홈 Latest 블록 아래에는 `home-categories` partial로 태그별 섹션을 두며, 좌측 사이드바와 동일한 `data-category-priority-order`·`data-category-priority-limit`(10)로 정렬·개수 제한 후 태그당 최신 글 5개를 번호 링크로만 표시함
+- 홈 Latest 블록 아래에는 `home-categories` partial로 태그별 섹션을 두며, 좌측 사이드바와 동일한 `data-category-priority-order`·`data-category-priority-limit`(10)로 정렬·개수 제한 후 태그당 최신 글 최대 5개를 번호 링크로만 표시함. 세로 액센트 바는 태그 `accent_color`를 `--color-accent`로 반영하고(미설정 시 중립색), 설명이 없으면 빈 칸으로 두며, 좌·우 열은 `minmax(0,2fr)`/`minmax(0,3fr)` 그리드로 고정한다
 - 태그·작성자 아카이브(`tag.hbs`, `author.hbs`)는 홈과 동일한 `post-feed`를 쓰지 않고, `post-feed-archive`로 글 목록과 페이지네이션만 노출함
 - 우측 사이드바 `Recommended` 섹션은 Ghost `recommendations` 데이터를 우선 사용하며, 항목별 외부 링크와 favicon 표시를 지원함
 - 포스트 상세 우측 `Read next`는 `primary_tag` 기준 관련 글을 우선 노출하고, 관련 글이 없으면 최신 글(현재 글 제외)로 대체함

docs/update.md

@@ -1,5 +1,11 @@
 # 업데이트 로그
 
+## v0.2.5 - 2026-04-17
+- `package.json` 버전을 `0.2.5`로 증가.
+- `partials/lists/home-categories.hbs` 수정: 좌측 액센트 바는 태그 `accent_color`(없으면 중립 회색)로 `--color-accent` 고정, 설명 없을 때는 문구 없음, 2열 그리드(2fr/3fr)로 좌우 간격 통일, 태그별 글은 `get posts` `limit="5"` 유지.
+- `docs/spec.md`, `docs/deploy.md` 현재 버전을 `v0.2.5`로 동기화.
+- `docs/history.md`에 홈 Categories 보정(`v0.2.5`) 의사결정 이력 추가.
+
 ## v0.2.4 - 2026-04-17
 - `package.json` 버전을 `0.2.4`로 증가.
 - `partials/lists/home-categories.hbs` 추가: 홈 Latest 아래 Categories 섹션(태그당 최신 글 5개 텍스트 링크, 최대 10태그, `data-category-priority-order` 정렬).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghost-theme-thred-clone",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "private": true,
   "description": "A Ghost theme inspired by the Thred reference layout.",
   "keywords": [

partials/lists/home-categories.hbs

@@ -1,4 +1,4 @@
-{{!-- 홈 Latest 하단: 태그별 최신 글 5개(텍스트 링크만). 좌측 사이드바와 동일한 data-category-priority-order + 최대 10개 --}}
+{{!-- 홈 Latest 하단: 태그별 최신 글 최대 5개(텍스트 링크만). 좌측 사이드바와 동일한 data-category-priority-order + 최대 10개 --}}
 <section class="px-5 sm:px-6 py-4 mb-8 home-categories" data-home-categories>
     <div class="max-w-content mx-auto">
         <div class="flex gap-2 items-end justify-between border-b border-brd pb-3">
@@ -15,21 +15,19 @@
                     {{#foreach tags}}
                         {{#if count.posts}}
                             <li
-                                class="home-categories__row p-4 pl-5 sm:pl-6 sm:p-5 flex flex-wrap flex-col gap-2 md:flex-row border-b border-b-brd relative before:absolute before:left-0 before:top-0 before:h-full before:w-0.75 before:bg-accent"
+                                class="home-categories__row relative grid grid-cols-1 md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] gap-x-6 gap-y-3 md:gap-y-2 md:items-start border-b border-b-brd p-4 sm:p-5 pl-5 sm:pl-6 before:absolute before:left-0 before:top-0 before:h-full before:w-0.75 before:bg-accent"
                                 data-category-priority-item
                                 data-category-slug="{{slug}}"
-                                style="--color-accent: {{#if accent_color}}{{accent_color}}{{else}}var(--accent){{/if}};"
+                                style="--color-accent: {{#if accent_color}}{{accent_color}}{{else}}#94a3b8{{/if}};"
                             >
-                                <h2 class="font-medium basis-full leading-tight text-typ">{{name}}</h2>
-                                <div class="flex-2 flex flex-col gap-1.5 border-b border-brd pb-3 mb-2 md:pb-0 md:border-b-0 md:mr-4 md:mb-0 items-start justify-between">
+                                <div class="home-categories__meta flex min-h-0 min-w-0 flex-col gap-1.5 border-b border-brd pb-3 md:border-b-0 md:pb-0">
+                                    <h2 class="font-medium leading-tight text-typ">{{name}}</h2>
                                     {{#if description}}
                                         <p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{description}}</p>
-                                    {{else}}
-                                        <p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{plural count.posts empty="No posts" singular="% post" plural="% posts"}}</p>
                                     {{/if}}
-                                    <a href="{{url}}" class="text-sm text-typ-tone font-semibold leading-snug flex items-center gap-1 hover:opacity-75 mt-0.5">
+                                    <a href="{{url}}" class="home-categories__view-all mt-0.5 flex items-center gap-1 text-sm font-semibold leading-snug text-typ-tone hover:opacity-75">
                                         <span>View all</span>
-                                        <i class="icon icon-arrow-up-right size-3.5 stroke-2 shrink-0" role="presentation" aria-hidden="true">
+                                        <i class="icon icon-arrow-up-right size-3.5 shrink-0 stroke-2" role="presentation" aria-hidden="true">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
@@ -38,7 +36,7 @@
                                         </i>
                                     </a>
                                 </div>
-                                <ol class="flex-3 flex flex-col gap-1.5 text-sm text-typ-tone font-medium list-none">
+                                <ol class="home-categories__posts flex min-h-0 min-w-0 list-none flex-col gap-1.5 text-sm font-medium text-typ-tone">
                                     {{#get "posts" filter=(concat "tag:" slug) limit="5" include="authors,tags" order="published_at desc"}}
                                         {{#foreach posts}}
                                             <li>