From 8a6a88d7c4bb7d5c1a323d0be367cfab23328ab7 Mon Sep 17 00:00:00 2001
From: Hyemin Lee <hyemin.lee@bok.or.kr>
Date: Wed, 17 Jun 2026 14:23:05 +0900
Subject: [PATCH] style: button hierarchy, full-width search, inline status row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 버튼 위계 정리: 파란 틴트=동작(동기화/배포), ghost=네비/유틸(새로고침·이전·다음)
- 새로고침: ghost + 원형화살표 아이콘 + 컴팩트, 페이저: ghost + ◀/▶ 삼각형
- 검색창 가로 꽉(width 100%) + 얇게
- 헤더(th) 한글 라벨에 모노 폰트 안 먹게 td 로 한정 + 모노 스택에 한글 폴백
- 상태: '상태'+연결배지 한 줄 배치, '상태'='저장소' 글자 크기 통일, 배지 14px

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/static/app.css                     | 55 +++++++++++++++++++++++---
 app/templates/dashboard.html           | 19 ++++++---
 app/templates/partials/table_wrap.html | 14 +++++--
 3 files changed, 73 insertions(+), 15 deletions(-)

diff --git a/app/static/app.css b/app/static/app.css
index 6094d8e..b9171ae 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -37,8 +37,10 @@
   --danger: #f04452;
 
   --radius-card: 12px;
-  /* 영문/숫자(저장소명·버전·패키지수·시각)는 모노 — 도구다운 가독성 (design-ref §3) */
-  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  /* 영문/숫자(저장소명·버전·패키지수·시각)는 모노 — 도구다운 가독성 (design-ref §3).
+     혹시 섞이는 한글은 모노에 글리프가 없으니 한글 sans 로 폴백. */
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
+    "Apple SD Gothic Neo", "Noto Sans KR", monospace;
 
   /* Pico 매핑 */
   --pico-font-family-sans-serif: "Pretendard Variable", -apple-system,
@@ -122,6 +124,22 @@ section {
   margin-bottom: 18px;
 }
 
+/* 상태: 라벨 + 배지 한 줄 */
+.status-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.status-label {
+  font-size: 22px; /* 저장소 h2 와 동일 */
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text);
+}
+.status-row .status-line {
+  font-size: 14px;
+}
+
 /* 버튼 — Toss: radius 7, weight 600, 누름 피드백 scale(0.98) (design-ref §4·§6) */
 button,
 [role="button"] {
@@ -149,6 +167,27 @@ button.danger,
   --pico-border-color: var(--danger);
   --pico-color: #ffffff;
 }
+/* 유틸리티(새로고침 등): 중립 ghost — 동기화(틴티드 블루)와 구분 */
+button.ghost,
+[role="button"].ghost {
+  --pico-background-color: transparent;
+  --pico-border-color: var(--border-strong);
+  --pico-color: var(--text-secondary);
+}
+button.ghost:hover,
+[role="button"].ghost:hover {
+  --pico-background-color: var(--bg-alt);
+  --pico-border-color: var(--text-dim);
+}
+/* 아이콘 + 글자 버튼 */
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.btn-icon .icon {
+  flex: none;
+}
 button:disabled,
 [role="button"]:disabled {
   opacity: 0.45;
@@ -244,9 +283,10 @@ button:disabled,
 .repo-name a:hover {
   color: var(--accent);
 }
-/* 숫자/버전/시각: 모노 + tabular */
-.num,
-.mono {
+/* 숫자/버전/시각: 모노 + tabular — 본문 셀(td)과 .mono 에만 적용.
+   헤더(th)는 한글 라벨이라 모노 제외(Pretendard 유지). */
+.mono,
+td.num {
   font-family: var(--font-mono);
   font-feature-settings: "tnum" 1;
 }
@@ -369,9 +409,12 @@ th.num {
   margin-bottom: 14px;
 }
 .repo-search {
-  max-width: 280px;
+  width: 100%;
   margin: 0;
   font-size: 14px;
+  /* 세로로 얇게 */
+  --pico-form-element-spacing-vertical: 0.5rem;
+  height: auto;
 }
 .table-card thead th a.th-sort {
   display: inline-flex;
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 8feef89..ff88e20 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -2,17 +2,26 @@
 
 {% block content %}
 <section>
-  <h2>상태</h2>
-  <!-- 로드 시 1회 + 10초마다 Pulp 연결 상태 폴링 -->
-  <div hx-get="/pulp-status" hx-trigger="load, every 30s" hx-swap="innerHTML" style="margin-top:12px;">
-    <span class="status-line status-loading">연결 확인 중…</span>
+  <!-- 상태 라벨 + 연결 배지를 한 줄로 (로드 시 1회 + 30초마다 폴링) -->
+  <div class="status-row">
+    <span class="status-label">상태</span>
+    <div hx-get="/pulp-status" hx-trigger="load, every 30s" hx-swap="innerHTML">
+      <span class="status-line status-loading">연결 확인 중…</span>
+    </div>
   </div>
 </section>
 
 <section>
   <div class="section-head">
     <h2>저장소</h2>
-    <button hx-get="/repos" hx-target="#repo-list" hx-swap="outerHTML" class="secondary">
+    <button hx-get="/repos" hx-target="#repo-list" hx-swap="outerHTML"
+            class="ghost btn-sm btn-icon">
+      <svg class="icon" viewBox="0 0 16 16" width="14" height="14" fill="none"
+           stroke="currentColor" stroke-width="1.6" stroke-linecap="round"
+           stroke-linejoin="round" aria-hidden="true">
+        <path d="M13.6 8a5.6 5.6 0 1 1-1.7-4"/>
+        <path d="M12.4 1.8V4.2H10"/>
+      </svg>
       새로고침
     </button>
   </div>
diff --git a/app/templates/partials/table_wrap.html b/app/templates/partials/table_wrap.html
index 1197cb1..c4ae6c3 100644
--- a/app/templates/partials/table_wrap.html
+++ b/app/templates/partials/table_wrap.html
@@ -55,15 +55,21 @@
 
     {% if pages > 1 %}
     <div class="pager">
-      <button class="secondary btn-sm" {% if page <= 1 %}disabled{% endif %}
+      <button class="ghost btn-sm btn-icon" {% if page <= 1 %}disabled{% endif %}
               hx-get="/repos/table" hx-target="#repo-table-wrap" hx-swap="outerHTML"
               hx-include="#repo-search"
-              hx-vals='{"sort": "{{ sort }}", "dir": "{{ dir }}", "page": "{{ page - 1 }}"}'>이전</button>
+              hx-vals='{"sort": "{{ sort }}", "dir": "{{ dir }}", "page": "{{ page - 1 }}"}'>
+        <svg class="icon" viewBox="0 0 10 10" width="8" height="8" aria-hidden="true"><path d="M7 1 2 5l5 4z" fill="currentColor"/></svg>
+        이전
+      </button>
       <span class="mono">{{ page }} / {{ pages }}</span>
-      <button class="secondary btn-sm" {% if page >= pages %}disabled{% endif %}
+      <button class="ghost btn-sm btn-icon" {% if page >= pages %}disabled{% endif %}
               hx-get="/repos/table" hx-target="#repo-table-wrap" hx-swap="outerHTML"
               hx-include="#repo-search"
-              hx-vals='{"sort": "{{ sort }}", "dir": "{{ dir }}", "page": "{{ page + 1 }}"}'>다음</button>
+              hx-vals='{"sort": "{{ sort }}", "dir": "{{ dir }}", "page": "{{ page + 1 }}"}'>
+        다음
+        <svg class="icon" viewBox="0 0 10 10" width="8" height="8" aria-hidden="true"><path d="M3 1l5 4-5 4z" fill="currentColor"/></svg>
+      </button>
     </div>
     {% endif %}
   </div>