feat(M02): 47-6 면적산출 도면 패널 몸 — 그 열 구조물 도면 보기만(카드 미리보기와 같은 길)

- DrawingCard.mountDrawingView 보기 갈래 추가 · AreaDrawing 처음 펼 때 읽고 그림

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

M02_MasterTemplete/M02_MasterTemplete_AreaDrawing.ts

@@ -0,0 +1,56 @@
+/* =============================================================================
+ * M02_MasterTemplete_AreaDrawing.ts
+ * 면적산출 상세 오른쪽 「도면」 패널 몸(PLAN 47-6) — 그 열 구조물 도면을 보기만(확대 · 이동).
+ * 그리기는 구조물 조합 도면 카드 미리보기와 같은 길(`DrawingCard.mountDrawingView`).
+ * 처음 펼 때 읽고 그림 — 접힌 채 iframe 을 띄우지 않음.
+ * ========================================================================== */
+
+import { el } from "@ui/ui_template_elements";
+import { readTemplate, type Layer, type StructureDoc } from "./M02_MasterTemplete_Api_Fetch";
+import { mountDrawingView } from "./M02_MasterTemplete_DrawingCard";
+
+const TEXT = {
+  loading: "도면 불러오는 중…",
+  none: "이 열은 구조물 도면이 없음",
+};
+
+export interface AreaDrawing {
+  root: HTMLElement;
+  /** 패널이 펼쳐짐 — 처음 한 번만 읽고 그림 */
+  show: () => void;
+  destroy: () => void;
+}
+
+export function createAreaDrawing(layer: Layer, column: string): AreaDrawing {
+  const root = el("div", { className: "m02-apanel__drawing" });
+  let view: { destroy: () => void } | null = null;
+  let started = false;
+  let dead = false;
+  const note = (text: string): void =>
+    root.replaceChildren(el("p", { className: "m02-apanel__note", text }));
+
+  const show = (): void => {
+    if (started) return;
+    started = true;
+    note(TEXT.loading);
+    readTemplate(layer, "structure", column, null)
+      .then((got) => {
+        if (dead) return;
+        const doc = got.문서 as StructureDoc | null;
+        if (!doc?.도면) return note(TEXT.none);
+        root.replaceChildren();
+        view = mountDrawingView(root, doc, { layer, projectId: null }, column);
+      })
+      .catch(() => !dead && note(TEXT.none));
+  };
+
+  return {
+    root,
+    show,
+    destroy: () => {
+      dead = true;
+      view?.destroy();
+      root.remove();
+    },
+  };
+}

M02_MasterTemplete/M02_MasterTemplete_DrawingCard.ts

@@ -56,6 +56,28 @@ function hideChrome(frame: HTMLIFrameElement, css: string): void {
 export const drawingEditable = (editable: boolean, source: ItemSource): boolean =>
   editable && !!source.write;
 
+/** 보기만 도면 — 카드 미리보기의 보기 갈래와 같은 길(확대 · 이동만 · 면적산출 오른쪽 도면 패널 47-6) */
+export function mountDrawingView(
+  host: HTMLElement,
+  doc: StructureDoc,
+  source: Pick<ItemSource, "layer" | "projectId">,
+  column: string,
+): { destroy: () => void } {
+  const handle = mountDrawingTemplate(host, doc.도면 as unknown as DrawingTemplateDoc, {
+    readOnly: true,
+    name: `preview:${column}`,
+    layer: source.layer,
+    projectId: source.projectId,
+    panelsCollapsed: true,
+    preview: true,
+    originMarker: true,
+    noArea: true,
+  });
+  const frame = host.querySelector("iframe");
+  if (frame) hideChrome(frame, HIDE_VIEW);
+  return { destroy: () => handle.destroy() };
+}
+
 export interface DrawingCardOptions {
   /** 구조물 도면 문서 통째(`도번` · `도면` …) — 저장은 `도면` 칸만 갈아 끼움 */
   doc: StructureDoc;