docs: [rd] 방화셔터 가이드레일 SVG/3D 렌더링 기술문서 추가

- 철재스라트 15세그먼트 절곡 프로파일 상세 - 스크린형 4부재 구성 및 치수 라벨 체계 - 2D SVG 좌표계 및 3D Three.js 변환 매핑 - INDEX.md, README.md 등록
2026-03-16 21:08:48 +09:00
parent 253b9defd5
commit 2073af1d8e
3 changed files with 210 additions and 1 deletions
--- a/INDEX.md
+++ b/INDEX.md
@@ -172,6 +172,8 @@ DB 도메인별:
 | [approvals/mng-api-comparison.md](features/approvals/mng-api-comparison.md) | 결재관리 MNG↔API 비교 분석 및 React 구현 가이드 |
 | [email/README.md](features/email/README.md) | 이메일 시스템 (테넌트별 SMTP 설정, 프리셋, 연결 테스트) |
 | [construction-pmis/bim-viewer.md](features/construction-pmis/bim-viewer.md) | BIM 뷰어 (Three.js 기반 웹 3D 건물 모델 뷰어) |
+| [rd/README.md](features/rd/README.md) | R&D 메뉴 전체 개요 |
+| [rd/fire-shutter-drawing-guide-rail.md](features/rd/fire-shutter-drawing-guide-rail.md) | 방화셔터 가이드레일 SVG/3D 렌더링 기술 명세 |

 ---

--- a/features/rd/README.md
+++ b/features/rd/README.md
@@ -20,6 +20,7 @@ R&D 메뉴는 SAM 플랫폼의 **연구개발 및 내부 도구** 모음이다.
 | **README.md** (이 문서) | 전체 개요, 메뉴 구조, 컨트롤러 매핑 |
 | [planning-design.md](planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 |
 | [design-insight.md](design-insight.md) | 디자인 인사이트 UI/UX 연구 도구 (100종 패턴, AI 프롬프트) |
+| [fire-shutter-drawing-guide-rail.md](fire-shutter-drawing-guide-rail.md) | 방화셔터 도면 가이드레일 SVG/3D 렌더링 |

 ### 1.3 하위 메뉴 구조

@@ -35,7 +36,8 @@ R&D
 │   ├── 편집              /rd/ai-quotation/{id}/edit
 │   └── 문서              /rd/ai-quotation/{id}/document
 ├── 기획디자인             /rd/planning-design
-└── 디자인 인사이트         /rd/design-insight
+├── 디자인 인사이트         /rd/design-insight
+└── 방화셔터 도면           /rd/fire-shutter-drawing
 ```

 ---
@@ -96,6 +98,7 @@ if ($request->header('HX-Request')) {
 | AI 견적 | Blade + Alpine.js | AiQuotationService | ai_quotations | 운영 중 |
 | **기획디자인** | **Blade + Alpine.js (SPA)** | **없음 (localStorage)** | **없음** | **운영 중** |
 | **디자인 인사이트** | **Blade + Alpine.js (SPA)** | **없음 (localStorage)** | **없음** | **운영 중** |
+| **방화셔터 도면** | **Blade + JS (SVG/Three.js)** | **RdController** | **없음** | **운영 중** |

 ---

@@ -103,6 +106,7 @@ if ($request->header('HX-Request')) {

 - [기획디자인 스토리보드 에디터](planning-design.md) — 블록 에디터, 서식, 인쇄, 내보내기
 - [디자인 인사이트](design-insight.md) — UI/UX 연구 도구 (100종 패턴, AI 프롬프트 복사)
+- [방화셔터 도면 가이드레일](fire-shutter-drawing-guide-rail.md) — 가이드레일 SVG/3D 렌더링 기술 명세
 - [조직도 관리 기술문서](../../projects/org-chart/) — 조직도 시스템 상세 (별도 프로젝트 문서)

 ---
--- a/features/rd/fire-shutter-drawing-guide-rail.md
+++ b/features/rd/fire-shutter-drawing-guide-rail.md
@@ -0,0 +1,203 @@
+# 방화셔터 도면 — 가이드레일 렌더링
+
+> **작성일**: 2026-03-16
+> **상태**: 운영 중
+> **파일**: `mng/resources/views/rd/fire-shutter-drawing/index.blade.php`
+> **라우트**: `GET /rd/fire-shutter-drawing`
+
+---
+
+## 1. 개요
+
+### 1.1 목적
+
+방화셔터 가이드레일의 **2D 평면도(SVG)**와 **3D 렌더링(Three.js)**을 구현한다.
+제품 유형(스크린형/철재스라트)에 따라 다른 프로파일을 렌더링하며, 각 부재(마감재, 본체, C형, 벽연형)의 절곡 치수를 시각화한다.
+
+### 1.2 제품 유형별 차이
+
+| 항목 | 스크린형 | 철재스라트 |
+|------|---------|-----------|
+| 본체 형상 | C채널 (lip-flange-sideWall-backWall) | 15세그먼트 절곡 프로파일 |
+| 마감재 절곡 | 10-11-110-30-15-15-15 (J-hook) | 10-13-120-25-15 (상단) / +19-14-15 (하단) |
+| 벽연결 부재 | ③ C형 30-45-30 + ④ D형 11-23-40-23-11 | ④ 벽연형 30-45-30 |
+| 전체 치수 | depth × width (가변) | 130mm × 75mm |
+
+---
+
+## 2. 철재스라트 가이드레일
+
+### 2.1 부재 구성
+
+```
+┌──────────────────────────────────────────────────┐
+│  ① 마감재 SUS 1.2T (빨간색, 상/하 2장)            │
+│  ┌────────────────────────────────────────────┐  │
+│  │  ② 본체 EGI 1.55T (회색, 15세그먼트 절곡)    │  │
+│  │  ┌──────────────────────────────────────┐  │  │
+│  │  │  개구부 (슬랫 통과 공간)               │  │  │
+│  │  └──────────────────────────────────────┘  │  │
+│  └────────────────────────────────────────────┘  │
+│                                                    │
+│  ④ 벽연형 EGI 1.55T (갈색, ㄷ자 30-45-30)        │
+│  ■■■■■ ← 방화벽                                   │
+└──────────────────────────────────────────────────┘
+```
+
+### 2.2 ② 본체 절곡 프로파일 (15세그먼트)
+
+정석 도면 기준, 시작점 `(0, 60)`:
+
+| Seg | 방향 | 치수(mm) | 좌표 | 설명 |
+|-----|------|---------|------|------|
+| 1 | 10→ | 10 | (0,60)→(10,60) | 좌측 립 |
+| 2 | 60↑ | 60 | (0,60)→(0,0) | 좌측벽 상부 |
+| 3 | 90→ | 90 | (0,0)→(90,0) | 상단 플랜지 |
+| 4 | 21↓ | 21 | (90,0)→(90,21) | 상부 립 |
+| 5 | 78← | 78 | (90,21)→(12,21) | **상부 내부 선반 (넓은)** |
+| 6 | 30↓ | 30 | (12,21)→(12,51) | 내부 벽 |
+| 7 | 43→ | 43 | (12,51)→(55,51) | **하부 내부 선반** |
+| 8 | 15↓ | 15 | (55,51)→(55,66) | 스텝 하강 |
+| 9 | 20→ | 20 | (55,66)→(75,66) | 스텝 수평 |
+| 10 | 15↑ | 15 | (75,66)→(75,51) | 스텝 상승 |
+| 11 | 15→ | 15 | (75,51)→(90,51) | 스텝 수평 |
+| 12 | 21↓ | 21 | (90,51)→(90,72) | 하부 립 |
+| 13 | 90← | 90 | (90,72)→(0,72) | 하단 플랜지 |
+| 14 | 12↑ | 12 | (0,72)→(0,60) | 좌측벽 하부 |
+| 15 | 10→ | 10 | (0,60)→(10,60) | 립 (Seg1과 겹침) |
+
+> **핵심**: 내부 개구부(스텝 구조)가 **하부**(y=51~66)에 위치한다. 상부(y=21)에는 넓은 78mm 선반, 하부에는 43mm 선반 + 15-20-15-15 스텝이 배치된다.
+
+### 2.3 ① 마감재 절곡 (SUS 1.2T)
+
+**상단**: `10←lip + 13↓tab + 120→body + 25↓ + 15←`
+**하단**: `10←lip + 13↑tab + 120→body + 25↑ + 19← + 14↓ + 15←`
+
+### 2.4 ④ 벽연형 (EGI 1.55T)
+
+ㄷ자 형태: `30(깊이) × 45(높이)`, 우측 열림. 본체 좌측에 위치, 세로 중앙 정렬.
+
+---
+
+## 3. 2D 평면도 (SVG) 구현
+
+### 3.1 좌표계
+
+```
+X축: 깊이 (LEFT=벽/방화벽 → RIGHT=개구부/실내)
+Y축: 높이 (TOP → BOTTOM)
+스케일: sc = 4 (1mm = 4px)
+```
+
+### 3.2 본체 위치 계산
+
+```javascript
+const ox2 = w4x + w4depth + (7 + 0.75) * sc;
+// ④ 벽연형 끝에서 7mm + 반두께(0.75mm) 간격
+```
+
+### 3.3 색상 체계
+
+| 부재 | 색상 | HEX |
+|------|------|-----|
+| ② 본체 EGI | 회색 | `#4b5563` (fill) / `#94a3b8` (stroke) |
+| ① 마감재 SUS | 빨간색 | `#ef4444` |
+| ④ 벽연형 EGI | 갈색 | `#8b6c5c` |
+
+### 3.4 치수 라벨
+
+각 부재의 절곡 치수를 **해당 부재 색상**으로 표시한다:
+- ② 본체: 회색(`#94a3b8`)으로 14개 세그먼트 치수
+- ① 마감재: 빨간색(`#ef4444`)으로 상/하단 각 7개 치수
+- ④ 벽연형: 갈색(`#8b6c5c`)으로 30 × 45
+
+---
+
+## 4. 3D 렌더링 (Three.js) 구현
+
+### 4.1 좌표계 매핑
+
+```
+2D 평면도             →  3D Shape (ExtrudeGeometry)
+──────────────────────────────────────────────
+plan_y (높이 0→72)    →  X (0 → rw=75, 중앙 정렬)
+plan_x (깊이 0→90)    →  Y (반전: Y = bYO + 90 - plan_x)
+                          Y=0: 개구부/실내, Y=rd: 벽
+```
+
+### 4.2 본체 세그먼트 변환 헬퍼
+
+```javascript
+function bSeg(px, py, pw, ph) {
+    // 평면도 좌표 (px, py, pw, ph) → THREE.Shape 좌표
+    const x1 = bXO + py, x2 = bXO + py + ph;
+    const y1 = bYO + 90 - px - pw, y2 = bYO + 90 - px;
+    const s = new THREE.Shape();
+    s.moveTo(x1,y1); s.lineTo(x2,y1);
+    s.lineTo(x2,y2); s.lineTo(x1,y2); s.lineTo(x1,y1);
+    return s;
+}
+```
+
+### 4.3 재질
+
+| 부재 | Material | 속성 |
+|------|----------|------|
+| ② 본체 / ④ 벽연형 | `MeshStandardMaterial` | color: `0x64748b`, metalness: 0.5, roughness: 0.4 |
+| ① 마감재 SUS | `MeshStandardMaterial` | color: `0x9ca3af`, metalness: 0.7, roughness: 0.25 |
+
+### 4.4 배치
+
+```javascript
+// 좌측 레일: 셔터 중심에서 -hw 위치
+railGroupL.position.set(-hw - rw/2, 0, rd/2);
+// 우측 레일: scale.x = -1 (좌우 반전)
+railGroupR.position.set(hw + rw/2, 0, rd/2);
+```
+
+---
+
+## 5. 스크린형 가이드레일
+
+### 5.1 부재 구성
+
+| 부재 | 색상 | 절곡 치수 |
+|------|------|----------|
+| ② 가이드레일 EGI | 파란색 `#3b82f6` | lip-flange-sideWall-backWall (가변) |
+| ① 마감재 SUS | 빨간색 `#ef4444` | 10-11-110-30-15-15-15 (J-hook) |
+| ③ C형 EGI | 초록색 `#22c55e` | 30-45-30 |
+| ④ D형 EGI | 주황색 `#f97316` | 11-23-40-23-11 |
+
+### 5.2 치수 라벨
+
+각 부재 색상에 맞춰 모든 절곡 치수를 `font-size="7"` 라벨로 표시한다.
+
+---
+
+## 6. 소스 코드 위치
+
+| 함수/섹션 | 줄 번호 (대략) | 설명 |
+|----------|-------------|------|
+| 스크린형 2D 평면도 | ~830~1055 | SVG 렌더링 (bodySvg, bk3Svg, bk4Svg, trim1Svg) |
+| 철재스라트 2D 평면도 | ~1058~1320 | SVG 렌더링 (② 본체 15세그먼트, ①, ④) |
+| `renderGrFront()` | ~1330 | 정면도 SVG |
+| `createRailGroup()` | ~2639 | 3D 가이드레일 생성 (스크린/철재 분기) |
+| 철재 3D 프로파일 | ~2795~2816 | `bSeg()` 헬퍼로 15세그먼트 + ④ + ① |
+
+---
+
+## 7. 참조 자료
+
+- 정석 도면: 가이드레일 본체 (EGI 1.55mm) 절곡도
+- 치수: 90(상단) - 21(상부립) - 78(선반) - 30(내부벽) - 43(선반) - 15-20-15-15(스텝) - 21(하부립) - 90(하단) - 12(좌측하) - 10(립) - 60(좌측상)
+
+---
+
+## 관련 문서
+
+- [R&D 메뉴 README](README.md) — R&D 전체 메뉴 구조
+- [기획디자인 스토리보드](planning-design.md) — 블록 에디터
+
+---
+
+**최종 업데이트**: 2026-03-16