feat(M02): 47-5 일위대가 줄 누름 = 고름 하이라이트 · [옵션] 단추로 넣을 값 모달 · 줄 단추 공용 묶음

- 단가산출 로직 표 줄 누름 = 고른 줄 하이라이트(로직 키 · 다시 그려도 유지) · 넣을 값 모달은 새 [옵션] 단추
- 줄 단추 이름 위로 · 아래로 · 옵션 · 삭제(빨강) · 카드 갈래 = 옵션 · 삭제
- 공용 단추 묶음 `ui-btn-group` · 간격 토큰 `--btn-group-gap`(4px) — 이 표에만 적용
- 시험: test_m02_card_shell 낡은 글 맞춤 + 47-5 확인 · 화면 시나리오 ui_checks/47-5_일위대가_줄_고름.js

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7

resources/tester/test_m02_card_shell.py

@@ -78,7 +78,7 @@ def test_일위대가_카드는_상세_카드_갈래():
     assert "...(opt.card ? {} : { move })" in detail  # 순서 단추 없음 · 빼기는 그대로
     assert "opt.card ? null : addLogic" in detail and "...(opt.card ? [] : [dgBox])," in detail
     rows = _text("M02_MasterTemplete_Labor_Rows.ts")
-    assert "const tools = !!(move || remove);" in rows and "compactTable" not in rows
+    assert "const tools = !!(move || remove || option);" in rows and "compactTable" not in rows
     assert "compact" not in _text("M02_MasterTemplete_Labor_View.ts").split("*/", 1)[1]
 
 
@@ -90,3 +90,24 @@ def test_일위대가_상세_단위는_표준_단위_고르기():
     assert "extra: [unit0, cur.단위].filter((u): u is string => !!u)," in detail
     assert "cur.단위 = u === NO_UNIT ? null : u;" in detail
     assert "readOnly: !edit," in detail and "maxLength = 20" not in detail
+
+
+def test_일위대가_줄_고름과_옵션_단추():
+    """47-5 — 줄 누름 = 고름(하이라이트 · 키로 둬서 다시 그려도 유지) · 넣을 값 모달 = [옵션] ·
+    단추 위로 · 아래로 · 옵션 · 삭제(빨강) · 묶음 간격 = 공용 `ui-btn-group`."""
+    detail = _text("M02_MasterTemplete_Labor_Detail.ts")
+    assert "open: pick," in detail and "option: openRow," in detail
+    assert "{ open: pick, option: openRow }" in detail  # 읽기만도 고름 · [옵션] = 보기 모달
+    assert "selected: picked" in detail
+    rows = _text("M02_MasterTemplete_Labor_Rows.ts")
+    up, down = rows.index('small(tc("Up")'), rows.index('small(tc("Down")')
+    opt, rm = (
+        rows.index('small(tc("Labor_Option")'),
+        rows.index('small(tc("Remove"), () => remove(i), "danger")'),
+    )
+    assert up < down < opt < rm and 'className: "ui-btn-group"' in rows
+    text = _text("M02_MasterTemplete_Labor_Text.ts")
+    for t in ('Up: ["위로"', 'Down: ["아래로"', 'Remove: ["삭제"', 'Labor_Option: ["옵션"'):
+        assert t in text
+    css = (ROOT / "ui_template" / "ui_template_general_layout.css").read_text(encoding="utf-8")
+    assert ".ui-btn-group {" in css and "gap: var(--btn-group-gap);" in css

resources/tester/ui_checks/47-5_일위대가_줄_고름.js

@@ -0,0 +1,128 @@
+/* 47-5 — 일위대가 단가산출 로직 표 줄 누름 = 고름(하이라이트) · 넣을 값 모달 = [옵션] · 줄 단추 꼴 — 카드 · 상세 두 곳
+ * 시작 화면: M02 마스터 템플릿 · 마스터 층(#/m02-master-template?open=구조물조합&root=master) · 시스템 관리자 ·
+ *   나무에 item1(구조물 조합 · 일위대가 로직 둘 이상)이 있음
+ * 부르는 법: orca eval --expression "$(tr '\n' ' ' < 이 파일)" (async 식 · JSON 글을 돌려줌)
+ * 하는 일: item1 카드 표 → 일위대가 카드 [수정]으로 상세 → 둘째 줄 아래로 · 위로(제자리) → item1 다시(값 안 바뀜)
+ * 기대 수치:
+ *   - card.btns = ["옵션","삭제"] · detail.btns = ["위로","아래로","옵션","삭제"] · danger = true(삭제 = ui-btn--danger)
+ *   - gap = "4px"(공용 `ui-btn-group` · `--btn-group-gap`) · 단추 사이 실제 틈 = gap
+ *   - pick.selected = 1(누른 줄만 is-selected · 옵션 값 줄 있으면 함께) · pick.modal = 0(줄 누름이 모달을 안 엶)
+ *   - option.modal = 1(옵션 단추 = 넣을 값 모달) · 닫은 뒤 0
+ *   - kept.afterDown = 고른 키가 셋째 줄에서 is-selected · kept.afterUp = 둘째 줄에서 is-selected(다시 그려도 유지)
+ *   - back = true(카드 화면으로 돌아감)
+ */
+(async () => {
+  const w = (ms) => new Promise((r) => setTimeout(r, ms));
+  const until = async (fn, ms = 8000) => {
+    for (let t = 0; t < ms; t += 150) {
+      const v = fn();
+      if (v) return v;
+      await w(150);
+    }
+    return null;
+  };
+  const modals = () => document.querySelectorAll(".ui-modal__backdrop").length;
+  const closeModal = async () => {
+    document.querySelector(".ui-modal__top button")?.click();
+    await w(300);
+  };
+  const rowsOf = (t) => [...t.querySelectorAll("tbody tr[data-labor-logic]")];
+  const btnsOf = (tr) => [...tr.querySelectorAll(".ui-btn-group button")];
+  /* 금액 셈이 끝나 표가 더 안 바뀔 때까지(셈 중 「…」) — 표는 다시 그려지므로 늘 살아 있는 표를 다시 찾음 */
+  const settled = (get) =>
+    until(() => {
+      const t = get();
+      return t && !/…/.test(t.querySelector("tbody").innerText) ? t : null;
+    }, 10000);
+  const measure = async (get) => {
+    const t = await settled(get);
+    const rows = rowsOf(t);
+    const tr = rows[1] ?? rows[0];
+    const btns = btnsOf(tr);
+    const group = tr.querySelector(".ui-btn-group");
+    const gaps = btns
+      .slice(1)
+      .map((b, i) =>
+        Math.round(b.getBoundingClientRect().left - btns[i].getBoundingClientRect().right),
+      );
+    const del = btns.find((b) => b.innerText.trim() === "삭제");
+    const key = tr.getAttribute("data-labor-logic");
+    tr.querySelector(".m02-labrow__name").click();
+    await w(200);
+    const live = get();
+    const pick = {
+      key,
+      selected: rowsOf(live).filter((r) => r.classList.contains("is-selected")).length,
+      mine: !!live.querySelector(`tr[data-labor-logic="${key}"].is-selected`),
+      opt:
+        live.querySelector(`tr[data-labor-opt="${key}"]`)?.classList.contains("is-selected") ??
+        null,
+      bg: getComputedStyle(live.querySelector(`tr[data-labor-logic="${key}"]`)).backgroundColor,
+      modal: modals(),
+    };
+    btnsOf(live.querySelector(`tr[data-labor-logic="${key}"]`))
+      .find((b) => b.innerText.trim() === "옵션")
+      ?.click();
+    await until(() => modals() > 0, 3000);
+    const option = { modal: modals() };
+    await closeModal();
+    option.after = modals();
+    return {
+      btns: btns.map((b) => b.innerText.trim()),
+      danger: !!del && del.className.includes("ui-btn--danger"),
+      gap: group && getComputedStyle(group).gap,
+      gaps,
+      pick,
+      option,
+    };
+  };
+  const node = await until(() => document.querySelector('[data-node="i|item1"]'));
+  if (!node) return JSON.stringify({ error: "item1 없음 — 폴더를 펼쳐 둘 것" });
+  node.click();
+  const card = await until(() =>
+    [...document.querySelectorAll(".m02-struct__card")].find((c) =>
+      c.querySelector("table.m02-labrow tbody tr[data-labor-logic]"),
+    ),
+  );
+  if (!card) return JSON.stringify({ error: "일위대가 카드 표 없음" });
+  await w(1500);
+  const out = { card: await measure(() => card.querySelector("table.m02-labrow")) };
+  const edit = [...card.querySelectorAll(".m02-struct__card-tools button")].find(
+    (b) => b.innerText.trim() === "수정",
+  );
+  if (!edit) return JSON.stringify({ ...out, error: "일위대가 [수정] 없음" });
+  edit.click();
+  const dt = await until(() =>
+    [...document.querySelectorAll("table.m02-labrow")].find(
+      (t) => !t.closest(".m02-struct__card") && t.querySelector("tbody tr[data-labor-logic]"),
+    ),
+  );
+  if (!dt) return JSON.stringify({ ...out, error: "상세 표 없음" });
+  await w(2000);
+  const table = () =>
+    [...document.querySelectorAll("table.m02-labrow")].find((t) => !t.closest(".m02-struct__card"));
+  out.detail = await measure(table);
+  /* 다시 그려도 유지 — 고른 줄 아래로(서버 다시 셈 → 다시 그림) → 위로(제자리) */
+  const key = out.detail.pick.key;
+  const selAt = () => rowsOf(table()).findIndex((r) => r.classList.contains("is-selected"));
+  const press = async (label) => {
+    const tr = table().querySelector(`tr[data-labor-logic="${key}"]`);
+    btnsOf(tr)
+      .find((b) => b.innerText.trim() === label)
+      ?.click();
+    await w(2500);
+  };
+  await press("아래로");
+  out.kept = { afterDown: selAt() };
+  await press("위로");
+  out.kept.afterUp = selAt();
+  /* 카드 화면으로 돌아감(순서는 제자리 — 버림 물음 뜨면 확인) */
+  document.querySelector('[data-node="i|item1"]')?.click();
+  await w(800);
+  [...document.querySelectorAll(".ui-modal button, dialog button")]
+    .find((b) => /확인|버림|떠나기/.test(b.innerText))
+    ?.click();
+  await w(1200);
+  out.back = !!document.querySelector(".m02-struct__card table.m02-labrow");
+  return JSON.stringify(out);
+})();