feat(M02): 47-6 면적산출 상세 오른쪽 = 공용 접는 패널 둘(일위대가 · 도면)

- 옛 접기 손잡이 · 폭 손잡이 · 사이드바 카드 틀을 공용 오른쪽 접는 패널(47-3)로 갈음 — 하나만 열림 · 폭 공유 · 모두 접힘
- 「도면」 패널 = 그 열 구조물 도면 보기만(확대 · 이동) · 처음 펼 때 읽고 그림
- DrawingCard 미리보기 한 벌(mountStructure)을 카드 · 도면 패널이 같이 씀
- 시험: test_m02_structure_panel 기대를 공용 패널로 · ui_checks/47-6 시나리오

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

M02_MasterTemplete/M02_MasterTemplete_DrawingCard.ts

@@ -10,7 +10,12 @@
 
 import type { StructureDoc } from "./M02_MasterTemplete_Api_Fetch";
 import type { SaveControl } from "./M02_MasterTemplete_CardShell";
-import { mountDrawingTemplate, type DrawingTemplateDoc } from "./M02_MasterTemplete_Drawing";
+import {
+  mountDrawingTemplate,
+  type DrawingTemplateDoc,
+  type DrawingTemplateHandle,
+  type DrawingTemplateOptions,
+} from "./M02_MasterTemplete_Drawing";
 import type { ItemSource } from "./M02_MasterTemplete_ItemSource";
 
 export const DRAWING_HELP = "단축키 — 글자를 치고 Enter";
@@ -56,25 +61,41 @@ function hideChrome(frame: HTMLIFrameElement, css: string): void {
 export const drawingEditable = (editable: boolean, source: ItemSource): boolean =>
   editable && !!source.write;
 
+type Where = Pick<ItemSource, "layer" | "projectId">;
+
+/** 구조물 도면 미리보기 한 벌 — 카드 · 면적산출 도면 패널이 같이 씀 · `hooks` 있으면 고치기 */
+function mountStructure(
+  host: HTMLElement,
+  doc: StructureDoc,
+  source: Where,
+  column: string,
+  hooks?: Pick<DrawingTemplateOptions, "onChanged" | "onSave">,
+): DrawingTemplateHandle {
+  const edit = !!hooks;
+  const handle = mountDrawingTemplate(host, doc.도면 as unknown as DrawingTemplateDoc, {
+    readOnly: !edit,
+    name: `preview:${column}`, // 자동백업 칸은 전체 편집 화면과 갈라 둠
+    layer: source.layer,
+    projectId: source.projectId,
+    panelsCollapsed: true,
+    preview: !edit, // 보기만 = 왼쪽 끌기 화면 옮기기 · 고치기 = 누름 고르기 · 단축키
+    originMarker: true, // 좌표 0,0 기준점 십자
+    noArea: true, // 구조물도는 도각이 없음
+    ...hooks,
+  });
+  const frame = host.querySelector("iframe");
+  if (frame) hideChrome(frame, edit ? HIDE_EDIT : HIDE_VIEW);
+  return handle;
+}
+
 /** 보기만 도면 — 카드 미리보기의 보기 갈래와 같은 길(확대 · 이동만 · 면적산출 오른쪽 도면 패널 47-6) */
 export function mountDrawingView(
   host: HTMLElement,
   doc: StructureDoc,
-  source: Pick<ItemSource, "layer" | "projectId">,
+  source: Where,
   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);
+  const handle = mountStructure(host, doc, source, column);
   return { destroy: () => handle.destroy() };
 }
 
@@ -111,23 +132,17 @@ export function mountDrawingCard(host: HTMLElement, opt: DrawingCardOptions): Dr
     doc = next;
   }
 
-  const handle = mountDrawingTemplate(host, doc.도면 as unknown as DrawingTemplateDoc, {
-    readOnly: !edit,
-    name: `preview:${opt.column}`, // 자동백업 칸은 전체 편집 화면과 갈라 둠
-    layer: opt.source.layer,
-    projectId: opt.source.projectId,
-    panelsCollapsed: true,
-    preview: !edit, // 보기만 = 왼쪽 끌기 화면 옮기기 · 고치기 = 누름 고르기 · 단축키
-    originMarker: true, // 좌표 0,0 기준점 십자
-    noArea: true, // 구조물도는 도각이 없음
-    ...(edit
+  const handle = mountStructure(
+    host,
+    doc,
+    opt.source,
+    opt.column,
+    edit
       ? {
           onChanged: (dirty: boolean) => opt.saver.mark(dirty),
           onSave: (drawing: DrawingTemplateDoc) => void opt.saver.run(() => doSave(drawing)),
         }
-      : {}),
-  });
-  const frame = host.querySelector("iframe");
-  if (frame) hideChrome(frame, edit ? HIDE_EDIT : HIDE_VIEW);
+      : undefined,
+  );
   return { write: () => doSave(), destroy: () => handle.destroy() };
 }