# 방화셔터 도면 — 가이드레일 렌더링

> **작성일**: 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