v0.1.18 카테고리 아코디언 동작 수정

2026-04-14 10:02:45 +09:00
parent 033ac60ac2
commit bc853049b5
7 changed files with 139 additions and 17 deletions
--- a/assets/built/theme.js
+++ b/assets/built/theme.js
@@ -48,14 +48,32 @@
        }
    }

-    document.querySelectorAll(".menu-group").forEach(function (section) {
+    function initializeAccordion(section, open) {
        var content = section.querySelector("[data-accordion-content]");
        if (!content) {
            return;
        }

+        section.classList.toggle("is-open", open);
        content.style.overflow = "hidden";
-        content.style.height = section.classList.contains("is-open") ? "auto" : "0px";
+        content.style.height = open ? "auto" : "0px";
+
+        var button = section.querySelector("[data-accordion]");
+        if (button) {
+            button.setAttribute("aria-expanded", open ? "true" : "false");
+        }
+    }
+
+    document.querySelectorAll("[data-accordion-content]").forEach(function (content) {
+        var section = content.parentElement;
+        if (!section) {
+            return;
+        }
+
+        var isCategorySection = section.hasAttribute("data-sidebar-categories");
+        var shouldOpen = isCategorySection ? window.innerWidth >= 1024 : section.classList.contains("is-open");
+
+        initializeAccordion(section, shouldOpen);
    });

    document.querySelectorAll("[data-accordion]").forEach(function (button) {
@@ -65,6 +83,14 @@
        });
    });

+    function syncResponsiveAccordions() {
+        document.querySelectorAll("[data-sidebar-categories]").forEach(function (section) {
+            syncAccordion(section, window.innerWidth >= 1024);
+        });
+    }
+
+    window.addEventListener("resize", syncResponsiveAccordions);
+
    var leftSidebarToggle = document.querySelector("[data-left-sidebar-toggle]");
    var leftSidebarBackdrop = document.querySelector("[data-left-sidebar-backdrop]");
    var tabletMedia = window.matchMedia("(max-width: 1023px)");
--- a/docs/history.md
+++ b/docs/history.md
@@ -0,0 +1,7 @@
+# 의사결정 이력
+
+## 2026-04-14 v0.1.18
+카테고리 접힘 동작은 Alpine.js를 추가하지 않고 기존 `theme.js`의 아코디언 로직으로 통일하기로 유지했다. 다만 기존 초기화가 `.menu-group`에만 한정되어 있어 카테고리 블록이 빠져 있었기 때문에, 아코디언 초기화 대상을 일반화하고 카테고리 블록에만 `1024px` 기준 반응형 기본 상태를 따로 적용하도록 정리했다.
+
+## 2026-04-13 v0.1.17
+Tailwind CSS를 한 번에 전면 전환하지 않고, 기존 Ghost 테마 구조와 수작업 CSS를 유지한 채 부분 도입하기로 결정했다. 현재 스타일 의존성이 큰 편이라 전면 교체는 레이아웃 붕괴 위험이 높기 때문에, 먼저 빌드 파이프라인만 추가하고 `topbar`처럼 영향 범위가 작은 영역부터 유틸리티 클래스를 병행 적용하는 방식이 가장 안전하다고 판단했다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -0,0 +1,32 @@
+# 파일-화면 매핑 가이드
+
+## 현재 버전
+- `v0.1.18`
+
+## 공통 레이아웃
+- [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸과 공통 자산 로드
+- [partials/site/sidebar-left.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/sidebar-left.hbs): 좌측 탐색/카테고리 아코디언/작성자/푸터
+- [partials/site/topbar.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/topbar.hbs): 상단 검색/CTA/다크모드
+- [partials/site/sidebar-right.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/sidebar-right.hbs): 구독/추천/작성자/푸터
+
+## 홈 및 목록
+- [home.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/home.hbs): 메인 홈
+- [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): 리스트형 포스트 카드
+
+## 상세 및 아카이브
+- [post.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/post.hbs): 포스트 상세
+- [page.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/page.hbs): 일반 페이지
+- [tag.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/tag.hbs): 태그 아카이브
+- [author.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/author.hbs): 작성자 아카이브
+- [partials/post/post-navigation.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/post/post-navigation.hbs): 이전/다음 글 이동
+
+## 자산
+- [assets/built/screen.css](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/assets/built/screen.css): 전체 스타일
+- [assets/built/tailwind.css](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/assets/built/tailwind.css): Tailwind 빌드 결과물
+- [assets/built/theme.js](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/assets/built/theme.js): 인터랙션 스크립트
+- [assets/styles/tailwind.css](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/assets/styles/tailwind.css): Tailwind 입력 파일
+- [tailwind.config.js](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/tailwind.config.js): Tailwind 스캔 경로 및 테마 설정
+- [package.json](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/package.json): Ghost 테마 메타데이터
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -0,0 +1,23 @@
+# 기술 명세
+
+## 현재 버전
+- `v0.1.18`
+
+## 테마 개요
+- Ghost `v5` 대응 커스텀 테마
+- 참고 사이트 `https://thred.brightthemes.com/` 기반의 3열 에디토리얼 레이아웃
+- 좌측 탐색, 중앙 콘텐츠, 우측 구독/추천/작성자 패널 구조
+
+## 구현 범위
+- `default.hbs` 기반 공통 셸
+- `home`, `index`, `tag`, `author`, `post`, `page` 템플릿
+- 검색 오버레이, 탭 전환, 다크모드 토글용 프런트 스크립트
+- Ghost `navigation`, `get`, `subscribe_form`, `comments`, `pagination` 헬퍼 사용
+- Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드
+- 좌측 카테고리 영역은 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
+
+## 주요 스타일 방향
+- 밝은 크림톤 배경 + 오렌지 포인트
+- 테두리 중심의 미니멀 편집형 UI
+- 데스크톱 3열, 태블릿 2열, 모바일 1열 반응형
+- Tailwind는 점진적으로 도입하고, 기존 구조 클래스와 병행 사용
--- a/docs/update.md
+++ b/docs/update.md
@@ -0,0 +1,26 @@
+# 업데이트 로그
+
+## v0.1.18 - 2026-04-14
+- 카테고리 아코디언 초기화 범위 수정.
+- 카테고리 영역 반응형 기본 열림 상태 추가.
+- `1024px` 기준 카테고리 자동 열림/닫힘 동기화 추가.
+
+## v0.1.17 - 2026-04-13
+- Tailwind CSS 빌드 파이프라인 추가.
+- `tailwind.css` 생성 및 공통 레이아웃 로드 추가.
+- `topbar` 영역에 Tailwind 유틸리티 부분 적용 시작.
+- 개발 실행 시 Tailwind 빌드 선행되도록 스크립트 정리.
+
+## v0.1.1 - 2026-04-13
+- 메인 3열 레이아웃 폭을 `240 / 720 / 320` 기준으로 재조정
+- 포스트 실측 콘텐츠 폭을 `680px` 중심으로 정리
+- `Pretendard` 웹폰트를 기본 폰트로 연결
+- 업로드 패키지에 폰트 자산 포함
+
+## v0.1.0 - 2026-04-13
+- Ghost 테마 기본 스캐폴드 추가
+- `default.hbs`와 공통 사이드바/탑바 partial 구성
+- 홈 히어로, 탭형 피드, 태그/작성자/포스트/페이지 템플릿 구현
+- `assets/built/screen.css`에 Thred 스타일 기반 3열 레이아웃 및 반응형 CSS 추가
+- `assets/built/theme.js`에 다크모드, 검색 오버레이, 탭 전환, 아코디언 토글 추가
+- `package.json`, `README.md` 추가
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ghost-theme-thred-clone",
-  "version": "0.1.17",
+  "version": "0.1.18",
  "private": true,
  "description": "A Ghost theme inspired by the Thred reference layout.",
  "keywords": [
--- a/partials/site/sidebar-left.hbs
+++ b/partials/site/sidebar-left.hbs
@@ -82,20 +82,28 @@
            </section>
        </nav>

-        <section class="sidebar-card">
-            <div class="sidebar-card__header">
-                <h2>Categories</h2>
-            </div>
-            <div class="category-grid">
-                {{#get "tags" limit="10" include="count.posts"}}
-                    {{#foreach tags}}
-                        <a class="category-chip" href="{{url}}"{{#if accent_color}} style="--tag-accent: {{accent_color}};"{{/if}}>
-                            <span class="category-chip__dot"></span>
-                            <span class="category-chip__label">{{name}}</span>
-                            <span class="category-chip__count">{{count.posts}}</span>
-                        </a>
-                    {{/foreach}}
-                {{/get}}
+        <section class="sidebar-card sidebar-card--categories sidebar-card--collapsible is-open" 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">
+                <span class="sidebar-card__eyebrow uppercase font-medium text-xs">Categories</span>
+                <span class="sidebar-card__chevron" aria-hidden="true">
+                    <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>
+                <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">
+                    {{#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}}>
+                                    <span class="category-chip__dot"></span>
+                                    <span class="category-chip__label flex-1 text-ellipsis">{{name}}</span>
+                                    <span class="category-chip__count text-xs font-medium">{{count.posts}}</span>
+                                </a>
+                            </li>
+                        {{/foreach}}
+                    {{/get}}
+                </ul>
            </div>
        </section>