테마: v0.2.8 및 상단 사용자 메뉴·검색·히어로·사이드바 누적 보정

Made-with: Cursor

docs/deploy.md

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

docs/map.md

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

docs/spec.md

@@ -1,7 +1,7 @@
 # 기술 명세
 
 ## 현재 버전
-- `v0.2.7`
+- `v0.2.8`
 
 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -13,7 +13,11 @@
 - `home`, `index`, `tag`, `author`, `post`, `page` 템플릿
 - 검색 오버레이, 탭 전환, 다크모드 토글용 프런트 스크립트
 - Ghost `navigation`, `get`, `subscribe_form`, `comments`, `pagination` 헬퍼 사용
+- `@site.accent_color`가 설정된 경우 `default.hbs`의 body 인라인 변수로 전역 `--accent`/`--accent-strong`를 덮어써 테마 포인트 색상을 동기화함
+- `topbar` 브랜드는 `@site.logo`를 우선 렌더링하고, 로고 미설정 시 `@site.title` 텍스트를 fallback으로 사용함
+- `home` Hero는 `@site.cover_image`가 있을 때 배경 이미지로 적용하며 오버레이와 텍스트 대비를 함께 조정함
 - 좌측 사이드바 `menu-groups`: Primary는 `Home pages` 아코디언 안에 `{{navigation}}`, Secondary(관리자에 항목이 있을 때만)는 그 아래 `More links` 아코디언 안에 `{{navigation type="secondary"}}`로 동일 마크업(`ul.nav`)을 노출함
+- 상단 사용자 메뉴는 멤버 로그인 시에만 드롭다운 상단에 이름/아바타 행을 노출하며, 서버 렌더링 값으로 초기 표시한 뒤 `/members/api/member/` 재조회로 실시간 동기화하고 아바타 미등록 시 fallback 문자(이름/이메일 첫 글자)를 사용함. 비로그인 시 해당 행은 렌더하지 않음
 - Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드
 - Tailwind 기본 초기화(`preflight`)를 활성화해 브라우저 기본 마진과 폼 스타일을 리셋
 - Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드
@@ -23,6 +27,12 @@
 - 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
 - 좌측 카테고리 목록은 `data-category-priority-order`에 지정한 태그 slug를 우선순위로 먼저 배치하고, 나머지는 `count.posts desc` 기본 순서를 유지한 뒤 제한 개수만 노출함
 - 좌측 네비게이션 마커와 카테고리 마커는 동일한 세로 바 → 원형 hover 패턴 사용
+- 상단 사용자 버튼/메뉴 아바타는 로그인 멤버일 때 댓글 UI와 유사한 형태(이니셜 배경 + 이미지 오버레이)로 표시하며, 이니셜과 배경색은 멤버 이름/이메일 기반으로 동기화함. 비로그인 상태는 `icon-user-circle` 아이콘을 사용함
+- 로그인 상태 사용자 버튼/메뉴 아바타의 배경색은 투명으로 유지하며, 비로그인 상태 아이콘은 32px 버튼 영역에 맞는 크기로 렌더링함
+- 상단 사용자 메뉴의 멤버 동기화는 `/members/api/member/` 재조회(`cache: no-store`)로 수행하며 `member`/`members[0]` 응답 형태를 모두 처리함
+- 검색 모달은 `partials/site/topbar.hbs`의 `data-search-source`(posts/tags/authors) 데이터를 사용하고, 결과를 `Authors`, `Tags`, `Posts` 섹션으로 분리해 렌더링함
+- 검색 모달 입력 왼쪽 `X` 버튼은 입력값 초기화 용도이며, 모달 닫기는 배경 클릭/ESC로 처리함
+- 검색 모달 입력의 브라우저 기본 우측 cancel 버튼은 숨김 처리하고, `search-result__excerpt`는 한 줄 말줄임으로 고정함
 - 전역 `ol`, `ul`, `menu` 기본 패딩과 리스트 스타일 리셋 적용
 - `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용
 - `page-tags.hbs`는 `slug=tags` 페이지에 연결 가능
@@ -30,6 +40,8 @@
 - `tags-index.hbs`는 Ghost `routes.yaml` 커스텀 라우트로 `/tags/`에 연결됨
 - 로컬 개발 환경의 실제 라우트 설정은 `.docker/ghost/content/settings/routes.yaml`을 기준으로 사용함
 - 홈 메인 피드는 히어로, Featured 수평 슬라이드, Latest 리스트 구성을 사용함
+- 홈 Hero는 `@site.cover_image`가 있을 때만 커버 이미지 영역으로 노출하며, 텍스트/구독 폼은 렌더링하지 않음
+- 홈 Hero 커버는 이미지 로딩 완료 전까지 스켈레톤(shimmer) 애니메이션을 표시하고, 로드 후 실제 이미지로 페이드 전환함
 - 홈 Latest 블록 아래에는 `home-categories` partial로 태그별 섹션을 두며, 좌측 사이드바와 동일한 `data-category-priority-order`·`data-category-priority-limit`(10)로 정렬·개수 제한 후 태그당 최신 글 최대 5개를 번호 링크로만 표시함. 세로 액센트는 태그 `accent_color`를 `--color-accent`에 넣고 `assets/styles/tailwind.css`의 `.home-categories__row`에서 `border-left: 3px solid var(--color-accent)`로 표시한다(미설정 시 중립색). 설명이 없으면 빈 칸으로 두며, 좌·우 열은 `minmax(0,2fr)`/`minmax(0,3fr)` 그리드로 고정한다
 - 태그·작성자 아카이브(`tag.hbs`, `author.hbs`)는 홈과 동일한 `post-feed`를 쓰지 않고, `post-feed-archive`로 글 목록과 페이지네이션만 노출함
 - 우측 사이드바 `Recommended` 섹션은 Ghost `recommendations` 데이터를 우선 사용하며, 항목별 외부 링크와 favicon 표시를 지원함

docs/update.md

@@ -1,8 +1,34 @@
 # 업데이트 로그
 
+## v0.2.8 - 2026-04-17
+- `package.json` 버전을 `0.2.8`로 증가.
+- `partials/site/topbar.hbs`: 비로그인 시 사용자 드롭다운 상단 프로필 행(아바타·이름)을 렌더하지 않도록 `{{#if @member}}`로 분리.
+- `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.8`로 동기화.
+
 ## v0.2.7 - 2026-04-17
 - `package.json` 버전을 `0.2.7`로 증가.
 - `partials/site/sidebar-left.hbs`: `@site.secondary_navigation`이 있을 때 `Home pages` 아래에 `More links` 아코디언 그룹을 추가하고 `{{navigation type="secondary"}}`로 Secondary 링크를 노출.
+- `partials/home/hero.hbs`: 로그인 멤버(`@member`)일 때 홈 Hero 구독 폼을 숨기도록 조건 처리.
+- `partials/site/topbar.hbs`: 멤버 아바타 미등록 시 사용자 아이콘(`icon-user-circle`)을 노출하고, Gravatar 외부 링크를 제거.
+- `partials/site/topbar.hbs`: 이름 비어있을 때 기본 이름(`Member`)을 표시하도록 보정.
+- `assets/built/theme.js`: 사용자 메뉴 오픈/포털 진입/포커스 복귀 시 `/members/api/member/`를 `no-store`로 재조회하고 `member`/`members[0]` 응답을 모두 처리해 닉네임 변경이 새로고침 없이 반영되도록 보정.
+- `partials/site/topbar.hbs`: 검색 모달 전용 데이터 소스(`data-search-source`)를 추가해 포스트/태그/작성자 전체 목록을 검색 대상으로 통합.
+- `assets/built/theme.js`: 검색 로직을 섹션형 결과(`Authors`, `Tags`, `Posts`) 렌더링으로 교체하고 포스트 제목/요약 검색을 지원.
+- `assets/built/screen.css`: 검색 모달 레이아웃을 단일 패널 구조로 정리하고 섹션/아이템 스타일을 추가.
+- `partials/site/topbar.hbs`, `assets/built/theme.js`: 검색창 좌측 `X` 버튼을 모달 닫기 대신 입력 초기화 동작으로 변경.
+- `assets/built/screen.css`: 검색 input의 기본 우측 cancel(`::-webkit-search-cancel-button`)을 숨김 처리.
+- `assets/built/screen.css`: `search-result__excerpt`를 한 줄 말줄임(`text-overflow: ellipsis`)으로 변경.
+- `partials/site/topbar.hbs`: 로그인 여부와 무관하게 사용자 버튼/메뉴 아바타를 `icon-user-circle` 아이콘으로 고정하고 `@member.avatar_image` 렌더링 분기를 제거.
+- `default.hbs`: `@site.accent_color`가 있으면 `--accent`, `--accent-strong` CSS 변수를 런타임으로 덮어쓰도록 적용.
+- `partials/site/topbar.hbs`: `@site.logo`가 있을 때 헤더 브랜드에 로고 이미지를 우선 표시하고, 없으면 사이트 제목 텍스트를 표시.
+- `partials/home/hero.hbs`: `@site.cover_image`가 있을 때 홈 Hero 배경으로 커버 이미지를 적용하고 텍스트 대비를 보정.
+- `partials/site/topbar.hbs`, `assets/built/theme.js`: 로그인 멤버 아바타를 댓글 UI와 유사한 형태(이니셜 배경 + 이미지 오버레이)로 표시하고, 이름/이메일 기반 초기문자·배경색을 동기화.
+- `partials/site/topbar.hbs`, `assets/built/theme.js`: 멤버 아바타 초기문자를 템플릿 시드(`@member.name` 또는 `@member.email`)로 먼저 렌더해 `M` 고정 표시가 남지 않도록 보정.
+- `partials/home/hero.hbs`: 홈 Hero를 커버 전용 영역으로 정리해 `@site.cover_image`가 있을 때만 렌더링하고, 하드코딩 텍스트/구독 폼을 제거.
+- `partials/home/hero.hbs`, `assets/built/screen.css`, `assets/built/theme.js`: 홈 Hero 커버 이미지 로딩 중 그라데이션 대신 스켈레톤(shimmer) 애니메이션을 표시하고, 이미지 로드 완료 시 페이드 전환되도록 처리.
+- `partials/site/topbar.hbs`, `assets/built/theme.js`: 로그인 상태 사용자 버튼/팝업 아바타 뒤 배경색을 제거(transparent)하고, 비로그인 사용자 아이콘 크기를 버튼/팝업 영역에 맞게 조정.
+- `partials/site/topbar.hbs`: 비로그인 사용자 아이콘의 내부 `svg`를 부모 크기(`size-*`)에 맞춰 렌더링하도록 보정해 24px 고정으로 작게 보이던 문제를 수정.
+- `partials/site/topbar.hbs`: 비로그인 사용자 아이콘 크기 규칙을 `w/h-full + svg 62%` 고정 비율로 통일해 팝업 아바타 영역(32/40px)에서 위치·크기 불균형이 생기지 않도록 조정.
 - `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.7`로 동기화.
 - `docs/history.md`에 Secondary 네비 사이드바 노출(`v0.2.7`) 기록.