From 68e8e7b36bf38eb4e78732a625f31036c9059277 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Fri, 21 Nov 2025 16:13:50 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B4=88=EA=B8=B0=EC=97=90=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B6=88=EB=9F=AC?=
 =?UTF-8?q?=EC=99=80=EC=A7=80=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=98=84?=
 =?UTF-8?q?=EC=83=81=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/yard-3d/HierarchyConfigPanel.tsx  | 54 ++++++++++++++++---
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx
index 00473450..31cca6f8 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx
@@ -78,16 +78,43 @@ export default function HierarchyConfigPanel({
   const [loadingColumns, setLoadingColumns] = useState(false);
   const [columnsCache, setColumnsCache] = useState<{ [tableName: string]: ColumnInfo[] }>({});
 
-  // 외부에서 변경된 경우 동기화
+  // 외부에서 변경된 경우 동기화 및 컬럼 자동 로드
   useEffect(() => {
     if (hierarchyConfig) {
       setLocalConfig(hierarchyConfig);
+
+      // 저장된 설정이 있으면 해당 테이블들의 컬럼을 자동 로드
+      const loadSavedColumns = async () => {
+        // 창고 테이블 컬럼 로드
+        if (hierarchyConfig.warehouse?.tableName) {
+          await handleTableChange(hierarchyConfig.warehouse.tableName, "warehouse");
+        }
+
+        // 레벨 테이블 컬럼 로드
+        if (hierarchyConfig.levels) {
+          for (const level of hierarchyConfig.levels) {
+            if (level.tableName) {
+              await handleTableChange(level.tableName, level.level);
+            }
+          }
+        }
+
+        // 자재 테이블 컬럼 로드
+        if (hierarchyConfig.material?.tableName) {
+          await handleTableChange(hierarchyConfig.material.tableName, "material");
+        }
+      };
+
+      loadSavedColumns();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hierarchyConfig]);
 
   // 테이블 선택 시 컬럼 로드
   const handleTableChange = async (tableName: string, type: "warehouse" | "material" | number) => {
-    if (columnsCache[tableName]) return; // 이미 로드된 경우 스킵
+    if (columnsCache[tableName]) {
+      return; // 이미 로드된 경우 스킵
+    }
 
     setLoadingColumns(true);
     try {
@@ -209,6 +236,11 @@ export default function HierarchyConfigPanel({
                 ))}
               </SelectContent>
             </Select>
+            {!localConfig.warehouse?.tableName && (
+              <p className="mt-1 text-[9px] text-muted-foreground">
+                ℹ️ 창고 테이블을 선택하고 "설정 적용"을 눌러주세요
+              </p>
+            )}
           </div>
 
           {/* 창고 컬럼 매핑 */}
@@ -387,8 +419,13 @@ export default function HierarchyConfigPanel({
                         </SelectTrigger>
                         <SelectContent>
                           {columnsCache[level.tableName].map((col) => (
-                            <SelectItem key={col} value={col} className="text-xs">
-                              {col}
+                            <SelectItem key={col.column_name} value={col.column_name} className="text-xs">
+                              <div className="flex flex-col">
+                                <span>{col.column_name}</span>
+                                {col.description && (
+                                  <span className="text-[9px] text-muted-foreground">{col.description}</span>
+                                )}
+                              </div>
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -409,8 +446,13 @@ export default function HierarchyConfigPanel({
                         <SelectContent>
                           <SelectItem value="__none__">없음</SelectItem>
                           {columnsCache[level.tableName].map((col) => (
-                            <SelectItem key={col} value={col} className="text-xs">
-                              {col}
+                            <SelectItem key={col.column_name} value={col.column_name} className="text-xs">
+                              <div className="flex flex-col">
+                                <span>{col.column_name}</span>
+                                {col.description && (
+                                  <span className="text-[9px] text-muted-foreground">{col.description}</span>
+                                )}
+                              </div>
                             </SelectItem>
                           ))}
                         </SelectContent>