헤더: 검색 트리거 최소 폭 및 브랜드 말줄임 (v0.2.10)

Made-with: Cursor
2026-04-17 13:57:17 +09:00
parent a08d053742
commit 93ce051343
8 changed files with 48 additions and 16 deletions
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
@@ -22,6 +22,7 @@
    --content-header: 720px;
    --topbar-height: 62px;
    --shell-width: calc(var(--sidebar-left) + var(--content-column) + var(--sidebar-right));
+    --topbar-search-min: 260px;
    --font-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
 }

@@ -222,6 +223,14 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {

 .brand--topbar {
    margin-bottom: 0;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.brand--topbar .brand__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

 .menu-groups {
@@ -656,7 +665,7 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {

 .topbar__inner {
    display: grid;
-    grid-template-columns: var(--sidebar-left) minmax(0, var(--content-column)) var(--sidebar-right);
+    grid-template-columns: var(--sidebar-left) minmax(var(--topbar-search-min), min(var(--content-column), 1fr)) var(--sidebar-right);
    gap: 0;
    align-items: center;
    height: 100%;
@@ -665,7 +674,6 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
 }

 .topbar__brand,
-.topbar__search,
 .topbar__actions {
    min-width: 0;
 }
@@ -676,6 +684,7 @@ body.left-sidebar-collapsed .sidebar--left .sidebar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
+    overflow: hidden;
 }

 .topbar__sidebar-toggle {
@@ -745,6 +754,8 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
    padding: 0 18px;
    height: 100%;
    align-items: center;
+    min-width: 0;
+    box-sizing: border-box;
 }

 .search-trigger,
@@ -753,16 +764,28 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar
    align-items: center;
    gap: 10px;
    width: min(100%, 320px);
+    max-width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text-soft);
+    box-sizing: border-box;
 }

 .search-trigger {
+    min-width: min(var(--topbar-search-min), 100%);
    cursor: pointer;
    box-shadow: none;
 }

+.search-trigger__label {
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: start;
+}
+
 .search-trigger__icon {
    width: 16px;
    height: 16px;
@@ -771,6 +794,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle:hover .topbar__sidebar

 .search-shortcut {
    margin-left: auto;
+    flex-shrink: 0;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
--- a/assets/built/tailwind.css
+++ b/assets/built/tailwind.css
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,7 +1,7 @@
 # 배포 가이드

 ## 현재 버전
- `v0.2.9`
+- `v0.2.10`

 ## Git 기본 설정
 - 저장소 작성자 정보는 아래 값으로 통일한다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -1,14 +1,14 @@
 # 파일-화면 매핑 가이드

 ## 현재 버전
- `v0.2.9`
+- `v0.2.10`

 ## 공통 레이아웃
 - [default.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/default.hbs): 전체 3열 셸, 1296px 공통 폭 계산, 공통 자산 로드
 - [partials/site/sidebar-left.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/sidebar-left.hbs): 좌측 탐색(Primary `{{navigation}}`, Secondary `{{navigation type="secondary"}}`·`@site.secondary_navigation` 있을 때만)/Tags/카테고리 아코디언/푸터
 - [page-tags.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/page-tags.hbs): `slug=tags` 페이지용 태그 디렉터리
 - [tags-index.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/tags-index.hbs): `/tags/` 커스텀 라우트용 태그 디렉터리
- [partials/site/topbar.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/topbar.hbs): 상단 3열 헤더, 중앙 검색, 좌측 사이드바 토글
+- [partials/site/topbar.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/topbar.hbs): 상단 3열 헤더, 중앙 검색(최소 폭·라벨 말줄임), 좌측 사이드바 토글
 - [partials/site/sidebar-right.hbs](/Users/bicute/Desktop/UGREEN/GHOST%20THEME/partials/site/sidebar-right.hbs): 우측 287px 사이드바, Ghost Recommendations 기반 추천 링크/구독/푸터 구성

 ## 홈 및 목록
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -1,7 +1,7 @@
 # 기술 명세

 ## 현재 버전
- `v0.2.9`
+- `v0.2.10`

 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -15,6 +15,7 @@
 - Ghost `navigation`, `get`, `subscribe_form`, `comments`, `pagination` 헬퍼 사용
 - `@site.accent_color`가 설정된 경우 `default.hbs`의 body 인라인 변수로 전역 `--accent`/`--accent-strong`를 덮어써 테마 포인트 색상을 동기화함
 - `topbar` 브랜드는 `@site.logo`를 우선 렌더링하고, 로고 미설정 시 `@site.title` 텍스트를 fallback으로 사용함
+- 데스크톱 `topbar__inner` 3열 그리드에서 검색 열은 `--topbar-search-min`(260px) 이상을 유지하고, 검색 트리거는 `min-width: min(--topbar-search-min, 100%)`·라벨 말줄임·단축키 비축소로 좁은 폭에서도 레이아웃이 깨지지 않도록 함. 브랜드 영역은 긴 제목 시 말줄임 처리
 - `home` Hero는 `@site.cover_image`가 있을 때 배경 이미지로 적용하며 오버레이와 텍스트 대비를 함께 조정함
 - 좌측 사이드바 `menu-groups`: Primary는 `Home pages` 아코디언 안에 `{{navigation}}`, Secondary(관리자에 항목이 있을 때만)는 그 아래 `More links` 아코디언 안에 `{{navigation type="secondary"}}`로 동일 마크업(`ul.nav`)을 노출함
 - 상단 사용자 메뉴는 멤버 로그인 시에만 드롭다운 상단에 이름/아바타 행을 노출하며, 서버 렌더링 값으로 초기 표시한 뒤 `/members/api/member/` 재조회로 실시간 동기화하고 아바타 미등록 시 fallback 문자(이름/이메일 첫 글자)를 사용함. 비로그인 시 해당 행은 렌더하지 않음
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,12 @@
 # 업데이트 로그

+## v0.2.10 - 2026-04-17
+- `package.json` 버전을 `0.2.10`로 증가.
+- `assets/built/screen.css`: `topbar__inner` 가운데 열을 `minmax(--topbar-search-min, min(--content-column, 1fr))`로 두고 `--topbar-search-min`(260px)을 도입해 좁은 뷰에서 검색 트리거가 과도하게 압축되지 않도록 함. 헤더 브랜드 영역 말줄임·검색 라벨 `.search-trigger__label`·단축키 `flex-shrink: 0` 등 보조 스타일 추가.
+- `partials/site/topbar.hbs`: 검색 래퍼(`topbar-search`)·트리거 `min-w-0`, 라벨/단축키 `shrink-0`·`search-trigger__label` 마크업으로 검색창·단축키 배치 안정화. 브랜드 링크에 `min-w-0 max-w-full` 적용.
+- `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.2.10`로 동기화.
+- `npm run build:tailwind`로 `assets/built/tailwind.css` 재생성.
+
 ## v0.2.9 - 2026-04-17
 - `package.json` 버전을 `0.2.9`로 증가.
 - `partials/lists/post-items.hbs`: 목록 카드 요약 `<p>`의 `flex-1`·`min-h` 제거, `justify-between` 제거, 요약이 있을 때만 메타 블록에 `mt-auto`를 적용해 좁은 뷰에서 요약 영역이 빈 높이를 먹지 않도록 조정. 요약 없을 때는 `<p>` 미렌더.
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ghost-theme-thred-clone",
-  "version": "0.2.9",
+  "version": "0.2.10",
  "private": true,
  "description": "A Ghost theme inspired by the Thred reference layout.",
  "keywords": [
--- a/partials/site/topbar.hbs
+++ b/partials/site/topbar.hbs
@@ -23,7 +23,7 @@
                    </i>
                </span>
            </button>
-            <a class="brand brand--topbar inline-flex items-center gap-2.5 whitespace-nowrap" href="{{@site.url}}">
+            <a class="brand brand--topbar inline-flex min-w-0 max-w-full items-center gap-2.5" href="{{@site.url}}">
                {{#if @site.logo}}
                    <img class="max-h-8 w-auto object-contain" src="{{@site.logo}}" alt="{{@site.title}}">
                {{else}}
@@ -31,17 +31,17 @@
                {{/if}}
            </a>
        </div>
-        <div class="topbar__search flex h-full items-center justify-center px-4">
-            <button class="search-trigger flex w-full max-w-xs items-center gap-2.5 rounded-xl border border-brd bg-bgr px-3.5 py-2 text-sm text-typ-tone transition-colors hover:bg-bgr-tone hover:text-typ" type="button" data-search-open aria-label="Open search">
-                <i class="icon icon-search size-5 md:size-4 stroke-2 md:stroke-[2.25] fill-bgr-tone [&amp;&gt;svg]:fill-inherit" role="presentation">
+        <div class="topbar-search topbar__search flex h-full min-w-0 items-center justify-center px-4">
+            <button class="search-trigger flex w-full min-w-0 max-w-xs items-center gap-2.5 rounded-xl border border-brd bg-bgr px-3.5 py-2 text-sm text-typ-tone transition-colors hover:bg-bgr-tone hover:text-typ" type="button" data-search-open aria-label="Open search">
+                <i class="icon icon-search shrink-0 size-5 md:size-4 stroke-2 md:stroke-[2.25] fill-bgr-tone [&amp;&gt;svg]:fill-inherit" role="presentation">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <circle cx="10" cy="10" r="7"></circle>
                        <line x1="21" y1="21" x2="15" y2="15"></line>
                    </svg>
                </i>
-                <span>Search</span>
-                <span class="search-shortcut">/</span>
+                <span class="search-trigger__label">Search</span>
+                <span class="search-shortcut shrink-0">/</span>
            </button>
        </div>
        <div class="topbar__actions relative flex h-full items-center justify-end gap-2 px-4 lg:px-0">
@@ -102,7 +102,7 @@
                                <path d="M15 15v-6h-6"></path>
                            </svg>
                        </i>
-                        <span>Sign up</span>
+                        <span>회원 가입</span>
                    </a>
                    <a href="#/portal/signin" class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-theme hover:bg-bgr-tone">
                        <i class="icon icon-login size-5 stroke-2" role="presentation">
@@ -113,7 +113,7 @@
                                <path d="M11 15l-3 -3"></path>
                            </svg>
                        </i>
-                        <span>Sign in</span>
+                        <span>로그인</span>
                    </a>
                {{/if}}
                <div class="flex flex-col gap-0.5 items-center justify-between border-t border-brd mt-2 pt-2">