# 방화셔터 도면생성 기능 기획서

> **작성일**: 2026-03-08
> **상태**: 기획 초안
> **위치**: MNG > R&D > 방화셔터 도면생성
> **라우트**: `GET /rd/fire-shutter-drawing`
> **참고**: 기존 `자동도면 생성` (`/rd/auto-drawing`) 구조를 확장

---

## 1. 개요

### 1.1 목적

방화셔터의 **가이드레일 단면**과 **셔터박스(케이스) 형태**를 파라미터로 입력하면, **2D 단면도(SVG)**와 **3D 렌더링(Three.js)**을 실시간으로 생성하는 도구를 제공한다.

### 1.2 핵심 가치

| 기존 (수동) | 개선 (SAM 도면생성) |
|-------------|-------------------|
| CAD 프로그램에서 수동 작도 | 파라미터 입력 → 자동 도면 생성 |
| 도면 수정 시 전체 재작업 | 치수 변경 → 실시간 미리보기 |
| 제품별 도면 관리 어려움 | 프리셋 저장/불러오기로 재활용 |
| 영업/설치팀 도면 요청 대기 | 현장에서 즉시 단면도 확인 가능 |

### 1.3 대상 사용자

- 설계팀: 방화셔터 단면 설계 및 검토
- 영업팀: 고객 제안 시 단면도/3D 이미지 첨부
- 설치팀: 현장 설치 전 가이드레일/케이스 형태 확인
- 생산팀: 절곡/제작 사양 확인

---

## 2. 방화셔터 핵심 구조

### 2.1 전체 구성도

```
┌─────────────────── 천장 슬래브 ───────────────────┐
│                                                    │
│  ┌──────────── 셔터박스 (HEAD BOX / CASE) ──────┐  │
│  │  ┌─────┐                          ┌─────┐   │  │
│  │  │브래킷│  [샤프트+슬랫 감김]       │브래킷│   │  │
│  │  └──┬──┘  [모터+감속기+브레이크]    └──┬──┘   │  │
│  │     │     [밸런스 스프링]              │      │  │
│  └─────┼─────────────────────────────────┼──────┘  │
│        │                                 │         │
│  ┌─────┴─────┐                    ┌──────┴─────┐   │
│  │ 가이드레일 │   ← 슬랫 커튼 →   │ 가이드레일  │   │
│  │ (좌)      │   (강판/스크린)    │ (우)       │   │
│  │           │                    │            │   │
│  │  연기차단재│                    │연기차단재   │   │
│  │           │                    │            │   │
│  └─────┬─────┘                    └──────┬─────┘   │
│        │                                 │         │
│  ══════╧═══ 하장바 (BOTTOM BAR) ═════════╧═══════  │
│             [고무 실링]                             │
└────────────────── 바닥 ──────────────────────────┘
```

### 2.2 주요 구성요소 상세

#### A. 가이드레일 (Guide Rail)

- **형태**: C-채널 단면 (ㄷ자 형태)
- **재질**: 강판 2.3mm 이상
- **기능**: 슬랫 커튼의 좌우 안내 + 연기 차단
- **표준 길이**: 2,438mm / 3,305mm / 4,430mm (조합 사용)
- **수량**: 항상 **2개** (좌우 1쌍)
- **부속**: 연기차단재(Smoke Seal Packing), 앵커볼트

```
가이드레일 단면 (상단에서 본 모습)

  ┌────────────┐
  │            │ ← 가이드레일 본체 (C-채널)
  │  ┌──────┐  │
  │  │ 연기 │  │
  │  │ 차단 │  │
  │  │ 재   │  │
  │  │      │  │
  │  │슬랫  │  │
  │  │엣지→ ●  │
  │  │      │  │
  │  │ 연기 │  │
  │  │ 차단 │  │
  │  │ 재   │  │
  │  └──────┘  │
  │            │
  └────────────┘
  ■■■■■■■■■■■■■ ← 방화벽
```

**파라미터**:

| 파라미터 | 설명 | 단위 | 기본값 |
|---------|------|------|--------|
| `rail_width` | 레일 전체 폭 | mm | 65 |
| `rail_depth` | 레일 깊이 (채널 깊이) | mm | 50 |
| `rail_thickness` | 강판 두께 | mm | 2.3 |
| `rail_lip` | 립(입구) 높이 | mm | 15 |
| `seal_thickness` | 연기차단재 두께 | mm | 5 |
| `seal_depth` | 연기차단재 깊이 | mm | 40 |
| `slat_thickness` | 슬랫 두께 (끼워지는 부분) | mm | 1.6 |
| `rail_height` | 레일 전체 높이 | mm | 3305 |
| `anchor_spacing` | 앵커볼트 간격 | mm | 500 |

#### B. 셔터박스 / 케이스 (Head Box / Case)

- **형태**: 직사각형 박스 (상부 천장 부착)
- **재질**: 강판 1.6mm 이상
- **기능**: 샤프트/모터/슬랫 감김 수납
- **표준 규격**: 1500×380mm / 500×380mm (개구부 크기에 따라)

```
셔터박스 단면 (정면에서 본 모습)

  ┌─────────────────────────────────────────┐ ← 상판
  │                                         │
  │  [브래킷]  ┌──── 샤프트 ────┐  [브래킷] │
  │     │      │  (슬랫 감김)   │     │     │
  │     ├──────┤               ├──────┤     │
  │     │      │   ◎ 중심축    │      │     │
  │     │      └───────────────┘      │     │
  │     │                             │     │
  │     │  [모터+감속기]  [브레이크]    │     │
  │     │  [밸런스 스프링]             │     │
  │                                         │
  └───┬─────────────────────────────────┬───┘ ← 하판 (슬랫 출구)
      │           ↓ 슬랫 하강 ↓         │
      └─────────────────────────────────┘
```

**파라미터**:

| 파라미터 | 설명 | 단위 | 기본값 |
|---------|------|------|--------|
| `box_width` | 케이스 전체 폭 (= 개구부 폭 + 마진) | mm | 1500 |
| `box_height` | 케이스 높이 | mm | 380 |
| `box_depth` | 케이스 깊이 (전후) | mm | 380 |
| `box_thickness` | 케이스 강판 두께 | mm | 1.6 |
| `shaft_diameter` | 샤프트 직경 | mm | 120 |
| `shaft_offset_x` | 샤프트 중심 수평 오프셋 | mm | 0 |
| `shaft_offset_y` | 샤프트 중심 수직 오프셋 | mm | 0 |
| `motor_side` | 모터 위치 (좌/우) | - | 우 |
| `slat_exit_width` | 슬랫 출구 폭 | mm | 1400 |
| `bracket_width` | 브래킷 폭 | mm | 80 |

#### C. 슬랫 (Steel Slat / Screen)

- **강판형**: EGI 강판 1.6mm, C/S형 인터록킹 프로파일
- **스크린형**: 실리카/와이어 원단, 가이드레일 11mm 홈
- **피치**: 75~100mm

**파라미터**:

| 파라미터 | 설명 | 단위 | 기본값 |
|---------|------|------|--------|
| `slat_type` | 슬랫 유형 (강판/스크린) | - | 강판 |
| `slat_pitch` | 슬랫 피치 | mm | 80 |
| `slat_thickness` | 슬랫 두께 | mm | 1.6 |
| `slat_profile` | 단면 형태 (C형/S형) | - | C형 |

#### D. 하장바 (Bottom Bar)

- **기능**: 슬랫 커튼 하단 마감 + 바닥 밀착
- **부속**: 고무 실링

**파라미터**:

| 파라미터 | 설명 | 단위 | 기본값 |
|---------|------|------|--------|
| `bar_width` | 하장바 폭 | mm | 60 |
| `bar_height` | 하장바 높이 | mm | 40 |
| `bar_seal_height` | 고무 실링 높이 | mm | 15 |

---

## 3. 기능 설계

### 3.1 탭 구성

기존 자동도면 생성의 탭 구조를 참고하여 4개 탭으로 구성한다.

```
┌──────────┬──────────┬──────────┬──────────┐
│ 설정     │ 가이드   │ 셔터박스  │ 3D       │
│ Settings │ 레일     │ (케이스) │ 렌더링    │
└──────────┴──────────┴──────────┴──────────┘
```

| 탭 | ID | 기능 |
|----|----|------|
| **설정** | `Settings` | 제품 유형 선택, 개구부 크기, 전역 설정 |
| **가이드레일** | `GuideRail` | 가이드레일 단면 파라미터 입력 + SVG 단면도 실시간 미리보기 |
| **셔터박스** | `ShutterBox` | 셔터박스 단면 파라미터 입력 + SVG 단면도 실시간 미리보기 |
| **3D 렌더링** | `3D` | 전체 방화셔터 조립체 3D 렌더링 (Three.js) |

### 3.2 설정 탭 (Settings)

#### 입력 항목

| 항목 | 타입 | 설명 |
|------|------|------|
| 제품 유형 | 드롭다운 | 강판형 (KFS) / 스크린형 (KSS) |
| 제품 모델 | 드롭다운 | KSS01, KSS02, KFS01 등 (유형 선택 시 필터링) |
| 개구부 폭 (W0) | 숫자 입력 | mm |
| 개구부 높이 (H0) | 숫자 입력 | mm |
| 수량 | 숫자 입력 | 기본값 1 |

#### 자동 계산 (표시 전용)

| 항목 | 수식 | 설명 |
|------|------|------|
| 제작 폭 (W1) | 스크린: W0+140 / 강판: W0+110 | 마진 포함 |
| 제작 높이 (H1) | H0+350 | 마진 포함 |
| 면적 (M) | W1 × H1 / 1,000,000 | m² |
| 중량 (K) | 스크린: M×2 / 강판: M×25 | kg |
| 권장 모터 | K 기준 자동 선택 | 150K~1500K |

#### 프리셋 관리

- **프리셋 저장**: 현재 파라미터를 이름 지정하여 localStorage에 저장
- **프리셋 불러오기**: 저장된 프리셋 목록에서 선택하여 파라미터 복원
- **기본 프리셋**: 강판형 기본, 스크린형 기본 (제품 유형 선택 시 자동 적용)

### 3.3 가이드레일 탭

#### UI 구성 (2컬럼 레이아웃)

```
┌──────────────────────┬──────────────────────────────────┐
│ 왼쪽: 파라미터 입력   │ 오른쪽: SVG 단면도 미리보기       │
│                      │                                  │
│ ■ 레일 전체 폭: [65] │                                  │
│ ■ 레일 깊이:   [50]  │      ┌────────┐                  │
│ ■ 강판 두께:  [2.3]  │      │        │                  │
│ ■ 립 높이:    [15]   │      │ ┌────┐ │  ← SVG 실시간    │
│ ■ 연기차단재: [5/40]  │      │ │ ●  │ │     렌더링       │
│ ■ 슬랫 두께:  [1.6]  │      │ └────┘ │                  │
│                      │      │        │                  │
│ [치수 표시 ON/OFF]   │      └────────┘                  │
│ [연기차단재 ON/OFF]  │      ← 치수 라벨 (mm)            │
│                      │                                  │
│ ■ 레일 높이: [3305]  │  [줌 +] [줌 -] [리셋] [DXF 저장] │
│ ■ 앵커 간격: [500]   │                                  │
└──────────────────────┴──────────────────────────────────┘
```

#### SVG 단면도 렌더링 상세

**뷰 모드 3가지**:

1. **횡단면도 (Cross-Section)**: 가이드레일을 위에서 본 단면 — 슬랫이 레일에 끼워진 형태
2. **종단면도 (Longitudinal)**: 가이드레일을 측면에서 본 단면 — 앵커볼트 배치
3. **정면도 (Front View)**: 가이드레일을 정면에서 본 모습 — 레일 전체 높이 + 앵커 위치

**렌더링 요소**:

| 요소 | 색상 | 설명 |
|------|------|------|
| 레일 본체 | `#94a3b8` (은회색) | 강판 단면 |
| 연기차단재 | `#f97316` (주황) | 실링 재질 |
| 슬랫 엣지 | `#60a5fa` (파랑) | 레일 안의 슬랫 |
| 방화벽 | `#a1887f` (갈색 해칭) | 콘크리트 벽 |
| 앵커볼트 | `#ef4444` (빨강) | 고정 부속 |
| 치수선 | `#3b82f6` (파랑) | mm 단위 치수 |

### 3.4 셔터박스 탭

#### UI 구성 (2컬럼 레이아웃)

```
┌──────────────────────┬──────────────────────────────────┐
│ 왼쪽: 파라미터 입력   │ 오른쪽: SVG 단면도 미리보기       │
│                      │                                  │
│ ■ 케이스 폭:  [1500] │  ┌────────────────────────────┐  │
│ ■ 케이스 높이: [380]  │  │ [브래킷]  ◎샤프트  [브래킷]│  │
│ ■ 케이스 깊이: [380]  │  │          감김 슬랫         │  │
│ ■ 강판 두께:  [1.6]  │  │ [모터+감속기]  [브레이크]   │  │
│                      │  └────────────────────────────┘  │
│ ■ 샤프트 직경: [120]  │                                  │
│ ■ 샤프트 오프셋       │  ← SVG 실시간 렌더링             │
│   X: [0]  Y: [0]    │  ← 치수 라벨 (mm)                │
│ ■ 모터 위치:  [좌/우] │                                  │
│                      │                                  │
│ ■ 내부 부품 표시      │  [줌 +] [줌 -] [리셋] [DXF 저장] │
│   □ 샤프트            │                                  │
│   □ 모터/감속기       │                                  │
│   □ 브레이크          │                                  │
│   □ 밸런스 스프링     │                                  │
└──────────────────────┴──────────────────────────────────┘
```

#### SVG 단면도 렌더링 상세

**뷰 모드 3가지**:

1. **정면 단면도**: 케이스를 정면에서 본 내부 구조 (샤프트, 모터, 브래킷 위치)
2. **측면 단면도**: 케이스를 측면에서 본 단면 (깊이 방향, 슬랫 감김 단면)
3. **하부 상세도**: 슬랫 출구 부분 확대

**렌더링 요소**:

| 요소 | 색상 | 설명 |
|------|------|------|
| 케이스 외곽 | `#94a3b8` (은회색) | 강판 박스 |
| 샤프트 | `#64748b` (짙은 회색) | 중심축 + 감김 슬랫 |
| 모터 | `#3b82f6` (파랑) | 전동 개폐기 |
| 브레이크 | `#ef4444` (빨강) | 전자 브레이크 |
| 스프링 | `#22c55e` (녹색) | 밸런스 스프링 |
| 브래킷 | `#8b5cf6` (보라) | 벽 고정 브래킷 |
| 슬랫 | `#f59e0b` (주황) | 감긴 슬랫 단면 |

### 3.5 3D 렌더링 탭

#### 렌더링 대상

Three.js를 사용하여 방화셔터 전체 조립체를 3D로 시각화한다.

```
3D 렌더링 요소:
├── 셔터박스 (반투명 상자)
│   ├── 샤프트 (원통)
│   ├── 감긴 슬랫 (원통 표면)
│   ├── 모터+감속기 (박스)
│   ├── 브레이크 (디스크)
│   └── 브래킷 (L형 판)
├── 가이드레일 좌 (C-채널 압출)
├── 가이드레일 우 (C-채널 압출)
├── 슬랫 커튼 (평면 텍스처)
│   ├── 강판형: 줄무늬 텍스처 (인터록킹 표현)
│   └── 스크린형: 반투명 메쉬
├── 하장바 (직사각형 바)
└── 방화벽 (반투명 콘크리트 텍스처)
```

#### 3D 인터랙션

| 기능 | 조작 | 설명 |
|------|------|------|
| 회전 | 마우스 드래그 | OrbitControls |
| 줌 | 마우스 휠 | 확대/축소 |
| 팬 | 우클릭 드래그 | 시점 이동 |
| 부품 하이라이트 | 마우스 호버 | 해당 부품 강조 + 이름 표시 |
| 부품 ON/OFF | 체크박스 | 개별 부품 표시/숨김 |
| 투명도 | 슬라이더 | 케이스 투명도 조절 (내부 구조 확인) |
| 셔터 개폐 | 슬라이더 | 0%(전개)~100%(전폐) 애니메이션 |
| 조명 | 프리셋 | 기본/스튜디오/야외/드라마틱 |

#### 3D 모델링 방식

DB나 외부 3D 파일 없이, **파라미터 기반 절차적 모델링(Procedural Modeling)**으로 구현한다.

```javascript
// 가이드레일 C-채널 3D 생성 예시 (Three.js ExtrudeGeometry)
function createGuideRailMesh(params) {
    const shape = new THREE.Shape();
    // C-채널 프로파일 경로 정의
    shape.moveTo(0, 0);
    shape.lineTo(params.rail_width, 0);
    shape.lineTo(params.rail_width, params.rail_lip);
    shape.lineTo(params.rail_width - params.rail_thickness, params.rail_lip);
    shape.lineTo(params.rail_width - params.rail_thickness, params.rail_thickness);
    shape.lineTo(params.rail_thickness, params.rail_thickness);
    shape.lineTo(params.rail_thickness, params.rail_lip);
    shape.lineTo(0, params.rail_lip);
    shape.lineTo(0, 0);

    // 높이 방향으로 압출
    const extrudeSettings = {
        depth: params.rail_height,
        bevelEnabled: false
    };

    return new THREE.Mesh(
        new THREE.ExtrudeGeometry(shape, extrudeSettings),
        new THREE.MeshStandardMaterial({ color: 0x94a3b8 })
    );
}
```

### 3.6 출력 기능

| 기능 | 형식 | 설명 |
|------|------|------|
| **DXF 다운로드** | `.dxf` | 가이드레일/셔터박스 단면도를 CAD 호환 파일로 저장 |
| **PNG 다운로드** | `.png` | SVG 단면도를 이미지로 저장 |
| **3D 스크린샷** | `.png` | 3D 렌더링 현재 뷰를 이미지로 저장 |
| **파라미터 JSON** | `.json` | 현재 설정값을 파일로 내보내기/가져오기 |

---

## 4. 기술 설계

### 4.1 아키텍처

기존 자동도면 생성과 동일한 **순수 클라이언트 측** 아키텍처를 사용한다.

```
┌─────────────────────────────────────────────┐
│ Browser (Client-Side Only)                  │
│                                             │
│  ┌─────────────────────────────────────┐    │
│  │ Blade Template                      │    │
│  │ (fire-shutter-drawing/index.blade)  │    │
│  ├─────────────────────────────────────┤    │
│  │ JavaScript State Management         │    │
│  │ (fireShutterState 객체)             │    │
│  ├──────────┬──────────────────────────┤    │
│  │ SVG 엔진 │ Three.js 3D 엔진        │    │
│  │ (단면도)  │ (조립체 렌더링)          │    │
│  ├──────────┴──────────────────────────┤    │
│  │ DXF 생성기 │ PNG 내보내기            │    │
│  └─────────────────────────────────────┘    │
│                                             │
│  DB 연동: 없음 (localStorage 프리셋만 사용)  │
│  API 호출: 없음                              │
└─────────────────────────────────────────────┘
```

### 4.2 파일 구조

```
mng/
├── routes/web.php                              ← 라우트 추가
├── app/Http/Controllers/RdController.php       ← 메서드 추가
└── resources/views/rd/fire-shutter-drawing/
    ├── index.blade.php                         ← 메인 레이아웃 + 탭 UI
    ├── partials/
    │   ├── _settings.blade.php                 ← 설정 탭 HTML
    │   ├── _guide-rail.blade.php               ← 가이드레일 탭 HTML
    │   ├── _shutter-box.blade.php              ← 셔터박스 탭 HTML
    │   └── _3d-viewer.blade.php                ← 3D 렌더링 탭 HTML
    └── js/
        (인라인 또는 @push('scripts')에 포함)
```

> **참고**: 기존 `auto-drawing/index.blade.php`는 단일 파일 4,884줄이다. 유지보수성을 위해 **Blade partial로 분리**하되, JavaScript는 상태 공유가 필요하므로 메인 파일의 `@push('scripts')`에 통합한다.

### 4.3 상태 관리 객체

```javascript
const fireShutterState = {
    // 활성 탭
    activeTab: 'Settings',

    // 설정 탭
    settings: {
        productType: 'steel',      // 'steel' | 'screen'
        productModel: 'KFS01',     // 제품 모델 코드
        openWidth: 2000,           // 개구부 폭 W0 (mm)
        openHeight: 3000,          // 개구부 높이 H0 (mm)
        quantity: 1,
        // 자동 계산
        mfgWidth: 0,               // 제작 폭 W1
        mfgHeight: 0,              // 제작 높이 H1
        area: 0,                   // 면적 M (m²)
        weight: 0,                 // 중량 K (kg)
        motorSpec: '',             // 권장 모터
    },

    // 가이드레일 파라미터
    guideRail: {
        width: 65,
        depth: 50,
        thickness: 2.3,
        lip: 15,
        sealThickness: 5,
        sealDepth: 40,
        slatThickness: 1.6,
        height: 3305,
        anchorSpacing: 500,
        // 뷰 옵션
        showDimensions: true,
        showSeal: true,
        viewMode: 'cross',         // 'cross' | 'longitudinal' | 'front'
    },

    // 셔터박스 파라미터
    shutterBox: {
        width: 1500,
        height: 380,
        depth: 380,
        thickness: 1.6,
        shaftDiameter: 120,
        shaftOffsetX: 0,
        shaftOffsetY: 0,
        motorSide: 'right',        // 'left' | 'right'
        slatExitWidth: 1400,
        bracketWidth: 80,
        // 내부 부품 표시
        showShaft: true,
        showMotor: true,
        showBrake: true,
        showSpring: true,
        viewMode: 'front',          // 'front' | 'side' | 'bottom'
    },

    // 슬랫 파라미터
    slat: {
        type: 'steel',             // 'steel' | 'screen'
        pitch: 80,
        thickness: 1.6,
        profile: 'C',             // 'C' | 'S'
    },

    // 하장바 파라미터
    bottomBar: {
        width: 60,
        height: 40,
        sealHeight: 15,
    },

    // 3D 뷰 설정
    threeD: {
        caseOpacity: 0.3,          // 케이스 투명도
        shutterPosition: 100,      // 0=전개, 100=전폐
        showComponents: {
            case: true,
            shaft: true,
            motor: true,
            brake: true,
            spring: true,
            guideRailL: true,
            guideRailR: true,
            slats: true,
            bottomBar: true,
            wall: true,
        },
        lightPreset: 'default',
    },

    // 프리셋 관리
    presets: [],                    // localStorage에서 로드

    // 뷰 컨트롤 (줌/팬)
    view: {
        scale: 1,
        offset: { x: 0, y: 0 },
        isDragging: false,
    },
};
```

### 4.4 제품 유형별 기본값 매핑

```javascript
const PRODUCT_DEFAULTS = {
    steel: {
        label: '강판형',
        marginW: 110,              // W1 = W0 + 110
        marginH: 350,              // H1 = H0 + 350
        weightFactor: 25,          // K = M × 25
        guideRail: { width: 65, depth: 50, thickness: 2.3, lip: 15 },
        slat: { type: 'steel', pitch: 80, thickness: 1.6, profile: 'C' },
    },
    screen: {
        label: '스크린형',
        marginW: 140,              // W1 = W0 + 140
        marginH: 350,              // H1 = H0 + 350
        weightFactor: 2,           // K = M × 2
        guideRail: { width: 30, depth: 25, thickness: 1.5, lip: 11 },
        slat: { type: 'screen', pitch: 100, thickness: 0.8, profile: 'flat' },
    },
};

const MOTOR_TABLE = [
    { maxWeight: 150, spec: '150K', inch: 4 },
    { maxWeight: 300, spec: '300K', inch: 4 },
    { maxWeight: 500, spec: '500K', inch: 5 },
    { maxWeight: 750, spec: '750K', inch: 5 },
    { maxWeight: 1000, spec: '1000K', inch: 6 },
    { maxWeight: 1500, spec: '1500K', inch: 6 },
];
```

---

## 5. 개발 단계

### Phase 1: 기본 구조 + 가이드레일 단면도 (1단계)

> **목표**: 라우트/컨트롤러/뷰 생성, 설정 탭, 가이드레일 SVG 단면도

| 작업 | 상세 | 예상 |
|------|------|------|
| 라우트 등록 | `GET /rd/fire-shutter-drawing` | 10분 |
| 컨트롤러 메서드 | `RdController@fireShutterDrawing` | 10분 |
| 레이아웃 + 탭 UI | 4탭 구조, 다크 테마 | 1시간 |
| 설정 탭 | 제품 유형/개구부 크기 입력 + 자동 계산 | 1시간 |
| 가이드레일 SVG 엔진 | C-채널 단면도 + 치수선 + 연기차단재 | 3시간 |
| 줌/팬 컨트롤 | 기존 auto-drawing 코드 재사용 | 30분 |

**산출물**: 가이드레일 파라미터 입력 → SVG 횡단면도 실시간 렌더링

### Phase 2: 셔터박스 단면도 (2단계)

> **목표**: 셔터박스(케이스) SVG 단면도 + 내부 부품 표시

| 작업 | 상세 | 예상 |
|------|------|------|
| 셔터박스 SVG 엔진 | 케이스 외곽 + 내부 구조 | 3시간 |
| 내부 부품 렌더링 | 샤프트, 모터, 브레이크, 스프링 | 2시간 |
| 뷰 모드 전환 | 정면/측면/하부 | 1시간 |
| 부품 ON/OFF 토글 | 체크박스 → SVG 요소 표시/숨김 | 30분 |

**산출물**: 셔터박스 파라미터 입력 → SVG 단면도 (정면/측면/하부)

### Phase 3: 3D 렌더링 (3단계)

> **목표**: Three.js 기반 방화셔터 전체 조립체 3D 렌더링

| 작업 | 상세 | 예상 |
|------|------|------|
| Three.js 씬 구축 | 카메라, 조명, OrbitControls | 1시간 |
| 가이드레일 3D 모델 | ExtrudeGeometry (C-채널 압출) | 2시간 |
| 셔터박스 3D 모델 | BoxGeometry + 내부 부품 | 2시간 |
| 슬랫 커튼 3D 모델 | 평면 메쉬 + 텍스처 | 1시간 |
| 셔터 개폐 애니메이션 | 슬라이더 → 슬랫 위치 변경 | 1시간 |
| 조명/투명도 패널 | 기존 auto-drawing 패널 재사용 | 30분 |

**산출물**: 파라미터 연동 3D 방화셔터 조립체 + 인터랙션

### Phase 4: 출력 + 프리셋 (4단계)

> **목표**: DXF/PNG 저장, 프리셋 관리, 완성도 향상

| 작업 | 상세 | 예상 |
|------|------|------|
| DXF 내보내기 | 기존 DXF 생성기 확장 | 1시간 |
| PNG 내보내기 | SVG → Canvas → PNG | 30분 |
| 3D 스크린샷 | Three.js renderer.domElement.toDataURL | 15분 |
| 프리셋 저장/불러오기 | localStorage CRUD | 1시간 |
| JSON 가져오기/내보내기 | 파일 업로드/다운로드 | 30분 |
| UI 다듬기 | 반응형, 툴팁, 키보드 단축키 | 1시간 |

**산출물**: 완성된 방화셔터 도면생성 도구

---

## 6. UI/UX 설계

### 6.1 디자인 시스템

기존 자동도면 생성의 **다크 테마 (Space Theme)**를 그대로 이어간다.

| 요소 | 값 |
|------|------|
| 배경 | `#020617` (slate-950) |
| 패널 | `rgba(15, 23, 42, 0.7)` + backdrop-blur |
| 테두리 | `rgba(255, 255, 255, 0.1)` |
| 강조색 | `#3b82f6` (blue-500) |
| 텍스트 | `#f8fafc` (white) / `#94a3b8` (slate-400) |
| 입력 필드 | `bg-slate-950/80` + `border-slate-800` |

### 6.2 반응형 레이아웃

```
Desktop (1200px+):  2컬럼 (4:8 비율)
Tablet (768-1199px): 1컬럼 (상: 파라미터, 하: 미리보기)
Mobile:             지원 안 함 (최소 768px)
```

### 6.3 인터랙션 흐름

```
사용자 → 제품 유형 선택 (강판/스크린)
         → 기본값 자동 적용
         → 개구부 크기 입력
         → 제작 치수/중량/모터 자동 계산

         → 가이드레일 탭 이동
         → 파라미터 조정 (폭, 깊이, 두께 등)
         → SVG 실시간 업데이트 (입력 즉시)
         → 뷰 모드 전환 (횡단면/종단면/정면)
         → DXF 다운로드 가능

         → 셔터박스 탭 이동
         → 파라미터 조정
         → SVG 실시간 업데이트
         → 내부 부품 ON/OFF

         → 3D 탭 이동
         → 전체 조립체 3D 뷰
         → 셔터 개폐 애니메이션
         → 스크린샷 저장
```

---

## 7. 메뉴 등록

### 7.1 메뉴 위치

```
R&D
├── 대시보드
├── 조직도 관리
├── 중대재해처벌법 점검
├── AI 견적
├── 기획디자인
├── 디자인 인사이트
├── 사운드 로고 스튜디오
├── CM송 제작
├── 자동도면 생성           ← 기존
└── 방화셔터 도면생성        ← 신규 (자동도면 하위에 배치)
```

### 7.2 메뉴 등록 (tinker)

```php
// 개발 서버
App\Models\Commons\Menu::create([
    'tenant_id' => 1,
    'parent_id' => <R&D 메뉴 ID>,
    'name' => '방화셔터 도면생성',
    'url' => '/rd/fire-shutter-drawing',
    'icon' => 'shield',
    'sort_order' => <자동도면 다음 순서>,
    'is_active' => true,
]);
```

> **주의**: 메뉴 시더 실행 금지 — tinker로 수동 등록

---

## 8. 향후 확장 가능성

| 확장 | 설명 | 우선순위 |
|------|------|---------|
| **STL/OBJ 내보내기** | 3D 프린팅/CAD 호환 | 🟡 중요 |
| **견적 연동** | 도면 파라미터 → 견적 자동 산출 | 🔴 필수 |
| **제품 카탈로그 연동** | DB에서 제품별 기본 파라미터 로드 | 🟡 중요 |
| **비교 모드** | 2개 설정을 나란히 비교 | 🟢 권장 |
| **PDF 도면 출력** | A3/A4 도면 양식 포함 출력 | 🟡 중요 |
| **설치 시뮬레이션** | 현장 사진 위에 3D 오버레이 | 🟢 권장 |

---

## 관련 문서

- `/home/aweso/sam/docs/features/academy/fire-shutter-image-prompts.md` — 방화셔터 이미지 프롬프트
- `/home/aweso/sam/docs/samples/방화셔터_견적구조_인터뷰.md` — 견적 구조 인터뷰
- `/home/aweso/sam/docs/features/quotes/README.md` — 견적 시스템 분석
- `/home/aweso/sam/docs/projects/quotation/phase-1-5130-analysis/js-formulas.md` — 견적 수식 상세
- `/home/aweso/sam/mng/resources/views/rd/auto-drawing/index.blade.php` — 기존 자동도면 생성

---

**최종 업데이트**: 2026-03-08