feat(785-6): 엑셀 보기에 줄 판 · 블록 판 · [옮기기] 이음

- Hopyo_Sheet.ts: [수정] = 시트 아래 줄 판(createJudgeRows · 그 호표 자리 뜀) · 오른쪽 판 아래 [옮기기](createJudgeMove) · 고름 캐시 한 벌 · 옮긴 뒤 목록 · 칠 · 단가산출 목록 다시 읽음
- Hopyo_SheetSk.ts: 단가산출 목록 = 새 블록 판정(hopyo-judge 목록 · 판정 · 고를 것 n · 표지 · 부름 · 만든 SK · 캐시 확인) · 줄 누름 = 그 자리 + 블록 판(createJudgeBlock)
- Hopyo_JudgeApi.ts: 목록 블록 줄 판정 · 고를수 · Block.ts 타입 흠 둘
- 낡은 시험 고침(까닭 = 785-6 이 옛 마법사 단가산출 칸 · 확인 창을 새 판으로 갈음): test_627_sheet_sk(판 바꿈 · 강조 · 뛰기를 새 목록으로 · helper_778_5 sheetSk 대역 새 꼴) · test_785_4 줄 판 자리 손잡이 · test_m02_hopyo_screen [수정] = 줄 판
- test_642_6: 엑셀 보기 이음 · 가운데 페이지 없음

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

M02_MasterTemplete/M02_MasterTemplete_Hopyo_Block.ts

@@ -259,7 +259,7 @@ export function solvedBody(opt: SolvedBodyOptions): {
     }
   }
 
-  function candBox(sec: Section, cand: BaseCand): HTMLElement | null {
+  function candBox(cand: BaseCand): HTMLElement | null {
     const p = picks.find((x) => x.갈래 === "기초" && x.키 === cand.키);
     if (!p) return null;
     const got = checked[cand.키];
@@ -279,7 +279,7 @@ export function solvedBody(opt: SolvedBodyOptions): {
   function secBox(sec: Section, i: number): HTMLElement {
     const box = el("div", { className: "m02-judge__sec", attrs: { "data-judge-sec": String(i) } });
     const title = `${L("M02_JudgeSection")} ${sec.번 ?? i + 1}. ${sec.제목}`;
-    const chips = sec.후보.map((c) => {
+    const chips: HTMLElement[] = sec.후보.map((c) => {
       const on = picks.some((x) => x.갈래 === "기초" && x.키 === c.키);
       const chip = createToggle({ kind: "chip", label: `${c.키} ${c.이름}`, checked: on, disabled: opt.readOnly, onChange: () => put(togglePick(picks, basePick(c, sec))) }); // prettier-ignore
       chip.root.dataset.judgeBase = c.키;
@@ -288,7 +288,7 @@ export function solvedBody(opt: SolvedBodyOptions): {
     if (!chips.length) chips.push(createText(L("M02_JudgeNoBase"), "warning"));
     box.append(bar([createText(title, "muted", 14), badge(sec.판정, "judgeSec")]), bar(chips));
     for (const c of sec.후보) {
-      const cb = candBox(sec, c);
+      const cb = candBox(c);
       if (cb) box.append(cb);
     }
     return box;

M02_MasterTemplete/M02_MasterTemplete_Hopyo_JudgeApi.ts

@@ -159,6 +159,9 @@ export interface JudgeBlockBrief {
   부름: number[];
   표지: string | null;
   만든: string | null;
+  /** 블록 풀이 파생 저장본(셈 전 = 없음) */
+  판정?: BlockVerdict | null;
+  고를수?: number | null;
 }
 
 export interface JudgeList {

M02_MasterTemplete/M02_MasterTemplete_Hopyo_Sheet.ts

@@ -7,7 +7,8 @@
  * 오른쪽 = 호표 목록(체크 · 제N호표 [수정] · 찾기 · 제안 n/m — 다 연결이면 녹색 · 뒤 셈 중이면 3 초마다 다시) + [저장] ·
  *   단가산출표 · 상세 탭이면 단가산출 목록으로 바뀜(780-2 · `Hopyo_SheetSk`).
  *  · 목록 누름 → 시트에서 그 호표 영역(B열 ~ 끝 열) 고름 · 칸 누름 → 그 행 호표를 목록에서 강조 · 머리 행이면 영역 고름
- *  · [수정] = 그 호표 확인 창(`openHopyoCheck` · 줄 누름과 따로 · 785-6 이 줄 판으로 갈음)
+ *  · [수정] = 시트 아래 줄 판(785-6 `Hopyo_Rows` · 줄 누름과 따로) · 단가산출 탭 블록 = 같은 자리 블록 판 ·
+ *    오른쪽 판 아래 [옮기기](확인한 줄 · 블록 · 고름 캐시 `createJudgeState` 한 벌)
  *  · [저장] · [모두 고정으로 들여오기] = `Hopyo_SheetMake`
  *  · 격자 = 서버 `/hopyo-grid/{키}` · 옛 파일(격자 없음)은 시트 자리에 까닭 글 · 목록 · 저장은 됨
  *  · `buildHopyoSheet` = 몸(머리 · 띠 · 시트 + 목록) · `openHopyoSheet` = 모달 껍데기([로직 추가] 「실무 호표」 길 — 785-7 이 지움)
@@ -29,7 +30,12 @@ import {
   type HopyoView,
   type HopyoScope,
 } from "./M02_MasterTemplete_Hopyo_Api";
-import { openHopyoCheck, POLL_MS } from "./M02_MasterTemplete_Hopyo_Check";
+import { POLL_MS } from "./M02_MasterTemplete_Hopyo_Check";
+import {
+  createJudgeMove,
+  createJudgeRows,
+  createJudgeState,
+} from "./M02_MasterTemplete_Hopyo_Rows";
 import * as Nav from "./M02_MasterTemplete_Hopyo_SheetNav";
 import { createSheetSk, type SheetSk } from "./M02_MasterTemplete_Hopyo_SheetSk";
 import { note, why, wireMake } from "./M02_MasterTemplete_Hopyo_SheetMake";
@@ -154,6 +160,8 @@ export function buildHopyoSheet(opt: HopyoSheetOptions): HopyoSheetBody {
   const checked = new Set<number>();
   const items = new Map<number, HTMLElement>();
   const target = opt.target ?? opt.scope;
+  const state = createJudgeState(opt.scope, opt.key); // 판정 고름 캐시(785-6)
+  let panel: { destroy: () => void } | null = null; // 시트 아래 줄 판 몸
 
   const head = el("div", {
     className: "ui-toolbar m02-hopyo__bar",
@@ -173,6 +181,16 @@ export function buildHopyoSheet(opt: HopyoSheetOptions): HopyoSheetBody {
     attrs: { "data-hopyo-lines": "" },
   }); // 시트 아래 줄 판 자리
   lines.hidden = true;
+  const closeLines = (): void => {
+    panel?.destroy();
+    panel = null;
+    lines.hidden = true;
+  };
+  const openLines = (make: (host: HTMLElement) => { destroy: () => void }): void => {
+    panel?.destroy();
+    lines.hidden = false;
+    panel = make(lines);
+  };
   const col = el("div", { className: "m02-hopyo-sheet__col", children: [left, lines] });
   const searchField = createInputField({
     type: "search",
@@ -190,6 +208,14 @@ export function buildHopyoSheet(opt: HopyoSheetOptions): HopyoSheetBody {
   fixAll.setAttribute("data-hopyo-all-fixed", "");
   fixAll.disabled = true; // 엑셀을 다 읽은 뒤 켬
   const result = el("div", { className: "m02-hopyo-sheet__result" });
+  const move = createJudgeMove({
+    file: opt.scope,
+    key: opt.key,
+    target,
+    state,
+    readOnly: !opt.canWrite,
+    onMoved: () => void refresh(),
+  });
   const right = el("div", {
     className: "m02-hopyo-sheet__side",
     children: [
@@ -200,6 +226,7 @@ export function buildHopyoSheet(opt: HopyoSheetOptions): HopyoSheetBody {
       }),
       list,
       result,
+      move.root,
     ],
   });
 
@@ -207,6 +234,9 @@ export function buildHopyoSheet(opt: HopyoSheetOptions): HopyoSheetBody {
     if (closed) return;
     closed = true;
     opened.delete(id);
+    closeLines();
+    move.destroy();
+    sk?.destroy();
     nav?.destroy();
     sheet?.destroy();
     opt.onClose?.();
@@ -261,7 +291,7 @@ export function buildHopyoSheet(opt: HopyoSheetOptions): HopyoSheetBody {
     else if (o.호표 !== undefined) focus(o.호표);
   });
 
-  /** [수정] — 그 호표 확인 창(줄 누름과 따로) */
+  /** [수정] — 그 호표 자리 + 시트 아래 줄 판(줄 누름과 따로) */
   const editButton = (h: HopyoBrief): HTMLElement => {
     const b = createButton({
       label: "수정",
@@ -269,14 +299,20 @@ export function buildHopyoSheet(opt: HopyoSheetOptions): HopyoSheetBody {
       size: "sm",
       onClick: (e) => {
         e.stopPropagation();
-        openHopyoCheck({
-          scope: opt.scope,
-          key: opt.key,
-          no: h.번,
-          target,
-          canWrite: opt.canWrite,
-          onBuilt: (got) => opt.onImport?.(got, h),
-        });
+        focus(h.번);
+        openLines((host) =>
+          createJudgeRows({
+            host,
+            file: opt.scope,
+            key: opt.key,
+            target,
+            state,
+            no: h.번,
+            readOnly: !opt.canWrite,
+            onClose: closeLines,
+            onSheet: (r, role) => nav?.jumpTo(role === "일위대가표" ? ilwi : detail, r),
+          }),
+        );
       },
     });
     b.setAttribute("data-hopyo-edit", String(h.번));
@@ -341,7 +377,7 @@ export function buildHopyoSheet(opt: HopyoSheetOptions): HopyoSheetBody {
     const more = { ...opt, target, grid, last: lastOf, sheet: () => sheet, host: left };
     nav = ids.일위대가표 ? Nav.createSheetNav(more) : null;
     if (nav) warn.after(nav.root);
-    sk = nav ? createSheetSk({ ...opt, target, nav, side: right, lines, ...(opt.onSkChange ? { onChange: opt.onSkChange } : {}) }) : null; // prettier-ignore
+    sk = nav ? createSheetSk({ ...opt, target, nav, state, side: right, openLines, closeLines, ...(opt.onSkChange ? { onChange: opt.onSkChange } : {}) }) : null; // prettier-ignore
     sheet = createSpreadsheet(left, book, {
       readOnly: true,
       칠: nav?.fill,
@@ -378,6 +414,18 @@ export function buildHopyoSheet(opt: HopyoSheetOptions): HopyoSheetBody {
     }, POLL_MS);
   }
 
+  /** 옮긴 뒤 — 목록 · 칠 · 단가산출 목록 다시 읽음 */
+  async function refresh(): Promise<void> {
+    const next = await readHopyo(opt.scope, opt.key).catch(() => null);
+    if (!next || closed) return;
+    briefs = next.호표;
+    paintHead(next);
+    paintList();
+    nav?.marks(briefs);
+    sk?.reload();
+    opt.onSkChange?.();
+  }
+
   async function load(): Promise<void> {
     try {
       const [file, grid] = await Promise.all([

M02_MasterTemplete/M02_MasterTemplete_Hopyo_SheetSk.ts

@@ -1,72 +1,154 @@
 /* =============================================================================
  * M02_MasterTemplete_Hopyo_SheetSk.ts
- * 엑셀 보기 창 오른쪽 판 바꾸기(PLAN 780-2 · 요구 627) — 탭 따라:
+ * 엑셀 보기 창 오른쪽 판 바꾸기(PLAN 780-2 · 785-6 · 요구 627 · 642) — 탭 따라:
  *  · 일위대가표 = 호표 목록(`Hopyo_Sheet` 판 그대로) · 단가산출표 · 단가산출 상세 = 단가산출 목록
- *    (`sangeunStep` 한 벌 · 같은 캐시 · [확인] → [확인한 것 옮기기] · [줄 n] = 시트 아래 줄 판 `lines` — 785-4)
- *  · 목록 블록 줄 누름 → 지금 탭의 그 블록 자리(단가산출표 = 목록 행 · 상세 = 블록 범위 · [◂ 뒤로] 쌓임)
+ *    (새 블록 판정 `hopyo-judge` 목록 블록 줄 = 판정 · 고를 것 n · 표지 · 부름 · 만든 SK · 캐시 확인)
+ *  · 목록 블록 줄 누름 → 지금 탭의 그 블록 자리 + 시트 아래 줄 판 = 블록 판(`Hopyo_Block.createJudgeBlock` · [확인])
+ *  · 옮김 = 오른쪽 판 아래 [옮기기](`Hopyo_Rows.createJudgeMove` · 호표 줄과 한 몸)
  *  · 시트 칸 고름 → 그 행 블록을 목록에서 강조(`SheetNav.blockAt`)
- *  · 단가산출 칸은 처음 단가산출 탭에 올 때 지음(판정 셈이 무거움) · 만들 층 ≠ 파일 층 · 쓰기 권한 없음 = 보기만
+ *  · 목록은 처음 단가산출 탭에 올 때 읽음 · 만들 층 ≠ 파일 층 · 쓰기 권한 없음 = 보기만
  * ========================================================================== */
 
+import { createBadge } from "@ui/ui_template_badge";
 import { el } from "@ui/ui_template_elements";
+import { t as L } from "@ui/ui_template_locale";
+import { createListRow } from "@ui/ui_template_list_row";
+import { createText } from "@ui/ui_template_text";
 import type { HopyoScope } from "./M02_MasterTemplete_Hopyo_Api";
+import { createJudgeBlock, type JudgeState } from "./M02_MasterTemplete_Hopyo_Block";
+import { readJudge, type JudgeBlockBrief } from "./M02_MasterTemplete_Hopyo_JudgeApi";
 import type { SheetNav } from "./M02_MasterTemplete_Hopyo_SheetNav";
-import { sangeunStep, type SkStep } from "./M02_MasterTemplete_Hopyo_WizardSk";
 
 export interface SheetSkOptions {
   scope: HopyoScope;
   key: string;
-  파일: string;
   target: HopyoScope;
   canWrite: boolean;
   nav: SheetNav;
+  state: JudgeState;
   /** 호표 목록 판 — 단가산출 탭이면 숨김 · 그 뒤에 단가산출 판을 붙임 */
   side: HTMLElement;
-  /** 시트 아래 줄 판 자리 */
-  lines: HTMLElement;
+  /** 시트 아래 줄 판 자리 열기 · 닫기(`Hopyo_Sheet` 가 쥠) */
+  openLines: (make: (host: HTMLElement) => { destroy: () => void }) => void;
+  closeLines: () => void;
   /** 판정 · 옮김 뒤(부르는 쪽 끝내기 글) */
   onChange?: () => void;
 }
 
 const sameLayer = (a: HopyoScope, b: HopyoScope): boolean =>
   a.layer === b.layer && (a.owner ?? null) === (b.owner ?? null);
+const STRIPE = {
+  done: "var(--color-success)",
+  ready: "var(--color-info)",
+  pick: "var(--color-warning)",
+} as const;
 
 export function createSheetSk(opt: SheetSkOptions) {
-  const root = el("div", { className: "m02-hopyo-sheet__side m02-hopyo-sheet__sk" });
+  const list = el("div", { className: "m02-hopyo-sheet__list" });
+  const root = el("div", {
+    className: "m02-hopyo-sheet__side m02-hopyo-sheet__sk",
+    children: [list],
+  });
   root.setAttribute("data-hopyo-sk-side", "");
   root.hidden = true;
   opt.side.after(root);
-  let step: SkStep | null = null;
+  const readOnly = !opt.canWrite || !sameLayer(opt.scope, opt.target);
+  let blocks: JudgeBlockBrief[] | null = null;
+  let asked = false;
   let sheet = "";
+  let current: number | null = null;
 
-  /** 단가산출 칸 — 처음 필요할 때 지음 */
-  function ensure(): SkStep {
-    if (!step) {
-      const readOnly = !opt.canWrite || !sameLayer(opt.scope, opt.target);
-      step = sangeunStep(opt.scope, opt.key, opt.파일, opt.onChange, { lines: opt.lines, onRow, readOnly }); // prettier-ignore
-      root.append(step.root);
-    }
-    return step;
+  function draw(): void {
+    if (!blocks) return;
+    const d = opt.state.get();
+    list.replaceChildren(
+      ...blocks.map((b) => {
+        const ok = !!d.블록[String(b.번)]?.확인;
+        const sub = [
+          b.단위,
+          b.판정 ? `${b.판정}${b.판정 === "고를 것" && b.고를수 ? ` ${b.고를수}` : ""}` : "",
+          b.표지 ?? "",
+          b.부름.length ? `${L("M02_JudgeCalls")} ${b.부름.length}` : L("M02_JudgeOutside"),
+        ].filter(Boolean).join(" · "); // prettier-ignore
+        const tail = b.만든
+          ? createBadge(`${L("M02_JudgeMade")} ${b.만든}`, "success")
+          : ok
+            ? createBadge(L("M02_JudgeConfirmed"), "accent")
+            : "";
+        const row = createListRow({
+          label: `${L("M02_JudgeBlock").replace("{n}", String(b.번))} ${b.이름}`,
+          sub,
+          trailing: tail,
+          stripe: b.만든 || ok ? STRIPE.done : b.판정 === "고를 것" ? STRIPE.pick : STRIPE.ready,
+          active: b.번 === current,
+          size: 36,
+          onClick: () => pick(b.번),
+        });
+        row.dataset.judgeSk = String(b.번);
+        return row;
+      }),
+    );
   }
 
-  /** 블록 줄 누름 — 지금 탭에서 그 블록 자리 · 없으면 다른 단가산출 탭 */
-  function onRow(no: number): void {
+  /** 목록 — 처음 단가산출 탭에 올 때 한 번 */
+  function ensure(): void {
+    if (asked) return;
+    asked = true;
+    list.replaceChildren(createText(L("M02_JudgeLoading"), "hint"));
+    void readJudge(opt.scope, opt.key, opt.target)
+      .then((got) => {
+        blocks = got.블록;
+        draw();
+        opt.onChange?.();
+      })
+      .catch((e: Error) => list.replaceChildren(createText(e.message, "error")));
+  }
+
+  /** 블록 고름 — 그 자리 뜀 + 줄 판 = 블록 판 */
+  function pick(no: number): void {
+    current = no;
+    draw();
     const list = opt.nav.role(sheet) === "단가산출표";
     const spot = list
       ? (opt.nav.spotOf(no, "단가산출표") ?? opt.nav.spotOf(no, "단가산출상세"))
       : (opt.nav.spotOf(no, "단가산출상세") ?? opt.nav.spotOf(no, "단가산출표"));
     if (spot) opt.nav.jumpTo(spot.시트, spot.행);
+    const detail = opt.nav.spotOf(no, "단가산출상세")?.시트;
+    opt.openLines((host) =>
+      createJudgeBlock({
+        host,
+        file: opt.scope,
+        key: opt.key,
+        target: opt.target,
+        state: opt.state,
+        no,
+        readOnly,
+        onClose: opt.closeLines,
+        ...(detail ? { onSheet: (r: number) => opt.nav.jumpTo(detail, r) } : {}),
+      }),
+    );
   }
 
+  const off = opt.state.on(draw);
+
   return {
     root,
-    /** 아직 안 옮긴 블록 수 · 판정 전 null */
-    count: (): ReturnType<SkStep["count"]> => step?.count() ?? null,
-    /** 그 블록으로 뜀 — 단가산출 상세(없으면 목록) 그 자리 · 줄 판 열림(안 이은 줄 창 [단가산출 걸음에서 확인]) */
+    /** 아직 안 옮긴 블록 수 · 그중 일위대가 밖 · 고를 것 합 — 목록 전 null */
+    count: (): { 블록: number; 밖: number; 줄: number } | null => {
+      if (!blocks) return null;
+      const left = blocks.filter((b) => !b.만든);
+      const 밖 = left.filter((b) => !b.부름.length).length;
+      return { 블록: left.length, 밖, 줄: left.reduce((a, b) => a + (b.고를수 ?? 0), 0) };
+    },
+    /** 그 블록으로 뜀 + 블록 판 */
     show(번: number): void {
-      const spot = opt.nav.spotOf(번, "단가산출상세") ?? opt.nav.spotOf(번, "단가산출표");
-      if (spot) opt.nav.jumpTo(spot.시트, spot.행);
-      ensure().show(번);
+      ensure();
+      pick(번);
+    },
+    /** 옮긴 뒤 — 목록 다시 읽음(만든 SK) */
+    reload(): void {
+      asked = false;
+      if (!root.hidden) ensure();
     },
     /** 시트 고름 · 탭 바꿈 — 판 바꾸기 · 강조 */
     at(sel: { 시트: string; 칸: string }): void {
@@ -77,8 +159,14 @@ export function createSheetSk(opt: SheetSkOptions) {
       root.hidden = !sk;
       opt.side.parentElement?.classList.toggle("is-sk", sk);
       if (!sk) return;
-      ensure().mark(opt.nav.blockAt(sel.시트, Number(/\d+/.exec(sel.칸)?.[0] ?? 0)));
+      ensure();
+      const no = opt.nav.blockAt(sel.시트, Number(/\d+/.exec(sel.칸)?.[0] ?? 0));
+      if (no !== null && no !== current) {
+        current = no;
+        draw();
+      }
     },
+    destroy: off,
   };
 }