diff --git a/sam/docs/INDEX.md b/sam/docs/INDEX.md index 8328fb3..3bee9ea 100644 --- a/sam/docs/INDEX.md +++ b/sam/docs/INDEX.md @@ -147,9 +147,10 @@ docs/ | [equipment/README.md](features/equipment/README.md) | 설비관리 (MNG 전용) | | [approvals/README.md](features/approvals/README.md) | 결재관리 시스템 (순차결재, 보류/전결/참조/복사재기안) | | [planning/README.md](features/planning/README.md) | 주일기업 기획 (견적/프로젝트/사진대지/회의록/AI) | -| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인/디자인 인사이트) | +| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인/디자인 인사이트/사운드 로고/CM송) | | [rd/planning-design.md](features/rd/planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 | | [rd/design-insight.md](features/rd/design-insight.md) | 디자인 인사이트 UI/UX 연구 도구 (100종 패턴, AI 프롬프트) | +| [rd/sound-logo-studio.md](features/rd/sound-logo-studio.md) | 사운드 로고 스튜디오 (시퀀서 + Gemini TTS + Lyria BGM 합성) | --- @@ -196,6 +197,7 @@ docs/ |------|------| | [index_plans.md](plans/index_plans.md) | 계획 인덱스 (ACTIVE + PLANNED) | | [GUIDE.md](plans/GUIDE.md) | 계획 문서 작성 가이드 | +| [fire-shutter-drawing-generator-plan.md](plans/fire-shutter-drawing-generator-plan.md) | 방화셔터 도면생성 기능 기획서 (가이드레일 단면도 + 셔터박스 + 3D 렌더링) | --- diff --git a/sam/docs/plans/fire-shutter-drawing-generator-plan.md b/sam/docs/plans/fire-shutter-drawing-generator-plan.md new file mode 100644 index 0000000..1b9a680 --- /dev/null +++ b/sam/docs/plans/fire-shutter-drawing-generator-plan.md @@ -0,0 +1,753 @@ +# 방화셔터 도면생성 기능 기획서 + +> **작성일**: 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' => , + '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