드래그 앤 드롭 기능 개선 및 Unified 컴포넌트 매핑 추가: ScreenDesigner, TabsWidget, DynamicComponentRenderer에서 드래그 앤 드롭 시 컴포넌트의 위치와 크기를 최적화하고, Unified 컴포넌트에 대한 매핑 로직을 추가하여 사용자 경험을 향상시켰습니다. 또한, ButtonConfigPanel에서 컴포넌트가 없는 경우 방어 처리 로직을 추가하여 안정성을 높였습니다.

frontend/components/screen/widgets/TabsWidget.tsx

@@ -137,8 +137,24 @@ export function TabsWidget({
       );
     }
 
+    // 컴포넌트들의 최대 위치를 계산하여 스크롤 가능한 영역 확보
+    const maxBottom = Math.max(
+      ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
+      300 // 최소 높이
+    );
+    const maxRight = Math.max(
+      ...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
+      400 // 최소 너비
+    );
+
     return (
-      <div className="relative h-full w-full">
+      <div 
+        className="relative" 
+        style={{ 
+          minHeight: maxBottom + 20,
+          minWidth: maxRight + 20,
+        }}
+      >
         {components.map((comp: TabInlineComponent) => {
           const isSelected = selectedComponentId === comp.id;
 
@@ -228,7 +244,7 @@ export function TabsWidget({
           </TabsList>
         </div>
 
-        <div className="relative flex-1 overflow-hidden">
+        <div className="relative flex-1 overflow-auto">
           {visibleTabs.map((tab) => {
             const shouldRender = mountedTabs.has(tab.id);
             const isActive = selectedTab === tab.id;
@@ -238,7 +254,7 @@ export function TabsWidget({
                 key={tab.id}
                 value={tab.id}
                 forceMount
-                className={cn("h-full", !isActive && "hidden")}
+                className={cn("h-full overflow-auto", !isActive && "hidden")}
               >
                 {shouldRender && renderTabComponents(tab)}
               </TabsContent>