feat(view): 확대기초·말뚝 plan and side drawings on ② (2단계), drawn from the model

The footing card shows a plan (footing rectangle, pile circles, column, pier axis, mm labels) and an elevation (footing,
piles to their tips, column, h1 and pile length). The drawings are SVG strings built from the model, so they follow the
inputs. θ is noted as not yet applied. Tests check the pile count, the mm labels and the width input.

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

src/view/footing-svg.ts

@@ -0,0 +1,65 @@
+/**
+ * 확대기초·말뚝 그림 (2단계, 승인 2026-10-23): plan and side views as SVG strings, drawn from the model (footings, piles,
+ * columns) and the input values. Pure: no DOM, so that it can be tested. Units: m in the model; the labels show mm.
+ */
+import type { PierModel } from '../core/geometry';
+
+const mm = (v: number) => Math.round(v * 1000);
+
+/** Plan view: the footing rectangle (length along the 교축, width across), the pile circles, the column circle, the axis. */
+export function footingPlanSvg(model: PierModel): string {
+  const f = model.footings[0];
+  if (!f) return '';
+  const pad = 0.8;
+  const x0 = f.s - f.length / 2 - pad;
+  const x1 = f.s + f.length / 2 + pad;
+  const y0 = -f.width / 2 - pad;
+  const y1 = f.width / 2 + pad;
+  const piles = model.piles.filter((p) => Math.abs(p.s - f.s) <= f.length / 2 + 1e-6);
+  const parts: string[] = [];
+  parts.push(`<rect x="${f.s - f.length / 2}" y="${-f.width / 2}" width="${f.length}" height="${f.width}" fill="#dfe5ec" stroke="#5b6676" stroke-width="0.02"/>`);
+  for (const p of piles) {
+    parts.push(`<circle cx="${p.s}" cy="${p.n}" r="${p.diameter / 2}" fill="#8898aa" stroke="#3b4656" stroke-width="0.01"/>`);
+  }
+  for (const c of model.columns) {
+    parts.push(`<circle cx="${c.s}" cy="0" r="${c.diameter / 2}" fill="none" stroke="#0f5c66" stroke-width="0.03" stroke-dasharray="0.1 0.06"/>`);
+  }
+  // Pier axis (dash-dot) through the footing centre.
+  parts.push(`<line x1="${x0}" y1="0" x2="${x1}" y2="0" stroke="#b4531f" stroke-width="0.02" stroke-dasharray="0.3 0.1 0.05 0.1"/>`);
+  // Dimension labels: length and width, in mm.
+  parts.push(`<text x="${f.s}" y="${-f.width / 2 - 0.35}" font-size="0.28" text-anchor="middle">${mm(f.length)}</text>`);
+  parts.push(`<text x="${f.s + f.length / 2 + 0.35}" y="0" font-size="0.28" text-anchor="start">${mm(f.width)}</text>`);
+  return `<svg viewBox="${x0} ${y0} ${x1 - x0} ${y1 - y0}" role="img" aria-label="확대기초·말뚝 평면"><g transform="scale(1,1)">${parts.join('')}</g></svg>`;
+}
+
+/** Side view (elevation): the footing, the piles down to their tips, and the column above the footing (EL up). */
+export function footingSideSvg(model: PierModel): string {
+  const f = model.footings[0];
+  if (!f) return '';
+  const piles = model.piles.filter((p) => Math.abs(p.s - f.s) <= f.length / 2 + 1e-6);
+  const tipEl = piles.length ? Math.min(...piles.map((p) => p.bottom)) : f.bottom;
+  const topEl = model.levelBottom;
+  const pad = 0.8;
+  const x0 = f.s - f.length / 2 - pad;
+  const x1 = f.s + f.length / 2 + pad;
+  const y0 = -(topEl + pad);
+  const y1 = -(tipEl - pad);
+  const parts: string[] = [];
+  // Elevation: y = −EL so that the level grows upward on the screen.
+  parts.push(`<rect x="${f.s - f.length / 2}" y="${-f.top}" width="${f.length}" height="${f.top - f.bottom}" fill="#dfe5ec" stroke="#5b6676" stroke-width="0.02"/>`);
+  for (const p of piles) {
+    parts.push(`<line x1="${p.s}" y1="${-p.top}" x2="${p.s}" y2="${-p.bottom}" stroke="#8898aa" stroke-width="${Math.max(p.diameter, 0.02)}"/>`);
+  }
+  // Column: from the footing top up to the Level underside.
+  const col = model.columns[0];
+  if (col) {
+    parts.push(`<rect x="${col.s - col.diameter / 2}" y="${-topEl}" width="${col.diameter}" height="${topEl - f.top}" fill="#c9d4df" stroke="#0f5c66" stroke-width="0.02"/>`);
+  }
+  // Labels: the footing height and the pile length, in mm.
+  parts.push(`<text x="${f.s + f.length / 2 + 0.35}" y="${-(f.top + f.bottom) / 2}" font-size="0.28" text-anchor="start">h1 ${mm(f.top - f.bottom)}</text>`);
+  if (piles.length) {
+    const pileLen = piles[0].top - piles[0].bottom;
+    parts.push(`<text x="${f.s}" y="${-(tipEl + 0.5)}" font-size="0.28" text-anchor="middle">말뚝 ${mm(pileLen)}</text>`);
+  }
+  return `<svg viewBox="${x0} ${y0} ${x1 - x0} ${y1 - y0}" role="img" aria-label="확대기초·말뚝 측면"><g transform="scale(1,1)">${parts.join('')}</g></svg>`;
+}