diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx index 8d4bdfd1..7e0986a3 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx @@ -50,6 +50,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) // 외부 업체 모드 const [isExternalMode, setIsExternalMode] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false); + const [layoutKey, setLayoutKey] = useState(0); // 레이아웃 강제 리렌더링용 const canvasContainerRef = useRef(null); // 외부 업체 역할 체크 @@ -98,7 +99,16 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) // 전체 화면 변경 감지 useEffect(() => { const handleFullscreenChange = () => { - setIsFullscreen(!!document.fullscreenElement); + const isNowFullscreen = !!document.fullscreenElement; + setIsFullscreen(isNowFullscreen); + + // 전체화면 종료 시 레이아웃 강제 리렌더링 + if (!isNowFullscreen) { + setTimeout(() => { + setLayoutKey(prev => prev + 1); + window.dispatchEvent(new Event('resize')); + }, 50); + } }; document.addEventListener("fullscreenchange", handleFullscreenChange); @@ -262,7 +272,8 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) }); if (response.success && response.data) { const layerColumn = hierarchyConfig.material.layerColumn || "LOLAYER"; - const sortedMaterials = response.data.sort((a: any, b: any) => (a[layerColumn] || 0) - (b[layerColumn] || 0)); + // 층 내림차순 정렬 (높은 층이 위로) + const sortedMaterials = response.data.sort((a: any, b: any) => (b[layerColumn] || 0) - (a[layerColumn] || 0)); setMaterials(sortedMaterials); } else { setMaterials([]); @@ -660,37 +671,26 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps) )} - {/* 중앙: 3D 캔버스 */} + {/* 중앙 + 우측 컨테이너 (전체화면 시 함께 표시) */}
- {!isLoading && ( - handleObjectClick(placement?.id || null)} - focusOnPlacementId={null} - onCollisionDetected={() => {}} - /> - )} - {/* 풀스크린 모드일 때 종료 버튼 */} - {isFullscreen && ( - - )} -
+ {/* 중앙: 3D 캔버스 */} +
+ {!isLoading && ( + handleObjectClick(placement?.id || null)} + focusOnPlacementId={null} + onCollisionDetected={() => {}} + /> + )} +
- {/* 우측: 정보 패널 - 외부 모드에서는 숨김 */} - {!isExternalMode && ( -
+ {/* 우측: 정보 패널 */} +
{selectedObject ? (
@@ -792,8 +792,21 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)

객체를 선택하세요

)} +
+ + {/* 풀스크린 모드일 때 종료 버튼 */} + {isFullscreen && ( + + )}
- )}
);