diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx index a3b29042..ad8add20 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx @@ -526,7 +526,8 @@ function MaterialBox({ case "location-temp": case "location-dest": // 베드 타입 Location: 회색 철판들이 데이터 개수만큼 쌓이는 형태 - const locPlateCount = placement.material_count || placement.quantity || 5; // 데이터 개수 + // 자재가 없으면 0, 있으면 해당 개수 표시 (기본값 5 제거) + const locPlateCount = placement.material_count ?? placement.quantity ?? 0; const locVisiblePlateCount = locPlateCount; // 데이터 개수만큼 모두 렌더링 const locPlateThickness = 0.15; // 각 철판 두께 const locPlateGap = 0.03; // 철판 사이 미세한 간격 @@ -538,8 +539,32 @@ function MaterialBox({ return ( <> - {/* 철판 스택 - 데이터 개수만큼 회색 판 쌓기 (최대 20개) */} - {Array.from({ length: locVisiblePlateCount }).map((_, idx) => { + {/* 자재가 없을 때: 흰색 실선 테두리 바닥판 */} + {locPlateCount === 0 && ( + <> + {/* 얇은 흰색 바닥판 */} + + + + {/* 흰색 실선 테두리 */} + + + + + + )} + + {/* 철판 스택 - 데이터 개수만큼 회색 판 쌓기 */} + {locPlateCount > 0 && Array.from({ length: locVisiblePlateCount }).map((_, idx) => { const yPos = locPlateBaseY + idx * (locPlateThickness + locPlateGap); // 약간의 랜덤 오프셋으로 자연스러움 추가 const xOffset = (Math.sin(idx * 0.5) * 0.02); @@ -570,7 +595,7 @@ function MaterialBox({ {/* Location 이름 - 실제 폴리곤 높이 기준, 뒤쪽(+Z)에 배치 */} {placement.name && ( 0 ? locVisibleStackHeight : 0.1) + 0.3, boxDepth * 0.3]} rotation={[-Math.PI / 2, 0, 0]} fontSize={Math.min(boxWidth, boxDepth) * 0.18} color="#374151"