From c53cea0a4e94cb42b3ce431e68c9577846780943 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sat, 17 Oct 2026 17:20:05 +0900 Subject: [PATCH] =?UTF-8?q?fix(=E2=98=B0=20=C2=B7=20=EC=84=9C=EB=9E=8D):?= =?UTF-8?q?=20=E2=98=B0=20=EC=A4=91=EC=8B=AC=20=3D=20=EC=A2=8C=EC=B8=A1=20?= =?UTF-8?q?=ED=8C=A8=EB=84=90=20=EC=A0=9C=EB=AA=A9=20=EC=A4=84=20=EC=A4=91?= =?UTF-8?q?=EC=8B=AC(52)=20=C2=B7=20=EC=84=9C=EB=9E=8D=20=EA=B0=84?= =?UTF-8?q?=EA=B2=A9=208/12=20=C2=B7=20=EC=A4=84=20=EB=86=92=EC=9D=B4=2040?= =?UTF-8?q?/44=20=C2=B7=20=EA=B8=80=20=EC=99=BC=EC=AA=BD=2016=20=C2=B7=20?= =?UTF-8?q?=EB=A1=9C=EA=B3=A0=20=EC=A4=84=20=E2=98=B0=20=EB=86=92=EC=9D=B4?= =?UTF-8?q?=20=EA=B0=80=EC=9A=B4=EB=8D=B0=20(389-1=20=C2=B7=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_01QfHKQs7J3hQELKMWQMUJEy --- A00_Common/app_shell.ts | 30 +++++++++++++++++--------- resources/tester/test_device_drawer.py | 24 ++++++++++++++++++++- ui_template/ui_template_overlay.css | 1 + 3 files changed, 44 insertions(+), 11 deletions(-) diff --git a/A00_Common/app_shell.ts b/A00_Common/app_shell.ts index c086b2f8c..96a1d6b51 100644 --- a/A00_Common/app_shell.ts +++ b/A00_Common/app_shell.ts @@ -459,39 +459,45 @@ html:is([data-burger="on"], .is-bm-route) .app-burger { display: inline-flex; } .app-header.is-drawer-open .app-drawer { display: flex; flex-direction: column; - gap: var(--spacing-16); + gap: var(--spacing-12); position: fixed; top: var(--app-header-h); right: 0; bottom: 0; width: min(240px, 100vw); - padding: var(--spacing-16); + padding: var(--spacing-16) 0; overflow-y: auto; background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-lg); } +/* 서랍 간격 8/12 — 묶음 안 8 · 묶음 사이 12 + 선 + 12 · 줄 높이 마우스 40 · 손가락 44 · 글 왼쪽 16(389-2) */ .app-drawer__nav { display: flex; flex-direction: column; - gap: var(--spacing-4); + gap: var(--spacing-8); } -.app-drawer__nav > * { justify-content: flex-start; min-height: 44px; } +.app-drawer__nav > * { justify-content: flex-start; margin-inline: 8px; padding-left: 7px; min-height: var(--spacing-40); } .app-drawer__site { display: block; } -.app-drawer__site > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; } -.app-drawer__site > nav { margin-top: var(--spacing-4); } +.app-drawer__site > summary { min-height: var(--spacing-40); display: flex; align-items: center; padding-left: 16px; cursor: pointer; font-weight: 600; } +.app-drawer__site > nav { margin-top: var(--spacing-8); } +.app-drawer__steps .ui-workflow-layout__step { min-height: var(--spacing-40); margin-inline: 8px; width: auto; padding-left: 7px; } +.app-drawer__steps .ui-workflow-layout__step--home { margin-bottom: 0; } +html[data-touch="on"] :is(.app-drawer__nav > *, .app-drawer__site > summary, .app-drawer__steps .ui-workflow-layout__step, .app-drawer__row > *) { min-height: 44px; } .app-drawer__row { display: flex; flex-wrap: wrap; gap: var(--spacing-8); + padding-inline: 16px; } +.app-drawer__row > * { min-height: var(--spacing-40); } .app-drawer__group { display: flex; flex-direction: column; gap: var(--spacing-8); } .app-drawer__group + .app-drawer__group { - padding-top: var(--spacing-16); + padding-top: var(--spacing-12); border-top: 1px solid var(--color-border); } .app-drawer__steps:empty { display: none; } @@ -499,9 +505,11 @@ html:is([data-burger="on"], .is-bm-route) .app-burger { display: inline-flex; } display: flex; flex-direction: column; gap: var(--spacing-8); + padding-left: 16px; color: var(--color-text-secondary); font-size: var(--text-caption); } +.app-drawer__touch .app-drawer__row { padding-inline: 0; } .app-drawer__touch [aria-checked="true"] { background: var(--color-mist-violet); color: var(--color-accent); @@ -550,11 +558,13 @@ html.is-bm-route .app-header.is-drawer-open .app-drawer { border-left: 0; border-right: 2px solid var(--color-accent); } +.app-drawer__brand { flex-direction: row; align-items: center; min-height: 44px; padding-left: 16px; } +html.is-bm-route .app-header.is-drawer-open .app-drawer { padding-top: var(--spacing-8); } html.is-bm-route .app-drawer__brand { - min-height: 44px; - padding-left: calc(var(--app-burger-inset) - var(--spacing-16)); + min-height: var(--app-burger-w); + padding-left: var(--app-burger-inset); } -html.is-bm-route .app-drawer__brand .app-brand { align-self: flex-end; } +html.is-bm-route[data-touch="on"] .app-drawer__brand { min-height: 44px; } `; export function injectShellStyles(): void { diff --git a/resources/tester/test_device_drawer.py b/resources/tester/test_device_drawer.py index 411b14690..0720e7706 100644 --- a/resources/tester/test_device_drawer.py +++ b/resources/tester/test_device_drawer.py @@ -26,6 +26,11 @@ BURGER = ( " return [Math.round(r.left), Math.round(r.top), Math.round(r.width), Math.round(r.height)," " Math.round(r.right)]; })()" ) +TITLE_ROW_CY = ( + "(() => { const r = document.querySelector(" + "'.ui-workflow-overlay__panel--title > .ui-workflow-overlay__header').getBoundingClientRect();" + " return Math.round(r.top + r.height / 2); })()" +) PROGRESS_HIDDEN = ( "!document.querySelector('.ui-workflow-overlay__panel--progress').getClientRects().length" ) @@ -135,6 +140,8 @@ def test_drawer_holds_steps_and_header_folds(): assert desk.evaluate(OUTLET_TOP) == 0 assert desk.evaluate(BURGER)[:4] == [8, 8, 36, 36] assert desk.evaluate(PROGRESS_HIDDEN) + # 389-1: ☰ 중심 = 좌측 패널 제목 줄 중심 + assert desk.evaluate(TITLE_ROW_CY) == 26 head_nav = desk.evaluate(LABELS, ".app-nav button") head_actions = desk.evaluate(LABELS, ".app-actions button") assert head_nav and head_actions @@ -170,7 +177,22 @@ def test_352_4_burger_in_panel_title_row_text(): # 자리(8,8 · 36)는 그대로 — 접으면 아래 기본 규칙(떠 있는 단추)으로 돌아감 base = shell.split("html.is-bm-route .app-burger {", 1)[1].split("}", 1)[0] assert "position: fixed;" in base and "left: var(--spacing-8);" in base - assert "html.is-bm-route .app-drawer__brand .app-brand { align-self: flex-end; }" in shell + # 389-1: 마우스 제목 줄 높이 = 8×2 + ☰ 높이(36) = 52 → 중심 26 = ☰ 중심 + overlay_css = (root / "ui_template/ui_template_overlay.css").read_text(encoding="utf-8") + title_row = overlay_css.split( + "html.is-bm-route .ui-workflow-overlay__panel--title > .ui-workflow-overlay__header {", 1 + )[1].split("}", 1)[0] + assert "min-height: calc(var(--spacing-8) * 2 + var(--app-burger-w));" in title_row + # 389-2: 서랍 8/12 체계 — 묶음 사이 12 + 선 + 12 · 로고 줄 = ☰ 높이 가운데 + assert ( + "gap: var(--spacing-12);" in shell.split(".app-header.is-drawer-open .app-drawer {", 1)[1] + ) + assert "padding-top: var(--spacing-12);" in shell.split(".app-drawer__group + ", 1)[1] + assert ( + "min-height: var(--app-burger-w);" + in shell.split("html.is-bm-route .app-drawer__brand {", 1)[1] + ) + assert "align-self: flex-end" not in shell # 378-1: 프로젝트 화면 서랍 오른쪽 가장자리 = 강조색 2 px assert "border-right: 2px solid var(--color-accent);" in shell overlay = (root / "ui_template/ui_template_overlay.css").read_text(encoding="utf-8") diff --git a/ui_template/ui_template_overlay.css b/ui_template/ui_template_overlay.css index 2d672e9bb..85c909391 100644 --- a/ui_template/ui_template_overlay.css +++ b/ui_template/ui_template_overlay.css @@ -557,6 +557,7 @@ html:is([data-size="compact"], [data-size="medium"]) /* ☰ 들여쓰기(7-2) — 왼쪽 위에 뜬 ☰ 자리만큼 좌측 패널 제목 줄을 비킴 · 손가락 ☰(높이 44)는 제목 줄도 그만큼 높임 */ html.is-bm-route .ui-workflow-overlay__panel--title > .ui-workflow-overlay__header { padding-left: max(var(--spacing-16), var(--app-burger-inset)); + min-height: calc(var(--spacing-8) * 2 + var(--app-burger-w)); } html.is-bm-route[data-touch="on"]