From 9814c0ae346008df0b7e1ac7184e35a28659fc48 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sat, 10 Oct 2026 13:05:02 +0900 Subject: [PATCH] =?UTF-8?q?style(B05):=20=EC=A2=85=EB=8B=A8=20=EA=B7=B8?= =?UTF-8?q?=EB=9E=98=ED=94=84=20=EB=A8=B8=EB=A6=AC=20[=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=ED=99=94]~=E2=96=BC=20=EB=8B=A8=EC=B6=94=20=ED=81=AC=EA=B8=B0?= =?UTF-8?q?=20=3D=20[=EB=B0=B0=EC=88=98=EC=9C=A0=EC=97=AD=EB=8F=84]=20?= =?UTF-8?q?=C2=B7=20[=EC=83=88=20=EC=B0=BD]=20=ED=81=AC=EA=B8=B0=20=C2=B7?= =?UTF-8?q?=20=EA=B3=B5=EC=9A=A9=20=EC=A4=84=20=EB=8B=A8=EC=B6=94=20?= =?UTF-8?q?=ED=86=A0=ED=81=B0(187-1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 왼쪽 단추 높이 17 · 글자 9 · 좌우 여백 3 → 높이 16 · 글자 12 · 좌우 여백 8 - theme 토큰 --btn-bar-padding · --btn-bar-font-size 하나로 세 곳이 씀 - test_187_1 신규 Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_015sDZSjFvoiDjdGpgj3muc3 --- A00_Common/design/design_page.css | 4 +- B05_Profile/B05_Profile_UI_Profile_Tools.ts | 4 +- B05_Profile/B05_Profile_UI_Style.css | 11 +-- B05_Profile/B05_Profile_UI_Style_Table.css | 4 +- .../tester/test_187_1_b05_head_button_size.py | 93 +++++++++++++++++++ ui_template/ui_template_theme.css | 4 + 6 files changed, 108 insertions(+), 12 deletions(-) create mode 100644 resources/tester/test_187_1_b05_head_button_size.py diff --git a/A00_Common/design/design_page.css b/A00_Common/design/design_page.css index 3ad5e29d2..65d0609db 100644 --- a/A00_Common/design/design_page.css +++ b/A00_Common/design/design_page.css @@ -51,8 +51,8 @@ } .b05-route-profile__trailing > .b05-route-profile__popout { - padding: 1px var(--spacing-8); - font-size: var(--text-caption); + padding: var(--btn-bar-padding); + font-size: var(--btn-bar-font-size); } /* 횡단 조정(카드 조정창 사본 · 폼 칸에 옮겨 붙은 행)은 횡단 보기 몫 — 종단 보기에서는 한 벌 폼 diff --git a/B05_Profile/B05_Profile_UI_Profile_Tools.ts b/B05_Profile/B05_Profile_UI_Profile_Tools.ts index 0487a666f..fd33a05ff 100644 --- a/B05_Profile/B05_Profile_UI_Profile_Tools.ts +++ b/B05_Profile/B05_Profile_UI_Profile_Tools.ts @@ -3,8 +3,8 @@ * 종단 계획선 도구줄 — [초기화] · [↶][↷] · [직선화] · [쉬프트] · [▲][▼]. * ([초기화]는 2026-09-03 추가 — 마지막 [저장] 시점 기준이며 전체 초기화가 아니다.) * - * 자리는 절·성토 요약줄의 **맨 앞**(최대 기울기 칩 왼쪽)이고, 버튼 크기는 그래프 위 - * 틸팅 버튼과 같다(`b05-profile-edit__btn` 계열 크기를 CSS에서 공유). + * 자리는 절·성토 요약줄의 **맨 앞**(최대 기울기 칩 왼쪽)이고, 버튼 크기는 같은 줄 오른쪽 + * [배수유역도] · [새 창] 과 같다(공용 토큰 `--btn-bar-*`). * * 선택 흐름: * [직선화] → 측점 2개를 그래프에서 고름 → 두 측점의 라운드에 탄젠트한 직선으로 대체. diff --git a/B05_Profile/B05_Profile_UI_Style.css b/B05_Profile/B05_Profile_UI_Style.css index 3c085f575..cc48c359a 100644 --- a/B05_Profile/B05_Profile_UI_Style.css +++ b/B05_Profile/B05_Profile_UI_Style.css @@ -566,8 +566,8 @@ text-overflow: ellipsis; } -/* 도구줄 — 요약줄 맨 앞(최대 기울기 칩 왼쪽). 버튼 크기는 그래프 위 틸팅 버튼과 같다 - (21×17px, 2026-09-02 사용자 지시). */ +/* 도구줄 — 요약줄 맨 앞(최대 기울기 칩 왼쪽). 단추 크기는 같은 줄 오른쪽 [배수유역도] · [새 창] + 과 같은 공용 토큰(`--btn-bar-*`). */ .b05-route-profile__tools { display: inline-flex; flex: 0 0 auto; @@ -577,14 +577,13 @@ } .b05-route-profile__tool { - height: 17px; - min-width: 21px; - padding: 0 3px; + padding: var(--btn-bar-padding); border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--color-surface-raised) 80%, transparent); color: var(--color-text); - font-size: 9px; + font-family: var(--font-body); + font-size: var(--btn-bar-font-size); line-height: 1; cursor: pointer; } diff --git a/B05_Profile/B05_Profile_UI_Style_Table.css b/B05_Profile/B05_Profile_UI_Style_Table.css index fb7222a9f..91e5bfd69 100644 --- a/B05_Profile/B05_Profile_UI_Style_Table.css +++ b/B05_Profile/B05_Profile_UI_Style_Table.css @@ -457,8 +457,8 @@ } .b05-route-profile__trailing > .b05-drainage__toggle { - padding: 1px var(--spacing-8); - font-size: var(--text-caption); + padding: var(--btn-bar-padding); + font-size: var(--btn-bar-font-size); } .b05-profile__zoom-btn { diff --git a/resources/tester/test_187_1_b05_head_button_size.py b/resources/tester/test_187_1_b05_head_button_size.py new file mode 100644 index 000000000..dbfc07721 --- /dev/null +++ b/resources/tester/test_187_1_b05_head_button_size.py @@ -0,0 +1,93 @@ +"""187-1 B05 종단 그래프 머리 줄 — [초기화]~▼ 단추 크기 = 오른쪽 [배수유역도] · [새 창] 크기. + +- 기준값 = 오른쪽 두 단추의 계산 크기(`.ui-btn` 바탕 + 줄 단추 토큰) — 높이 16 · 글자 12 · 좌우 여백 8 +- 왼쪽 단추(`b05-route-profile__tool`) = 같은 토큰 · 고정 높이 · 최소 너비 없음 +""" + +import re +from pathlib import Path + +ROOT = Path(__file__).resolve().parents[2] + + +def _read(rel: str) -> str: + return (ROOT / rel).read_text(encoding="utf-8") + + +def _block(css: str, selector: str) -> str: + m = re.search(re.escape(selector) + r"\s*\{([^}]*)\}", css) + assert m, selector + return m.group(1) + + +def _decl(block: str, prop: str) -> str: + m = re.search(r"(?:^|;|\s)" + re.escape(prop) + r"\s*:\s*([^;]+);", block) + assert m, prop + return m.group(1).strip() + + +THEME = _read("ui_template/ui_template_theme.css") +BASE = _read("ui_template/ui_template_elements_styles.ts") +LEFT = _block(_read("B05_Profile/B05_Profile_UI_Style.css"), ".b05-route-profile__tool") +TOGGLE = _block( + _read("B05_Profile/B05_Profile_UI_Style_Table.css"), + ".b05-route-profile__trailing > .b05-drainage__toggle", +) +POPOUT = _block( + _read("A00_Common/design/design_page.css"), + ".b05-route-profile__trailing > .b05-route-profile__popout", +) + + +def _px(value: str) -> int: + return int(re.fullmatch(r"(\d+)px", value).group(1)) + + +def _token(name: str) -> str: + return _decl(THEME, name) + + +def _size(block: str) -> dict: + """계산 크기 — padding · font-size 를 토큰으로 풀고 line-height 1 · 테두리 1px 로 높이를 셈.""" + pad = _decl(block, "padding") + font = _decl(block, "font-size") + if pad == "var(--btn-bar-padding)": + pad = _token("--btn-bar-padding") + if font == "var(--btn-bar-font-size)": + font = _token("--btn-bar-font-size") + v = re.fullmatch(r"(\d+)px var\(--spacing-8\)", pad).group(1) + spacing8 = _px(_token("--spacing-8")) + caption = _px(_token("--text-caption")) if font == "var(--text-caption)" else _px(font) + return {"padV": int(v), "padH": spacing8, "font": caption, "height": caption + 2 * int(v) + 2} + + +def test_기준값_오른쪽_단추_16_12_8(): + for block in (TOGGLE, POPOUT): + assert _size(block) == {"padV": 1, "padH": 8, "font": 12, "height": 16} + # 높이 계산의 바탕 = .ui-btn 줄 높이 1 · 테두리 1px + assert re.search(r"\.ui-btn \{[^}]*line-height: 1;[^}]*border: 1px solid", BASE) + + +def test_왼쪽_단추_높이_글자_여백이_오른쪽_기준값과_같음(): + assert _size(LEFT) == _size(TOGGLE) == _size(POPOUT) + assert _decl(LEFT, "line-height") == "1" + assert re.search(r"border:\s*1px solid", LEFT) + + +def test_왼쪽_단추에_옛_고정_크기_없음(): + assert "height:" not in LEFT.replace("line-height", "") + assert "min-width" not in LEFT + assert "9px" not in LEFT + + +def test_세_단추_모두_같은_토큰(): + for block in (LEFT, TOGGLE, POPOUT): + assert _decl(block, "padding") == "var(--btn-bar-padding)" + assert _decl(block, "font-size") == "var(--btn-bar-font-size)" + assert _decl(LEFT, "font-family") == "var(--font-body)" # .ui-btn 바탕과 같은 글꼴 + + +def test_토큰은_theme_한_곳(): + assert _token("--btn-bar-padding") == "1px var(--spacing-8)" + assert _token("--btn-bar-font-size") == "var(--text-caption)" + assert _px(_token("--spacing-8")) == 8 and _px(_token("--text-caption")) == 12 diff --git a/ui_template/ui_template_theme.css b/ui_template/ui_template_theme.css index 4685e1666..a18953c23 100644 --- a/ui_template/ui_template_theme.css +++ b/ui_template/ui_template_theme.css @@ -162,6 +162,10 @@ --control-height: 42px; --control-height-sm: 30px; + /* 줄 위 작은 단추 한 규격 — 종단 머리 줄 [초기화]~▼ · [배수유역도] · [새 창] 이 함께 씀(높이 = 글자 12 + 여백 2 + 테두리 2) */ + --btn-bar-padding: 1px var(--spacing-8); + --btn-bar-font-size: var(--text-caption); + /* --------------------------------------------------------------------------- * 6. 그림자 (Shadows) — 블루틴트, 서브틀 (최대 32px blur / 6% opacity) * ------------------------------------------------------------------------ */