diff --git a/INDEX.md b/INDEX.md index ef94ff0..46bab30 100644 --- 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 렌더링 기술 명세 | --- diff --git a/features/rd/README.md b/features/rd/README.md index 1483160..a095c96 100644 --- 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/) — 조직도 시스템 상세 (별도 프로젝트 문서) --- diff --git a/features/rd/fire-shutter-drawing-guide-rail.md b/features/rd/fire-shutter-drawing-guide-rail.md new file mode 100644 index 0000000..a279ade --- /dev/null +++ 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