v0.1.21 카테고리 Alpine 및 업로드 정리

assets/built/screen.css

@@ -353,6 +353,27 @@ body.left-sidebar-collapsed .sidebar--left {
     line-height: 1;
 }
 
+.sidebar-card--categories {
+    padding-top: 0;
+    border-top: 0;
+}
+
+.sidebar-card--categories .sidebar-card__trigger {
+    width: 100%;
+    padding-left: 0;
+    background: transparent;
+    border: 0;
+    color: inherit;
+}
+
+.sidebar-card--categories .sidebar-card__chevron {
+    transition: transform 0.2s ease;
+}
+
+.sidebar-card--categories .sidebar-card__content--categories {
+    padding: 0;
+}
+
 .category-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -427,6 +448,33 @@ body.left-sidebar-collapsed .sidebar--left {
     border-radius: 999px;
 }
 
+.sidebar-card--categories .category-chip {
+    font-size: 12.8px;
+    font-weight: 500;
+    letter-spacing: 0;
+}
+
+.sidebar-card--categories .category-chip:hover {
+    transform: none;
+}
+
+.sidebar-card--categories .category-chip__dot {
+    position: static;
+    flex: 0 0 auto;
+}
+
+.sidebar-card--categories .category-chip__dot::before {
+    content: none;
+}
+
+.sidebar-card--categories .category-chip__label {
+    font-size: inherit;
+}
+
+.sidebar-card--categories .category-chip__count {
+    min-width: auto;
+}
+
 .author-list {
     display: grid;
     gap: 10px;

assets/styles/tailwind.css

@@ -1,2 +1,42 @@
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+    [x-cloak] {
+        display: none !important;
+    }
+
+    .rounded-theme {
+        border-radius: 18px;
+    }
+
+    .border-brd {
+        border-color: var(--border);
+    }
+
+    .bg-bgr-tone {
+        background-color: var(--surface-muted);
+    }
+
+    .text-typ {
+        color: var(--text);
+    }
+
+    .text-typ-tone {
+        color: var(--text-soft);
+    }
+
+    .bg-accent {
+        background: var(--color-accent);
+    }
+
+    .gap-0\.75 {
+        gap: 0.1875rem;
+    }
+
+    .line-clamp-1 {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

docs/deploy.md

@@ -1,7 +1,7 @@
 # 배포 가이드
 
 ## 현재 버전
-- `v0.1.20`
+- `v0.1.21`
 
 ## Git 기본 설정
 - 저장소 작성자 정보는 아래 값으로 통일한다.
@@ -53,7 +53,7 @@ npm run build:tailwind
 
 - `npm run dev`, `npm run dev:ghost:start`, `npm run dev:ghost:restart` 실행 시 Alpine.js와 Tailwind 빌드가 먼저 수행된다.
 - Alpine 결과물은 `assets/built/alpine.js`에 생성된다.
-- Tailwind 결과물은 `assets/built/tailwind.css`에 생성되고, Ghost 테마에서 `screen.css`보다 먼저 로드된다.
+- Tailwind 결과물은 `assets/built/tailwind.css`에 생성되고, Ghost 테마에서 `screen.css` 다음에 로드된다.
 
 ## 로컬 빌드 검증
 ```bash

docs/history.md

@@ -1,5 +1,8 @@
 # 의사결정 이력
 
+## 2026-04-14 v0.1.21
+카테고리 영역은 기존 JS 아코디언 대신 Alpine.js 문법으로 다시 맞췄다. 원본 테마 코드를 더 직접적으로 참조하는 요구가 생겼고, Tailwind 유틸리티와 Alpine 상태 표현을 함께 쓰는 편이 spacing과 hover 동작을 더 가깝게 재현하기 쉬웠기 때문이다. 또한 Ghost 경고에 맞춰 `limit="all"` 대신 `limit="100"`으로 조정했다.
+
 ## 2026-04-14 v0.1.20
 앞으로 원본 테마 섹션 코드를 더 직접적으로 참고할 수 있도록 Alpine.js를 로컬 자산으로 포함하기로 했다. 외부 CDN 의존 대신 테마 빌드 단계에서 `assets/built/alpine.js`를 생성해 함께 배포하고, 기존 `theme.js`는 즉시 제거하지 않고 공존시키면서 점진적으로 Alpine 문법을 허용하는 방향으로 정리했다.
 

docs/map.md

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

docs/spec.md

@@ -1,7 +1,7 @@
 # 기술 명세
 
 ## 현재 버전
-- `v0.1.20`
+- `v0.1.21`
 
 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -15,9 +15,10 @@
 - Ghost `navigation`, `get`, `subscribe_form`, `comments`, `pagination` 헬퍼 사용
 - Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드
 - Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드
-- 좌측 카테고리 영역은 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
+- 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
 - `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용
 - `page-tags.hbs`, `page-authors.hbs`는 각각 `slug=tags`, `slug=authors` 페이지에 연결 가능
+- 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준
 
 ## 주요 스타일 방향
 - 밝은 크림톤 배경 + 오렌지 포인트

docs/update.md

@@ -1,5 +1,12 @@
 # 업데이트 로그
 
+## v0.1.21 - 2026-04-14
+- 카테고리 영역 Alpine.js 기반으로 재구성.
+- 원본 기준 카테고리 패딩 및 hover 표현 재정리.
+- Tailwind 커스텀 유틸리티 추가.
+- `page-tags.hbs`, `page-authors.hbs` `limit="100"`으로 수정.
+- 업로드 zip 제외 패턴 정리.
+
 ## v0.1.20 - 2026-04-14
 - `Tags`, `Authors` 좌측 메뉴 직접 링크형으로 변경.
 - `page-tags.hbs`, `page-authors.hbs` 추가.

package.json

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

page-authors.hbs

@@ -12,7 +12,7 @@
             {{/if}}
         </header>
 
-        {{#get "authors" limit="all" include="count.posts"}}
+        {{#get "authors" limit="100" include="count.posts"}}
             <div class="author-directory grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                 {{#foreach authors}}
                     <a class="author-directory__card group 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}}">

page-tags.hbs

@@ -12,7 +12,7 @@
             {{/if}}
         </header>
 
-        {{#get "tags" limit="all" include="count.posts" order="count.posts desc"}}
+        {{#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}}>

partials/site/sidebar-left.hbs

@@ -56,23 +56,22 @@
             </section>
         </nav>
 
-        <section class="sidebar-card sidebar-card--categories sidebar-card--collapsible is-open" data-sidebar-categories>
+        <section class="sidebar-card sidebar-card--categories border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ categoriesOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { categoriesOpen = window.innerWidth >= 1024 })" data-sidebar-categories>
-            <button class="sidebar-card__trigger px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex items-center gap-1 justify-between cursor-pointer hover:opacity-75" type="button" data-accordion aria-expanded="true">
+            <button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="categoriesOpen = !categoriesOpen" :aria-expanded="categoriesOpen.toString()">
                 <span class="sidebar-card__eyebrow uppercase font-medium text-xs">Categories</span>
-                <span class="sidebar-card__chevron" aria-hidden="true">
+                <span class="sidebar-card__chevron" aria-hidden="true" :class="categoriesOpen ? 'rotate-180' : ''">
                     <img class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
-                    <img class="sidebar-card__chevron-icon sidebar-card__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
                 </span>
             </button>
-            <div class="sidebar-card__content sidebar-card__content--categories" data-accordion-content>
+            <div class="sidebar-card__content sidebar-card__content--categories" x-cloak x-show="categoriesOpen">
-                <ul class="category-grid px-5 sm:px-6 xl:pl-0 pr-3 sm:pr-3 mt-1 -mb-1.5 grid sm:grid-cols-2 gap-x-2 gap-y-0.5 text-[0.8rem] font-medium">
+                <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">
                     {{#get "tags" limit="10" include="count.posts"}}
                         {{#foreach tags}}
                             <li>
-                                <a class="category-chip group flex items-center gap-2 leading-tight pl-0 pr-3 py-2 rounded-[18px] hover:px-3 transition-[padding,background-color,color]" href="{{url}}" aria-label="{{name}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
+                                <a class="category-chip group flex items-center gap-2 leading-tight pl-0 pr-3 py-2 rounded-theme hover:bg-bgr-tone hover:px-3 hover:text-typ transition-[padding]" href="{{url}}" aria-label="{{name}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
-                                    <span class="category-chip__dot"></span>
+                                    <span class="category-chip__dot w-1 h-4 bg-accent rounded-sm rounded-l-none group-hover:size-2 group-hover:rounded-full transition-all"></span>
-                                    <span class="category-chip__label flex-1 text-ellipsis">{{name}}</span>
+                                    <span class="category-chip__label flex-1 line-clamp-1 text-ellipsis">{{name}}</span>
-                                    <span class="category-chip__count text-xs font-medium">{{count.posts}}</span>
+                                    <span class="category-chip__count text-xs opacity-0 invisible group-hover:opacity-100 group-hover:visible font-medium">{{count.posts}}</span>
                                 </a>
                             </li>
                         {{/foreach}}

tailwind.config.js

@@ -4,11 +4,19 @@ module.exports = {
         "./partials/**/*.hbs",
         "./assets/built/theme.js"
     ],
+    safelist: [
+        "rotate-180"
+    ],
     theme: {
         extend: {
             colors: {
                 brand: "#ff4400",
-                "brand-strong": "#e13b00"
+                "brand-strong": "#e13b00",
+                accent: "var(--color-accent)",
+                brd: "var(--border)",
+                typ: "var(--text)",
+                "typ-tone": "var(--text-soft)",
+                "bgr-tone": "var(--surface-muted)"
             }
         }
     },