From 19b3db0499e277b8abebc9fd0afe1f8f11b5d535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Fri, 13 Mar 2026 08:55:10 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[bim]=20BIM=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=EA=B8=B0=20=EB=A9=94=EB=89=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 방화셔터/방화문/방화댐퍼 파라메트릭 3D 설계
- 실시간 Three.js 프리뷰 + IfcProduct JSON 생성
- IFC STEP 파일 내보내기
- PMIS 사이드바에 BIM 생성기 메뉴 등록
---
 .../Controllers/Juil/PlanningController.php   |    9 +
 resources/views/juil/bim-generator.blade.php  | 1064 +++++++++++++++++
 resources/views/juil/bim-viewer.blade.php     |    1 +
 routes/web.php                                |    1 +
 4 files changed, 1075 insertions(+)
 create mode 100644 resources/views/juil/bim-generator.blade.php

diff --git a/app/Http/Controllers/Juil/PlanningController.php b/app/Http/Controllers/Juil/PlanningController.php
index 002b9d0c..e98074ad 100644
--- a/app/Http/Controllers/Juil/PlanningController.php
+++ b/app/Http/Controllers/Juil/PlanningController.php
@@ -57,6 +57,15 @@ public function bimViewer(Request $request): View|Response
         return view('juil.bim-viewer');
     }
 
+    public function bimGenerator(Request $request): View|Response
+    {
+        if ($request->header('HX-Request')) {
+            return response('', 200)->header('HX-Redirect', route('juil.construction-pmis.bim-generator'));
+        }
+
+        return view('juil.bim-generator');
+    }
+
     // ── 시공관리 ──
 
     public function pmisWorkforce(Request $request): View|Response
diff --git a/resources/views/juil/bim-generator.blade.php b/resources/views/juil/bim-generator.blade.php
new file mode 100644
index 00000000..2846fcb3
--- /dev/null
+++ b/resources/views/juil/bim-generator.blade.php
@@ -0,0 +1,1064 @@
+@extends('layouts.app')
+
+@section('title', 'BIM 생성기')
+
+@section('content')
+<div id="root"></div>
+@endsection
+
+@push('scripts')
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+@include('partials.react-cdn')
+<script type="text/babel">
+@verbatim
+const { useState, useEffect, useRef, useCallback, useMemo } = React;
+
+/* ════════════════════════════════════════════════
+   상수 & 객체 라이브러리 정의
+   ════════════════════════════════════════════════ */
+const OBJECT_LIBRARY = [
+    {
+        id: 'fire-shutter',
+        name: '방화셔터',
+        icon: 'ri-fire-line',
+        category: 'fire-protection',
+        categoryName: '방화설비',
+        description: '방화구획 경계에 설치하는 자동 강하 셔터',
+        ifcType: 'IfcDoor',
+        ifcPredefinedType: 'GATE',
+        defaultParams: {
+            width: 3000,
+            height: 3500,
+            depth: 300,
+            fireRating: '2시간',
+            material: 'STS304',
+            shutterType: 'single',
+            housingHeight: 350,
+            jambWidth: 200,
+            slat: 'flat',
+        },
+        paramDefs: [
+            { key: 'width', label: '폭', unit: 'mm', type: 'number', min: 500, max: 15000, step: 100 },
+            { key: 'height', label: '높이', unit: 'mm', type: 'number', min: 500, max: 8000, step: 100 },
+            { key: 'depth', label: '깊이', unit: 'mm', type: 'number', min: 100, max: 600, step: 50 },
+            { key: 'fireRating', label: '내화등급', type: 'select', options: ['30분', '1시간', '2시간', '3시간'] },
+            { key: 'material', label: '재질', type: 'select', options: ['STS304', 'STS430', 'GI (용융아연도금)', 'AL (알루미늄)'] },
+            { key: 'shutterType', label: '셔터 유형', type: 'select', options: [
+                { value: 'single', label: '단일 강하' },
+                { value: 'double', label: '이중 강하 (양방향)' },
+                { value: 'compact', label: '컴팩트 (소형 하우징)' },
+            ]},
+            { key: 'housingHeight', label: '하우징 높이', unit: 'mm', type: 'number', min: 200, max: 600, step: 50 },
+            { key: 'jambWidth', label: '가이드레일 폭', unit: 'mm', type: 'number', min: 100, max: 400, step: 50 },
+            { key: 'slat', label: '슬랫 형태', type: 'select', options: [
+                { value: 'flat', label: '평판형' },
+                { value: 'interlocking', label: '인터로킹형' },
+                { value: 'insulated', label: '단열형' },
+            ]},
+        ],
+    },
+    {
+        id: 'fire-door',
+        name: '방화문',
+        icon: 'ri-door-lock-line',
+        category: 'fire-protection',
+        categoryName: '방화설비',
+        description: '방화구획에 설치하는 갑종/을종 방화문',
+        ifcType: 'IfcDoor',
+        ifcPredefinedType: 'DOOR',
+        defaultParams: {
+            width: 900,
+            height: 2100,
+            depth: 60,
+            fireRating: '1시간',
+            material: 'Steel',
+            doorType: 'single-swing',
+            glazing: 'none',
+        },
+        paramDefs: [
+            { key: 'width', label: '폭', unit: 'mm', type: 'number', min: 600, max: 3000, step: 50 },
+            { key: 'height', label: '높이', unit: 'mm', type: 'number', min: 1800, max: 3000, step: 50 },
+            { key: 'depth', label: '두께', unit: 'mm', type: 'number', min: 40, max: 120, step: 5 },
+            { key: 'fireRating', label: '내화등급', type: 'select', options: ['30분', '1시간', '2시간'] },
+            { key: 'material', label: '재질', type: 'select', options: ['Steel', 'STS304', 'Wood Core (내화)'] },
+            { key: 'doorType', label: '개폐 방식', type: 'select', options: [
+                { value: 'single-swing', label: '외여닫이' },
+                { value: 'double-swing', label: '양여닫이' },
+                { value: 'sliding', label: '미닫이' },
+            ]},
+            { key: 'glazing', label: '유리', type: 'select', options: [
+                { value: 'none', label: '없음' },
+                { value: 'small', label: '소형 확인창' },
+                { value: 'half', label: '반유리' },
+            ]},
+        ],
+    },
+    {
+        id: 'fire-damper',
+        name: '방화댐퍼',
+        icon: 'ri-windy-line',
+        category: 'fire-protection',
+        categoryName: '방화설비',
+        description: '덕트 관통부에 설치하는 방화댐퍼',
+        ifcType: 'IfcFlowController',
+        ifcPredefinedType: 'USERDEFINED',
+        defaultParams: {
+            width: 400,
+            height: 300,
+            depth: 200,
+            fireRating: '1시간',
+            material: 'GI',
+            bladeType: 'multi',
+            actuator: 'fusible-link',
+        },
+        paramDefs: [
+            { key: 'width', label: '폭', unit: 'mm', type: 'number', min: 100, max: 2000, step: 50 },
+            { key: 'height', label: '높이', unit: 'mm', type: 'number', min: 100, max: 2000, step: 50 },
+            { key: 'depth', label: '깊이', unit: 'mm', type: 'number', min: 100, max: 500, step: 50 },
+            { key: 'fireRating', label: '내화등급', type: 'select', options: ['1시간', '1.5시간', '2시간'] },
+            { key: 'material', label: '재질', type: 'select', options: ['GI (용융아연도금)', 'STS304'] },
+            { key: 'bladeType', label: '블레이드 유형', type: 'select', options: [
+                { value: 'multi', label: '다날개형' },
+                { value: 'single', label: '단일 날개형' },
+                { value: 'curtain', label: '커튼형' },
+            ]},
+            { key: 'actuator', label: '작동 방식', type: 'select', options: [
+                { value: 'fusible-link', label: '퓨즈 링크 (72°C)' },
+                { value: 'motorized', label: '전동식' },
+                { value: 'spring-return', label: '스프링 리턴' },
+            ]},
+        ],
+    },
+];
+
+const COLORS = {
+    housing: 0x78909C,
+    jamb: 0x607D8B,
+    panel: 0xE53935,
+    panelTransparent: 0xEF5350,
+    frame: 0x455A64,
+    door: 0x8D6E63,
+    doorFrame: 0x5D4037,
+    glazing: 0x80DEEA,
+    damperBody: 0x90A4AE,
+    damperBlade: 0xB0BEC5,
+    dimension: 0x1565C0,
+};
+
+/* ════════════════════════════════════════════════
+   PMIS 사이드바 메뉴
+   ════════════════════════════════════════════════ */
+const PMIS_MENUS = [
+    { icon: 'ri-building-2-line', label: 'BIM 관리', id: 'bim', children: [
+        { label: 'BIM 뷰어', id: 'bim-viewer', url: '/juil/construction-pmis/bim-viewer' },
+        { label: 'BIM 생성기', id: 'bim-generator', url: '/juil/construction-pmis/bim-generator' },
+    ]},
+    { icon: 'ri-line-chart-line', label: '시공관리', id: 'construction', children: [
+        { label: '인원관리', id: 'workforce', url: '/juil/construction-pmis/workforce' },
+        { label: '장비관리', id: 'equipment', url: '/juil/construction-pmis/equipment' },
+        { label: '자재관리', id: 'materials', url: '/juil/construction-pmis/materials' },
+        { label: '공사량관리', id: 'work-volume', url: '/juil/construction-pmis/work-volume' },
+        { label: '출면일보', id: 'daily-attendance', url: '/juil/construction-pmis/daily-attendance' },
+        { label: '작업일보', id: 'daily-report', url: '/juil/construction-pmis/daily-report' },
+    ]},
+    { icon: 'ri-file-list-3-line', label: '품질관리', id: 'quality', children: [
+        { label: '시정조치', id: 'corrective-action', url: '/juil/construction-pmis/corrective-action' },
+    ]},
+    { icon: 'ri-shield-check-line', label: '안전관리', id: 'safety', children: [
+        { label: '안전보건교육', id: 'safety-education', url: '/juil/construction-pmis/safety-education' },
+        { label: 'TBM현장', id: 'tbm', url: '/juil/construction-pmis/tbm' },
+        { label: '위험성 평가', id: 'risk-assessment', url: '/juil/construction-pmis/risk-assessment' },
+        { label: '재해예방조치', id: 'disaster-prevention', url: '/juil/construction-pmis/disaster-prevention' },
+    ]},
+    { icon: 'ri-folder-line', label: '자료실', id: 'archive', children: [
+        { label: '자료보관함', id: 'archive-files', url: '/juil/construction-pmis/archive-files' },
+        { label: '매뉴얼', id: 'archive-manual', url: '/juil/construction-pmis/archive-manual' },
+        { label: '공지사항', id: 'archive-notice', url: '/juil/construction-pmis/archive-notice' },
+    ]},
+];
+
+/* ════════════════════════════════════════════════
+   IfcProduct JSON 스키마 생성기
+   ════════════════════════════════════════════════ */
+function generateGlobalId() {
+    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_$';
+    let s = '';
+    for (let i = 0; i < 22; i++) s += chars[Math.random() * 64 | 0];
+    return s;
+}
+
+function buildIfcProductJSON(objectDef, params) {
+    const w = params.width / 1000;
+    const h = params.height / 1000;
+    const d = params.depth / 1000;
+
+    const psetProps = {};
+    for (const [key, val] of Object.entries(params)) {
+        if (['width', 'height', 'depth'].includes(key)) continue;
+        const def = objectDef.paramDefs.find(p => p.key === key);
+        if (!def) continue;
+        let displayVal = val;
+        if (def.type === 'select' && Array.isArray(def.options) && typeof def.options[0] === 'object') {
+            const opt = def.options.find(o => o.value === val);
+            if (opt) displayVal = opt.label;
+        }
+        psetProps[def.label] = displayVal;
+    }
+
+    return {
+        type: objectDef.ifcType,
+        GlobalId: generateGlobalId(),
+        OwnerHistory: {
+            OwningUser: {
+                ThePerson: { FamilyName: 'SAM', GivenName: 'User' },
+                TheOrganization: { Name: 'CodeBridgeX' },
+            },
+            OwningApplication: {
+                ApplicationDeveloper: { Name: 'CodeBridgeX' },
+                Version: '1.0',
+                ApplicationFullName: 'SAM BIM Generator',
+                ApplicationIdentifier: 'SAM-BIM-GEN',
+            },
+            ChangeAction: 'ADDED',
+            CreationDate: Math.floor(Date.now() / 1000),
+        },
+        Name: objectDef.name,
+        Description: objectDef.description,
+        ObjectType: objectDef.name,
+        PredefinedType: objectDef.ifcPredefinedType,
+        ObjectPlacement: {
+            type: 'IfcLocalPlacement',
+            RelativePlacement: {
+                type: 'IfcAxis2Placement3D',
+                Location: { type: 'IfcCartesianPoint', Coordinates: [0.0, 0.0, 0.0] },
+                Axis: { type: 'IfcDirection', DirectionRatios: [0.0, 0.0, 1.0] },
+                RefDirection: { type: 'IfcDirection', DirectionRatios: [1.0, 0.0, 0.0] },
+            },
+        },
+        Representation: {
+            type: 'IfcProductDefinitionShape',
+            Representations: [
+                {
+                    type: 'IfcShapeRepresentation',
+                    ContextOfItems: 'Model',
+                    RepresentationIdentifier: 'Body',
+                    RepresentationType: 'SweptSolid',
+                    Items: [
+                        {
+                            type: 'IfcExtrudedAreaSolid',
+                            SweptArea: {
+                                type: 'IfcRectangleProfileDef',
+                                ProfileType: 'AREA',
+                                XDim: w,
+                                YDim: d,
+                            },
+                            Depth: h,
+                            ExtrudedDirection: { type: 'IfcDirection', DirectionRatios: [0.0, 0.0, 1.0] },
+                        },
+                    ],
+                },
+            ],
+        },
+        OverallWidth: w,
+        OverallHeight: h,
+        IsDefinedBy: [
+            {
+                type: 'IfcRelDefinesByProperties',
+                RelatingPropertyDefinition: {
+                    type: 'IfcPropertySet',
+                    Name: 'Pset_' + objectDef.id.replace(/-/g, '') + 'Common',
+                    HasProperties: Object.entries(psetProps).map(([name, val]) => ({
+                        type: typeof val === 'number' ? 'IfcPropertySingleValue' : 'IfcPropertySingleValue',
+                        Name: name,
+                        NominalValue: {
+                            type: typeof val === 'number' ? 'IfcReal' : 'IfcLabel',
+                            value: val,
+                        },
+                    })),
+                },
+            },
+            {
+                type: 'IfcRelDefinesByProperties',
+                RelatingPropertyDefinition: {
+                    type: 'IfcPropertySet',
+                    Name: 'Pset_Dimensions',
+                    HasProperties: [
+                        { type: 'IfcPropertySingleValue', Name: 'Width', NominalValue: { type: 'IfcLengthMeasure', value: w } },
+                        { type: 'IfcPropertySingleValue', Name: 'Height', NominalValue: { type: 'IfcLengthMeasure', value: h } },
+                        { type: 'IfcPropertySingleValue', Name: 'Depth', NominalValue: { type: 'IfcLengthMeasure', value: d } },
+                    ],
+                },
+            },
+        ],
+    };
+}
+
+/* ════════════════════════════════════════════════
+   Three.js 파라메트릭 프리뷰 엔진
+   ════════════════════════════════════════════════ */
+class GeneratorScene {
+    constructor(el) {
+        this.el = el;
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+        this._animId = null;
+        this._onResize = this.onResize.bind(this);
+        this.objectGroup = null;
+        this.dimensionGroup = null;
+    }
+
+    init() {
+        const w = this.el.clientWidth, h = this.el.clientHeight;
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0xf0f4f8);
+        this.scene.fog = new THREE.FogExp2(0xf0f4f8, 0.015);
+
+        this.camera = new THREE.PerspectiveCamera(45, w / h, 0.01, 100);
+        this.camera.position.set(5, 3, 5);
+
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(w, h);
+        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        this.renderer.shadowMap.enabled = true;
+        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        this.el.appendChild(this.renderer.domElement);
+
+        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.target.set(0, 1.5, 0);
+        this.controls.enableDamping = true;
+        this.controls.dampingFactor = 0.08;
+        this.controls.update();
+
+        // Lights
+        this.scene.add(new THREE.HemisphereLight(0xb1e1ff, 0xb97a20, 0.55));
+        const sun = new THREE.DirectionalLight(0xffffff, 0.85);
+        sun.position.set(5, 8, 5);
+        sun.castShadow = true;
+        sun.shadow.mapSize.width = 2048;
+        sun.shadow.mapSize.height = 2048;
+        const sc = sun.shadow.camera;
+        sc.left = -10; sc.right = 10; sc.top = 10; sc.bottom = -2; sc.near = 1; sc.far = 30;
+        this.scene.add(sun);
+        this.scene.add(new THREE.AmbientLight(0xffffff, 0.25));
+
+        // Grid + Axes
+        const grid = new THREE.GridHelper(20, 20, 0xc0c0c0, 0xe0e0e0);
+        grid.position.y = -0.01;
+        this.scene.add(grid);
+        const axes = new THREE.AxesHelper(1);
+        axes.position.set(-0.5, 0, -0.5);
+        this.scene.add(axes);
+
+        // Ground
+        const ground = new THREE.Mesh(
+            new THREE.PlaneGeometry(20, 20),
+            new THREE.MeshPhongMaterial({ color: 0xE8E0D0 })
+        );
+        ground.rotation.x = -Math.PI / 2;
+        ground.position.y = -0.02;
+        ground.receiveShadow = true;
+        this.scene.add(ground);
+
+        this.objectGroup = new THREE.Group();
+        this.scene.add(this.objectGroup);
+        this.dimensionGroup = new THREE.Group();
+        this.scene.add(this.dimensionGroup);
+
+        window.addEventListener('resize', this._onResize);
+        this.animate();
+    }
+
+    mat(color, transparent) {
+        return new THREE.MeshPhongMaterial({
+            color,
+            transparent: !!transparent,
+            opacity: transparent ? 0.4 : 1,
+            side: transparent ? THREE.DoubleSide : THREE.FrontSide,
+        });
+    }
+
+    addBox(gx, gy, gz, pos, color, transparent) {
+        const mesh = new THREE.Mesh(new THREE.BoxGeometry(gx, gy, gz), this.mat(color, transparent));
+        mesh.position.set(pos[0], pos[1], pos[2]);
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        this.objectGroup.add(mesh);
+        return mesh;
+    }
+
+    addDimensionLine(start, end, label, offset) {
+        const dir = new THREE.Vector3().subVectors(end, start);
+        const len = dir.length();
+        const mid = new THREE.Vector3().addVectors(start, end).multiplyScalar(0.5);
+        if (offset) mid.add(offset);
+
+        // Line
+        const points = [start.clone(), end.clone()];
+        if (offset) { points[0].add(offset); points[1].add(offset); }
+        const lineGeo = new THREE.BufferGeometry().setFromPoints(points);
+        const lineMat = new THREE.LineBasicMaterial({ color: COLORS.dimension, linewidth: 2 });
+        this.dimensionGroup.add(new THREE.Line(lineGeo, lineMat));
+
+        // Extension lines
+        if (offset) {
+            const ext1 = new THREE.BufferGeometry().setFromPoints([start.clone(), points[0].clone()]);
+            const ext2 = new THREE.BufferGeometry().setFromPoints([end.clone(), points[1].clone()]);
+            const extMat = new THREE.LineBasicMaterial({ color: COLORS.dimension, linewidth: 1, transparent: true, opacity: 0.4 });
+            this.dimensionGroup.add(new THREE.Line(ext1, extMat));
+            this.dimensionGroup.add(new THREE.Line(ext2, extMat));
+        }
+
+        // Text label (sprite)
+        const canvas = document.createElement('canvas');
+        canvas.width = 256;
+        canvas.height = 64;
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = '#1565C0';
+        ctx.font = 'bold 32px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(label, 128, 32);
+        const tex = new THREE.CanvasTexture(canvas);
+        const spriteMat = new THREE.SpriteMaterial({ map: tex, transparent: true });
+        const sprite = new THREE.Sprite(spriteMat);
+        sprite.position.copy(mid);
+        if (offset) sprite.position.add(new THREE.Vector3(0, 0.15, 0));
+        sprite.scale.set(len * 0.5, len * 0.125, 1);
+        sprite.scale.clampScalar(0.3, 2);
+        this.dimensionGroup.add(sprite);
+    }
+
+    clearObject() {
+        while (this.objectGroup.children.length > 0) {
+            const child = this.objectGroup.children[0];
+            if (child.geometry) child.geometry.dispose();
+            if (child.material) child.material.dispose();
+            this.objectGroup.remove(child);
+        }
+        while (this.dimensionGroup.children.length > 0) {
+            const child = this.dimensionGroup.children[0];
+            if (child.geometry) child.geometry.dispose();
+            if (child.material) {
+                if (child.material.map) child.material.map.dispose();
+                child.material.dispose();
+            }
+            this.dimensionGroup.remove(child);
+        }
+    }
+
+    buildFireShutter(params) {
+        const W = params.width / 1000;
+        const H = params.height / 1000;
+        const D = params.depth / 1000;
+        const HH = params.housingHeight / 1000;
+        const JW = params.jambWidth / 1000;
+        const panelH = H - HH;
+        const isDouble = params.shutterType === 'double';
+
+        // Housing (top box)
+        this.addBox(W + JW * 2 + 0.05, HH, D + 0.05, [0, H - HH / 2, 0], COLORS.housing, false);
+
+        // Left Jamb
+        this.addBox(JW, H, D, [-(W / 2 + JW / 2), H / 2, 0], COLORS.jamb, false);
+
+        // Right Jamb
+        this.addBox(JW, H, D, [(W / 2 + JW / 2), H / 2, 0], COLORS.jamb, false);
+
+        // Shutter Panel (closed state, semi-transparent)
+        if (isDouble) {
+            this.addBox(W * 0.48, panelH, 0.02, [-W * 0.01, panelH / 2, D * 0.15], COLORS.panelTransparent, true);
+            this.addBox(W * 0.48, panelH, 0.02, [W * 0.01, panelH / 2, -D * 0.15], COLORS.panelTransparent, true);
+        } else {
+            this.addBox(W, panelH, 0.02, [0, panelH / 2, 0], COLORS.panelTransparent, true);
+        }
+
+        // Slat lines (visual detail)
+        const slatCount = Math.floor(panelH / 0.1);
+        for (let i = 1; i < Math.min(slatCount, 30); i++) {
+            const y = i * (panelH / slatCount);
+            this.addBox(W - 0.02, 0.005, 0.025, [0, y, 0], COLORS.panel, false);
+        }
+
+        // Dimension lines
+        const totalW = W + JW * 2;
+        this.addDimensionLine(
+            new THREE.Vector3(-totalW / 2, 0, 0),
+            new THREE.Vector3(totalW / 2, 0, 0),
+            `${params.width + params.jambWidth * 2}mm`,
+            new THREE.Vector3(0, -0.3, D / 2 + 0.3)
+        );
+        this.addDimensionLine(
+            new THREE.Vector3(totalW / 2 + 0.1, 0, 0),
+            new THREE.Vector3(totalW / 2 + 0.1, H, 0),
+            `${params.height}mm`,
+            new THREE.Vector3(0.5, 0, 0)
+        );
+
+        // Fit camera
+        this.fitCamera(totalW, H);
+    }
+
+    buildFireDoor(params) {
+        const W = params.width / 1000;
+        const H = params.height / 1000;
+        const D = params.depth / 1000;
+        const frameW = 0.06;
+        const isDouble = params.doorType === 'double-swing';
+
+        // Frame
+        this.addBox(frameW, H, D + 0.02, [-(W / 2 + frameW / 2), H / 2, 0], COLORS.doorFrame, false);
+        this.addBox(frameW, H, D + 0.02, [(W / 2 + frameW / 2), H / 2, 0], COLORS.doorFrame, false);
+        this.addBox(W + frameW * 2, frameW, D + 0.02, [0, H + frameW / 2, 0], COLORS.doorFrame, false);
+
+        // Door panel(s)
+        if (isDouble) {
+            this.addBox(W / 2 - 0.01, H - 0.02, D, [-W / 4, H / 2, 0], COLORS.door, false);
+            this.addBox(W / 2 - 0.01, H - 0.02, D, [W / 4, H / 2, 0], COLORS.door, false);
+        } else {
+            this.addBox(W - 0.02, H - 0.02, D, [0, H / 2, 0], COLORS.door, false);
+        }
+
+        // Glazing
+        if (params.glazing === 'small') {
+            const gw = Math.min(W * 0.3, 0.3), gh = 0.3;
+            if (isDouble) {
+                this.addBox(gw, gh, D + 0.01, [-W / 4, H * 0.65, 0], COLORS.glazing, true);
+                this.addBox(gw, gh, D + 0.01, [W / 4, H * 0.65, 0], COLORS.glazing, true);
+            } else {
+                this.addBox(gw, gh, D + 0.01, [0, H * 0.65, 0], COLORS.glazing, true);
+            }
+        } else if (params.glazing === 'half') {
+            const gw = W * 0.7, gh = H * 0.4;
+            if (isDouble) {
+                this.addBox(gw / 2 - 0.03, gh, D + 0.01, [-W / 4, H * 0.55, 0], COLORS.glazing, true);
+                this.addBox(gw / 2 - 0.03, gh, D + 0.01, [W / 4, H * 0.55, 0], COLORS.glazing, true);
+            } else {
+                this.addBox(gw, gh, D + 0.01, [0, H * 0.55, 0], COLORS.glazing, true);
+            }
+        }
+
+        // Handle
+        const handleH = 0.15;
+        if (isDouble) {
+            this.addBox(0.02, handleH, 0.03, [-0.04, H * 0.47, D / 2 + 0.02], 0x333333, false);
+            this.addBox(0.02, handleH, 0.03, [0.04, H * 0.47, D / 2 + 0.02], 0x333333, false);
+        } else {
+            this.addBox(0.02, handleH, 0.03, [W * 0.3, H * 0.47, D / 2 + 0.02], 0x333333, false);
+        }
+
+        const totalW = W + frameW * 2;
+        this.addDimensionLine(
+            new THREE.Vector3(-totalW / 2, 0, 0),
+            new THREE.Vector3(totalW / 2, 0, 0),
+            `${params.width}mm`,
+            new THREE.Vector3(0, -0.2, D / 2 + 0.2)
+        );
+        this.addDimensionLine(
+            new THREE.Vector3(totalW / 2 + 0.05, 0, 0),
+            new THREE.Vector3(totalW / 2 + 0.05, H, 0),
+            `${params.height}mm`,
+            new THREE.Vector3(0.3, 0, 0)
+        );
+
+        this.fitCamera(totalW, H);
+    }
+
+    buildFireDamper(params) {
+        const W = params.width / 1000;
+        const H = params.height / 1000;
+        const D = params.depth / 1000;
+        const flangeT = 0.02;
+
+        // Body
+        this.addBox(W, H, D, [0, H / 2, 0], COLORS.damperBody, false);
+
+        // Flanges (front and back)
+        this.addBox(W + 0.06, H + 0.06, flangeT, [0, H / 2, D / 2 + flangeT / 2], COLORS.frame, false);
+        this.addBox(W + 0.06, H + 0.06, flangeT, [0, H / 2, -D / 2 - flangeT / 2], COLORS.frame, false);
+
+        // Blades
+        const bladeCount = params.bladeType === 'single' ? 1 : Math.max(2, Math.floor(H / 0.08));
+        for (let i = 0; i < bladeCount; i++) {
+            const y = (i + 0.5) * (H / bladeCount);
+            this.addBox(W - 0.02, 0.003, D * 0.85, [0, y, 0], COLORS.damperBlade, false);
+        }
+
+        // Actuator box
+        this.addBox(0.08, 0.08, 0.06, [W / 2 + 0.04, H / 2, 0], 0xFFC107, false);
+
+        this.addDimensionLine(
+            new THREE.Vector3(-W / 2 - 0.03, 0, 0),
+            new THREE.Vector3(W / 2 + 0.03, 0, 0),
+            `${params.width}mm`,
+            new THREE.Vector3(0, -0.15, D / 2 + 0.15)
+        );
+        this.addDimensionLine(
+            new THREE.Vector3(W / 2 + 0.06, 0, 0),
+            new THREE.Vector3(W / 2 + 0.06, H, 0),
+            `${params.height}mm`,
+            new THREE.Vector3(0.2, 0, 0)
+        );
+
+        this.fitCamera(W + 0.1, H);
+    }
+
+    buildObject(objectId, params) {
+        this.clearObject();
+        switch (objectId) {
+            case 'fire-shutter': this.buildFireShutter(params); break;
+            case 'fire-door': this.buildFireDoor(params); break;
+            case 'fire-damper': this.buildFireDamper(params); break;
+        }
+    }
+
+    fitCamera(w, h) {
+        const maxDim = Math.max(w, h);
+        const dist = maxDim * 1.8 + 2;
+        this.camera.position.set(dist * 0.7, h * 0.6 + 1, dist * 0.7);
+        this.controls.target.set(0, h / 2, 0);
+        this.controls.update();
+    }
+
+    onResize() {
+        const w = this.el.clientWidth, h = this.el.clientHeight;
+        if (w === 0 || h === 0) return;
+        this.camera.aspect = w / h;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(w, h);
+    }
+
+    animate() {
+        this._animId = requestAnimationFrame(() => this.animate());
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+    }
+
+    dispose() {
+        cancelAnimationFrame(this._animId);
+        this.clearObject();
+        window.removeEventListener('resize', this._onResize);
+        this.renderer.dispose();
+        if (this.el.contains(this.renderer.domElement)) this.el.removeChild(this.renderer.domElement);
+    }
+}
+
+/* ════════════════════════════════════════════════
+   React Components
+   ════════════════════════════════════════════════ */
+function PmisSidebar({ activePage }) {
+    const [profile, setProfile] = useState(null);
+    const [expanded, setExpanded] = useState(() => {
+        for (const m of PMIS_MENUS) {
+            if (m.children?.some(c => c.id === activePage)) return m.id;
+        }
+        return null;
+    });
+
+    useEffect(() => {
+        fetch('/juil/construction-pmis/profile', { headers: { Accept: 'application/json' } })
+            .then(r => r.json()).then(d => setProfile(d.worker)).catch(() => {});
+    }, []);
+
+    return (
+        <div className="bg-white border-r border-gray-200 shadow-sm flex flex-col shrink-0" style={{ width: 200 }}>
+            <a href="/juil/construction-pmis" className="flex items-center gap-2 px-4 py-3 text-sm text-blue-600 hover:bg-blue-50 border-b border-gray-100 transition">
+                <i className="ri-arrow-left-s-line text-lg"></i> PMIS 대시보드
+            </a>
+            <div className="p-3 border-b border-gray-100 text-center">
+                <div className="w-12 h-12 mx-auto mb-1 rounded-full bg-gray-100 border-2 border-gray-200 flex items-center justify-center">
+                    {profile?.profile_photo_path
+                        ? <img src={profile.profile_photo_path} className="w-full h-full rounded-full object-cover" />
+                        : <i className="ri-user-3-line text-xl text-gray-300"></i>}
+                </div>
+                <div className="text-sm font-bold text-gray-800">{profile?.name || '...'}</div>
+                <div className="text-xs text-gray-500 mt-0.5">{profile?.department || ''}</div>
+            </div>
+            <div className="flex-1 overflow-auto py-1">
+                {PMIS_MENUS.map(m => (
+                    <div key={m.id}>
+                        <div
+                            onClick={() => setExpanded(expanded === m.id ? null : m.id)}
+                            className={`flex items-center gap-2 px-4 py-2.5 text-sm cursor-pointer transition ${expanded === m.id ? 'bg-blue-50 text-blue-700 font-semibold' : 'text-gray-600 hover:bg-gray-50'}`}>
+                            <i className={`${m.icon} text-base`}></i> {m.label}
+                            <i className={`ml-auto ${expanded === m.id ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line'} text-gray-400 text-xs`}></i>
+                        </div>
+                        {expanded === m.id && m.children?.map(c => (
+                            <a key={c.id} href={c.url}
+                                className={`block pl-10 pr-4 py-2 text-sm transition ${c.id === activePage ? 'bg-blue-100 text-blue-800 font-semibold border-l-2 border-blue-600' : 'text-gray-500 hover:text-blue-600 hover:bg-gray-50'}`}>
+                                {c.label}
+                            </a>
+                        ))}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+/* ── 객체 라이브러리 패널 ── */
+function ObjectLibrary({ selectedId, onSelect }) {
+    const categories = useMemo(() => {
+        const map = {};
+        for (const obj of OBJECT_LIBRARY) {
+            if (!map[obj.category]) map[obj.category] = { name: obj.categoryName, items: [] };
+            map[obj.category].items.push(obj);
+        }
+        return Object.entries(map);
+    }, []);
+
+    return (
+        <div className="p-3 border-b border-gray-200">
+            <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 flex items-center gap-1">
+                <i className="ri-shapes-line"></i> 객체 라이브러리
+            </h3>
+            {categories.map(([catId, cat]) => (
+                <div key={catId} className="mb-2">
+                    <div className="text-xs text-gray-400 font-medium mb-1">{cat.name}</div>
+                    <div className="space-y-1">
+                        {cat.items.map(obj => (
+                            <button key={obj.id}
+                                onClick={() => onSelect(obj.id)}
+                                className={`w-full flex items-center gap-2 px-2.5 py-2 rounded-lg text-left transition text-sm ${
+                                    selectedId === obj.id
+                                        ? 'bg-blue-100 text-blue-800 ring-1 ring-blue-300 font-semibold'
+                                        : 'bg-gray-50 text-gray-700 hover:bg-gray-100'
+                                }`}>
+                                <i className={`${obj.icon} text-base ${selectedId === obj.id ? 'text-blue-600' : 'text-gray-400'}`}></i>
+                                <div>
+                                    <div className="leading-tight">{obj.name}</div>
+                                    <div className="text-xs text-gray-400 leading-tight">{obj.description}</div>
+                                </div>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+/* ── 파라미터 입력 패널 ── */
+function ParamEditor({ objectDef, params, onChange }) {
+    if (!objectDef) return null;
+
+    const handleChange = (key, value) => {
+        const def = objectDef.paramDefs.find(p => p.key === key);
+        if (def?.type === 'number') value = Number(value);
+        onChange({ ...params, [key]: value });
+    };
+
+    return (
+        <div className="p-3 flex-1 overflow-auto">
+            <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-1">
+                <i className="ri-settings-3-line"></i> 속성 설정
+            </h3>
+            <div className="space-y-2.5">
+                {objectDef.paramDefs.map(def => (
+                    <div key={def.key}>
+                        <label className="text-xs font-medium text-gray-600 mb-0.5 block">
+                            {def.label} {def.unit && <span className="text-gray-400">({def.unit})</span>}
+                        </label>
+                        {def.type === 'number' ? (
+                            <div className="flex items-center gap-2">
+                                <input type="range"
+                                    min={def.min} max={def.max} step={def.step}
+                                    value={params[def.key] || 0}
+                                    onChange={e => handleChange(def.key, e.target.value)}
+                                    className="flex-1 accent-blue-600 h-1.5" />
+                                <input type="number"
+                                    min={def.min} max={def.max} step={def.step}
+                                    value={params[def.key] || 0}
+                                    onChange={e => handleChange(def.key, e.target.value)}
+                                    className="w-20 px-2 py-1 text-xs border border-gray-300 rounded bg-white text-right font-mono focus:ring-1 focus:ring-blue-500 outline-none" />
+                            </div>
+                        ) : def.type === 'select' ? (
+                            <select
+                                value={params[def.key] || ''}
+                                onChange={e => handleChange(def.key, e.target.value)}
+                                className="w-full px-2 py-1.5 text-xs border border-gray-300 rounded bg-white text-gray-700 focus:ring-1 focus:ring-blue-500 outline-none">
+                                {def.options.map(opt => {
+                                    const val = typeof opt === 'object' ? opt.value : opt;
+                                    const label = typeof opt === 'object' ? opt.label : opt;
+                                    return <option key={val} value={val}>{label}</option>;
+                                })}
+                            </select>
+                        ) : null}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+/* ── JSON 출력 패널 ── */
+function JsonPanel({ json, onCopy, onDownload }) {
+    const [copied, setCopied] = useState(false);
+    const jsonStr = useMemo(() => JSON.stringify(json, null, 2), [json]);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(jsonStr).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    };
+
+    return (
+        <div className="bg-white border-l border-gray-200 shadow-sm flex flex-col shrink-0" style={{ width: 340 }}>
+            <div className="p-3 border-b border-gray-200 flex items-center justify-between">
+                <h3 className="text-sm font-bold text-gray-800 flex items-center gap-1">
+                    <i className="ri-braces-line text-green-600"></i> IfcProduct JSON
+                </h3>
+                <div className="flex items-center gap-1">
+                    <button onClick={handleCopy}
+                        className={`px-2 py-1 rounded text-xs transition ${copied ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}>
+                        <i className={copied ? 'ri-check-line' : 'ri-clipboard-line'}></i> {copied ? '복사됨' : '복사'}
+                    </button>
+                    <button onClick={onDownload}
+                        className="px-2 py-1 rounded text-xs bg-blue-100 text-blue-700 hover:bg-blue-200 transition">
+                        <i className="ri-download-2-line"></i> 저장
+                    </button>
+                </div>
+            </div>
+            <div className="flex-1 overflow-auto p-2">
+                <pre className="text-xs font-mono text-gray-700 whitespace-pre leading-relaxed bg-gray-50 rounded-lg p-3 border border-gray-100"
+                     style={{ fontSize: '11px', tabSize: 2 }}>
+                    {jsonStr}
+                </pre>
+            </div>
+            <div className="p-3 border-t border-gray-200 bg-gray-50">
+                <div className="flex items-center gap-2 text-xs text-gray-500">
+                    <i className="ri-information-line text-blue-500"></i>
+                    <span>IFC4 IfcProduct 스키마 호환 JSON 구조</span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/* ── 하단 툴바 ── */
+function GeneratorToolbar({ onResetView, onExportIFC, objectName }) {
+    return (
+        <div className="shrink-0 bg-white/95 backdrop-blur border-t border-gray-200 px-3 py-1.5 flex items-center gap-2 text-xs z-10">
+            <span className="text-gray-500 font-semibold flex items-center gap-1">
+                <i className="ri-cube-line text-blue-500"></i> {objectName || '객체 미선택'}
+            </span>
+            <div className="w-px h-5 bg-gray-300"></div>
+            <button onClick={onResetView}
+                className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-gray-600 transition">
+                <i className="ri-refresh-line"></i> 시점 초기화
+            </button>
+            <div className="flex-1"></div>
+            <button onClick={onExportIFC}
+                className="flex items-center gap-1 px-3 py-1 rounded bg-green-600 text-white hover:bg-green-700 transition font-semibold">
+                <i className="ri-download-2-line"></i> IFC STEP 다운로드
+            </button>
+        </div>
+    );
+}
+
+/* ════════════════════════════════════════════════
+   IFC STEP 파일 생성기
+   ════════════════════════════════════════════════ */
+function generateIFCStep(objectDef, params) {
+    const w = params.width / 1000;
+    const h = params.height / 1000;
+    const d = params.depth / 1000;
+
+    let _n = 0;
+    const N = () => '#' + (++_n);
+    const out = [];
+    const W = (id, s) => { out.push(`${id}= ${s};`); return id; };
+    const C64 = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_$';
+    const G = () => { let s=''; for(let i=0;i<22;i++) s+=C64[Math.random()*64|0]; return `'${s}'`; };
+    const F = v => v.toFixed(4);
+
+    const per = W(N(), `IFCPERSON($,$,'SAM',$,$,$,$,$)`);
+    const org = W(N(), `IFCORGANIZATION($,'CodeBridgeX',$,$,$)`);
+    const po = W(N(), `IFCPERSONANDORGANIZATION(${per},${org},$)`);
+    const app = W(N(), `IFCAPPLICATION(${org},'1.0','SAM BIM Generator','SAM-GEN')`);
+    const oh = W(N(), `IFCOWNERHISTORY(${po},${app},$,.NOCHANGE.,$,${po},${app},${Date.now()/1000|0})`);
+
+    const uL = W(N(), `IFCSIUNIT(*,.LENGTHUNIT.,$,.METRE.)`);
+    const uA = W(N(), `IFCSIUNIT(*,.AREAUNIT.,$,.SQUARE_METRE.)`);
+    const uV = W(N(), `IFCSIUNIT(*,.VOLUMEUNIT.,$,.CUBIC_METRE.)`);
+    const uR = W(N(), `IFCSIUNIT(*,.PLANEANGLEUNIT.,$,.RADIAN.)`);
+    const ua = W(N(), `IFCUNITASSIGNMENT((${uL},${uA},${uV},${uR}))`);
+
+    const dX = W(N(), `IFCDIRECTION((1.,0.,0.))`);
+    const dZ = W(N(), `IFCDIRECTION((0.,0.,1.))`);
+    const O = W(N(), `IFCCARTESIANPOINT((0.,0.,0.))`);
+    const ax0 = W(N(), `IFCAXIS2PLACEMENT3D(${O},${dZ},${dX})`);
+
+    const ctx = W(N(), `IFCGEOMETRICREPRESENTATIONCONTEXT($,'Model',3,1.E-05,${ax0},$)`);
+    const bctx = W(N(), `IFCGEOMETRICREPRESENTATIONSUBCONTEXT('Body','Model',*,*,*,*,${ctx},$,.MODEL_VIEW.,$)`);
+
+    const proj = W(N(), `IFCPROJECT(${G()},${oh},'SAM Generated',$,$,'SAM BIM Generator',$,(${ctx}),${ua})`);
+    const sPl = W(N(), `IFCLOCALPLACEMENT($,${ax0})`);
+    const site = W(N(), `IFCSITE(${G()},${oh},'Site',$,$,${sPl},$,$,.ELEMENT.,$,$,$,$,$)`);
+    const bPl = W(N(), `IFCLOCALPLACEMENT(${sPl},${ax0})`);
+    const bldg = W(N(), `IFCBUILDING(${G()},${oh},'Generated Building',$,$,${bPl},$,$,.ELEMENT.,$,$,$)`);
+
+    const stPt = W(N(), `IFCCARTESIANPOINT((0.,0.,0.))`);
+    const stAx = W(N(), `IFCAXIS2PLACEMENT3D(${stPt},${dZ},${dX})`);
+    const stPl = W(N(), `IFCLOCALPLACEMENT(${bPl},${stAx})`);
+    const storey = W(N(), `IFCBUILDINGSTOREY(${G()},${oh},'1F',$,$,${stPl},$,$,.ELEMENT.,0.)`);
+
+    W(N(), `IFCRELAGGREGATES(${G()},${oh},$,$,${proj},(${site}))`);
+    W(N(), `IFCRELAGGREGATES(${G()},${oh},$,$,${site},(${bldg}))`);
+    W(N(), `IFCRELAGGREGATES(${G()},${oh},$,$,${bldg},(${storey}))`);
+
+    const elPl = W(N(), `IFCLOCALPLACEMENT(${stPl},${ax0})`);
+    const pf = W(N(), `IFCRECTANGLEPROFILEDEF(.AREA.,$,$,${F(w)},${F(d)})`);
+    const sol = W(N(), `IFCEXTRUDEDAREASOLID(${pf},$,${dZ},${F(h)})`);
+    const sr = W(N(), `IFCSHAPEREPRESENTATION(${bctx},'Body','SweptSolid',(${sol}))`);
+    const ps = W(N(), `IFCPRODUCTDEFINITIONSHAPE($,$,(${sr}))`);
+
+    const nm = objectDef.name.replace(/'/g, '');
+    let elem;
+    if (objectDef.ifcType === 'IfcDoor') {
+        elem = W(N(), `IFCDOOR(${G()},${oh},'${nm}','${nm}',$,${elPl},${ps},$,${F(h)},${F(w)})`);
+    } else {
+        elem = W(N(), `IFCBUILDINGELEMENTPROXY(${G()},${oh},'${nm}','${nm}',$,${elPl},${ps},$,.USERDEFINED.)`);
+    }
+
+    // Property Set
+    const props = [];
+    for (const [key, val] of Object.entries(params)) {
+        const def = objectDef.paramDefs.find(p => p.key === key);
+        if (!def) continue;
+        let displayVal = val;
+        if (def.type === 'select' && Array.isArray(def.options) && typeof def.options[0] === 'object') {
+            const opt = def.options.find(o => o.value === val);
+            if (opt) displayVal = opt.label;
+        }
+        if (typeof displayVal === 'number') {
+            props.push(W(N(), `IFCPROPERTYSINGLEVALUE('${def.label}',$,IFCREAL(${F(displayVal)}),$)`));
+        } else {
+            props.push(W(N(), `IFCPROPERTYSINGLEVALUE('${def.label}',$,IFCLABEL('${String(displayVal).replace(/'/g,'')}'),$)`));
+        }
+    }
+    if (props.length > 0) {
+        const pset = W(N(), `IFCPROPERTYSET(${G()},${oh},'Pset_${nm.replace(/\s/g,'')}Common',$,(${props.join(',')}))`);
+        W(N(), `IFCRELDEFINESBYPROPERTIES(${G()},${oh},$,$,(${elem}),${pset})`);
+    }
+
+    W(N(), `IFCRELCONTAINEDINSPATIALSTRUCTURE(${G()},${oh},$,$,(${elem}),${storey})`);
+
+    const hdr = [
+        "ISO-10303-21;", "HEADER;",
+        "FILE_DESCRIPTION(('ViewDefinition [CoordinationView_V2.0]'),'2;1');",
+        `FILE_NAME('SAM_Generated_${nm}.ifc','${new Date().toISOString().slice(0,19)}',('SAM BIM Generator'),('CodeBridgeX'),'','SAM','');`,
+        "FILE_SCHEMA(('IFC2X3'));", "ENDSEC;", "DATA;",
+    ];
+    return [...hdr, ...out, "ENDSEC;", "END-ISO-10303-21;"].join('\n');
+}
+
+function downloadFile(name, content, type) {
+    const blob = new Blob([content], { type });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url; a.download = name;
+    document.body.appendChild(a); a.click(); document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+/* ════════════════════════════════════════════════
+   Root Component
+   ════════════════════════════════════════════════ */
+function BimGeneratorApp() {
+    const vpRef = useRef(null);
+    const sceneRef = useRef(null);
+
+    const [selectedObjectId, setSelectedObjectId] = useState('fire-shutter');
+    const [params, setParams] = useState(() => OBJECT_LIBRARY[0].defaultParams);
+
+    const objectDef = useMemo(() => OBJECT_LIBRARY.find(o => o.id === selectedObjectId), [selectedObjectId]);
+    const ifcJson = useMemo(() => objectDef ? buildIfcProductJSON(objectDef, params) : null, [objectDef, params]);
+
+    // Init Three.js
+    useEffect(() => {
+        if (!vpRef.current) return;
+        const scene = new GeneratorScene(vpRef.current);
+        scene.init();
+        sceneRef.current = scene;
+        return () => scene.dispose();
+    }, []);
+
+    // Update 3D preview when params change
+    useEffect(() => {
+        if (sceneRef.current && selectedObjectId) {
+            sceneRef.current.buildObject(selectedObjectId, params);
+        }
+    }, [selectedObjectId, params]);
+
+    const handleSelectObject = useCallback((id) => {
+        const def = OBJECT_LIBRARY.find(o => o.id === id);
+        if (def) {
+            setSelectedObjectId(id);
+            setParams({ ...def.defaultParams });
+        }
+    }, []);
+
+    const handleResetView = useCallback(() => {
+        if (sceneRef.current && objectDef) {
+            const w = params.width / 1000;
+            const h = params.height / 1000;
+            sceneRef.current.fitCamera(w, h);
+        }
+    }, [objectDef, params]);
+
+    const handleExportIFC = useCallback(() => {
+        if (!objectDef) return;
+        const step = generateIFCStep(objectDef, params);
+        downloadFile(`SAM_${objectDef.name}.ifc`, step, 'application/x-step');
+    }, [objectDef, params]);
+
+    const handleDownloadJson = useCallback(() => {
+        if (!ifcJson) return;
+        const str = JSON.stringify(ifcJson, null, 2);
+        downloadFile(`SAM_${objectDef.name}_IfcProduct.json`, str, 'application/json');
+    }, [ifcJson, objectDef]);
+
+    return (
+        <div className="flex bg-gray-100" style={{ height: 'calc(100vh - 56px)' }}>
+            <PmisSidebar activePage="bim-generator" />
+
+            {/* Left Panel */}
+            <div className="bg-white border-r border-gray-200 shadow-sm flex flex-col shrink-0 overflow-hidden" style={{ width: 280 }}>
+                <div className="px-3 py-2.5 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-indigo-600">
+                    <h2 className="text-sm font-bold text-white flex items-center gap-1.5">
+                        <i className="ri-tools-line"></i> BIM 생성기
+                    </h2>
+                    <p className="text-xs text-blue-200 mt-0.5">파라메트릭 BIM 객체 설계</p>
+                </div>
+                <div className="flex-1 overflow-auto">
+                    <ObjectLibrary selectedId={selectedObjectId} onSelect={handleSelectObject} />
+                    <ParamEditor objectDef={objectDef} params={params} onChange={setParams} />
+                </div>
+            </div>
+
+            {/* Center: 3D Canvas */}
+            <div className="flex-1 flex flex-col relative overflow-hidden">
+                <div ref={vpRef} className="flex-1" style={{ minHeight: 0 }} />
+                <GeneratorToolbar
+                    onResetView={handleResetView}
+                    onExportIFC={handleExportIFC}
+                    objectName={objectDef?.name}
+                />
+            </div>
+
+            {/* Right Panel: JSON */}
+            <JsonPanel json={ifcJson} onDownload={handleDownloadJson} />
+        </div>
+    );
+}
+
+ReactDOM.render(<BimGeneratorApp />, document.getElementById('root'));
+@endverbatim
+</script>
+@endpush
diff --git a/resources/views/juil/bim-viewer.blade.php b/resources/views/juil/bim-viewer.blade.php
index c2911242..7c9c094f 100644
--- a/resources/views/juil/bim-viewer.blade.php
+++ b/resources/views/juil/bim-viewer.blade.php
@@ -931,6 +931,7 @@ class BimScene {
 const PMIS_MENUS = [
     { icon: 'ri-building-2-line', label: 'BIM 관리', id: 'bim', children: [
         { label: 'BIM 뷰어', id: 'bim-viewer', url: '/juil/construction-pmis/bim-viewer' },
+        { label: 'BIM 생성기', id: 'bim-generator', url: '/juil/construction-pmis/bim-generator' },
     ]},
     { icon: 'ri-line-chart-line', label: '시공관리', id: 'construction', children: [
         { label: '인원관리', id: 'workforce', url: '/juil/construction-pmis/workforce' },
diff --git a/routes/web.php b/routes/web.php
index a719adb9..9476d620 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1740,6 +1740,7 @@
     Route::get('/construction-pmis/profile', [PlanningController::class, 'pmisProfile'])->name('construction-pmis.profile');
     Route::put('/construction-pmis/profile', [PlanningController::class, 'pmisProfileUpdate'])->name('construction-pmis.profile.update');
     Route::get('/construction-pmis/bim-viewer', [PlanningController::class, 'bimViewer'])->name('construction-pmis.bim-viewer');
+    Route::get('/construction-pmis/bim-generator', [PlanningController::class, 'bimGenerator'])->name('construction-pmis.bim-generator');
 
     // 시공관리
     Route::get('/construction-pmis/workforce', [PlanningController::class, 'pmisWorkforce'])->name('construction-pmis.workforce');