Add drawing workspace feature

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/main.ts

@@ -1,4 +1,5 @@
 import './style.css';
+import { createDrawingWorkspace } from '../도면작성/workspace';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { swapXYAzimuth } from './core/coordinate-frame';
@@ -76,8 +77,8 @@ interface Pier extends PierValues {
 }
 
 /** Part toggles in the order of 시안 ① "부재 표시". Each toggle controls one or more scene parts. */
-/** The four stages: ① 형상 생성, ② 형상계획, ③ 철근배근, ④ 재료표 (결과 화면). */
-type Stage = 'shape' | 'plan' | 'rebar' | 'quantity';
+/** ① 형상 생성, ② 형상계획, ③ 철근배근, ④ 도면작성, ⑤ 재료표. */
+type Stage = 'shape' | 'plan' | 'rebar' | 'drawing' | 'quantity';
 
 const PART_GROUPS: { label: string; parts: PartName[] }[] = [
   { label: '받침·받침블럭', parts: ['blocks', 'pads', 'bearings'] },
@@ -164,6 +165,11 @@ let backupTimer: number | undefined;
 
 const $ = <T extends HTMLElement>(id: string): T => document.getElementById(id) as T;
 
+const drawingWorkspace = createDrawingWorkspace($('view-drawing'), () => ({
+  project: state.project, selected: state.active,
+  piers: state.piers.map(p => ({ input: p.input, model: p.model, dirty: pendingKeys(p).length > 0 })),
+}), selectPier);
+
 function el<K extends keyof HTMLElementTagNameMap>(tag: K, text?: string, cls?: string): HTMLElementTagNameMap[K] {
   const node = document.createElement(tag);
   if (text !== undefined) node.textContent = text;
@@ -552,6 +558,7 @@ function renderHeader(): void {
   parts.push(`교각 ${state.piers.length}기`);
   $('project-line').textContent = parts.join(' · ');
   $('step1-status').textContent = pier?.model ? '생성됨' : '미생성';
+  $('step-drawing-status').textContent = pier?.model ? '가능' : '형상 필요';
   renderSaveStatus();
   const total = pendingTotal();
   const targets = generationTargets();
@@ -717,6 +724,7 @@ function renderAll(): void {
   renderRebar();
   renderRebarColor();
   if (state.stage === 'quantity') renderQuantityScreen();
+  if (state.stage === 'drawing') drawingWorkspace.update();
   scheduleBackup();
 }
 
@@ -1177,18 +1185,19 @@ function setStage(stage: Stage): void {
   if (stage === 'shape' && state.stage !== 'shape') state.allView = true;
   state.stage = stage;
   // Switching 전체 보기 on or off in ① needs the scene rebuilt for the new layout.
-  if ((allPiers !== null) !== multiSceneOn()) setupScene();
+  if (stage !== 'drawing' && (allPiers !== null) !== multiSceneOn()) setupScene();
   if (state.scene) setRebarView(state.scene, stage === 'rebar');
   $<HTMLElement>('view-shape').hidden = stage !== 'shape';
   $<HTMLElement>('view-plan').hidden = stage !== 'plan';
   $<HTMLElement>('view-rebar').hidden = stage !== 'rebar';
   $<HTMLElement>('view-quantity').hidden = stage !== 'quantity';
+  $<HTMLElement>('view-drawing').hidden = stage !== 'drawing';
   if (stage === 'quantity') renderQuantityScreen();
   // Move the viewer after its new parent is visible, so that resize() measures the real size.
   placeViewer(stage);
   if (rebar3d) rebar3d.group.visible = stage === 'rebar';
   // The highlight is the 'current' class (style.css); aria-current is set alongside it for assistive tech.
-  const nav: [string, Stage][] = [['nav-shape', 'shape'], ['nav-plan', 'plan'], ['nav-rebar', 'rebar'], ['nav-quantity', 'quantity']];
+  const nav: [string, Stage][] = [['nav-shape', 'shape'], ['nav-plan', 'plan'], ['nav-rebar', 'rebar'], ['nav-drawing', 'drawing'], ['nav-quantity', 'quantity']];
   for (const [id, key] of nav) {
     const btn = $<HTMLButtonElement>(id);
     btn.classList.toggle('current', stage === key);
@@ -3279,6 +3288,7 @@ $<HTMLButtonElement>('regen').addEventListener('click', regenerateChanged);
 $<HTMLButtonElement>('nav-shape').addEventListener('click', () => setStage('shape'));
 $<HTMLButtonElement>('nav-plan').addEventListener('click', () => setStage('plan'));
 $<HTMLButtonElement>('nav-rebar').addEventListener('click', () => setStage('rebar'));
+$<HTMLButtonElement>('nav-drawing').addEventListener('click', () => setStage('drawing'));
 $<HTMLButtonElement>('nav-quantity').addEventListener('click', () => setStage('quantity'));
 $<HTMLInputElement>('mat-fck').addEventListener('change', (ev) => setMaterial('fck', (ev.target as HTMLInputElement).value));
 $<HTMLInputElement>('mat-waste').addEventListener('change', (ev) => setWaste((ev.target as HTMLInputElement).value));