fix(B05·B06): 좌측 패널 아래 단추 묶음 바닥 고정 복구(PLAN 44-3)

- 까닭 = 473d959d6 이 좌측 자리를 빈 채 틀에 넘겨 공용 쪼개기 건너뜀 · 보기 전환이 패널 클래스를 통째 덮어 ui-sidebar-fill 지움 - 공용 쪼개기 내보냄 · 두 번 불러도 한 번만 · 패널을 붙인 뒤 다시 부름 - 늦게 서는 칸은 스크롤 칸 안으로 · 보기 클래스는 toggle - 시험 test_design_panel_dock_fixed · 화면 시나리오 ui_checks/44-3 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BVPp2o6Mh2FZJr72yW3ofZ
2026-10-05 11:27:09 +09:00
parent 3c1ba6333d
commit 543d7bb8a5
5 changed files with 126 additions and 4 deletions
@@ -0,0 +1,38 @@
+# -*- coding: utf-8 -*-
+"""B05 · B06 좌측 패널 아래 고정(계획서 44-3) — 단추 묶음이 패널 바닥에 붙고 위 칸만 스크롤.
+
+공용 쪼개기(`splitSidebarActions`)가 [스크롤 칸][아래 고정 단추] 로 나누는데, 한 페이지(design_page)는
+좌측 자리를 빈 채 틀에 넘겨 쪼개기가 지나가고, 보기 전환이 패널 클래스를 통째 덮어 `ui-sidebar-fill` 을
+지웠다. 세 자리가 다시 어긋나면 빨강. 화면 수치는 `ui_checks/44-3_좌측패널_하단고정.js`.
+"""
+
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+OVERLAY = ROOT / "ui_template" / "ui_template_overlay.ts"
+PANEL = ROOT / "A00_Common" / "design" / "design_panel.ts"
+SHARED = ROOT / "A00_Common" / "design" / "design_shared.ts"
+
+
+def read(path: Path) -> str:
+    return path.read_text(encoding="utf-8")
+
+
+def test_split_is_exported_and_idempotent():
+    src = read(OVERLAY)
+    assert "export function splitSidebarActions(" in src
+    assert 'if (body.classList.contains("ui-sidebar-split")) return;' in src
+
+
+def test_shared_panel_splits_after_attach():
+    src = read(SHARED)
+    attach = src.index("shared.left.append(panel.root);")
+    assert "splitSidebarActions(body)" in src[attach : attach + 400]
+
+
+def test_panel_keeps_fill_class_and_scroll_host():
+    src = read(PANEL)
+    # 보기 전환이 클래스를 통째 덮으면 ui-sidebar-fill 이 지워져 단추 묶음이 바닥에서 뜬다.
+    assert "root.className = next" not in src
+    # 늦게 서는 칸은 스크롤 칸 안으로 — 패널 루트에 바로 끼우면 스크롤 밖에 남는다.
+    assert ":scope > .ui-sidebar-scroll" in src
@@ -0,0 +1,69 @@
+/* 44-3 — B05 · B06 좌측 패널 아래 고정(구조물 목록 · 초기화 · 저장 · 보기 전환 단추 묶음)
+ * 시작 화면: B05 종단설계(#/b05-profile) · 좌측 패널 열림 · 프로젝트 = 환경 배정 storage 프로젝트
+ * 부르는 법: orca eval --expression "$(cat 이 파일)" (async 식 · JSON 글을 돌려줌)
+ * 기대 수치(B05 → B06 → B05 · 각 보기에서 보통 · 긴 패널 둘):
+ *   - split = true · 패널 루트 자식 = [ui-sidebar-scroll, 단추 묶음] · 칸은 모두 스크롤 칸 안(loose = 0)
+ *   - dockGap = 패널 몸통 바닥 − 단추 묶음 바닥 = 0(±1px)
+ *   - 긴 패널(스크롤 칸에 2000px 임시 칸): overflow = true · dockGap 그대로 0 · 단추 묶음 top 안 바뀜
+ *   - 끝나면 임시 칸 지우고 처음 주소로 되돌림
+ */
+(async () => {
+  const w = (ms) => new Promise((r) => setTimeout(r, ms));
+  const start = location.hash;
+  const measure = async (tag) => {
+    const panel = document.querySelector(".b05-route__panel, .b06-profile__form");
+    if (!panel) return { tag, error: "패널 없음" };
+    const body = panel.closest(".ui-workflow-overlay__body");
+    const scroll = panel.querySelector(":scope > .ui-sidebar-scroll");
+    const dock = panel.querySelector(":scope > .ui-sidebar-actions");
+    const kids = [...panel.children].map((c) => c.classList[0]);
+    const gap = () =>
+      Math.round(body.getBoundingClientRect().bottom - dock.getBoundingClientRect().bottom);
+    const res = {
+      tag,
+      view: panel.classList.contains("b06-profile__form") ? "B06" : "B05",
+      split: body.classList.contains("ui-sidebar-split"),
+      kids,
+      loose: kids.filter((k) => k !== "ui-sidebar-scroll" && !dock?.classList.contains(k)).length,
+      dockGap: dock ? gap() : null,
+    };
+    if (!scroll || !dock) return res;
+    const top0 = Math.round(dock.getBoundingClientRect().top);
+    const tall = document.createElement("div");
+    tall.style.cssText = "height: 2000px; flex: none";
+    scroll.append(tall);
+    await w(100);
+    res.long = {
+      overflow: scroll.scrollHeight > scroll.clientHeight,
+      dockGap: gap(),
+      dockMoved: Math.round(dock.getBoundingClientRect().top) - top0,
+    };
+    tall.remove();
+    res.ok =
+      res.split &&
+      res.loose === 0 &&
+      Math.abs(res.dockGap) <= 1 &&
+      res.long.overflow &&
+      Math.abs(res.long.dockGap) <= 1 &&
+      res.long.dockMoved === 0;
+    return res;
+  };
+  const go = async (hash) => {
+    location.hash = hash;
+    for (let i = 0; i < 40; i++) {
+      await w(250);
+      const want = hash.includes("b06") ? ".b06-profile__form" : ".b05-route__panel";
+      if (document.querySelector(want + " > .ui-sidebar-actions")) break;
+    }
+    await w(500);
+  };
+  const out = [];
+  await go("#/b05-profile");
+  out.push(await measure("B05"));
+  await go("#/b06-section");
+  out.push(await measure("B06"));
+  await go("#/b05-profile");
+  out.push(await measure("B05 다시"));
+  if (location.hash !== start) await go(start);
+  return JSON.stringify({ ok: out.every((r) => r.ok), out });
+})();