From 90db4756e8f702c3a3bf8fde96d4c87d9fb0f994 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Wed, 10 Dec 2025 15:41:43 +0900
Subject: [PATCH] =?UTF-8?q?3D=20=EC=95=BC=EB=93=9C=20=EC=9E=90=EC=9E=AC=20?=
 =?UTF-8?q?=EA=B0=9C=EC=88=98=20=ED=91=9C=EC=8B=9C=20=EB=B2=84=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=B9=88=20Location=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/yard-3d/Yard3DCanvas.tsx          | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

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 && (
+              <>
+                {/* 얇은 흰색 바닥판 */}
+                <Box
+                  args={[boxWidth, 0.05, boxDepth]}
+                  position={[0, locYOffset + 0.025, 0]}
+                >
+                  <meshStandardMaterial
+                    color="#f5f5f5"
+                    roughness={0.6}
+                    metalness={0.1}
+                    emissive={isSelected ? "#e5e5e5" : "#000000"}
+                    emissiveIntensity={isSelected ? glowIntensity * 0.2 : 0}
+                  />
+                </Box>
+                {/* 흰색 실선 테두리 */}
+                <lineSegments position={[0, locYOffset + 0.06, 0]}>
+                  <edgesGeometry args={[new THREE.BoxGeometry(boxWidth, 0.05, boxDepth)]} />
+                  <lineBasicMaterial color="#9ca3af" linewidth={2} />
+                </lineSegments>
+              </>
+            )}
+
+            {/* 철판 스택 - 데이터 개수만큼 회색 판 쌓기 */}
+            {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 && (
               <Text
-                position={[0, locYOffset + locVisibleStackHeight + 0.3, boxDepth * 0.3]}
+                position={[0, locYOffset + (locPlateCount > 0 ? locVisibleStackHeight : 0.1) + 0.3, boxDepth * 0.3]}
                 rotation={[-Math.PI / 2, 0, 0]}
                 fontSize={Math.min(boxWidth, boxDepth) * 0.18}
                 color="#374151"