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_AreaPanel.ts

@@ -1,32 +1,29 @@
 /* =============================================================================
  * M02_MasterTemplete_AreaPanel.ts
- * 면적산출 상세 오른쪽 패널(PLAN 39-4 D2 · D6) — 그 열 일위대가의 담은 로직 + 자재목록(기준 · 반영).
- * 몸 = 일위대가 보기 갈래(`Labor_View` · 고치기 없음) · 틀 = 공용 사이드바 카드 · 접기 손잡이 · 폭 손잡이
- * (폭 · 접힘 기억은 옛 조합 패널 키 그대로).
+ * 면적산출 상세 오른쪽 패널(PLAN 39-4 D2 · D6 · 47-6) — 틀 = 공용 오른쪽 접는 패널(하나만 열림 · 폭 공유)
+ *  · 「일위대가」 = 그 열 일위대가의 담은 로직 + 자재목록(기준 · 반영) · 몸 = 일위대가 보기 갈래(`Labor_View`)
+ *  · 「도면」 = 그 열 구조물 도면 보기만(`AreaDrawing` · 처음 펼 때 그림)
  *  · 줄 누름 = 칸 지정 모달(`AreaLink` · 그 줄 알약 키를 면적 칸에 잇기 · 풀기)
  *  · 시트 칸 값 · 연결이 바뀌면 `refresh` — 받은 기준에 바로 곱함 · 칸 주소도 넘김(서버 안 부름 · `Labor_View.setQty`)
  * ========================================================================== */
 
-import { el, showToast } from "@ui/ui_template_elements";
-import { attachCollapsible } from "@ui/ui_template_collapsible";
-import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
-import { createPanelResizer } from "@ui/ui_template_resizer";
-import { readStateRaw, stateKey, writeStateRaw } from "../A00_Common/b_page_state";
+import { showToast } from "@ui/ui_template_elements";
+import { createSidePanels } from "@ui/ui_template_side_panels";
 import type { LinkItem, SpreadsheetHandle } from "../A00_Common/spreadsheet/spreadsheet";
 import type { Layer } from "./M02_MasterTemplete_Api_Fetch";
+import { createAreaDrawing } from "./M02_MasterTemplete_AreaDrawing";
 import { openAreaLink } from "./M02_MasterTemplete_AreaLink";
 import { createLaborView, type LaborViewRow } from "./M02_MasterTemplete_Labor_View";
 import "./M02_MasterTemplete_AreaPanel.css";
 
 const TEXT = {
-  handle: "일위대가",
-  title: "이 열의 일위대가",
+  labor: "일위대가",
+  drawing: "도면",
   noPill: "이 줄은 면적산출 알약이 없음 — 돈 아닌 로직이거나 계산 전",
 };
 
-/** 최소 폭(px) · 최대 = 편집 칸 폭의 비율 */
-const MIN_WIDTH = 280;
-const MAX_RATIO = 0.6;
+/** 기억 없을 때 폭(px) — 금액 칸 넷이 가로 굴림 없이 보이게 */
+const DEFAULT_WIDTH = 576;
 
 export interface AreaPanelOptions {
   layer: Layer;
@@ -98,39 +95,18 @@ export function buildAreaPanel(opts: AreaPanelOptions): AreaPanel {
     });
   };
   const view = createLaborView(openLink);
-  const body = el("div", {
-    className: "m02-apanel__body ui-sidebar-panel",
-    children: [
-      el("section", {
-        className: "ui-collapsible ui-sidebar-section ui-sidebar-card",
-        children: [el("h3", { className: "ui-collapsible__title", text: TEXT.title }), view.root],
-      }),
+  const drawing = createAreaDrawing(opts.layer, opts.column);
+  const panels = createSidePanels({
+    prefKey: "m02-area-panels",
+    defaultWidth: DEFAULT_WIDTH,
+    panels: [
+      { id: "labor", title: TEXT.labor, body: view.root },
+      { id: "drawing", title: TEXT.drawing, body: drawing.root },
     ],
+    onChange: (open) => open === "drawing" && drawing.show(),
   });
-  attachCollapsible(body);
-
-  const root = el("aside", { className: "m02-apanel" });
-  const handle = createWorkflowPanelHandle("side", "right", TEXT.handle);
-  // 왼쪽 경계를 끌어 폭 조절 — 폭은 브라우저에 기억 · 더블클릭 = 기본 폭
-  const resizer = createPanelResizer({
-    axis: "horizontal",
-    target: root,
-    cssVar: "--m02-apanel-width",
-    direction: -1,
-    min: MIN_WIDTH,
-    max: () => (root.parentElement?.clientWidth ?? window.innerWidth) * MAX_RATIO,
-    storageKey: stateKey("m02-combo-panel-width") ?? undefined,
-  });
-  root.append(handle.root, resizer.root, body);
-  const setCollapsed = (collapsed: boolean): void => {
-    root.classList.toggle("is-collapsed", collapsed);
-    handle.setOpen(!collapsed);
-    writeStateRaw("m02-combo-panel-collapsed", String(collapsed));
-  };
-  handle.root.addEventListener("click", () =>
-    setCollapsed(!root.classList.contains("is-collapsed")),
-  );
-  setCollapsed(readStateRaw("m02-combo-panel-collapsed") === "true");
+  if (panels.current() === "drawing") drawing.show();
+  const root = panels.root;
 
   // 처음 = 저장 안 한 시트 칸 값으로 셈(서버 calc 한 번)
   const refresh = (): void => view.setQty(quantities(opts.sheet()), cellsOf(opts.sheet()));
@@ -141,7 +117,7 @@ export function buildAreaPanel(opts: AreaPanelOptions): AreaPanel {
     refresh,
     destroy: () => {
       view.destroy();
-      resizer.dispose();
+      drawing.destroy();
       root.remove();
     },
   };