블로그: 목록 카드 요약 영역 세로 여백 정리 (v0.2.9)

Made-with: Cursor
2026-04-17 13:49:22 +09:00
parent 070425dd22
commit a08d053742
9 changed files with 19 additions and 16 deletions
--- a/assets/built/tailwind.css
+++ b/assets/built/tailwind.css
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,7 +1,7 @@
 # 배포 가이드

 ## 현재 버전
- `v0.2.8`
+- `v0.2.9`

 ## Git 기본 설정
 - 저장소 작성자 정보는 아래 값으로 통일한다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -1,7 +1,7 @@
 # 파일-화면 매핑 가이드

 ## 현재 버전
- `v0.2.8`
+- `v0.2.9`

 ## 공통 레이아웃
 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드
@@ -18,7 +18,7 @@
 - [partials/lists/post-feed.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-feed.hbs): 홈 Featured 슬라이드, Latest 리스트, Categories(태그별 상위 5글) 묶음
 - [partials/lists/home-categories.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/home-categories.hbs): 홈 Latest 하단 태그별 최신 글 5개(텍스트 링크·우선순위 목록과 동일 정렬)
 - [partials/lists/post-feed-archive.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-feed-archive.hbs): 태그·작성자 아카이브용 글 목록 + Load More(페이지네이션)
- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): Tailwind 기반 리스트형 포스트 카드, 댓글 아이콘, 우측 공유 액션, 메타 정보, 태그 accent 배지
+- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): Tailwind 기반 리스트형 포스트 카드(요약·메타·`post-card-content` 세로 정렬), 댓글 아이콘, 우측 공유 액션, 태그 accent 배지

 ## 상세 및 아카이브
 - [post.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/post.hbs): 포스트 상세
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -1,7 +1,7 @@
 # 기술 명세

 ## 현재 버전
- `v0.2.8`
+- `v0.2.9`

 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -48,6 +48,7 @@
 - 포스트 상세 우측 `Read next`는 `primary_tag` 기준 관련 글을 우선 노출하고, 관련 글이 없으면 최신 글(현재 글 제외)로 대체함
 - Recommendations Portal 모달의 제목/설명은 트리거 버튼의 `data-portal-title`, `data-portal-description` 값으로 오픈 시점에 동기화함
 - 리스트형 `post-card`는 Tailwind 유틸리티 중심 마크업으로 구성되며, 썸네일은 `aspect-square sm:aspect-video` 비율을 사용
+- `post-items` 카드 본문(`post-card-content`)은 요약 문단이 실제 텍스트 높이만 차지하며(`flex-1`·고정 `min-h` 없음), 요약이 있을 때만 메타 줄에 `mt-auto`를 주어 이미지와 높이를 맞출 때 생기던 요약 블록 내부 빈 여백을 줄임. 요약이 없으면 요약 노드를 렌더하지 않음
 - 각 카드 항목은 `border-b border-brd` 구분선을 유지하고, 콘텐츠 래퍼는 `min-w-0` 기준으로 줄바꿈 폭을 제어
 - 포스트 상세 헤더는 제목, 메타, 공유 버튼, 대표 이미지를 Tailwind 유틸리티 중심 마크업으로 구성하고 상단 단일 태그 라벨은 표시하지 않음
 - 포스트 본문은 `prose prose-theme` 클래스를 사용하며, Typography 플러그인 대신 Tailwind 입력 파일에서 원본 기준 타이포그래피 규칙을 직접 제공함
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,10 @@
 # 업데이트 로그

+## v0.2.9 - 2026-04-17
+- `package.json` 버전을 `0.2.9`로 증가.
+- `partials/lists/post-items.hbs`: 목록 카드 요약 `<p>`의 `flex-1`·`min-h` 제거, `justify-between` 제거, 요약이 있을 때만 메타 블록에 `mt-auto`를 적용해 좁은 뷰에서 요약 영역이 빈 높이를 먹지 않도록 조정. 요약 없을 때는 `<p>` 미렌더.
+- `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.9`로 동기화.
+
 ## v0.2.8 - 2026-04-17
 - `package.json` 버전을 `0.2.8`로 증가.
 - `partials/site/topbar.hbs`: 비로그인 시 사용자 드롭다운 상단 프로필 행(아바타·이름)을 렌더하지 않도록 `{{#if @member}}`로 분리.
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ghost-theme-thred-clone",
-  "version": "0.2.8",
+  "version": "0.2.9",
  "private": true,
  "description": "A Ghost theme inspired by the Thred reference layout.",
  "keywords": [
--- a/partials/lists/post-items.hbs
+++ b/partials/lists/post-items.hbs
@@ -10,7 +10,7 @@
                    <span class="block w-full aspect-square sm:aspect-video rounded-lg bg-bgr-tone text-typ-tone text-xs text-center p-4">{{title}}</span>
                {{/if}}
            </a>
-            <div class="relative min-w-0 flex-3 md:flex-4 flex flex-col gap-0.5 justify-between h-full self-stretch" data-post-card-content>
+            <div class="post-card-content relative min-w-0 flex-3 md:flex-4 flex flex-col gap-0.5 self-stretch min-h-0" data-post-card-content>
                <h2 class="text-sm font-medium leading-tight flex flex-wrap gap-y-0.5 gap-x-1.5 items-end max-w-[90%]" data-post-card-title>
                    <a href="{{url}}" class="hover:opacity-75 flex items-start gap-1.5">
                        {{#if featured}}
@@ -23,13 +23,10 @@
                        <span>{{title}}</span>
                    </a>
                </h2>
-                
-                <p class="text-[0.8rem] text-typ-tone leading-tight line-clamp-2 text-ellipsis flex-1 min-h-[2.2rem]" data-post-card-excerpt>
-                    {{#if excerpt}}
-                        {{excerpt words="24"}}
-                    {{/if}}
-                </p>
-                <div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone [&>*:not(:last-child)]:after:content-['/'] [&>*:not(:last-child)]:after:ml-2 sm:[&>*:not(:last-child)]:after:ml-1.5 [&>*:not(:last-child)]:after:text-brd" data-post-card-info>
+                {{#if excerpt}}
+                <p class="post-card-content__excerpt text-[0.8rem] text-typ-tone leading-tight line-clamp-2 text-ellipsis" data-post-card-excerpt>{{excerpt words="24"}}</p>
+                {{/if}}
+                <div class="post-card-content__meta flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone [&>*:not(:last-child)]:after:content-['/'] [&>*:not(:last-child)]:after:ml-2 sm:[&>*:not(:last-child)]:after:ml-1.5 [&>*:not(:last-child)]:after:text-brd{{#if excerpt}} mt-auto{{/if}}" data-post-card-info>
                    <time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
                    {{#primary_author}}
                        <a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
--- a/partials/site/sidebar-left.hbs
+++ b/partials/site/sidebar-left.hbs
@@ -82,7 +82,7 @@
            <div class="sidebar-card__content sidebar-card__content--categories" x-cloak x-show="categoriesOpen">
                <ul class="category-grid grid sm:grid-cols-2 gap-x-2 gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5" data-category-priority-list 
                    data-category-priority-order="tech,business,health,science,design,travel,gaming,music,diy,photography,books" 
-                    data-category-priority-limit="11">
+                    data-category-priority-limit="10">
                    {{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
                        {{#foreach tags}}
                            <li data-category-priority-item data-category-slug="{{slug}}">
--- a/partials/site/sidebar-right.hbs
+++ b/partials/site/sidebar-right.hbs
@@ -130,7 +130,7 @@
        {{/is}}
        <span class="flex-1"></span>
        <footer class="px-5 sm:px-6 xl:pr-1">
-            <div class="py-3 flex flex-col items-start justify-start text-xs font-blod text-gray-800">
+            <div class="py-3 flex flex-col items-center justify-center text-[10px] font-bold text-gray-800">
                ©{{date format="YYYY"}} {{@site.title}}. All rights reserved.
            </div>
        </footer>