v0.1.25 포스트 카드 구조 정리

2026-04-14 11:10:24 +09:00
parent 21897b8fd3
commit b29685e959
9 changed files with 116 additions and 18 deletions
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
@@ -979,21 +979,40 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 }

 .post-card {
-    display: grid;
-    grid-template-columns: 112px minmax(0, 1fr);
-    gap: 18px;
+    position: relative;
+    display: flex;
+    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
-    align-items: start;
+    align-items: stretch;
+    overflow: hidden;
+}
+
+.post-card__media {
+    flex: 1 1 34%;
+    min-width: 84px;
+    max-width: 168px;
+}
+
+.post-card__figure {
+    display: block;
+    margin: 0;
+    overflow: hidden;
+    border-radius: 14px;
 }

 .post-card__media img,
 .post-card__media-fallback {
-    width: 112px;
-    height: 112px;
+    width: 100%;
+    aspect-ratio: 1 / 1;
    object-fit: cover;
-    border-radius: 14px;
    background: var(--surface-muted);
+    border-radius: inherit;
+    transition: opacity 0.22s ease;
+}
+
+.post-card__media:hover img {
+    opacity: 0.9;
 }

 .post-card__media-fallback {
@@ -1005,11 +1024,22 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
    text-align: center;
 }

+.post-card__content {
+    position: relative;
+    flex: 1 1 0%;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    justify-content: space-between;
+}
+
 .post-card__content h2 {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.32;
    letter-spacing: -0.015em;
+    max-width: calc(100% - 28px);
 }

 .post-card__content h2 a {
@@ -1018,6 +1048,10 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
    gap: 6px;
 }

+.post-card__content h2 a:hover {
+    opacity: 0.75;
+}
+
 .post-card__featured-icon {
    width: 14px;
    height: 14px;
@@ -1030,6 +1064,11 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.45;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    flex: 1 1 auto;
 }

 .post-card__meta {
@@ -1062,6 +1101,10 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
    gap: 4px;
 }

+.meta-item:hover {
+    color: var(--text);
+}
+
 .meta-divider {
    color: var(--border-strong);
    font-size: 12px;
@@ -1074,10 +1117,44 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
    color: var(--text-dim);
 }

+.meta-item__icon--image {
+    width: 14px;
+    height: 14px;
+    flex: 0 0 auto;
+    opacity: 0.8;
+}
+
 .meta-item--access {
    font-weight: 600;
 }

+.post-card__share {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    opacity: 0.72;
+    transition: opacity 0.22s ease;
+}
+
+.post-card__share:hover {
+    opacity: 1;
+}
+
+.post-card__share-icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+}
+
 .category-overview {
    display: grid;
 }
@@ -1712,13 +1789,18 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
    }

    .post-card {
-        grid-template-columns: 1fr;
+        flex-direction: column;
    }

    .post-card__media img,
    .post-card__media-fallback {
        width: 100%;
        height: 180px;
+        aspect-ratio: auto;
+    }
+
+    .post-card__media {
+        max-width: none;
    }

    .post-navigation {
--- a/assets/icons/chat_bubble.svg
+++ b/assets/icons/chat_bubble.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,7 +1,7 @@
 # 배포 가이드

 ## 현재 버전
- `v0.1.23`
+- `v0.1.25`

 ## Git 기본 설정
 - 저장소 작성자 정보는 아래 값으로 통일한다.
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,8 @@
 # 의사결정 이력

+## 2026-04-14 v0.1.25
+포스트 리스트 카드는 이전 단계에서 간격과 밀도만 먼저 끌어올렸지만, 사용자가 원하는 기준은 구조 자체가 원본에 더 가까운 형태였다. 그래서 이번에는 `post-items` 템플릿을 기준 삼아 마크업 레벨에서 `media / content / meta / share action` 흐름을 다시 맞추고, 댓글과 우측 액션 아이콘도 지정된 로컬 SVG 자산으로 통일했다.
+
 ## 2026-04-14 v0.1.24
 홈 메인 영역은 기존 단순 카드 레이아웃에서 벗어나 원본의 정보 밀도와 간격을 더 직접적으로 따르기로 했다. 다만 좌측 네비게이션과 마찬가지로 즉시 전환보다 현재 선호하는 부드러운 동작과 기존 Ghost 헬퍼 호환성을 유지해야 했기 때문에, 전체 구조를 새로 갈아엎기보다 `hero`, `tabbed-feed`, `post-items` partial 단위로 시각 표현만 단계적으로 끌어올리는 방향을 선택했다.

--- a/docs/map.md
+++ b/docs/map.md
@@ -1,7 +1,7 @@
 # 파일-화면 매핑 가이드

 ## 현재 버전
- `v0.1.24`
+- `v0.1.25`

 ## 공통 레이아웃
 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸과 공통 자산 로드
@@ -18,7 +18,7 @@
 - [index.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/index.hbs): 기본 목록 진입
 - [partials/home/hero.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/home/hero.hbs): 홈 히어로 영역
 - [partials/home/tabbed-feed.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/home/tabbed-feed.hbs): Latest/Featured/Updated/Categories 탭과 카테고리 개요 행
- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): 리스트형 포스트 카드, 메타 정보, 멤버 전용 표시
+- [partials/lists/post-items.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/lists/post-items.hbs): 리스트형 포스트 카드, 댓글 아이콘, 우측 공유 액션, 메타 정보

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

 ## 현재 버전
- `v0.1.24`
+- `v0.1.25`

 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -23,6 +23,7 @@
 - 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준
 - `tags-index.hbs`, `authors-index.hbs`는 `routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능
 - 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성
+- 리스트형 `post-card`는 썸네일, 본문 메타, 댓글 아이콘, 우측 액션 아이콘을 원본 카드 구조에 가깝게 재구성

 ## 주요 스타일 방향
 - 밝은 크림톤 배경 + 오렌지 포인트
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,11 @@
 # 업데이트 로그

+## v0.1.25 - 2026-04-14
+- 리스트형 `post-card` 마크업을 원본 구조 기준으로 재정리.
+- 댓글 아이콘을 `chat_bubble.svg`로 교체.
+- 우측 액션 아이콘을 `arrow_outward.svg`로 교체.
+- 포스트 카드 썸네일/메타/공유 버튼 스타일 수정.
+
 ## v0.1.24 - 2026-04-14
 - 좌측 네비게이션 마커 hover 형태를 카테고리 마커와 동일하게 수정.
 - 홈 히어로 문구 강조 및 구독 폼 레이아웃 재정리.
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ghost-theme-thred-clone",
-  "version": "0.1.24",
+  "version": "0.1.25",
  "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
@@ -3,7 +3,9 @@
        <article class="post-card{{#if featured}} is-featured{{/if}}">
            <a class="post-card__media" href="{{url}}">
                {{#if feature_image}}
-                    <img src="{{img_url feature_image size="s"}}" alt="{{title}}">
+                    <figure class="post-card__figure" role="none">
+                        <img src="{{img_url feature_image size="s"}}" alt="{{title}}">
+                    </figure>
                {{else}}
                    <span class="post-card__media-fallback">{{title}}</span>
                {{/if}}
@@ -22,7 +24,7 @@
                    <time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
                    {{#primary_author}}
                        <span class="meta-divider">/</span>
-                        <span class="meta-item">{{name}}</span>
+                        <a class="meta-item" href="{{url}}">{{name}}</a>
                    {{/primary_author}}
                    {{#primary_tag}}
                        <span class="meta-divider">/</span>
@@ -33,11 +35,14 @@
                        <span class="meta-item meta-item--access">Members</span>
                    {{/unless}}
                    <span class="meta-divider">/</span>
-                    <span class="meta-item meta-item--comments">
-                        <span class="meta-item__icon">◌</span>
+                    <a class="meta-item meta-item--comments" href="{{url}}#ghost-comments">
+                        <img class="meta-item__icon meta-item__icon--image" src="{{asset "icons/chat_bubble.svg"}}" alt="">
                        {{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}
-                    </span>
+                    </a>
                </div>
+                <button class="post-card__share" type="button" aria-label="Share this post">
+                    <img class="post-card__share-icon" src="{{asset "icons/arrow_outward.svg"}}" alt="">
+                </button>
            </div>
        </article>
    {{/foreach}}
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`