feat(M02): 51-14 일위대가 순서 칸 2행 — 위 [위로] [아래로] / 아래 [옵션]·[수정] [삭제] · 단가승격 [옵션] · 일위조합 [수정] 서고 원본 모달

- 순서 칸 = 단추 묶음 두 줄(공용 ui-btn-group 간격) · 카드 갈래는 아래 줄만
- 단가승격 줄 [옵션] = 승격 문서 넣을 값 모달 · [저장] = 서고 저장 길 · 머리 한 줄 알림(쓰는 모든 구조물에 따라감)
- 일위조합 줄 [수정] = 사전조합 상세 모달(서고 모드 표 · 옵션 · 수량 · 순서 · 삭제 · 추가) · [저장] = 서고 원본 · 취소 = 버림 물음
- 자기 층 서고만 고침(위 층 = 읽기만) · 닫으면 구조물 일위대가 다시 셈
- 확인 시나리오 resources/tester/ui_checks/51-14_순서칸_2행_옵션수정.js

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

M02_MasterTemplete/M02_MasterTemplete_Labor.css

@@ -90,6 +90,14 @@
   white-space: nowrap;
 }
 
+/* 순서 칸 2행(51-14) — 위 [위로] [아래로] / 아래 [옵션]·[수정] [삭제] · 줄 사이도 단추 묶음 간격 */
+.m02-labrow__tools {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--btn-group-gap);
+}
+
 /* 옵션 값 줄(44-6) — 이름 ~ 합계에 걸친 한 줄 말줄임(max-width 0 = 표 폭을 안 늘림) · 위 줄과 한 덩이 */
 .m02-labrow .m02-labrow__optrow td {
   padding-top: 0;
@@ -179,6 +187,11 @@
   color: var(--color-primary);
 }
 
+/* 참조 줄 모달(51-14) — 일위조합 [수정] = 사전조합 상세 */
+.m02-labref {
+  width: min(72rem, calc(100vw - 32px));
+}
+
 /* 입력 모달 */
 .m02-labin {
   width: min(40rem, calc(100vw - 32px));

M02_MasterTemplete/M02_MasterTemplete_Labor_Detail.ts

@@ -3,7 +3,7 @@
  * 일위대가 상세(39-3) — 구조물 열마다 하나(`labor/<열>.json`) · UI_Main 종류 `labor` 가 이 부품을 붙임
  * (양식 길 읽기 · [저장] · [다시 읽기]는 UI_Main). 차례 = 정보(단위 · 본뜬) → 담은 로직 → 자재목록 → 다이어그램.
  *  · 담은 로직 줄 누름 = 고름(하이라이트 · 다시 그려도 유지 · 47-5) + 그 줄 바로 아래 하위 행(51-2 · `Labor_Rows`) ·
- *    같은 줄 다시 누르면 닫힘 · [옵션] = 입력 모달(`Labor_Input`) ·
+ *    같은 줄 다시 누르면 닫힘 · [옵션] = 입력 모달(`Labor_Input`) · 참조 줄 [옵션] · [수정] = 서고 원본 모달(51-14 · `Labor_RefEdit`) ·
  *    [확인] = 화면 캐시만 · 저장은 [저장]
  *  · 금액 = 서버 calc(기준 ③ · 최신 응답만 · 저장 안 함) · 고칠 때마다 뒤에서 다시 셈
  *  · 같은 로직 두 번 · 같은 자재 두 번 막음 · 빈 일위대가도 저장 됨
@@ -47,6 +47,7 @@ import {
 } from "./M02_MasterTemplete_Labor_Diagram";
 import { openLaborInput, type GoArea } from "./M02_MasterTemplete_Labor_Input";
 import { openQtyModal } from "./M02_MasterTemplete_Labor_QtyModal";
+import { openRefEdit } from "./M02_MasterTemplete_Labor_RefEdit";
 import { openLogicPicker } from "./M02_MasterTemplete_Labor_Pick";
 import { logicTable, matTable, qtyShort } from "./M02_MasterTemplete_Labor_Rows";
 import { tc } from "./M02_MasterTemplete_Labor_Text";
@@ -174,12 +175,13 @@ export function mountLaborDetail(
           ? {
               open: pick,
               option: openRow,
+              ref: openRef,
               qty: openQty,
               ...(opt.card ? {} : { move }),
               remove: removeRow,
               alias: setAlias,
             }
-          : { open: pick, option: openRow },
+          : { open: pick, option: openRow, ref: openRef },
       ),
     );
   const draw = (): void => {
@@ -347,6 +349,19 @@ export function mountLaborDetail(
     });
   }
 
+  /** 참조 줄 [옵션] · [수정](51-14) — 서고 원본 모달 · 자기 층 서고만 고침(위 층 = 읽기만 · 서버도 막음) ·
+   * 닫으면 다시 셈(원본이 바뀌었을 수 있음) */
+  function openRef(i: number): void {
+    const ref = cur.담은로직[i].참조;
+    if (!ref) return;
+    void openRefEdit({
+      ref,
+      title: `${ref.키} ${lineOf(lineId({ 참조: ref }) ?? "")?.이름 ?? ""}`.trim(),
+      readOnly: !edit || ref.층 !== opt.layer,
+      closed: () => alive && recalc(),
+    });
+  }
+
   /** 수량산출 칸 누름 — 로직 줄 */
   function openQty(i: number): void {
     const row = cur.담은로직[i];

M02_MasterTemplete/M02_MasterTemplete_Labor_Input.ts

@@ -19,14 +19,19 @@ const fill = (text: string, value: string): string => text.replace("{value}", va
 /** 면적산출 상세로 감 — 옮겨 갔으면 참(물음에서 취소 = 거짓) */
 export type GoArea = () => Promise<boolean>;
 
-function footer(readOnly: boolean, ok: () => void, close: () => void): HTMLElement {
+function footer(
+  readOnly: boolean,
+  ok: () => void,
+  close: () => void,
+  okLabel = tc("In_Ok"),
+): HTMLElement {
   return el("div", {
     className: "m02-labin__foot",
     children: readOnly
       ? [createButton({ label: tc("In_Close"), variant: "ghost", onClick: close })]
       : [
           createButton({ label: tc("In_Cancel"), variant: "ghost", onClick: close }),
-          createButton({ label: tc("In_Ok"), variant: "filled", onClick: ok }),
+          createButton({ label: okLabel, variant: "filled", onClick: ok }),
         ],
   });
 }
@@ -45,6 +50,10 @@ export interface LaborInputOptions {
   memo: string | null;
   readOnly: boolean;
   done: (next: LaborInputResult) => void;
+  /** 머리 한 줄 알림(51-14 · 서고 원본 고침) */
+  notice?: string;
+  /** 확인 단추 글(기본 「확인」) */
+  okLabel?: string;
 }
 
 /** 담은 로직 줄 입력 모달 */
@@ -100,6 +109,15 @@ export function openLaborInput(opt: LaborInputOptions): void {
         el("div", {
           className: "m02-inputval",
           children: [
+            ...(opt.notice
+              ? [
+                  el("p", {
+                    className: "m02-labin__muted",
+                    text: opt.notice,
+                    attrs: { "data-labor-notice": "" },
+                  }),
+                ]
+              : []),
             ...(lost.length
               ? [
                   el("p", {
@@ -120,7 +138,7 @@ export function openLaborInput(opt: LaborInputOptions): void {
             }),
           ],
         }),
-        footer(opt.readOnly, ok, close),
+        footer(opt.readOnly, ok, close, opt.okLabel),
       );
     },
   });

M02_MasterTemplete/M02_MasterTemplete_Labor_RefEdit.ts

@@ -0,0 +1,134 @@
+/* =============================================================================
+ * M02_MasterTemplete_Labor_RefEdit.ts
+ * 일위대가 참조 줄 모달(51-14) — 서고 원본(50-3)을 그 자리에서 고침 · [저장] = 서고 저장 길(`saveTemplate`) ·
+ * 그 문서를 쓰는 모든 구조물에 따라감(머리 한 줄 알림) · 그 층을 못 고치면 읽기만.
+ *  · 단가승격 [옵션] = 승격 문서 로직 한 줄의 넣을 값 모달(`Labor_Input`)
+ *  · 일위조합 [수정] = 사전조합 상세(서고 모드 표 · 안 줄 [옵션] · 수량 · 위로 · 아래로 · 삭제 · 추가)
+ * 닫으면(저장 · 취소 모두) `closed` — 부르는 쪽이 구조물 일위대가 표를 다시 셈.
+ * ========================================================================== */
+
+import { createButton, el, showConfirmDialog, showToast } from "@ui/ui_template_elements";
+import { openModal } from "@ui/ui_template_modal";
+import { readTemplate, saveTemplate, type Layer } from "./M02_MasterTemplete_Api_Fetch";
+import { fetchLogicInputs, type LaborRow } from "./M02_MasterTemplete_Labor_Api";
+import type { LaborRef } from "./M02_MasterTemplete_Labor_Calc";
+import { openLaborInput } from "./M02_MasterTemplete_Labor_Input";
+import { tc } from "./M02_MasterTemplete_Labor_Text";
+import { keepKnown } from "./M02_Labor_Values_Model";
+
+export interface RefEditOptions {
+  ref: LaborRef;
+  /** 「SP-000001 메쌓기」 */
+  title: string;
+  readOnly: boolean;
+  closed: () => void;
+}
+
+const fail = (error: unknown, key: "Load_Failed" | "Lib_SaveFailed"): void =>
+  showToast(error instanceof Error ? error.message : tc(key), "error");
+
+export async function openRefEdit(opt: RefEditOptions): Promise<void> {
+  const kind = opt.ref.키.startsWith("SP-") ? "promote" : "precombo";
+  const layer = opt.ref.층 as Layer;
+  let doc: { 담은로직?: LaborRow[] };
+  let 판: string;
+  try {
+    const got = await readTemplate(layer, kind, opt.ref.키, null);
+    doc = got.문서 as typeof doc;
+    판 = got.판 ?? "";
+  } catch (error) {
+    return fail(error, "Load_Failed");
+  }
+  const save = (body: unknown): Promise<unknown> =>
+    saveTemplate(layer, kind, opt.ref.키, null, 판, body).then(() =>
+      showToast(tc("Saved"), "success"),
+    );
+  const notice = opt.readOnly ? `${tc("Ref_Shared")} · ${tc("Ref_ReadOnly")}` : tc("Ref_Shared");
+
+  if (kind === "promote") {
+    const row = doc.담은로직?.[0];
+    if (!row) return fail(null, "Load_Failed");
+    const logic = row.로직
+      ? ((await fetchLogicInputs([row.로직]).catch(() => null))?.로직[0] ?? null)
+      : null;
+    return openLaborInput({
+      title: opt.title,
+      logic,
+      values: row.입력값,
+      memo: row.메모,
+      readOnly: opt.readOnly,
+      notice,
+      okLabel: tc("Save"),
+      done: (next) => {
+        row.입력값 = logic ? keepKnown(logic.입력, next.입력값).kept : next.입력값;
+        row.메모 = next.메모;
+        void save(doc)
+          .catch((error) => fail(error, "Lib_SaveFailed"))
+          .finally(opt.closed);
+      },
+    });
+  }
+
+  // 사전조합 — 상세와 같은 부품(서로 부르므로 늦게 받음)
+  const { mountLaborDetail } = await import("./M02_MasterTemplete_Labor_Detail");
+  let dirty = false;
+  let handle: ReturnType<typeof mountLaborDetail> | null = null;
+  const finish = (): void => {
+    handle?.destroy();
+    opt.closed();
+  };
+  openModal({
+    title: opt.title,
+    closeLabel: tc("In_Close"),
+    dialogClass: "m02-modal m02-labref",
+    beforeClose: async () => {
+      if (dirty && !(await showConfirmDialog(tc("Ref_Discard")))) return false;
+      finish();
+      return true;
+    },
+    mount: (body, close) => {
+      const host = el("div", { attrs: { "data-labor-ref": opt.ref.키 } });
+      handle = mountLaborDetail(host, doc, {
+        layer,
+        column: opt.ref.키,
+        readOnly: opt.readOnly,
+        onChanged: (d) => (dirty = d && !opt.readOnly),
+        goArea: null,
+        mode: "precombo",
+      });
+      const cancel = createButton({
+        label: tc(opt.readOnly ? "In_Close" : "In_Cancel"),
+        variant: "ghost",
+        onClick: async () => {
+          if (dirty && !(await showConfirmDialog(tc("Ref_Discard")))) return;
+          close();
+          finish();
+        },
+      });
+      const ok = createButton({
+        label: tc("Save"),
+        variant: "filled",
+        onClick: () =>
+          void save(handle?.getDoc()).then(
+            () => {
+              close();
+              finish();
+            },
+            (error) => fail(error, "Lib_SaveFailed"),
+          ),
+      });
+      body.append(
+        el("p", {
+          className: "m02-labin__muted",
+          text: notice,
+          attrs: { "data-labor-notice": "" },
+        }),
+        host,
+        el("div", {
+          className: "m02-labin__foot",
+          children: opt.readOnly ? [cancel] : [cancel, ok],
+        }),
+      );
+    },
+  });
+}

M02_MasterTemplete/M02_MasterTemplete_Labor_Rows.ts

@@ -6,7 +6,8 @@
  * 옵션 값(「지역 서울 · 규격 25mm」)은 줄 아래 이름 ~ 합계에 걸친 한 줄 · 맨 아래 합계 줄(전체 합계 강조).
  * 자재목록 = 코드 · 이름 · 규격 · 수량산출 · 단위 · 가격 다섯(기준 칸 강조) · 기준단가 / 반영 금액(43-3).
  * 금액은 calc 답(없으면 「…」).
- * 줄 누름 · 줄 단추(위로 · 아래로 · 옵션 · 삭제 · 묶음 `ui-btn-group`)는 `on` 이 있을 때만(보기 갈래 = 없음) ·
+ * 줄 누름 · 줄 단추는 `on` 이 있을 때만(보기 갈래 = 없음) — 순서 칸 2행(51-14 · 위 [위로] [아래로] / 아래 [옵션] 또는 [수정] · [삭제] ·
+ * 묶음 `ui-btn-group` · 순서 없는 카드 갈래 = 아래 줄만) · 단가승격 줄 = [옵션] · 일위조합 줄 = [수정](`ref` · 서고 원본) ·
  * 상세는 줄 누름 = 고름(`selected` 줄 하이라이트 · 그 줄 바로 아래 하위 행 · 51-2 · 화살표 없음 51-7) · 넣을 값 모달은 [옵션](47-5).
  * ========================================================================== */
 
@@ -174,6 +175,8 @@ export interface RowHandlers {
   open: (i: number) => void;
   /** [옵션] 단추(47-5 · 넣을 값 모달) — 없으면 단추 없음 */
   option?: (i: number) => void;
+  /** 참조 줄 단추(51-14) — 단가승격 [옵션] · 일위조합 [수정] = 서고 원본 모달 · 없으면 단추 없음 */
+  ref?: (i: number) => void;
   /** 수량산출 칸 누름(손 입력 · 엑셀에서 고르기) — 없으면 줄 누름과 같음 */
   qty?: (i: number) => void;
   move?: (i: number, d: number) => void;
@@ -290,9 +293,11 @@ function subRows(line: LaborCalcLine | undefined, wait: boolean, tools: boolean)
 /** 담은 로직 표 — 보기 갈래는 `on` 없이 */
 export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement {
   const wait = !data.calc && !data.fail;
-  const { move, remove, option } = on ?? {};
+  const { move, remove, option, ref } = on ?? {};
   // 옵션 · 삭제만(구조물 조합 카드 · 43-4)이어도 끝 칸 — 순서 단추는 `move` 가 있을 때만
-  const tools = !!(move || remove || option);
+  const tools = !!(move || remove || option || ref);
+  const group = (children: HTMLElement[]): HTMLElement =>
+    el("div", { className: "ui-btn-group", children });
   const lineOf = (key: string): LaborCalcLine | undefined =>
     data.calc?.줄.find((l) => lineId(l) === key);
   const trs = data.rows.flatMap((row, i) => {
@@ -362,13 +367,31 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
                 className: "m02-labrow__move",
                 children: [
                   el("div", {
-                    className: "ui-btn-group",
+                    className: "m02-labrow__tools",
                     children: [
                       ...(move
-                        ? [small(tc("Up"), () => move(i, -1)), small(tc("Down"), () => move(i, 1))]
+                        ? [
+                            group([
+                              small(tc("Up"), () => move(i, -1)),
+                              small(tc("Down"), () => move(i, 1)),
+                            ]),
+                          ]
                         : []),
-                      ...(option && !row.참조 ? [small(tc("Labor_Option"), () => option(i))] : []),
-                      ...(remove ? [small(tc("Remove"), () => remove(i), "danger")] : []),
+                      group([
+                        ...(row.참조
+                          ? ref
+                            ? [
+                                small(
+                                  tc(row.참조.키.startsWith("SP-") ? "Labor_Option" : "Labor_Edit"),
+                                  () => ref(i),
+                                ),
+                              ]
+                            : []
+                          : option
+                            ? [small(tc("Labor_Option"), () => option(i))]
+                            : []),
+                        ...(remove ? [small(tc("Remove"), () => remove(i), "danger")] : []),
+                      ]),
                     ],
                   }),
                 ],

M02_MasterTemplete/M02_MasterTemplete_Labor_Text.ts

@@ -35,6 +35,14 @@ const TEXT = {
   Down: ["아래로", "Down"],
   Remove: ["삭제", "Delete"],
   Labor_Option: ["옵션", "Options"],
+  Labor_Edit: ["수정", "Edit"],
+  Ref_Shared: [
+    "서고 원본을 고침 — 이 문서를 쓰는 모든 구조물에 따라감",
+    "Edits the library original — every structure using it follows",
+  ],
+  Ref_ReadOnly: ["이 층은 고칠 수 없음 — 읽기만", "Read-only layer"],
+  Lib_SaveFailed: ["저장 못 함", "Save failed"],
+  Ref_Discard: ["저장 안 한 고침을 버리고 닫음?", "Discard unsaved edits?"],
   Labor_Source: ["원문", "Source"],
   Labor_SourceHint: [
     "단가산출 로직 줄을 고르면 그 원문이 보임",