탭기능 중간커밋

frontend/components/screen/panels/UnifiedPropertiesPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Suspense } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -341,14 +341,20 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
                 <Settings className="h-4 w-4 text-primary" />
                 <h3 className="text-sm font-semibold">{definition.name} 설정</h3>
               </div>
-              <ConfigPanelComponent 
-                config={config} 
-                onChange={handleConfigChange}
-                tables={tables} // 테이블 정보 전달
-                allTables={allTables} // 🆕 전체 테이블 목록 전달 (selected-items-detail-input 등에서 사용)
-                screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName} // 🔧 화면 테이블명 전달
-                tableColumns={currentTable?.columns || []} // 🔧 테이블 컬럼 정보 전달
-              />
+              <Suspense fallback={
+                <div className="flex items-center justify-center py-8">
+                  <div className="text-sm text-muted-foreground">설정 패널 로딩 중...</div>
+                </div>
+              }>
+                <ConfigPanelComponent 
+                  config={config} 
+                  onChange={handleConfigChange}
+                  tables={tables} // 테이블 정보 전달
+                  allTables={allTables} // 🆕 전체 테이블 목록 전달 (selected-items-detail-input 등에서 사용)
+                  screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName} // 🔧 화면 테이블명 전달
+                  tableColumns={currentTable?.columns || []} // 🔧 테이블 컬럼 정보 전달
+                />
+              </Suspense>
             </div>
           );
         };