초기에 설정 데이터 불러와지지 않는 현상 해결

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>