fix(b08): 사본 편집 화면 [← 뒤로] · [저장] = 모달 머리 [닫기] 왼쪽 · 같은 크기(170-2)

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

B08_Quantity/B08_Quantity_UI_Drawing.css

@@ -51,6 +51,11 @@
   }
 }
 
+/* 머리 단추 칸(170-2) — 편집 화면 밖에선 숨김 */
+.b08-sheets .ui-modal__actions[hidden] {
+  display: none;
+}
+
 /* 카드 [수정] → 사본 편집 화면(163-3) — 모달 몸통을 채움 · 넣을 값이면 안내 한 줄 위 */
 .b08-sheets .ui-item-picker__edit-host {
   flex-direction: column;

B08_Quantity/B08_Quantity_UI_Drawing.ts

@@ -145,6 +145,14 @@ export function openStructureSheets(request: SheetsRequest): void {
   let edited = false; // 사본을 고쳐 저장함 — 닫을 때 집계표 다시 셈(163-3)
   let editView: EditView | null = null;
   let modalBody: HTMLElement | null = null;
+  // 머리 단추 칸(170-2) — 공용 모달은 열 때 단추가 있어야 머리에 붙임 → 빈 칸을 미리 넘김 · 편집 화면에서만 채움
+  const head = document.createElement("div");
+  head.className = "ui-modal__actions";
+  head.hidden = true;
+  const clearHead = (): void => {
+    head.replaceChildren();
+    head.hidden = true;
+  };
   /** 카드 [수정] — 몸통을 사본 편집 화면으로 · [뒤로] = 몸통 되돌리고 그 카드 다시 읽음 */
   const openEdit: OpenEdit = (copy, name, kind, reload) => {
     const body = modalBody;
@@ -170,12 +178,18 @@ export function openStructureSheets(request: SheetsRequest): void {
           (saved) => {
             view.destroy();
             editView = null;
+            clearHead();
             body.replaceChildren(...kept);
             edited ||= saved;
             if (saved) reload();
           },
         );
         editView = view;
+        // [← 뒤로] · [저장] = 머리 [닫기] 왼쪽 · 크기 = [닫기](sm 뗌)
+        view.back.classList.remove("ui-btn--sm");
+        view.save.classList.remove("ui-btn--sm");
+        head.replaceChildren(view.back, view.save);
+        head.hidden = false;
         host.append(
           ...(kind === "inputs" ? [note(L("B08_Quantity_Sheets_InputsOnly"))] : []),
           view.root,
@@ -192,9 +206,11 @@ export function openStructureSheets(request: SheetsRequest): void {
     closeLabel: L("Common_Btn_Close"),
     wide: true, // 공용 큰 창(96vw × 94vh · 156-4)
     dialogClass: "b08-sheets",
+    actions: [head],
     beforeClose: async () => {
       if (editView && !(await editView.leave())) return false; // 저장 안 한 고침 — 버릴지 물음
       editView?.destroy();
+      clearHead();
       closed = true; // 아직 불러오는 중이면 뒤늦게 카드를 만들지 않음
       handles.forEach((cards) => cards.destroy());
       if (edited) request.onLinked(); // 사본을 고쳤으면 집계표 다시 셈(연결 저장과 같은 꼴)

resources/tester/test_170_b08_modal_head.py

@@ -52,3 +52,30 @@ def test_170_3_칩_테두리_상태_색():
         "border-style: dashed;"
         in DRAWING_CSS.split(".b08-link__chip.is-gone {", 1)[1].split("}", 1)[0]
     )
+
+
+DRAWING = (ROOT / "B08_Quantity/B08_Quantity_UI_Drawing.ts").read_text(encoding="utf-8")
+EDIT = (ROOT / "ui_template/ui_template_item_picker_edit.ts").read_text(encoding="utf-8")
+PICKER = (ROOT / "ui_template/ui_template_item_picker.ts").read_text(encoding="utf-8")
+MODAL = (ROOT / "ui_template/ui_template_modal.ts").read_text(encoding="utf-8")
+
+
+def test_170_2_편집_화면_단추_모달_머리():
+    # 편집 화면이 두 단추를 내보냄 · 고르기 모달(142-1)은 그대로 안 씀
+    assert "back: HTMLButtonElement;" in EDIT and "save: HTMLButtonElement;" in EDIT
+    assert "return { root, back, save," in EDIT
+    assert "view.back" not in PICKER and "view.save" not in PICKER
+    # 빈 머리 칸을 열 때 미리 넘김(공용 모달은 mount 때 자식 있을 때만 머리에 붙임)
+    assert "if (actions.childElementCount) closeButton.before(actions)" in MODAL
+    assert "actions: [head]," in DRAWING and "head.hidden = true;" in DRAWING
+    # 들어갈 때 옮김 · 크기 = [닫기](md) · 차례 [← 뒤로] [저장] [닫기]
+    assert 'view.back.classList.remove("ui-btn--sm")' in DRAWING
+    assert 'view.save.classList.remove("ui-btn--sm")' in DRAWING
+    assert "head.replaceChildren(view.back, view.save);\n        head.hidden = false;" in DRAWING
+    # 나올 때([뒤로] · 닫기) 거둠
+    back = DRAWING.split("(saved) => {", 1)[1].split("},", 1)[0]
+    assert "clearHead();" in back
+    closing = DRAWING.split("beforeClose: async () => {", 1)[1].split("return true;", 1)[0]
+    assert "clearHead();" in closing
+    css = DRAWING_CSS
+    assert ".b08-sheets .ui-modal__actions[hidden] {\n  display: none;" in css

ui_template/ui_template_item_picker_edit.ts

@@ -20,6 +20,9 @@ import { laborValueData, PART_OF } from "./ui_template_item_picker_project";
 
 export interface EditView {
   root: HTMLElement;
+  /** [← 뒤로] · [저장] — 모달 머리로 옮겨 쓸 수 있음(B08 · 170-2) */
+  back: HTMLButtonElement;
+  save: HTMLButtonElement;
   /** 붙인 뒤 부름 — 편집 부품을 받아 세움 */
   start: () => void;
   isDirty: () => boolean;
@@ -212,5 +215,5 @@ export function createEditView(req: EditRequest, onBack: (saved: boolean) => voi
     if (await leave()) onBack(saved);
   });
 
-  return { root, start: () => void start(), isDirty: () => dirty, leave, destroy };
+  return { root, back, save, start: () => void start(), isDirty: () => dirty, leave, destroy };
 }