fix: [fire-shutter] 셔터박스 측면도 구조 전면 재설계

- 거의 밀폐된 실제 박스 구조로 변경 (6개 판재)
- 전면: 상부판(240mm) + 슬랫슬롯(75mm) + 하부판(65mm) 3단 구성
- 바닥판: 후면선반(50mm) + 레일홀(70mm) + 전면측 바닥판
- 슬랫 출구를 전면 슬롯으로 이동 (커튼 경로 곡선 표시)
- 레일은 바닥판의 70mm 홀로 진입하는 구조
- 치수선에 슬랫슬롯(75mm) 추가
This commit is contained in:
김보곤
2026-03-13 22:02:22 +09:00
parent a18155a973
commit e53cf9fa29

View File

@@ -1220,62 +1220,83 @@ function renderSbSide() {
const b = S.sb;
const p = PRODUCTS[S.productType];
const D = b.depth, H = b.height;
const fH = p.sb.frontH; // 전면 높이 (screen:240, steel:410)
const fH = p.sb.frontH; // 전면 상부 높이 (screen:240, steel:410)
const bOpen = p.sb.bottomOpen || 75; // 슬랫 슬롯 높이 75mm
const lowerFH = Math.max(0, H - fH - bOpen); // 전면 하부 패널 (screen:65, steel:65)
const sc = Math.min(480 / D, 520 / H);
const pad = 80;
const sD = D*sc, sH = H*sc, sfH = fH*sc;
const svgW = sD + pad*2 + 150, svgH = sH + pad*2 + 100;
const sD = D*sc, sH = H*sc, sfH = fH*sc, sBOpen = bOpen*sc, sLFH = lowerFH*sc;
const svgW = sD + pad*2 + 150, svgH = sH + pad*2 + 70;
const ox = pad + 65, oy = pad + 30;
const vt = Math.max(5, (b.thickness||1.6)*sc*3); // 판 두께 (표시용 확대)
const bpW = Math.min(fH, D-50)*sc; // 하판 폭 (≒ frontH, 절곡도 기준 240mm)
const railW = (S.productType==='screen' ? 70 : 120)*sc;
const railUp = 100*sc;
const shaftR = (b.shaftDia/2)*sc;
// 샤프트: 상판~하판 사이 공간 중앙에 배치
const shaftCx = ox + sD*0.48;
const shaftCy = oy + sfH*0.5;
const rollR = shaftR + 20*sc;
const vt = Math.max(5, (b.thickness||1.6)*sc*3);
const pf='#4b5563', ps='#6b7280', ff='#374151';
// 절곡 치수 (절곡도 기준)
// 하판: fH 위치의 내부 선반 (절곡도 기준 240mm)
const shelfW = Math.min(fH, D-50)*sc;
// 바닥판: H 위치, 레일홀(70mm)만 제외하고 전체 커버
const railHoleW = (S.productType==='screen' ? 70 : 120)*sc;
const backShelf = 50*sc; // 후면 하부 50mm 선반
const railUp = 100*sc;
// 샤프트: 상판~내부선반 사이 중앙
const shaftR = (b.shaftDia/2)*sc;
const shaftCx = ox + sD*0.48;
const shaftCy = oy + sfH*0.45;
const rollR = shaftR + 20*sc;
// 절곡 치수
const f20=20*sc, f50=50*sc, f55=55*sc, f15=15*sc, f13=13*sc, f17=17*sc;
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" style="max-width:100%;max-height:100%;">
<text x="${svgW/2}" y="22" fill="#94a3b8" font-size="14" font-weight="900" text-anchor="middle" font-family="Pretendard">셔터박스 측면 단면도 (Side Cross-Section)</text>
<!-- L자형 내부 공간 (연한 배경) -->
<path d="M${ox+vt},${oy+vt} L${ox+sD-vt},${oy+vt} L${ox+sD-vt},${oy+sfH-vt} L${ox+sD-bpW+vt},${oy+sfH-vt} L${ox+sD-bpW+vt},${oy+sH} L${ox+vt},${oy+sH} Z" fill="rgba(55,65,81,0.12)"/>
<!-- 내부 공간 (연한 배경) -->
<rect x="${ox+vt}" y="${oy+vt}" width="${sD-vt*2}" height="${sH-vt*2}" fill="rgba(55,65,81,0.12)" rx="2"/>
<!-- ━━━ 4주요 판재 ━━━ -->
<!-- 후면판 (벽측, 전체높이 ${H}mm) -->
<!-- ━━━ 6개 판재 (거의 밀폐 구조) ━━━ -->
<!-- 후면판 (벽측, 전체높이 ${H}mm, solid) -->
<rect x="${ox}" y="${oy}" width="${vt}" height="${sH}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
<!-- 상판 (전체깊이 ${D}mm) -->
<!-- 상판 (전체깊이 ${D}mm) -->
<rect x="${ox}" y="${oy}" width="${sD}" height="${vt}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
<!-- 전면판 (개구부, ${fH}mm) -->
<!-- ③ 전면 상부판 (${fH}mm) -->
<rect x="${ox+sD-vt}" y="${oy}" width="${vt}" height="${sfH}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
<!-- 하판 (${Math.round(bpW/sc)}mm) -->
<rect x="${ox+sD-bpW}" y="${oy+sfH-vt}" width="${bpW}" height="${vt}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
<!-- ④ 전면 하부판 (${lowerFH}mm) -->
${sLFH > 0 ? `<rect x="${ox+sD-vt}" y="${oy+sfH+sBOpen}" width="${vt}" height="${sLFH}" fill="${pf}" stroke="${ps}" stroke-width="1"/>` : ''}
<!-- ⑤ 내부 선반 (fH 위치, ${Math.round(shelfW/sc)}mm) -->
<rect x="${ox+sD-shelfW}" y="${oy+sfH-vt}" width="${shelfW}" height="${vt}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
<!-- ⑥ 바닥판 (레일홀 ${Math.round(railHoleW/sc)}mm만 제외) -->
<!-- 바닥-후면측: 50mm 선반 -->
<rect x="${ox+vt}" y="${oy+sH-vt}" width="${backShelf}" height="${vt}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
<!-- 바닥-전면측: 레일홀 이후~전면까지 -->
<rect x="${ox+vt+backShelf+railHoleW}" y="${oy+sH-vt}" width="${sD-vt*2-backShelf-railHoleW}" height="${vt}" fill="${pf}" stroke="${ps}" stroke-width="1"/>
<!-- ━━━ 절곡 플랜지 (접합부) ━━━ -->
<!-- 후면 상부: 20mm 내향 플랜지 (상판 연결) -->
<!-- 후면 상부: 20mm 내향 플랜지 -->
<rect x="${ox+vt}" y="${oy+vt}" width="${f20}" height="${vt*0.6}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
<!-- 후면 상부: 55mm+15mm 립 (고정 브라켓) -->
<!-- 후면 상부: 55mm+15mm 립 -->
<rect x="${ox+vt}" y="${oy+vt+f55}" width="${f15}" height="${vt*0.6}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
<!-- 전면 상부: 50mm 내향 플랜지 (상판 연결) -->
<!-- 전면 상부: 50mm 내향 플랜지 -->
<rect x="${ox+sD-vt-f50}" y="${oy+vt}" width="${f50}" height="${vt*0.6}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
<!-- 전면 상부: 15mm+20mm 이중 접합 -->
<rect x="${ox+sD-vt-f50}" y="${oy+vt+f15}" width="${f20}" height="${vt*0.5}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1" opacity="0.7"/>
<!-- 후면 하부: 50mm 선반 (레일 지지) -->
<rect x="${ox+vt}" y="${oy+sH-vt}" width="${f50}" height="${vt}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
<!-- 하판 좌측: 13mm 절곡 플랜지 -->
<rect x="${ox+sD-bpW-f13}" y="${oy+sfH-vt}" width="${f13}" height="${vt}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
<!-- 하판 하부: 17mm 탭 (좌측만, 우측은 전면판과 자연 접합) -->
<rect x="${ox+sD-bpW}" y="${oy+sfH}" width="${f17}" height="${vt*0.5}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
<!-- 내부선반 좌측: 13mm 플랜지 -->
<rect x="${ox+sD-shelfW-f13}" y="${oy+sfH-vt}" width="${f13}" height="${vt}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
<!-- 내부선반 하부: 17mm -->
<rect x="${ox+sD-shelfW}" y="${oy+sfH}" width="${f17}" height="${vt*0.5}" fill="${ff}" stroke="${ps}" stroke-width="0.5" rx="1"/>
<!-- ━━━ 가이드레일 진입부 (하단 좌측) ━━━ -->
<rect x="${ox}" y="${oy+sH-railUp}" width="${railW}" height="${railUp}" fill="rgba(100,116,139,0.15)" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4 2" rx="2"/>
<text x="${ox+railW/2}" y="${oy+sH-railUp/2}" fill="#64748b" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">레일 ${Math.round(railW/sc)}</text>
<text x="${ox+railW/2}" y="${oy+sH-railUp/2+12}" fill="#64748b" font-size="7" text-anchor="middle" font-family="Pretendard" opacity="0.7">↑ 100mm 진입</text>
<!-- ━━━ 레일 홀 (바닥 70mm 개구) ━━━ -->
<rect x="${ox+vt+backShelf}" y="${oy+sH-vt}" width="${railHoleW}" height="${vt}" fill="rgba(100,116,139,0.2)" stroke="#64748b" stroke-width="1" stroke-dasharray="3 2" rx="1"/>
<!-- 레일이 홀을 통해 100mm 올라오는 표시 -->
<rect x="${ox+vt+backShelf}" y="${oy+sH-railUp}" width="${railHoleW}" height="${railUp-vt}" fill="rgba(100,116,139,0.08)" stroke="#64748b" stroke-width="0.8" stroke-dasharray="4 2" rx="1"/>
<text x="${ox+vt+backShelf+railHoleW/2}" y="${oy+sH-railUp/2+4}" fill="#64748b" font-size="8" font-weight="700" text-anchor="middle" font-family="Pretendard">레일 ${Math.round(railHoleW/sc)}</text>
<text x="${ox+vt+backShelf+railHoleW/2}" y="${oy+sH-railUp/2+14}" fill="#64748b" font-size="7" text-anchor="middle" font-family="Pretendard" opacity="0.7">↑ ${Math.round(railUp/sc)}mm</text>
<!-- ━━━ 슬랫 슬롯 (전면 ${bOpen}mm 개구) ━━━ -->
<rect x="${ox+sD-vt}" y="${oy+sfH}" width="${vt}" height="${sBOpen}" fill="rgba(245,158,11,0.15)" stroke="#f59e0b" stroke-width="1" stroke-dasharray="3 2"/>
<!-- 슬랫 커튼 경로: 내부선반 → 슬롯 → 아래로 -->
<path d="M${ox+sD-shelfW+vt},${oy+sfH-vt*0.5} Q${ox+sD-vt*3},${oy+sfH+sBOpen*0.3} ${ox+sD},${oy+sfH+sBOpen*0.5}" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="5 3" opacity="0.6"/>
<line x1="${ox+sD}" y1="${oy+sfH+sBOpen*0.5}" x2="${ox+sD+15}" y2="${oy+sH+15}" stroke="#9ca3af" stroke-width="2" stroke-dasharray="4 2"/>
<text x="${ox+sD+20}" y="${oy+sH+10}" fill="#94a3b8" font-size="9" font-weight="700" font-family="Pretendard">↓ 슬랫</text>
<!-- ━━━ 내부 구성품 ━━━ -->
${b.showShaft ? `
@@ -1294,38 +1315,31 @@ function renderSbSide() {
<text x="${shaftCx}" y="${shaftCy+3}" fill="white" font-size="8" font-weight="900" text-anchor="middle" font-family="Pretendard">M</text>
` : ''}
<!-- 슬랫 출구 (하판~후면 사이 개방부) -->
<line x1="${ox+sD-bpW+vt}" y1="${oy+sfH}" x2="${ox+sD-bpW+vt}" y2="${oy+sH+15}" stroke="#9ca3af" stroke-width="2" stroke-dasharray="4 2"/>
<text x="${ox+sD-bpW+vt+10}" y="${oy+sH+8}" fill="#94a3b8" font-size="9" font-weight="700" font-family="Pretendard">↓ 슬랫</text>
<!-- 개방 영역 표시 -->
<text x="${ox+(sD-bpW)*0.5+vt}" y="${oy+sfH+(sH-sfH)*0.5}" fill="rgba(148,163,184,0.3)" font-size="10" text-anchor="middle" font-family="Pretendard">개방</text>
<!-- ━━━ 치수선 ━━━ -->
<!-- 깊이 (상단) -->
<line x1="${ox}" y1="${oy-15}" x2="${ox+sD}" y2="${oy-15}" stroke="#3b82f6" stroke-width="1"/>
<line x1="${ox}" y1="${oy-20}" x2="${ox}" y2="${oy-5}" stroke="#3b82f6" stroke-width="0.5"/>
<line x1="${ox+sD}" y1="${oy-20}" x2="${ox+sD}" y2="${oy-5}" stroke="#3b82f6" stroke-width="0.5"/>
<text x="${ox+sD/2}" y="${oy-22}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="middle" font-family="Pretendard">깊이 ${D} mm</text>
<!-- 전체 높이 (우측) -->
<!-- 전체 높이 (우측 1단) -->
<line x1="${ox+sD+15}" y1="${oy}" x2="${ox+sD+15}" y2="${oy+sH}" stroke="#3b82f6" stroke-width="1"/>
<line x1="${ox+sD+10}" y1="${oy}" x2="${ox+sD+20}" y2="${oy}" stroke="#3b82f6" stroke-width="0.5"/>
<line x1="${ox+sD+10}" y1="${oy+sH}" x2="${ox+sD+20}" y2="${oy+sH}" stroke="#3b82f6" stroke-width="0.5"/>
<text x="${ox+sD+25}" y="${oy+sH/2+4}" fill="#3b82f6" font-size="11" font-weight="900" text-anchor="start" font-family="Pretendard">${H} mm</text>
<!-- 전면 높이 (우측 외곽) -->
<!-- 전면 상부 높이 (우측 2단) -->
<line x1="${ox+sD+45}" y1="${oy}" x2="${ox+sD+45}" y2="${oy+sfH}" stroke="#22c55e" stroke-width="1"/>
<line x1="${ox+sD+40}" y1="${oy}" x2="${ox+sD+50}" y2="${oy}" stroke="#22c55e" stroke-width="0.5"/>
<line x1="${ox+sD+40}" y1="${oy+sfH}" x2="${ox+sD+50}" y2="${oy+sfH}" stroke="#22c55e" stroke-width="0.5"/>
<text x="${ox+sD+55}" y="${oy+sfH/2+4}" fill="#22c55e" font-size="10" font-weight="700" text-anchor="start" font-family="Pretendard">${fH} mm</text>
<!-- 하판 폭 (하단) -->
<line x1="${ox+sD-bpW}" y1="${oy+sfH+18}" x2="${ox+sD}" y2="${oy+sfH+18}" stroke="#64748b" stroke-width="0.8"/>
<line x1="${ox+sD-bpW}" y1="${oy+sfH+13}" x2="${ox+sD-bpW}" y2="${oy+sfH+23}" stroke="#64748b" stroke-width="0.5"/>
<line x1="${ox+sD}" y1="${oy+sfH+13}" x2="${ox+sD}" y2="${oy+sfH+23}" stroke="#64748b" stroke-width="0.5"/>
<text x="${ox+sD-bpW/2}" y="${oy+sfH+32}" fill="#64748b" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard">하판 ${Math.round(bpW/sc)} mm</text>
<!-- 레일 폭 (하단 좌측) -->
<line x1="${ox}" y1="${oy+sH+15}" x2="${ox+railW}" y2="${oy+sH+15}" stroke="#64748b" stroke-width="0.8"/>
<line x1="${ox}" y1="${oy+sH+10}" x2="${ox}" y2="${oy+sH+20}" stroke="#64748b" stroke-width="0.5"/>
<line x1="${ox+railW}" y1="${oy+sH+10}" x2="${ox+railW}" y2="${oy+sH+20}" stroke="#64748b" stroke-width="0.5"/>
<text x="${ox+railW/2}" y="${oy+sH+28}" fill="#64748b" font-size="8" font-weight="700" text-anchor="middle" font-family="Pretendard">${Math.round(railW/sc)} mm</text>
<!-- 슬랫 슬롯 높이 (우측 2단) -->
<line x1="${ox+sD+45}" y1="${oy+sfH}" x2="${ox+sD+45}" y2="${oy+sfH+sBOpen}" stroke="#f59e0b" stroke-width="1"/>
<line x1="${ox+sD+40}" y1="${oy+sfH+sBOpen}" x2="${ox+sD+50}" y2="${oy+sfH+sBOpen}" stroke="#f59e0b" stroke-width="0.5"/>
<text x="${ox+sD+55}" y="${oy+sfH+sBOpen/2+4}" fill="#f59e0b" font-size="9" font-weight="700" text-anchor="start" font-family="Pretendard">${bOpen} mm</text>
<!-- 레일홀 치수 (하단) -->
<line x1="${ox+vt+backShelf}" y1="${oy+sH+12}" x2="${ox+vt+backShelf+railHoleW}" y2="${oy+sH+12}" stroke="#64748b" stroke-width="0.8"/>
<line x1="${ox+vt+backShelf}" y1="${oy+sH+7}" x2="${ox+vt+backShelf}" y2="${oy+sH+17}" stroke="#64748b" stroke-width="0.5"/>
<line x1="${ox+vt+backShelf+railHoleW}" y1="${oy+sH+7}" x2="${ox+vt+backShelf+railHoleW}" y2="${oy+sH+17}" stroke="#64748b" stroke-width="0.5"/>
<text x="${ox+vt+backShelf+railHoleW/2}" y="${oy+sH+25}" fill="#64748b" font-size="8" font-weight="700" text-anchor="middle" font-family="Pretendard">레일홀 ${Math.round(railHoleW/sc)} mm</text>
<!-- 측면 라벨 -->
<text x="${ox-12}" y="${oy+sH/2}" fill="#94a3b8" font-size="9" font-weight="700" text-anchor="middle" font-family="Pretendard" transform="rotate(-90,${ox-12},${oy+sH/2})">벽측 (후면)</text>