From e0953e333e85e9fa15e9877128b5b8307b4c66c8 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Tue, 6 Oct 2026 12:12:50 +0900 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=EC=A2=8C=EC=B8=A1=20=ED=8C=A8?= =?UTF-8?q?=EB=84=90=20=EC=95=84=EB=9E=98=20=EB=8B=A8=EC=B6=94=20=EB=AC=B6?= =?UTF-8?q?=EC=9D=8C=20=ED=95=9C=20=EC=96=91=EC=8B=9D=20=C2=B7=20[=3F]=20?= =?UTF-8?q?=EC=A0=95=EC=82=AC=EA=B0=81=20=C2=B7=20=EC=A4=84=EB=B0=94?= =?UTF-8?q?=EA=BF=88=20=EC=97=86=EC=9D=8C(54-20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 공용 규칙 한 곳(overlay.css) — 단추 사이 --btn-group-gap · 고르게 늘되 글보다 좁아지지 않음 · 줄바꿈 막음 - [?] 너비 = 높이(32px) - B05·B06 전용 여백 규칙(design_dock.css) 지움 — 공용으로 옮김 - 치수 재기 ui_checks/54-20_좌측단추_치수.js - 전: 높이 31.7·45.7(B04 [이 모델 확정] · B07 [현재 도면 확정] 두 줄) · 여백 8/16 섞임 · B06 [종단 보기] 글이 단추 꽉 참 · [?] 36×31.7 - 후: B02~B09 높이 31.7 하나 · 글 14px Inter 500 하나 · 줄바꿈·넘침 0 · 좁은 패널(280px)도 같음 Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01W4uKaV4ZBhsJN4GHG7yRj4 --- A00_Common/design/design_dock.css | 7 -- .../tester/ui_checks/54-20_좌측단추_치수.js | 83 +++++++++++++++++++ ui_template/ui_template_help.css | 7 +- ui_template/ui_template_overlay.css | 15 ++++ 4 files changed, 102 insertions(+), 10 deletions(-) create mode 100644 resources/tester/ui_checks/54-20_좌측단추_치수.js diff --git a/A00_Common/design/design_dock.css b/A00_Common/design/design_dock.css index dcfcf207f..e69de29bb 100644 --- a/A00_Common/design/design_dock.css +++ b/A00_Common/design/design_dock.css @@ -1,7 +0,0 @@ -/* 좌측 패널 아래 고정 영역의 단추 넷([초기화][저장][확정][보기 전환]) — 좁은 패널에서도 글자가 - 두 줄로 꺾이지 않게 안쪽 여백을 줄이고 줄바꿈을 막는다(계획서 24-2b). */ -.b05-route__dock .b05-route__actions .ui-btn, -.b05-route__dock .b06-profile__actions .ui-btn { - padding-inline: var(--spacing-8); - white-space: nowrap; -} diff --git a/resources/tester/ui_checks/54-20_좌측단추_치수.js b/resources/tester/ui_checks/54-20_좌측단추_치수.js new file mode 100644 index 000000000..e99c7b4dd --- /dev/null +++ b/resources/tester/ui_checks/54-20_좌측단추_치수.js @@ -0,0 +1,83 @@ +/* 54-20 — B02~B09 좌측 패널 아래 공통 단추 묶음([?] · [초기화] · [저장] · [확정] · [횡단 보기] …) 치수 + * 시작 화면: 아무 B 화면(로그인 · 환경 배정 storage 프로젝트가 현재 프로젝트) + * 부르는 법: orca eval --expression "$(cat 이 파일)" · 1분 넘으면 끊기므로 + * `window.__btn5420 = ["b05-profile", …];` 를 앞에 붙여 나눠 부름 + * 쓰는 것: 없음(주소 이동 · 재기만 · 끝나면 처음 주소로) + * 기대 수치: + * - 줄마다 보이는 단추 h 하나 · fs 하나 · ff 하나 · 줄 안 gap 하나 · wrap = false · over = false + * - [?] = 정사각(w = h) + * - 좁은 패널(narrow = true 로 패널 폭을 최소로 줄여 다시 잼)에서도 wrap · over 없음 + */ +(async () => { + const w = (ms) => new Promise((r) => setTimeout(r, ms)); + const vis = (n) => n && n.offsetParent !== null; + const start = location.hash; + const routes = window.__btn5420 ?? [ + "b02-proj-register", + "b03-file-input", + "b04-preprocess", + "b05-profile", + "b06-section", + "b07-design-detail", + "b08-quantity", + "b09-estimation", + ]; + const measure = () => { + const help = [...document.querySelectorAll(".ui-help-btn")].find(vis); + const rows = help + ? [help.closest(".ui-sidebar-actions") ?? help.parentElement] + : [...document.querySelectorAll(".ui-sidebar-actions")].filter(vis); + return rows.map((row) => { + const btns = [...row.querySelectorAll("button")].filter(vis); + const rr = row.getBoundingClientRect(); + return { + row: row.className, + rowW: Math.round(rr.width), + gap: getComputedStyle(help?.parentElement ?? row).gap, + btns: btns.map((b) => { + const s = getComputedStyle(b); + const r = b.getBoundingClientRect(); + const text = document.createRange(); + text.selectNodeContents(b); + return { + t: b.innerText.trim(), + cls: b.className, + h: +r.height.toFixed(1), + w: +r.width.toFixed(1), + fs: s.fontSize, + fw: s.fontWeight, + ff: s.fontFamily.split(",")[0], + pad: s.padding, + bd: s.borderWidth + " " + s.borderStyle, + rad: s.borderRadius, + top: +(r.top - rr.top).toFixed(1), + wrap: text.getBoundingClientRect().height > parseFloat(s.fontSize) * 1.6, + // 글이 단추 안쪽(여백 뺀 폭)을 넘거나 단추가 줄 밖으로 나감 + over: + text.getBoundingClientRect().width > + b.clientWidth - parseFloat(s.paddingLeft) - parseFloat(s.paddingRight) + 0.5 || + r.right > rr.right + 1, + }; + }), + }; + }); + }; + const out = []; + for (const route of routes) { + location.hash = `#/${route}`; + await w(4500); + const res = { page: route.slice(0, 3).toUpperCase(), rows: measure() }; + const panel = document.querySelector(".ui-workflow-overlay__panel--title"); + if (window.__btn5420narrow && panel) { + const was = panel.style.width; + panel.style.width = "var(--wf-left-panel-narrow-width)"; // 좁은 창(860px 아래) 폭 + await w(400); + res.narrowW = Math.round(panel.getBoundingClientRect().width); + res.narrow = measure(); + panel.style.width = was; + } + out.push(res); + } + location.hash = start; + return JSON.stringify(out); +})(); diff --git a/ui_template/ui_template_help.css b/ui_template/ui_template_help.css index 7c9f3f69e..3585bea06 100644 --- a/ui_template/ui_template_help.css +++ b/ui_template/ui_template_help.css @@ -2,9 +2,10 @@ .ui-sidebar-actions .ui-help-btn, .ui-help-btn { flex: none; - width: auto; - min-width: 2.25rem; - padding-inline: var(--spacing-12); + /* 정사각 — 너비 = 높이(글 한 줄 · 위아래 여백 · 테두리) */ + width: calc(1em + 2 * var(--spacing-8) + 2px); + min-width: 0; + padding-inline: 0; } .ui-help.ui-modal { diff --git a/ui_template/ui_template_overlay.css b/ui_template/ui_template_overlay.css index e7b8a37c0..cff809cab 100644 --- a/ui_template/ui_template_overlay.css +++ b/ui_template/ui_template_overlay.css @@ -368,6 +368,21 @@ min-width: 0; } +/* 아래 단추 묶음(54-20) — B03~B09 한 양식 · 사이 = --btn-group-gap · 고르게 늘되 글보다 좁아지지 + 않음 · 좁은 패널(280px)에서도 한 줄. 단추 줄 = [data-help-row](없으면 묶음 자신) */ +.ui-sidebar-actions:not(:has([data-help-row])), +.ui-sidebar-actions [data-help-row] { + gap: var(--btn-group-gap); +} + +.ui-sidebar-actions > .ui-btn:not(.ui-help-btn), +.ui-sidebar-actions [data-help-row] > .ui-btn:not(.ui-help-btn) { + flex: 1 1 0; + min-width: auto; + padding-inline: var(--spacing-4); + white-space: nowrap; +} + /* 사이드 패널 내부 컨테이너 공통 외곽선 — 기본 --color-border가 두 테마 모두 흐려 안 보인다는 보고(2026-08-05). 본문 보조색을 섞어 어느 테마에서든 뚜렷하게. 45%는 아직 흐리다는 재보고(2026-08-06)로 보조색 비중을 75%로 올렸다 — 테마 변수