From f0707f35d8507592272c3030d670a75a15193794 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Fri, 17 Oct 2025 16:36:51 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B7=B0=EC=96=B4=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=95=BC=EB=93=9C=20=EC=9D=B4=EB=A6=84=20=EB=B3=B4=EC=97=AC?=
 =?UTF-8?q?=EC=A3=BC=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/yard-3d/Yard3DViewer.tsx          | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DViewer.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DViewer.tsx
index 1e4b133b..2c6f1bf4 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DViewer.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DViewer.tsx
@@ -31,6 +31,7 @@ interface Yard3DViewerProps {
 export default function Yard3DViewer({ layoutId }: Yard3DViewerProps) {
   const [placements, setPlacements] = useState<YardPlacement[]>([]);
   const [selectedPlacement, setSelectedPlacement] = useState<YardPlacement | null>(null);
+  const [layoutName, setLayoutName] = useState<string>("");
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -45,27 +46,35 @@ export default function Yard3DViewer({ layoutId }: Yard3DViewerProps) {
     console.log("selectedPlacement changed:", selectedPlacement?.material_name);
   }, [selectedPlacement]);
 
-  // 배치 데이터 로드
+  // 야드 레이아웃 및 배치 데이터 로드
   useEffect(() => {
-    const loadPlacements = async () => {
+    const loadData = async () => {
       try {
         setIsLoading(true);
         setError(null);
-        const response = await yardLayoutApi.getPlacementsByLayoutId(layoutId);
-        if (response.success) {
-          setPlacements(response.data);
+
+        // 야드 레이아웃 정보 조회
+        const layoutResponse = await yardLayoutApi.getLayoutById(layoutId);
+        if (layoutResponse.success) {
+          setLayoutName(layoutResponse.data.name);
+        }
+
+        // 배치 데이터 조회
+        const placementsResponse = await yardLayoutApi.getPlacementsByLayoutId(layoutId);
+        if (placementsResponse.success) {
+          setPlacements(placementsResponse.data);
         } else {
           setError("배치 데이터를 불러올 수 없습니다.");
         }
       } catch (err) {
-        console.error("배치 데이터 로드 실패:", err);
-        setError("배치 데이터를 불러오는 중 오류가 발생했습니다.");
+        console.error("데이터 로드 실패:", err);
+        setError("데이터를 불러오는 중 오류가 발생했습니다.");
       } finally {
         setIsLoading(false);
       }
     };
 
-    loadPlacements();
+    loadData();
   }, [layoutId]);
 
   if (isLoading) {
@@ -110,14 +119,20 @@ export default function Yard3DViewer({ layoutId }: Yard3DViewerProps) {
         onPlacementClick={handlePlacementClick}
       />
 
-      {/* 선택된 자재 정보 패널 (오버레이) */}
+      {/* 야드 이름 (좌측 상단) */}
+      {layoutName && (
+        <div className="absolute top-4 left-4 z-50 rounded-lg border border-gray-300 bg-white px-4 py-2 shadow-lg">
+          <h2 className="text-base font-bold text-gray-900">{layoutName}</h2>
+        </div>
+      )}
+
+      {/* 선택된 자재 정보 패널 (우측 상단) */}
       {selectedPlacement && (
         <div className="absolute top-4 right-4 z-50 w-64 rounded-lg border border-gray-300 bg-white p-4 shadow-xl">
           <div className="mb-3 flex items-center justify-between">
             <h3 className="text-sm font-semibold text-gray-800">자재 정보</h3>
             <button
               onClick={() => {
-                console.log("Close button clicked");
                 setSelectedPlacement(null);
               }}
               className="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"