v0.1.28 포스트 상세 헤더 정리

assets/styles/tailwind.css

@@ -60,6 +60,10 @@
         min-width: 4rem;
     }
 
+    .max-w-content {
+        max-width: var(--content-header);
+    }
+
     .line-clamp-1 {
         overflow: hidden;
         text-overflow: ellipsis;

docs/deploy.md

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

docs/history.md

@@ -1,5 +1,11 @@
 # 의사결정 이력
 
+## 2026-04-14 v0.1.28
+포스트 상세 화면은 기존 `post-header`, `post-meta` CSS 구조를 유지한 채 부분 수정하는 것보다, 홈 카드와 같은 기준으로 Tailwind 마크업 쪽으로 맞추는 편이 원본 화면에 더 가깝다고 판단했다. 또한 원본 상세 화면에는 제목 위 별도 태그 라벨이 없기 때문에, 메타 영역 태그만 남기고 상단 중복 태그는 제거했다.
+
+## 2026-04-14 v0.1.27
+포스트 카드의 큰 구조를 Tailwind 기준으로 되돌린 뒤에도, 실제 사용 화면에서는 구분선과 콘텐츠 폭 제약처럼 아주 기본적인 레이아웃 안정화가 먼저 필요했다. 그래서 이번 단계에서는 새 해석을 추가하지 않고, 사용자가 준 구조를 유지한 채 `border-b`, `min-w-0`, `items-start`처럼 레이아웃 안정성에 직접 연결되는 속성만 최소 보정했다.
+
 ## 2026-04-14 v0.1.26
 포스트 카드 영역은 원본 구조를 닮게 보이도록 CSS로 따로 해석하는 방식보다, 사용자가 준 Tailwind 마크업 흐름을 직접 반영하는 편이 맞다고 다시 정리했다. 그래서 카드 관련 커스텀 구조를 최소화하고, 부족한 유틸리티만 Tailwind 입력 파일에 보강하는 방향으로 수정했다.
 

docs/map.md

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

docs/spec.md

@@ -1,7 +1,7 @@
 # 기술 명세
 
 ## 현재 버전
-- `v0.1.26`
+- `v0.1.28`
 
 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -24,6 +24,8 @@
 - `tags-index.hbs`, `authors-index.hbs`는 `routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능
 - 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성
 - 리스트형 `post-card`는 Tailwind 유틸리티 중심 마크업으로 구성되며, 썸네일은 `aspect-square sm:aspect-video` 비율을 사용
+- 각 카드 항목은 `border-b border-brd` 구분선을 유지하고, 콘텐츠 래퍼는 `min-w-0` 기준으로 줄바꿈 폭을 제어
+- 포스트 상세 헤더는 제목, 메타, 공유 버튼, 대표 이미지를 Tailwind 유틸리티 중심 마크업으로 구성하고 상단 단일 태그 라벨은 표시하지 않음
 
 ## 주요 스타일 방향
 - 밝은 크림톤 배경 + 오렌지 포인트

docs/update.md

@@ -1,5 +1,16 @@
 # 업데이트 로그
 
+## v0.1.28 - 2026-04-14
+- 포스트 상세 헤더를 Tailwind 기준 마크업으로 재정리.
+- 포스트 상단 중복 태그 표시 제거.
+- 포스트 메타 행, 댓글 아이콘, 우측 공유 아이콘 위치 수정.
+- 대표 이미지 비율과 상단 간격을 원본 기준으로 보정.
+
+## v0.1.27 - 2026-04-14
+- 리스트형 `post-card` 항목 구분선 복구.
+- 카드 콘텐츠 영역 `min-w-0` 적용으로 제목/본문 줄바꿈 폭 보정.
+- 카드 정렬을 `items-start` 기준으로 재정리.
+
 ## v0.1.26 - 2026-04-14
 - 리스트형 `post-card`를 Tailwind 기준 마크업으로 재구성.
 - 썸네일 비율을 `aspect-square sm:aspect-video` 기준으로 수정.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ghost-theme-thred-clone",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ghost-theme-thred-clone",
-      "version": "0.1.26",
+      "version": "0.1.28",
       "devDependencies": {
         "alpinejs": "^3.14.9",
         "tailwindcss": "^3.4.17"

package.json

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

partials/lists/post-items.hbs

@@ -1,6 +1,6 @@
 <div class="post-list home-post-list">
     {{#foreach posts}}
-        <article class="post {{post_class}} relative flex flex-row gap-3 text-typ py-4 group overflow-hidden" data-post-card{{#if featured}} data-featured{{/if}}>
+        <article class="post {{post_class}} relative flex flex-row items-start gap-3 text-typ py-4 group overflow-hidden border-b border-brd" data-post-card{{#if featured}} data-featured{{/if}}>
             <a href="{{url}}" data-post-card-media class="flex-1 relative group aspect-square sm:aspect-video min-w-16">
                 {{#if feature_image}}
                     <figure class="block rounded-theme overflow-hidden" role="none">
@@ -10,7 +10,7 @@
                     <span class="block w-full aspect-square sm:aspect-video rounded-theme bg-bgr-tone text-typ-tone text-xs text-center p-4">{{title}}</span>
                 {{/if}}
             </a>
-            <div class="relative flex-[3] md:flex-[4] flex flex-col gap-1.5 justify-between" data-post-card-content>
+            <div class="relative min-w-0 flex-[3] md:flex-[4] flex flex-col gap-1.5 justify-between" 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}}

post.hbs

@@ -3,40 +3,55 @@
 {{#post}}
 <main class="content-area content-area--post">
     <article class="post-article {{post_class}}">
-        <header class="post-header">
+        <section class="px-4 sm:px-5 mt-6 mb-8">
-            <div class="post-header__inner">
+            <div class="max-w-content mx-auto flex flex-col gap-2.5">
-                {{#if primary_tag}}
+                <h1 class="font-semibold text-xl sm:text-2xl leading-[1.125]">{{title}}</h1>
-                    <a class="post-tag" href="{{primary_tag.url}}"{{#if primary_tag.accent_color}} style="--tag-accent: {{primary_tag.accent_color}};"{{/if}}>{{primary_tag.name}}</a>
+
-                {{/if}}
+                <div class="relative border-b border-brd pb-4">
-                <h1 class="post-title">{{title}}</h1>
+                    <div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone" data-post-card-info>
-                <div class="post-meta">
+                        <time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
-                    <time class="meta-item" datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D, YYYY"}}</time>
+                        {{#primary_author}}
-                    {{#primary_author}}
+                            <span class="opacity-70">/</span>
-                        <span class="meta-divider">/</span>
+                            <a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
-                        <span class="meta-item">{{name}}</span>
+                        {{/primary_author}}
-                    {{/primary_author}}
+                        {{#if primary_tag}}
-                    {{#if primary_tag}}
+                            <span class="opacity-70">/</span>
-                        <span class="meta-divider">/</span>
+                            <ul class="flex flex-wrap items-center font-medium" data-post-card-tags>
-                        <a class="meta-pill" href="{{primary_tag.url}}"{{#if primary_tag.accent_color}} style="--tag-accent: {{primary_tag.accent_color}};"{{/if}}>{{primary_tag.name}}</a>
+                                <li{{#if primary_tag.accent_color}} style="--color-accent: {{primary_tag.accent_color}};"{{/if}}>
-                    {{/if}}
+                                    <a href="{{primary_tag.url}}" class="bg-accent/10 px-1.5 py-px rounded-sm text-typ hover:bg-accent/5 hover:text-accent">{{primary_tag.name}}</a>
-                    <span class="meta-divider">/</span>
+                                </li>
-                    <span class="meta-item">{{reading_time}}</span>
+                            </ul>
+                        {{/if}}
+                        {{#if comments}}
+                            <span class="opacity-70">/</span>
+                            <a data-post-card-comments class="flex gap-0.5 items-center hover:opacity-75" href="#comments">
+                                <img class="size-3.5 -mt-px pointer-events-none" src="{{asset "icons/chat_bubble.svg"}}" alt="">
+                                <span class="pointer-events-none">{{comment_count empty="0" singular="" plural="" autowrap="false"}}</span>
+                            </a>
+                        {{/if}}
+                    </div>
+
+                    <button data-post-share-toggle class="absolute bottom-4 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer" type="button" aria-label="Share this post">
+                        <img class="size-4 pointer-events-none" src="{{asset "icons/arrow_outward.svg"}}" alt="">
+                    </button>
                 </div>
+
+                {{#if feature_image}}
+                    <figure class="w-full h-full relative max-w-content mt-2.5">
+                        <img
+                            class="w-full object-cover rounded-theme aspect-[16/9] bg-bgr-tone"
+                            srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w, {{img_url feature_image size="l"}} 1000w"
+                            sizes="(max-width: 767px) 90vw, 720px"
+                            src="{{img_url feature_image size="l"}}"
+                            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                        >
+                    </figure>
+                {{/if}}
             </div>
-            {{#if feature_image}}
+        </section>
-                <figure class="post-feature-image">
-                    <img
-                        srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w, {{img_url feature_image size="l"}} 1000w"
-                        sizes="(max-width: 900px) 100vw, 760px"
-                        src="{{img_url feature_image size="l"}}"
-                        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
-                    >
-                </figure>
-            {{/if}}
-        </header>
 
         <div class="post-body">
-            <section class="post-content kg-content">
+            <section class="post-content kg-content ghost-content prose prose-theme">
                 {{content}}
             </section>