feat(m02): 일위대가 상세 손잡이 맨 왼쪽 · ▲▼ 위아래 · 옵션 · 삭제 2행 높이 · 줄 통째 끌기 · 구분 열 품셈 글(102-1~3)

- 손잡이 = 차례 칸 앞 · 단추 칸 = [▲ · ▼ 세로][옵션|수정][삭제] · 클래스 이름 그대로
- 줄 통째 끌기 = 6px 문턱 · 끈 뒤 누름 한 번 삼킴 · 열린 줄 하위 줄째 · 단추 · 입력칸 · 수량 칸 제외 · 끄는 동안 다시 그림 미룸(Labor_RowDrag)
- 구분 칸 아래 작은 글 건설품셈 · 산림품셈(단가산출 줄만 · 출처 첫 낱말)
- 시험 test_m02_labor_rowdrag(Node 가짜 DOM 하네스)

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

M02_MasterTemplete/M02_MasterTemplete_Labor.css

@@ -90,10 +90,10 @@
   white-space: nowrap;
 }
 
-/* 순서(85-3) — 손잡이 + ▲▼ 작은 단추 · 끌어 놓을 줄 위 선 */
+/* 순서(85-3 · 102-1) — ▲ · ▼ 작은 단추 위아래 · 끌어 놓을 줄 위(위로) · 아래(아래로) 선 */
 .m02-labrow__order {
   display: inline-flex;
-  align-items: center;
+  flex-direction: column;
   gap: 2px;
 }
 
@@ -116,14 +116,37 @@
   box-shadow: inset 0 2px 0 var(--color-primary);
 }
 
-/* 순서 칸 2행(51-14) — 위 손잡이 ▲▼ / 아래 [옵션]·[수정] [삭제] · 줄 사이도 단추 묶음 간격 */
+/* 줄 통째 끌기(102-2) — 끄는 줄 무리 흐리게 · 아래로 놓을 자리 = 그 무리 맨 아래 선 */
+.m02-labrow tr.is-dragging {
+  opacity: 0.5;
+}
+
+.m02-labrow tr.is-dragunder td {
+  box-shadow: inset 0 -2px 0 var(--color-primary);
+}
+
+/* 손잡이(102-1) — 차례 칸 앞 */
+.m02-labrow__no {
+  white-space: nowrap;
+}
+
+/* 단추 칸(51-14 · 102-1) — [▲ · ▼ 위아래][옵션|수정][삭제] · 옵션 · 삭제는 두 단추 높이(2행 병합 꼴) */
 .m02-labrow__tools {
   display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
+  align-items: stretch;
   gap: var(--btn-group-gap);
 }
 
+.m02-labrow__tools > .ui-btn-group {
+  align-items: stretch;
+}
+
+/* 구분 칸 품셈 책(102-3) — 단가산출 줄만 · 아래 작은 글 */
+.m02-labrow__book {
+  display: block;
+  font-size: var(--text-caption);
+}
+
 /* 옵션 값 줄(44-6) — 이름 ~ 합계에 걸친 한 줄 말줄임(max-width 0 = 표 폭을 안 늘림) · 위 줄과 한 덩이 */
 .m02-labrow .m02-labrow__optrow td {
   padding-top: 0;
@@ -396,6 +419,20 @@
     grid-column: 1 / -1;
     max-width: none;
   }
+
+  /* 끌기 선(102-2) — 칸마다 말고 줄 카드 하나에 */
+  .m02-labrow tr.is-dragover td,
+  .m02-labrow tr.is-dragunder td {
+    box-shadow: none;
+  }
+
+  .m02-labrow tr.is-dragover {
+    box-shadow: inset 0 2px 0 var(--color-primary);
+  }
+
+  .m02-labrow tr.is-dragunder {
+    box-shadow: inset 0 -2px 0 var(--color-primary);
+  }
 }
 
 /* 수량산출 칸(40-1) — 위 결과단위 기준 수량 · 아래 지금 수량 · 누르면 손 입력 · 엑셀에서 고르기 */

M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts

@@ -57,6 +57,7 @@ import {
 import { openLaborInput, type GoArea } from "./M02_MasterTemplete_Labor_Input";
 import { openQtyModal } from "./M02_MasterTemplete_Labor_QtyModal";
 import { openRefEdit } from "./M02_MasterTemplete_Labor_RefEdit";
+import { afterRowDrag } from "./M02_MasterTemplete_Labor_RowDrag";
 import { openLogicPicker } from "./M02_MasterTemplete_Labor_Pick";
 import { logicTable, matTable, qtyShort } from "./M02_MasterTemplete_Labor_Rows";
 import { tc } from "./M02_MasterTemplete_Labor_Text";
@@ -180,22 +181,25 @@ export function mountLaborDetail(
   };
   dgBox.addEventListener("toggle", drawDg);
 
+  // 줄 끄는 동안(102-2)엔 다시 그리지 않음 — 끝난 뒤 한 번
   const drawLogic = (): void =>
-    logicHost.replaceChildren(
-      logicTable(
-        { rows: cur.담은로직, logics, calc, fail, cells: cells(), selected: picked },
-        // 읽기만이면 순서 · 삭제 없음([옵션] = 보기 모달은 둠)
-        edit && !promote
-          ? {
-              open: pick,
-              option: openRow,
-              ref: openRef,
-              qty: openQty,
-              move: reorder,
-              remove: removeRow,
-              alias: setAlias,
-            }
-          : { open: pick, option: openRow, ref: openRef },
+    afterRowDrag(logicHost, () =>
+      logicHost.replaceChildren(
+        logicTable(
+          { rows: cur.담은로직, logics, calc, fail, cells: cells(), selected: picked },
+          // 읽기만이면 순서 · 삭제 없음([옵션] = 보기 모달은 둠)
+          edit && !promote
+            ? {
+                open: pick,
+                option: openRow,
+                ref: openRef,
+                qty: openQty,
+                move: reorder,
+                remove: removeRow,
+                alias: setAlias,
+              }
+            : { open: pick, option: openRow, ref: openRef },
+        ),
       ),
     );
   const draw = (): void => {

M02_MasterTemplete/M02_MasterTemplete_Labor_RowDrag.ts

@@ -0,0 +1,126 @@
+/* =============================================================================
+ * M02_MasterTemplete_Labor_RowDrag.ts
+ * 일위대가 담은 로직 줄 통째 끌기(102-2) — 줄 · 옵션 값 줄 · 하위 줄 어디서나(손잡이도 같은 길).
+ * 6px 움직여야 끌기(B05 `Profile_Wheel` 선례) · 그 아래는 누름(열고 닫기) · 끈 뒤 누름 한 번 삼킴(열림 · 닫힘 그대로) ·
+ * 단추 · 입력칸 · 수량 여는 자리에서는 시작 안 함(별칭 글 고르기 85-3) · 놓은 줄 자리로 `move` ·
+ * 끄는 동안 표를 다시 그리지 않음(`afterRowDrag` — 끝난 뒤 한 번).
+ * ========================================================================== */
+
+/** 이만큼 움직여야 끌기 — 그 아래는 누름(B05 와 같음 · 4px 은 손떨림에 넘어감) */
+export const DRAG_THRESHOLD_PX = 6;
+const BLOCK = "button, input, select, textarea, a, [data-labor-qty-open]";
+const HEAD = "tr[data-labor-logic]";
+
+let active = false;
+const queued = new Map<Element, () => void>();
+
+/** 다시 그림 — 끄는 동안이면 끝난 뒤로 미룸(자리마다 마지막 것만) */
+export function afterRowDrag(host: Element, draw: () => void): void {
+  if (active) return void queued.set(host, draw);
+  queued.delete(host);
+  draw();
+}
+
+/** 문턱 — 가로 · 세로 어느 쪽이든 6px 이면 끌기 */
+export const pastThreshold = (dx: number, dy: number): boolean =>
+  Math.abs(dx) >= DRAG_THRESHOLD_PX || Math.abs(dy) >= DRAG_THRESHOLD_PX;
+
+/** 그 줄이 속한 로직 줄(옵션 값 줄 · 하위 줄은 위로 올라가 찾음) */
+const headOf = (tr: Element | null | undefined): Element | null => {
+  let t = tr ?? null;
+  while (t && !t.matches(HEAD)) t = t.previousElementSibling;
+  return t;
+};
+
+/** 로직 줄 무리 — 로직 줄 + 옵션 값 줄 + 하위 줄 */
+const groupOf = (head: Element): Element[] => {
+  const out = [head];
+  for (let t = head.nextElementSibling; t && !t.matches(HEAD); t = t.nextElementSibling)
+    out.push(t);
+  return out;
+};
+
+/** `root` = 표 감싼 칸 · 줄 차례 = tbody 안 로직 줄 차례(같은 로직 두 줄이어도 자리로 셈) */
+export function attachRowDrag(root: HTMLElement, move: (from: number, to: number) => void): void {
+  let id: number | null = null;
+  let x = 0;
+  let y = 0;
+  let moved = false;
+  let from = -1;
+  let to = -1;
+  let marks: Element[] = [];
+  const heads = (): Element[] => [...root.querySelectorAll(`tbody > ${HEAD}`)];
+  const unmark = (): void => {
+    for (const m of marks) m.classList.remove("is-dragging", "is-dragover", "is-dragunder");
+    marks = [];
+  };
+  const mark = (els: Element[], cls: string): void => {
+    for (const e of els) e.classList.add(cls);
+    marks.push(...els);
+  };
+
+  const end = (drop: boolean): void => {
+    const pid = id;
+    id = null;
+    if (pid === null || !moved) return;
+    moved = false;
+    if (root.hasPointerCapture(pid)) root.releasePointerCapture(pid);
+    unmark();
+    root.style.userSelect = "";
+    root.style.cursor = "";
+    active = false;
+    // 끈 뒤 누름 한 번 삼킴(캡처 · 다음 프레임에 걷음) — 열림 · 닫힘 그대로
+    const swallow = (e: MouseEvent): void => {
+      e.stopPropagation();
+      e.preventDefault();
+    };
+    window.addEventListener("click", swallow, { capture: true, once: true });
+    requestAnimationFrame(() => window.removeEventListener("click", swallow, { capture: true }));
+    if (drop && to >= 0 && to !== from) move(from, to);
+    const later = [...queued.values()];
+    queued.clear();
+    for (const draw of later) draw();
+  };
+
+  root.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0 || moved) return;
+    const t = e.target as Element;
+    if (t.closest(BLOCK)) return;
+    const head = headOf(t.closest("tbody > tr"));
+    from = head ? heads().indexOf(head) : -1;
+    if (from < 0) return;
+    id = e.pointerId;
+    x = e.clientX;
+    y = e.clientY;
+    to = -1;
+  });
+
+  root.addEventListener("pointermove", (e) => {
+    if (id !== e.pointerId) return;
+    if (!moved) {
+      if (!(e.buttons & 1)) return void (id = null); // 누름 없이 들어옴 — 끌기 아님
+      if (!pastThreshold(e.clientX - x, e.clientY - y)) return;
+      moved = true;
+      active = true;
+      // 이제부터 끌기 — 표 밖으로 나가도 이어지게 포인터를 잡음 · 글자 고름 막음
+      root.setPointerCapture(e.pointerId);
+      root.style.userSelect = "none";
+      root.style.cursor = "grabbing";
+      window.getSelection()?.removeAllRanges();
+    }
+    e.preventDefault();
+    unmark();
+    const list = heads();
+    if (list[from]) mark(groupOf(list[from]), "is-dragging");
+    const over = headOf(document.elementFromPoint(e.clientX, e.clientY)?.closest("tbody > tr"));
+    to = over ? list.indexOf(over) : -1;
+    if (!over || to < 0 || to === from) return;
+    // 위로 = 놓을 줄 위 선 · 아래로 = 놓을 줄 무리 아래 선(그 뒤로 감)
+    if (to < from) mark([over], "is-dragover");
+    else mark(groupOf(over).slice(-1), "is-dragunder");
+  });
+
+  root.addEventListener("pointerup", () => end(true));
+  root.addEventListener("pointercancel", () => end(false));
+  root.addEventListener("lostpointercapture", () => end(false));
+}

M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts

@@ -23,6 +23,7 @@ import type {
   LaborRow,
 } from "./M02_MasterTemplete_Labor_Api";
 import { lineId } from "./M02_MasterTemplete_Labor_Calc";
+import { attachRowDrag } from "./M02_MasterTemplete_Labor_RowDrag";
 import { tc } from "./M02_MasterTemplete_Labor_Text";
 import "@ui/ui_template_general_layout.css";
 import "./M02_MasterTemplete_Labor.css";
@@ -47,6 +48,9 @@ export const kindOf = (row: Pick<LaborRow, "로직" | "참조">): string => {
   );
 };
 
+/** 품셈 책(102-3) — 출처 첫 낱말 */
+const BOOK = /^(건설|산림)품셈/;
+
 const num = (v: number): string =>
   Number(v.toPrecision(12)).toLocaleString("ko-KR", { maximumFractionDigits: 6 });
 
@@ -148,9 +152,6 @@ function moneyCell(
 }
 
 /** 이름 칸 글마다 title = 전체 글(한 줄 말줄임 · 45-7) */
-/** 끌고 있는 줄 차례(85-3) — 손잡이 dragstart ~ drop */
-let dragFrom: number | null = null;
-
 const titled = (td: HTMLElement): HTMLElement => {
   for (const c of td.children) c.setAttribute("title", c.textContent ?? "");
   return td;
@@ -182,7 +183,7 @@ export interface RowHandlers {
   ref?: (i: number) => void;
   /** 수량산출 칸 누름(손 입력 · 엑셀에서 고르기) — 없으면 줄 누름과 같음 */
   qty?: (i: number) => void;
-  /** 줄 순서(85-3) — from 줄을 to 자리로(▲▼ = 옆 자리 · 손잡이 끌기 = 놓은 줄 자리) */
+  /** 줄 순서(85-3) — from 줄을 to 자리로(▲▼ = 옆 자리 · 줄 끌기 102-2 = 놓은 줄 자리) */
   move?: (from: number, to: number) => void;
   remove?: (i: number) => void;
   /** 별칭 칸 고침(44-6 · 글자마다 · 빈 글 = null) — 없으면 글만 보임 */
@@ -315,6 +316,7 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
       row.켜쌓기율 != null ? tc("Labor_Layer").replace("{n}", String(row.켜쌓기율)) : "";
     const note = [values.text, layer].filter(Boolean).join(" · ");
     const why = line?.까닭 ?? (data.fail && i === 0 ? data.fail : null);
+    const book = row.참조 ? undefined : BOOK.exec(logic?.출처 ?? "")?.[0];
     const small = (
       label: string,
       run: () => void,
@@ -328,7 +330,7 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
           run();
         },
       });
-    // 순서(85-3) — ▲▼ 작은 단추(글은 title · aria) + 손잡이 끌기(줄 전체는 안 끎 · 별칭 칸 글 고르기)
+    // 순서(85-3) — ▲▼ 작은 단추(글은 title · aria) · 손잡이 = 차례 칸 앞(102-1) · 끌기는 줄 통째(102-2 · `Labor_RowDrag`)
     const arrow = (mark: string, label: string, to: number): HTMLElement => {
       const b = small(mark, () => move?.(i, to));
       b.classList.add("m02-labrow__arrow");
@@ -341,17 +343,9 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
       const g = el("span", {
         className: "m02-labrow__grip",
         text: "⠿",
-        attrs: { draggable: "true", title: tc("Labor_Drag"), "data-labor-grip": String(i) },
-      });
-      g.addEventListener("click", (e) => e.stopPropagation());
-      g.addEventListener("dragstart", (ev) => {
-        dragFrom = i;
-        ev.dataTransfer?.setData("text/plain", String(i));
-        if (ev.dataTransfer) ev.dataTransfer.effectAllowed = "move";
-      });
-      g.addEventListener("dragend", () => {
-        dragFrom = null;
+        attrs: { title: tc("Labor_Drag"), "data-labor-grip": String(i) },
       });
+      g.addEventListener("click", (e) => e.stopPropagation()); // 손잡이 누름은 열고 닫지 않음
       return g;
     };
     const sel = data.selected === id ? " is-selected" : "";
@@ -359,8 +353,18 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
       className: (on ? "m02-labrow__row is-open" : "m02-labrow__row") + sel,
       attrs: { "data-labor-logic": id },
       children: [
-        el("td", { className: "m02-labrow__no", text: String(i + 1) }),
-        el("td", { className: "m02-labrow__kind", text: kindOf(row) }),
+        el("td", {
+          className: "m02-labrow__no",
+          children: move ? [grip(), String(i + 1)] : [String(i + 1)],
+        }),
+        el("td", {
+          className: "m02-labrow__kind",
+          children: [
+            kindOf(row),
+            // 102-3 — 단가산출 줄만 품셈 책(출처 첫 낱말)
+            ...(book ? [el("small", { className: "m02-labrow__book", text: book })] : []),
+          ],
+        }),
         titled(
           el("td", {
             className: "m02-labrow__name",
@@ -406,7 +410,6 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
                             el("div", {
                               className: "m02-labrow__order",
                               children: [
-                                grip(),
                                 arrow("▲", tc("Up"), i - 1),
                                 arrow("▼", tc("Down"), i + 1),
                               ],
@@ -437,21 +440,6 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
       ],
     });
     if (on) tr.addEventListener("click", () => on.open(i));
-    if (move) {
-      tr.addEventListener("dragover", (ev) => {
-        if (dragFrom === null || dragFrom === i) return;
-        ev.preventDefault();
-        tr.classList.add("is-dragover");
-      });
-      tr.addEventListener("dragleave", () => tr.classList.remove("is-dragover"));
-      tr.addEventListener("drop", (ev) => {
-        ev.preventDefault();
-        tr.classList.remove("is-dragover");
-        const from = dragFrom;
-        dragFrom = null;
-        if (from !== null && from !== i) move(from, i);
-      });
-    }
     const subs = sel ? subRows(line, wait, tools) : [];
     if (!note) return [tr, ...subs];
     // 옵션 값 줄(44-6) — 이름 ~ 합계 칸에 걸친 한 줄(말줄임 · 전체 글은 title) · 행 높이 안 커짐
@@ -509,9 +497,10 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
     ...COSTS.map((c) => tc(HEAD[c])),
     ...(tools ? [tc("Col_Move")] : []),
   ];
-  return data.rows.length
-    ? table(heads, trs, foot)
-    : el("p", { className: "m02-labrow__muted", text: tc("NoLogic") });
+  if (!data.rows.length) return el("p", { className: "m02-labrow__muted", text: tc("NoLogic") });
+  const out = table(heads, trs, foot);
+  if (move) attachRowDrag(out, move);
+  return out;
 }
 
 export interface MatTableData {