feat(rebar): second dimension line and legend on the coping 정면 (시안 ③)

- The column-centre line 900 · 10@1000=10000 (기둥 중심부터) · 900, from the
  design values, under the first dimension.
- A legend of the bar groups and their colours under the drawing.

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

src/view/coping-rebar-svg.ts

@@ -73,6 +73,19 @@ export function copingFrontSvg(records: BarRecord[], lengthMm: number): string {
       x = x2;
     }
   }
+  // Second line (시안): the column-centre span 900 · 10@1000=10000 · 900, from the design values.
+  const dimY2 = dimY - 600;
+  const LOWER: { text: string; len: number }[] = [
+    { text: '900', len: 900 },
+    { text: '10@1000=10000 (기둥 중심부터)', len: 10000 },
+    { text: '900', len: 900 },
+  ];
+  let x2 = minX;
+  for (const d of LOWER) {
+    const xe = x2 + d.len;
+    parts.push(`<line x1="${x2}" y1="${dimY2}" x2="${xe}" y2="${dimY2}" stroke="#18212B" stroke-width="10"></line><text x="${(x2 + xe) / 2}" y="${dimY2 - 80}" text-anchor="middle" font-size="150" fill="#18212B">${d.text}</text>`);
+    x2 = xe;
+  }
   parts.push(`<text x="${midX}" y="${minY - 1500}" text-anchor="middle" font-size="200" fill="#18212B">코핑 길이 ${lengthMm}</text>`);
 
   // Bubbles: one per bar group, a leader from the bubble to the middle of the group's bars.
@@ -105,10 +118,24 @@ export function copingFrontSvg(records: BarRecord[], lengthMm: number): string {
     parts.push(`<text x="${bx}" y="${by + 90}" text-anchor="middle" font-size="210" fill="#18212B">${c.label}</text>`);
   }
 
+  // Legend (시안): the bar groups and their line styles, under the drawing.
+  const LEGEND: { label: string; group: keyof typeof COLOR }[] = [
+    { label: '주철근 (C1–C8)', group: 'main' },
+    { label: '전단·띠 (C9–C11)', group: 'loop' },
+    { label: '측면 수평 (C12–C13)', group: 'side' },
+    { label: '직각·보조 · 계단부 (C14–C16)', group: 'step' },
+  ];
+  const legendY = maxY + 2300;
+  let lx = minX;
+  for (const item of LEGEND) {
+    parts.push(`<line x1="${lx}" y1="${legendY}" x2="${lx + 500}" y2="${legendY}" stroke="${COLOR[item.group]}" stroke-width="12"></line><text x="${lx + 620}" y="${legendY + 70}" font-size="170" fill="#18212B">${item.label}</text>`);
+    lx += 2600;
+  }
+
   const vx = minX - 1500;
   const vy = minY - 1900;
   const vw = maxX - minX + 3000;
-  const vh = maxY - minY + 3400;
+  const vh = legendY - minY + 1900 + 400;
   return `<svg viewBox="${vx} ${vy} ${vw} ${vh}" width="100%" style="max-width: 760px; height: auto" role="img" aria-label="코핑 배근 정면 · 번호 풍선 · 길이 치수">${parts.join('')}</svg>`;
 }
 

tests/coping-rebar-svg.test.ts

@@ -55,3 +55,12 @@ describe('정면 번호 풍선과 치수 (승인 2026-10-26, 시안 ③)', () =>
     expect(svg).toContain('코핑 길이 12000');
   });
 });
+
+describe('정면 두 번째 치수선과 범례 (승인 2026-10-26, 시안)', () => {
+  const svg = copingFrontSvg(scene.records, model.copingL * 1000);
+  it('writes the column-centre span 10@1000=10000 and the legend', () => {
+    expect(svg).toContain('10@1000=10000 (기둥 중심부터)');
+    expect(svg).toContain('주철근 (C1–C8)');
+    expect(svg).toContain('전단·띠 (C9–C11)');
+  });
+});