fix: [rd] 방화셔터 BIM 뷰어 빈 화면 수정

- params null 체크로 인한 vpRef 순환 의존성 문제 해결
- 뷰포트 div를 항상 렌더링, 패널만 조건부 렌더링으로 변경
This commit is contained in:
김보곤
2026-03-13 09:01:20 +09:00
parent 4b8a855b37
commit 007ccba1ac

View File

@@ -978,8 +978,6 @@ function FireShutterBimApp() {
sceneRef.current?.screenshot();
}, []);
if (!params) return null;
return (
<div style={{margin:'-24px',height:'calc(100vh - 64px)',background:'#020617',display:'flex',flexDirection:'column',overflow:'hidden'}}>
{/* 상단 헤더 */}
@@ -989,21 +987,27 @@ className="px-5 py-2.5 flex items-center gap-4 flex-shrink-0">
<i className="ri-fire-line text-red-400 text-lg"></i>
<h1 className="text-white text-base font-black">방화셔터 BIM 뷰어</h1>
</div>
<span className="text-slate-500 text-[11px]">|</span>
<span className="text-slate-400 text-[11px] font-bold">
{PRODUCT_DEFAULTS[params.productType].label} &middot; {params.openWidth} x {params.openHeight}mm
</span>
{params && (
<>
<span className="text-slate-500 text-[11px]">|</span>
<span className="text-slate-400 text-[11px] font-bold">
{PRODUCT_DEFAULTS[params.productType].label} &middot; {params.openWidth} x {params.openHeight}mm
</span>
</>
)}
</div>
{/* 메인 영역 */}
<div className="flex flex-1" style={{minHeight:0}}>
{/* 좌측 파라미터 패널 */}
<div style={{width:'280px',background:'rgba(15,23,42,0.85)',borderRight:'1px solid rgba(255,255,255,0.1)',backdropFilter:'blur(12px)'}}
className="p-3 overflow-y-auto custom-scrollbar flex-shrink-0">
<ParamPanel params={params} onParamChange={handleParamChange} onRebuild={handleRebuild} />
</div>
{params && (
<div style={{width:'280px',background:'rgba(15,23,42,0.85)',borderRight:'1px solid rgba(255,255,255,0.1)',backdropFilter:'blur(12px)'}}
className="p-3 overflow-y-auto custom-scrollbar flex-shrink-0">
<ParamPanel params={params} onParamChange={handleParamChange} onRebuild={handleRebuild} />
</div>
)}
{/* 3D 뷰포트 */}
{/* 3D 뷰포트 — 항상 렌더링 (vpRef 필수) */}
<div className="flex-1 relative" style={{minWidth:0}}>
<div ref={vpRef} style={{width:'100%',height:'100%'}}></div>
{/* 개폐율 표시 */}
@@ -1015,7 +1019,7 @@ className="p-3 overflow-y-auto custom-scrollbar flex-shrink-0">
</div>
{/* 우측 정보 패널 */}
<InfoPanel selected={selected} params={params} />
{params && <InfoPanel selected={selected} params={params} />}
</div>
{/* 하단 툴바 */}