From fed8729ff3bc604c64e221187dbc44d5f882e52e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sun, 8 Mar 2026 20:23:48 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[fire-shutter]=20SVG=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EB=AF=B8=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(wrapper=20div=20=ED=81=AC=EA=B8=B0=20?=
 =?UTF-8?q?=EB=AA=85=EC=8B=9C,=20displaySvg=20=ED=97=AC=ED=8D=BC=20?=
 =?UTF-8?q?=ED=86=B5=ED=95=A9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rd/fire-shutter-drawing/index.blade.php   | 50 ++++++++-----------
 1 file changed, 20 insertions(+), 30 deletions(-)

diff --git a/resources/views/rd/fire-shutter-drawing/index.blade.php b/resources/views/rd/fire-shutter-drawing/index.blade.php
index a3a03e03..4ce1f1af 100644
--- a/resources/views/rd/fire-shutter-drawing/index.blade.php
+++ b/resources/views/rd/fire-shutter-drawing/index.blade.php
@@ -507,6 +507,21 @@ function readSb() {
         S.sb.motorSide = $('sbMotorSide').value;
     }
 
+    // ============================
+    // SVG DISPLAY HELPER
+    // ============================
+    function displaySvg(svg) {
+        const c = $('svgContainer');
+        c.innerHTML = '';
+        const div = document.createElement('div');
+        div.style.cssText = 'width:100%;height:100%;display:flex;align-items:center;justify-content:center;';
+        div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
+        div.style.transformOrigin = 'center center';
+        div.innerHTML = svg;
+        c.appendChild(div);
+        $('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
+    }
+
     // ============================
     // RENDER DISPATCHER
     // ============================
@@ -569,7 +584,7 @@ function renderSettingsPreview() {
             <!-- Type label -->
             <text x="${ox + sw/2}" y="${oy + boxH + (sh - boxH)/2 + 4}" fill="${S.productType === 'steel' ? '#94a3b8' : '#c084fc'}" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard" opacity="0.4">${S.productType === 'steel' ? '강판 슬랫' : '스크린 원단'}</text>
         </svg>`;
-        $('svgContainer').innerHTML = svg;
+        displaySvg(svg);
     }
 
     // ============================
@@ -672,14 +687,7 @@ function renderGrCross() {
             <text x="${ox + w/2}" y="${oy + d + 45}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">GUIDE RAIL BODY (C-CHANNEL) — ${S.productType === 'steel' ? '강판형' : '스크린형'}</text>
         </svg>`;
 
-        const c = $('svgContainer');
-        c.innerHTML = '';
-        const div = document.createElement('div');
-        div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
-        div.style.transformOrigin = 'center center';
-        div.innerHTML = svg;
-        c.appendChild(div);
-        $('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
+        displaySvg(svg);
     }
 
     function renderGrFront() {
@@ -718,13 +726,7 @@ function renderGrFront() {
             <text x="${ox + rw/2}" y="${oy + rh + 50}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">GUIDE RAIL — FRONT VIEW</text>
         </svg>`;
 
-        const c = $('svgContainer');
-        c.innerHTML = '';
-        const div = document.createElement('div');
-        div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
-        div.innerHTML = svg;
-        c.appendChild(div);
-        $('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
+        displaySvg(svg);
     }
 
     // ============================
@@ -810,13 +812,7 @@ function renderSbFront() {
             <text x="${ox + sw/2}" y="${oy - 10}" fill="#94a3b8" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">HEAD BOX / CASE — t=${b.thickness}mm</text>
         </svg>`;
 
-        const c = $('svgContainer');
-        c.innerHTML = '';
-        const div = document.createElement('div');
-        div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
-        div.innerHTML = svg;
-        c.appendChild(div);
-        $('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
+        displaySvg(svg);
     }
 
     function renderSbSide() {
@@ -863,13 +859,7 @@ function renderSbSide() {
             <text x="${ox + sd + 25}" y="${oy + sh/2 + 4}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="start" font-family="Pretendard">${b.height} mm</text>
         </svg>`;
 
-        const c = $('svgContainer');
-        c.innerHTML = '';
-        const div = document.createElement('div');
-        div.style.transform = `scale(${S.view.scale}) translate(${S.view.offset.x / S.view.scale}px, ${S.view.offset.y / S.view.scale}px)`;
-        div.innerHTML = svg;
-        c.appendChild(div);
-        $('scaleDisplay').textContent = `SCALE: ${Math.round(S.view.scale * 100)}%`;
+        displaySvg(svg);
     }
 
     // ============================