탭 내부 컴포넌트 선택 및 업데이트 기능 추가: RealtimePreviewDynamic, ScreenDesigner, TabsWidget, DynamicComponentRenderer, TabsConfigPanel에서 탭 내부 컴포넌트를 선택하고 업데이트할 수 있는 콜백 함수를 추가하여 사용자 인터랙션을 개선하였습니다. 이를 통해 탭 내에서의 컴포넌트 관리가 용이해졌습니다.

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -36,6 +36,9 @@ interface RealtimePreviewProps {
   onZoneComponentDrop?: (e: React.DragEvent, zoneId: string, layoutId: string) => void; // 존별 드롭 핸들러
   onZoneClick?: (zoneId: string) => void; // 존 클릭 핸들러
   onConfigChange?: (config: any) => void; // 설정 변경 핸들러
+  onUpdateComponent?: (updatedComponent: any) => void; // 🆕 컴포넌트 업데이트 콜백
+  onSelectTabComponent?: (tabId: string, compId: string, comp: any) => void; // 🆕 탭 내부 컴포넌트 선택 콜백
+  selectedTabComponentId?: string; // 🆕 선택된 탭 컴포넌트 ID
 
   // 버튼 액션을 위한 props
   screenId?: number;
@@ -133,6 +136,9 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
   onFormDataChange,
   onHeightChange, // 🆕 조건부 컨테이너 높이 변화 콜백
   conditionalDisabled, // 🆕 조건부 비활성화 상태
+  onUpdateComponent, // 🆕 컴포넌트 업데이트 콜백
+  onSelectTabComponent, // 🆕 탭 내부 컴포넌트 선택 콜백
+  selectedTabComponentId, // 🆕 선택된 탭 컴포넌트 ID
 }) => {
   // 🆕 화면 다국어 컨텍스트
   const { getTranslatedText } = useScreenMultiLang();
@@ -518,6 +524,9 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
           columnOrder={columnOrder}
           onHeightChange={onHeightChange}
           conditionalDisabled={conditionalDisabled}
+          onUpdateComponent={onUpdateComponent}
+          onSelectTabComponent={onSelectTabComponent}
+          selectedTabComponentId={selectedTabComponentId}
         />
       </div>
 

frontend/components/screen/ScreenDesigner.tsx

@@ -164,10 +164,22 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
   const [selectedComponent, setSelectedComponent] = useState<ComponentData | null>(null);
 
+  // 🆕 탭 내부 컴포넌트 선택 상태
+  const [selectedTabComponentInfo, setSelectedTabComponentInfo] = useState<{
+    tabsComponentId: string; // 탭 컴포넌트 ID
+    tabId: string; // 탭 ID
+    componentId: string; // 탭 내부 컴포넌트 ID
+    component: any; // 탭 내부 컴포넌트 데이터
+  } | null>(null);
+
   // 컴포넌트 선택 시 통합 패널 자동 열기
   const handleComponentSelect = useCallback(
     (component: ComponentData | null) => {
       setSelectedComponent(component);
+      // 일반 컴포넌트 선택 시 탭 내부 컴포넌트 선택 해제
+      if (component) {
+        setSelectedTabComponentInfo(null);
+      }
 
       // 컴포넌트가 선택되면 통합 패널 자동 열기
       if (component) {
@@ -177,6 +189,29 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     [openPanel],
   );
 
+  // 🆕 탭 내부 컴포넌트 선택 핸들러
+  const handleSelectTabComponent = useCallback(
+    (tabsComponentId: string, tabId: string, compId: string, comp: any) => {
+      if (!compId) {
+        // 탭 영역 빈 공간 클릭 시 선택 해제
+        setSelectedTabComponentInfo(null);
+        return;
+      }
+      
+      setSelectedTabComponentInfo({
+        tabsComponentId,
+        tabId,
+        componentId: compId,
+        component: comp,
+      });
+      // 탭 내부 컴포넌트 선택 시 일반 컴포넌트 선택 해제
+      setSelectedComponent(null);
+      openPanel("unified");
+    },
+    [openPanel],
+  );
+
+
   // 클립보드 상태
   const [clipboard, setClipboard] = useState<ComponentData[]>([]);
 
@@ -380,6 +415,96 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     [historyIndex],
   );
 
+  // 🆕 탭 내부 컴포넌트 설정 업데이트 핸들러
+  const handleUpdateTabComponentConfig = useCallback(
+    (path: string, value: any) => {
+      if (!selectedTabComponentInfo) return;
+      
+      const { tabsComponentId, tabId, componentId } = selectedTabComponentInfo;
+      
+      setLayout((prevLayout) => {
+        const tabsComponent = prevLayout.components.find((c) => c.id === tabsComponentId);
+        if (!tabsComponent) return prevLayout;
+
+        const currentConfig = (tabsComponent as any).componentConfig || {};
+        const tabs = currentConfig.tabs || [];
+
+        const updatedTabs = tabs.map((tab: any) => {
+          if (tab.id === tabId) {
+            return {
+              ...tab,
+              components: (tab.components || []).map((comp: any) => {
+                if (comp.id === componentId) {
+                  // path에 따라 적절한 속성 업데이트
+                  if (path.startsWith("componentConfig.")) {
+                    const configPath = path.replace("componentConfig.", "");
+                    return {
+                      ...comp,
+                      componentConfig: {
+                        ...comp.componentConfig,
+                        [configPath]: value,
+                      },
+                    };
+                  } else if (path.startsWith("style.")) {
+                    const stylePath = path.replace("style.", "");
+                    return {
+                      ...comp,
+                      style: {
+                        ...comp.style,
+                        [stylePath]: value,
+                      },
+                    };
+                  } else if (path.startsWith("size.")) {
+                    const sizePath = path.replace("size.", "");
+                    return {
+                      ...comp,
+                      size: {
+                        ...comp.size,
+                        [sizePath]: value,
+                      },
+                    };
+                  } else {
+                    return { ...comp, [path]: value };
+                  }
+                }
+                return comp;
+              }),
+            };
+          }
+          return tab;
+        });
+
+        const updatedComponent = {
+          ...tabsComponent,
+          componentConfig: {
+            ...currentConfig,
+            tabs: updatedTabs,
+          },
+        };
+
+        const newLayout = {
+          ...prevLayout,
+          components: prevLayout.components.map((c) =>
+            c.id === tabsComponentId ? updatedComponent : c
+          ),
+        };
+
+        // 선택된 컴포넌트 정보도 업데이트
+        const updatedComp = updatedTabs
+          .find((t: any) => t.id === tabId)
+          ?.components?.find((c: any) => c.id === componentId);
+        if (updatedComp) {
+          setSelectedTabComponentInfo((prev) =>
+            prev ? { ...prev, component: updatedComp } : null
+          );
+        }
+
+        return newLayout;
+      });
+    },
+    [selectedTabComponentInfo],
+  );
+
   // 실행취소
   const undo = useCallback(() => {
     setHistoryIndex((prevIndex) => {
@@ -2271,6 +2396,67 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         }
       }
 
+      // 🎯 탭 컨테이너 내부 드롭 처리
+      const tabsContainer = dropTarget.closest('[data-tabs-container="true"]');
+      if (tabsContainer) {
+        const containerId = tabsContainer.getAttribute("data-component-id");
+        const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
+        if (containerId && activeTabId) {
+          const targetComponent = layout.components.find((c) => c.id === containerId);
+          const compType = (targetComponent as any)?.componentType;
+          if (targetComponent && (compType === "tabs-widget" || compType === "v2-tabs-widget")) {
+            const currentConfig = (targetComponent as any).componentConfig || {};
+            const tabs = currentConfig.tabs || [];
+            
+            // 활성 탭의 드롭 위치 계산
+            const tabContentRect = tabsContainer.getBoundingClientRect();
+            const dropX = (e.clientX - tabContentRect.left) / zoomLevel;
+            const dropY = (e.clientY - tabContentRect.top) / zoomLevel;
+            
+            // 새 컴포넌트 생성
+            const newTabComponent = {
+              id: `tab_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+              componentType: component.id || component.componentType || "text-display",
+              label: component.name || component.label || "새 컴포넌트",
+              position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
+              size: component.defaultSize || { width: 200, height: 100 },
+              componentConfig: component.defaultConfig || {},
+            };
+            
+            // 해당 탭에 컴포넌트 추가
+            const updatedTabs = tabs.map((tab: any) => {
+              if (tab.id === activeTabId) {
+                return {
+                  ...tab,
+                  components: [...(tab.components || []), newTabComponent],
+                };
+              }
+              return tab;
+            });
+            
+            const updatedComponent = {
+              ...targetComponent,
+              componentConfig: {
+                ...currentConfig,
+                tabs: updatedTabs,
+              },
+            };
+            
+            const newLayout = {
+              ...layout,
+              components: layout.components.map((c) =>
+                c.id === containerId ? updatedComponent : c
+              ),
+            };
+            
+            setLayout(newLayout);
+            saveToHistory(newLayout);
+            toast.success("컴포넌트가 탭에 추가되었습니다");
+            return; // 탭 컨테이너 처리 완료
+          }
+        }
+      }
+
       const rect = canvasRef.current?.getBoundingClientRect();
       if (!rect) return;
 
@@ -2655,6 +2841,70 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           }
         }
 
+        // 🎯 탭 컨테이너 내부에 컬럼 드롭 시 처리
+        const tabsContainer = dropTarget.closest('[data-tabs-container="true"]');
+        if (tabsContainer && type === "column" && column) {
+          const containerId = tabsContainer.getAttribute("data-component-id");
+          const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
+          if (containerId && activeTabId) {
+            const targetComponent = layout.components.find((c) => c.id === containerId);
+            const compType = (targetComponent as any)?.componentType;
+            if (targetComponent && (compType === "tabs-widget" || compType === "v2-tabs-widget")) {
+              const currentConfig = (targetComponent as any).componentConfig || {};
+              const tabs = currentConfig.tabs || [];
+              
+              // 드롭 위치 계산
+              const tabContentRect = tabsContainer.getBoundingClientRect();
+              const dropX = (e.clientX - tabContentRect.left) / zoomLevel;
+              const dropY = (e.clientY - tabContentRect.top) / zoomLevel;
+              
+              // 새 컴포넌트 생성 (컬럼 기반)
+              const newTabComponent = {
+                id: `tab_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+                componentType: column.widgetType || "unified-input",
+                label: column.columnLabel || column.columnName,
+                position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
+                size: { width: 200, height: 60 },
+                componentConfig: {
+                  columnName: column.columnName,
+                  tableName: column.tableName,
+                },
+              };
+              
+              // 해당 탭에 컴포넌트 추가
+              const updatedTabs = tabs.map((tab: any) => {
+                if (tab.id === activeTabId) {
+                  return {
+                    ...tab,
+                    components: [...(tab.components || []), newTabComponent],
+                  };
+                }
+                return tab;
+              });
+              
+              const updatedComponent = {
+                ...targetComponent,
+                componentConfig: {
+                  ...currentConfig,
+                  tabs: updatedTabs,
+                },
+              };
+              
+              const newLayout = {
+                ...layout,
+                components: layout.components.map((c) =>
+                  c.id === containerId ? updatedComponent : c
+                ),
+              };
+              
+              setLayout(newLayout);
+              saveToHistory(newLayout);
+              toast.success("컬럼이 탭에 추가되었습니다");
+              return;
+            }
+          }
+        }
+
         const rect = canvasRef.current?.getBoundingClientRect();
         if (!rect) return;
 
@@ -4605,24 +4855,125 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                     </TabsContent>
 
                     <TabsContent value="properties" className="mt-0 flex-1 overflow-hidden">
-                      <UnifiedPropertiesPanel
+                      {/* 🆕 탭 내부 컴포넌트가 선택된 경우 별도 패널 표시 */}
-                        selectedComponent={selectedComponent || undefined}
+                      {selectedTabComponentInfo ? (
-                        tables={tables}
+                        <div className="flex h-full flex-col p-4">
-                        onUpdateProperty={updateComponentProperty}
+                          <div className="mb-4 flex items-center justify-between">
-                        onDeleteComponent={deleteComponent}
+                            <div>
-                        onCopyComponent={copyComponent}
+                              <h3 className="text-sm font-semibold">탭 내부 컴포넌트 설정</h3>
-                        currentTable={tables.length > 0 ? tables[0] : undefined}
+                              <p className="text-xs text-muted-foreground">
-                        currentTableName={selectedScreen?.tableName}
+                                {selectedTabComponentInfo.component.label || selectedTabComponentInfo.component.componentType}
-                        currentScreenCompanyCode={selectedScreen?.companyCode}
+                              </p>
-                        dragState={dragState}
+                            </div>
-                        onStyleChange={(style) => {
+                            <button
-                          if (selectedComponent) {
+                              className="text-xs text-muted-foreground hover:text-foreground"
-                            updateComponentProperty(selectedComponent.id, "style", style);
+                              onClick={() => setSelectedTabComponentInfo(null)}
-                          }
+                            >
-                        }}
+                              선택 해제
-                        allComponents={layout.components} // 🆕 플로우 위젯 감지용
+                            </button>
-                        menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
+                          </div>
-                      />
+                          {/* DynamicComponentConfigPanel 렌더링 */}
+                          <div className="flex-1 overflow-auto">
+                            {(() => {
+                              const DynamicConfigPanel = require("@/lib/utils/getComponentConfigPanel").DynamicComponentConfigPanel;
+                              const tabComp = selectedTabComponentInfo.component;
+                              
+                              // 탭 내부 컴포넌트를 일반 컴포넌트 형식으로 변환
+                              const componentForConfig = {
+                                id: tabComp.id,
+                                type: "component",
+                                componentType: tabComp.componentType,
+                                label: tabComp.label,
+                                position: tabComp.position,
+                                size: tabComp.size,
+                                componentConfig: tabComp.componentConfig || {},
+                                style: tabComp.style || {},
+                              };
+
+                              return (
+                                <DynamicConfigPanel
+                                  componentId={tabComp.componentType}
+                                  component={componentForConfig}
+                                  config={tabComp.componentConfig || {}}
+                                  onChange={(newConfig: any) => {
+                                    // componentConfig 전체 업데이트
+                                    const { tabsComponentId, tabId, componentId } = selectedTabComponentInfo;
+                                    const tabsComponent = layout.components.find((c) => c.id === tabsComponentId);
+                                    if (!tabsComponent) return;
+
+                                    const currentConfig = (tabsComponent as any).componentConfig || {};
+                                    const tabs = currentConfig.tabs || [];
+
+                                    const updatedTabs = tabs.map((tab: any) => {
+                                      if (tab.id === tabId) {
+                                        return {
+                                          ...tab,
+                                          components: (tab.components || []).map((comp: any) =>
+                                            comp.id === componentId
+                                              ? { ...comp, componentConfig: newConfig }
+                                              : comp
+                                          ),
+                                        };
+                                      }
+                                      return tab;
+                                    });
+
+                                    const updatedComponent = {
+                                      ...tabsComponent,
+                                      componentConfig: {
+                                        ...currentConfig,
+                                        tabs: updatedTabs,
+                                      },
+                                    };
+
+                                    const newLayout = {
+                                      ...layout,
+                                      components: layout.components.map((c) =>
+                                        c.id === tabsComponentId ? updatedComponent : c
+                                      ),
+                                    };
+
+                                    setLayout(newLayout);
+                                    saveToHistory(newLayout);
+
+                                    // 선택된 컴포넌트 정보 업데이트
+                                    const updatedComp = updatedTabs
+                                      .find((t: any) => t.id === tabId)
+                                      ?.components?.find((c: any) => c.id === componentId);
+                                    if (updatedComp) {
+                                      setSelectedTabComponentInfo({
+                                        ...selectedTabComponentInfo,
+                                        component: updatedComp,
+                                      });
+                                    }
+                                  }}
+                                  tables={tables}
+                                  allComponents={layout.components}
+                                />
+                              );
+                            })()}
+                          </div>
+                        </div>
+                      ) : (
+                        <UnifiedPropertiesPanel
+                          selectedComponent={selectedComponent || undefined}
+                          tables={tables}
+                          onUpdateProperty={updateComponentProperty}
+                          onDeleteComponent={deleteComponent}
+                          onCopyComponent={copyComponent}
+                          currentTable={tables.length > 0 ? tables[0] : undefined}
+                          currentTableName={selectedScreen?.tableName}
+                          currentScreenCompanyCode={selectedScreen?.companyCode}
+                          dragState={dragState}
+                          onStyleChange={(style) => {
+                            if (selectedComponent) {
+                              updateComponentProperty(selectedComponent.id, "style", style);
+                            }
+                          }}
+                          allComponents={layout.components} // 🆕 플로우 위젯 감지용
+                          menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
+                        />
+                      )}
                     </TabsContent>
                   </Tabs>
                 </div>
@@ -4952,6 +5303,29 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                                     updatedConfig: config,
                                   });
                                 }}
+                                // 🆕 컴포넌트 전체 업데이트 핸들러 (탭 내부 컴포넌트 위치 조정 등)
+                                onUpdateComponent={(updatedComponent) => {
+                                  const updatedComponents = layout.components.map((comp) =>
+                                    comp.id === updatedComponent.id ? updatedComponent : comp
+                                  );
+
+                                  const newLayout = {
+                                    ...layout,
+                                    components: updatedComponents,
+                                  };
+
+                                  setLayout(newLayout);
+                                  saveToHistory(newLayout);
+                                }}
+                                // 🆕 탭 내부 컴포넌트 선택 핸들러
+                                onSelectTabComponent={(tabId, compId, comp) => 
+                                  handleSelectTabComponent(component.id, tabId, compId, comp)
+                                }
+                                selectedTabComponentId={
+                                  selectedTabComponentInfo?.tabsComponentId === component.id
+                                    ? selectedTabComponentInfo.componentId
+                                    : undefined
+                                }
                               >
                                 {/* 컨테이너, 그룹, 영역, 컴포넌트의 자식 컴포넌트들 렌더링 (레이아웃은 독립적으로 렌더링) */}
                                 {(component.type === "group" ||

frontend/components/screen/config-panels/TabsConfigPanel.tsx

@@ -5,70 +5,59 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+  Select,
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+  SelectContent,
-import { Check, ChevronsUpDown, Plus, X, GripVertical, Loader2 } from "lucide-react";
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Plus,
+  X,
+  GripVertical,
+  ChevronDown,
+  ChevronRight,
+  Trash2,
+  Move,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
-import type { TabItem, TabsComponent } from "@/types/screen-management";
+import type { TabItem, TabInlineComponent } from "@/types/screen-management";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 
 interface TabsConfigPanelProps {
   config: any;
   onChange: (config: any) => void;
 }
 
-interface ScreenInfo {
-  screenId: number;
-  screenName: string;
-  screenCode: string;
-  tableName: string;
-}
-
 export function TabsConfigPanel({ config, onChange }: TabsConfigPanelProps) {
-  const [screens, setScreens] = useState<ScreenInfo[]>([]);
-  const [loading, setLoading] = useState(false);
   const [localTabs, setLocalTabs] = useState<TabItem[]>(config.tabs || []);
-
+  const [expandedTabs, setExpandedTabs] = useState<Set<string>>(new Set());
-  // 화면 목록 로드
-  useEffect(() => {
-    const loadScreens = async () => {
-      try {
-        setLoading(true);
-        
-        // API 클라이언트 동적 import (named export 사용)
-        const { apiClient } = await import("@/lib/api/client");
-        
-        // 전체 화면 목록 조회 (페이징 사이즈 크게)
-        const response = await apiClient.get("/screen-management/screens", {
-          params: { size: 1000 }
-        });
-        
-        console.log("화면 목록 조회 성공:", response.data);
-        
-        if (response.data.success && response.data.data) {
-          setScreens(response.data.data);
-        }
-      } catch (error: any) {
-        console.error("Failed to load screens:", error);
-        console.error("Error response:", error.response?.data);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadScreens();
-  }, []);
-
-  // 컴포넌트 변경 시 로컬 상태 동기화 (초기화만, 입력 중에는 동기화하지 않음)
   const [isUserEditing, setIsUserEditing] = useState(false);
-  
+
   useEffect(() => {
-    // 사용자가 입력 중이 아닐 때만 동기화
     if (!isUserEditing) {
       setLocalTabs(config.tabs || []);
     }
   }, [config.tabs, isUserEditing]);
 
+  // 탭 확장/축소 토글
+  const toggleTabExpand = (tabId: string) => {
+    setExpandedTabs((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(tabId)) {
+        newSet.delete(tabId);
+      } else {
+        newSet.add(tabId);
+      }
+      return newSet;
+    });
+  };
+
   // 탭 추가
   const handleAddTab = () => {
     const newTab: TabItem = {
@@ -76,11 +65,15 @@ export function TabsConfigPanel({ config, onChange }: TabsConfigPanelProps) {
       label: `새 탭 ${localTabs.length + 1}`,
       order: localTabs.length,
       disabled: false,
+      components: [],
     };
 
     const updatedTabs = [...localTabs, newTab];
     setLocalTabs(updatedTabs);
     onChange({ ...config, tabs: updatedTabs });
+
+    // 새 탭 자동 확장
+    setExpandedTabs((prev) => new Set([...prev, newTab.id]));
   };
 
   // 탭 제거
@@ -93,27 +86,23 @@ export function TabsConfigPanel({ config, onChange }: TabsConfigPanelProps) {
   // 탭 라벨 변경 (입력 중)
   const handleLabelChange = (tabId: string, label: string) => {
     setIsUserEditing(true);
-    const updatedTabs = localTabs.map((tab) => (tab.id === tabId ? { ...tab, label } : tab));
+    const updatedTabs = localTabs.map((tab) =>
+      tab.id === tabId ? { ...tab, label } : tab
+    );
     setLocalTabs(updatedTabs);
-    // onChange는 onBlur에서 호출
   };
 
-  // 탭 라벨 변경 완료 (포커스 아웃 시)
+  // 탭 라벨 변경 완료
   const handleLabelBlur = () => {
     setIsUserEditing(false);
     onChange({ ...config, tabs: localTabs });
   };
 
-  // 탭 화면 선택
-  const handleScreenSelect = (tabId: string, screenId: number, screenName: string) => {
-    const updatedTabs = localTabs.map((tab) => (tab.id === tabId ? { ...tab, screenId, screenName } : tab));
-    setLocalTabs(updatedTabs);
-    onChange({ ...config, tabs: updatedTabs });
-  };
-
   // 탭 비활성화 토글
   const handleDisabledToggle = (tabId: string, disabled: boolean) => {
-    const updatedTabs = localTabs.map((tab) => (tab.id === tabId ? { ...tab, disabled } : tab));
+    const updatedTabs = localTabs.map((tab) =>
+      tab.id === tabId ? { ...tab, disabled } : tab
+    );
     setLocalTabs(updatedTabs);
     onChange({ ...config, tabs: updatedTabs });
   };
@@ -130,14 +119,68 @@ export function TabsConfigPanel({ config, onChange }: TabsConfigPanelProps) {
 
     const newTabs = [...localTabs];
     const targetIndex = direction === "up" ? index - 1 : index + 1;
-    [newTabs[index], newTabs[targetIndex]] = [newTabs[targetIndex], newTabs[index]];
+    [newTabs[index], newTabs[targetIndex]] = [
+      newTabs[targetIndex],
+      newTabs[index],
+    ];
 
-    // order 값 재조정
     const updatedTabs = newTabs.map((tab, idx) => ({ ...tab, order: idx }));
     setLocalTabs(updatedTabs);
     onChange({ ...config, tabs: updatedTabs });
   };
 
+  // 컴포넌트 제거
+  const handleRemoveComponent = (tabId: string, componentId: string) => {
+    const updatedTabs = localTabs.map((tab) => {
+      if (tab.id === tabId) {
+        return {
+          ...tab,
+          components: (tab.components || []).filter(
+            (comp) => comp.id !== componentId
+          ),
+        };
+      }
+      return tab;
+    });
+    setLocalTabs(updatedTabs);
+    onChange({ ...config, tabs: updatedTabs });
+  };
+
+  // 컴포넌트 위치 변경
+  const handleComponentPositionChange = (
+    tabId: string,
+    componentId: string,
+    field: "x" | "y" | "width" | "height",
+    value: number
+  ) => {
+    const updatedTabs = localTabs.map((tab) => {
+      if (tab.id === tabId) {
+        return {
+          ...tab,
+          components: (tab.components || []).map((comp) => {
+            if (comp.id === componentId) {
+              if (field === "x" || field === "y") {
+                return {
+                  ...comp,
+                  position: { ...comp.position, [field]: value },
+                };
+              } else {
+                return {
+                  ...comp,
+                  size: { ...comp.size, [field]: value },
+                };
+              }
+            }
+            return comp;
+          }),
+        };
+      }
+      return tab;
+    });
+    setLocalTabs(updatedTabs);
+    onChange({ ...config, tabs: updatedTabs });
+  };
+
   return (
     <div className="space-y-6 p-4">
       <div>
@@ -193,7 +236,9 @@ export function TabsConfigPanel({ config, onChange }: TabsConfigPanelProps) {
             </div>
             <Switch
               checked={config.persistSelection || false}
-              onCheckedChange={(checked) => onChange({ ...config, persistSelection: checked })}
+              onCheckedChange={(checked) =>
+                onChange({ ...config, persistSelection: checked })
+              }
             />
           </div>
 
@@ -207,7 +252,9 @@ export function TabsConfigPanel({ config, onChange }: TabsConfigPanelProps) {
             </div>
             <Switch
               checked={config.allowCloseable || false}
-              onCheckedChange={(checked) => onChange({ ...config, allowCloseable: checked })}
+              onCheckedChange={(checked) =>
+                onChange({ ...config, allowCloseable: checked })
+              }
             />
           </div>
         </div>
@@ -237,168 +284,157 @@ export function TabsConfigPanel({ config, onChange }: TabsConfigPanelProps) {
         ) : (
           <div className="space-y-3">
             {localTabs.map((tab, index) => (
-              <div
+              <Collapsible
                 key={tab.id}
-                className="rounded-lg border bg-card p-3 shadow-sm"
+                open={expandedTabs.has(tab.id)}
+                onOpenChange={() => toggleTabExpand(tab.id)}
               >
-                <div className="mb-3 flex items-center justify-between">
+                <div className="rounded-lg border bg-card shadow-sm">
-                  <div className="flex items-center gap-2">
+                  {/* 탭 헤더 */}
-                    <GripVertical className="h-4 w-4 text-muted-foreground" />
+                  <div className="flex items-center justify-between p-3">
-                    <span className="text-xs font-medium">탭 {index + 1}</span>
+                    <div className="flex items-center gap-2">
-                  </div>
+                      <GripVertical className="h-4 w-4 cursor-grab text-muted-foreground" />
-                  <div className="flex items-center gap-1">
+                      <CollapsibleTrigger asChild>
-                    <Button
+                        <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
-                      onClick={() => handleMoveTab(tab.id, "up")}
+                          {expandedTabs.has(tab.id) ? (
-                      disabled={index === 0}
+                            <ChevronDown className="h-4 w-4" />
-                      size="sm"
+                          ) : (
-                      variant="ghost"
+                            <ChevronRight className="h-4 w-4" />
-                      className="h-7 w-7 p-0"
+                          )}
-                    >
+                        </Button>
-                      ↑
+                      </CollapsibleTrigger>
-                    </Button>
+                      <span className="text-xs font-medium">
-                    <Button
+                        {tab.label || `탭 ${index + 1}`}
-                      onClick={() => handleMoveTab(tab.id, "down")}
+                      </span>
-                      disabled={index === localTabs.length - 1}
+                      {tab.components && tab.components.length > 0 && (
-                      size="sm"
+                        <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] text-primary">
-                      variant="ghost"
+                          {tab.components.length}개 컴포넌트
-                      className="h-7 w-7 p-0"
+                        </span>
-                    >
+                      )}
-                      ↓
+                    </div>
-                    </Button>
+                    <div className="flex items-center gap-1">
-                    <Button
+                      <Button
-                      onClick={() => handleRemoveTab(tab.id)}
+                        onClick={() => handleMoveTab(tab.id, "up")}
-                      size="sm"
+                        disabled={index === 0}
-                      variant="ghost"
+                        size="sm"
-                      className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                        variant="ghost"
-                    >
+                        className="h-7 w-7 p-0"
-                      <X className="h-3 w-3" />
+                      >
-                    </Button>
+                        ↑
-                  </div>
+                      </Button>
-                </div>
+                      <Button
-
+                        onClick={() => handleMoveTab(tab.id, "down")}
-                <div className="space-y-3">
+                        disabled={index === localTabs.length - 1}
-                  {/* 탭 라벨 */}
+                        size="sm"
-                  <div>
+                        variant="ghost"
-                    <Label className="text-xs">탭 라벨</Label>
+                        className="h-7 w-7 p-0"
-                    <Input
+                      >
-                      value={tab.label}
+                        ↓
-                      onChange={(e) => handleLabelChange(tab.id, e.target.value)}
+                      </Button>
-                      onBlur={handleLabelBlur}
+                      <Button
-                      placeholder="탭 이름"
+                        onClick={() => handleRemoveTab(tab.id)}
-                      className="h-8 text-xs sm:h-9 sm:text-sm"
+                        size="sm"
-                    />
+                        variant="ghost"
+                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                      >
+                        <X className="h-3 w-3" />
+                      </Button>
+                    </div>
                   </div>
 
-                  {/* 화면 선택 */}
+                  {/* 탭 컨텐츠 */}
-                  <div>
+                  <CollapsibleContent>
-                    <Label className="text-xs">연결된 화면</Label>
+                    <div className="space-y-4 border-t p-3">
-                    {loading ? (
+                      {/* 탭 라벨 */}
-                      <div className="flex items-center gap-2 rounded-md border px-3 py-2">
+                      <div>
-                        <Loader2 className="h-3 w-3 animate-spin" />
+                        <Label className="text-xs">탭 라벨</Label>
-                        <span className="text-muted-foreground text-xs">로딩 중...</span>
+                        <Input
+                          value={tab.label}
+                          onChange={(e) =>
+                            handleLabelChange(tab.id, e.target.value)
+                          }
+                          onBlur={handleLabelBlur}
+                          placeholder="탭 이름"
+                          className="h-8 text-xs sm:h-9 sm:text-sm"
+                        />
                       </div>
-                    ) : (
-                      <ScreenSelectCombobox
-                        screens={screens}
-                        selectedScreenId={tab.screenId}
-                        onSelect={(screenId, screenName) =>
-                          handleScreenSelect(tab.id, screenId, screenName)
-                        }
-                      />
-                    )}
-                    {tab.screenName && (
-                      <p className="text-muted-foreground mt-1 text-xs">
-                        선택된 화면: {tab.screenName}
-                      </p>
-                    )}
-                  </div>
 
-                  {/* 비활성화 */}
+                      {/* 비활성화 */}
-                  <div className="flex items-center justify-between">
+                      <div className="flex items-center justify-between">
-                    <Label className="text-xs">비활성화</Label>
+                        <Label className="text-xs">비활성화</Label>
-                    <Switch
+                        <Switch
-                      checked={tab.disabled || false}
+                          checked={tab.disabled || false}
-                      onCheckedChange={(checked) => handleDisabledToggle(tab.id, checked)}
+                          onCheckedChange={(checked) =>
-                    />
+                            handleDisabledToggle(tab.id, checked)
-                  </div>
+                          }
+                        />
+                      </div>
+
+                      {/* 컴포넌트 목록 */}
+                      <div>
+                        <Label className="mb-2 block text-xs">
+                          배치된 컴포넌트
+                        </Label>
+                        {!tab.components || tab.components.length === 0 ? (
+                          <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
+                            <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
+                            <p className="text-muted-foreground text-xs">
+                              디자인 화면에서 컴포넌트를 드래그하여 추가하세요
+                            </p>
+                          </div>
+                        ) : (
+                          <div className="space-y-2">
+                            {tab.components.map((comp: TabInlineComponent) => (
+                              <div
+                                key={comp.id}
+                                className="flex items-center justify-between rounded-md border bg-background p-2"
+                              >
+                                <div className="flex-1">
+                                  <p className="text-xs font-medium">
+                                    {comp.label || comp.componentType}
+                                  </p>
+                                  <p className="text-muted-foreground text-[10px]">
+                                    {comp.componentType} | 위치: ({comp.position?.x || 0},{" "}
+                                    {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x
+                                    {comp.size?.height || 0}
+                                  </p>
+                                </div>
+                                <Button
+                                  onClick={() =>
+                                    handleRemoveComponent(tab.id, comp.id)
+                                  }
+                                  size="sm"
+                                  variant="ghost"
+                                  className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </CollapsibleContent>
                 </div>
-              </div>
+              </Collapsible>
             ))}
           </div>
         )}
       </div>
+
+      {/* 사용 안내 */}
+      <div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
+        <h4 className="mb-1 text-xs font-semibold text-blue-900">
+          컴포넌트 추가 방법
+        </h4>
+        <ol className="list-inside list-decimal space-y-1 text-[10px] text-blue-800">
+          <li>디자인 화면에서 탭을 선택합니다</li>
+          <li>좌측 패널에서 원하는 컴포넌트를 드래그합니다</li>
+          <li>선택한 탭 영역에 드롭하여 배치합니다</li>
+          <li>컴포넌트를 드래그하여 위치를 조정합니다</li>
+        </ol>
+      </div>
     </div>
   );
 }
-
-// 화면 선택 Combobox 컴포넌트
-function ScreenSelectCombobox({
-  screens,
-  selectedScreenId,
-  onSelect,
-}: {
-  screens: ScreenInfo[];
-  selectedScreenId?: number;
-  onSelect: (screenId: number, screenName: string) => void;
-}) {
-  const [open, setOpen] = useState(false);
-
-  const selectedScreen = screens.find((s) => s.screenId === selectedScreenId);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="h-8 w-full justify-between text-xs sm:h-9 sm:text-sm"
-        >
-          {selectedScreen ? selectedScreen.screenName : "화면 선택"}
-          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50 sm:h-4 sm:w-4" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="p-0"
-        style={{ width: "var(--radix-popover-trigger-width)" }}
-        align="start"
-      >
-        <Command>
-          <CommandInput placeholder="화면 검색..." className="text-xs sm:text-sm" />
-          <CommandList>
-            <CommandEmpty className="text-xs sm:text-sm">
-              화면을 찾을 수 없습니다.
-            </CommandEmpty>
-            <CommandGroup>
-              {screens.map((screen) => (
-                <CommandItem
-                  key={screen.screenId}
-                  value={screen.screenName}
-                  onSelect={() => {
-                    onSelect(screen.screenId, screen.screenName);
-                    setOpen(false);
-                  }}
-                  className="text-xs sm:text-sm"
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-3 w-3 sm:h-4 sm:w-4",
-                      selectedScreenId === screen.screenId ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  <div className="flex flex-col">
-                    <span className="font-medium">{screen.screenName}</span>
-                    <span className="text-muted-foreground text-[10px]">
-                      코드: {screen.screenCode} | 테이블: {screen.tableName}
-                    </span>
-                  </div>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-

frontend/components/screen/widgets/TabsWidget.tsx

@@ -1,23 +1,37 @@
 "use client";
 
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
-import { X, Loader2 } from "lucide-react";
+import { X } from "lucide-react";
-import type { TabsComponent, TabItem } from "@/types/screen-management";
+import type { TabsComponent, TabItem, TabInlineComponent } from "@/types/screen-management";
-import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";
 import { cn } from "@/lib/utils";
 import { useActiveTab } from "@/contexts/ActiveTabContext";
+import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 
 interface TabsWidgetProps {
   component: TabsComponent;
   className?: string;
   style?: React.CSSProperties;
-  menuObjid?: number; // 부모 화면의 메뉴 OBJID
+  menuObjid?: number;
+  formData?: Record<string, any>;
+  onFormDataChange?: (data: Record<string, any>) => void;
+  isDesignMode?: boolean; // 디자인 모드 여부
+  onComponentSelect?: (tabId: string, componentId: string) => void; // 컴포넌트 선택 콜백
+  selectedComponentId?: string; // 선택된 컴포넌트 ID
 }
 
-export function TabsWidget({ component, className, style, menuObjid }: TabsWidgetProps) {
+export function TabsWidget({
-  // ActiveTab context 사용
+  component,
+  className,
+  style,
+  menuObjid,
+  formData = {},
+  onFormDataChange,
+  isDesignMode = false,
+  onComponentSelect,
+  selectedComponentId,
+}: TabsWidgetProps) {
   const { setActiveTab, removeTabsComponent } = useActiveTab();
   const {
     tabs = [],
@@ -28,7 +42,6 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
     persistSelection = false,
   } = component;
 
-
   const storageKey = `tabs-${component.id}-selected`;
 
   // 초기 선택 탭 결정
@@ -44,9 +57,6 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
 
   const [selectedTab, setSelectedTab] = useState<string>(getInitialTab());
   const [visibleTabs, setVisibleTabs] = useState<TabItem[]>(tabs);
-  const [loadingScreens, setLoadingScreens] = useState<Record<string, boolean>>({});
-  const [screenLayouts, setScreenLayouts] = useState<Record<number, any>>({});
-  // 🆕 한 번이라도 선택된 탭 추적 (지연 로딩 + 캐싱)
   const [mountedTabs, setMountedTabs] = useState<Set<string>>(() => new Set([getInitialTab()]));
 
   // 컴포넌트 탭 목록 변경 시 동기화
@@ -59,14 +69,12 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
     if (persistSelection && typeof window !== "undefined") {
       localStorage.setItem(storageKey, selectedTab);
     }
-    
+
-    // ActiveTab Context에 현재 활성 탭 정보 등록
+    const currentTabInfo = visibleTabs.find((t) => t.id === selectedTab);
-    const currentTabInfo = visibleTabs.find(t => t.id === selectedTab);
     if (currentTabInfo) {
       setActiveTab(component.id, {
         tabId: selectedTab,
         tabsComponentId: component.id,
-        screenId: currentTabInfo.screenId,
         label: currentTabInfo.label,
       });
     }
@@ -79,53 +87,16 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
     };
   }, [component.id, removeTabsComponent]);
 
-  // 초기 로드 시 선택된 탭의 화면 불러오기
-  useEffect(() => {
-    const currentTab = visibleTabs.find((t) => t.id === selectedTab);
-    if (currentTab && currentTab.screenId && !screenLayouts[currentTab.screenId]) {
-      loadScreenLayout(currentTab.screenId);
-    }
-  }, [selectedTab, visibleTabs]);
-
-  // 화면 레이아웃 로드
-  const loadScreenLayout = async (screenId: number) => {
-    if (screenLayouts[screenId]) {
-      return; // 이미 로드됨
-    }
-
-    setLoadingScreens((prev) => ({ ...prev, [screenId]: true }));
-
-    try {
-      const { apiClient } = await import("@/lib/api/client");
-      const response = await apiClient.get(`/screen-management/screens/${screenId}/layout`);
-      
-      if (response.data.success && response.data.data) {
-        setScreenLayouts((prev) => ({ ...prev, [screenId]: response.data.data }));
-      }
-    } catch (error) {
-      console.error(`화면 레이아웃 로드 실패 ${screenId}:`, error);
-    } finally {
-      setLoadingScreens((prev) => ({ ...prev, [screenId]: false }));
-    }
-  };
-
   // 탭 변경 핸들러
   const handleTabChange = (tabId: string) => {
     setSelectedTab(tabId);
-    
+
-    // 마운트된 탭 목록에 추가 (한 번 마운트되면 유지)
+    setMountedTabs((prev) => {
-    setMountedTabs(prev => {
       if (prev.has(tabId)) return prev;
       const newSet = new Set(prev);
       newSet.add(tabId);
       return newSet;
     });
-
-    // 해당 탭의 화면 로드
-    const tab = visibleTabs.find((t) => t.id === tabId);
-    if (tab && tab.screenId && !screenLayouts[tab.screenId]) {
-      loadScreenLayout(tab.screenId);
-    }
   };
 
   // 탭 닫기 핸들러
@@ -135,7 +106,6 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
     const updatedTabs = visibleTabs.filter((tab) => tab.id !== tabId);
     setVisibleTabs(updatedTabs);
 
-    // 닫은 탭이 선택된 탭이었다면 다음 탭 선택
     if (selectedTab === tabId && updatedTabs.length > 0) {
       setSelectedTab(updatedTabs[0].id);
     }
@@ -153,6 +123,68 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
     return `${baseClass} ${variantClass}`;
   };
 
+  // 인라인 컴포넌트 렌더링
+  const renderTabComponents = (tab: TabItem) => {
+    const components = tab.components || [];
+
+    if (components.length === 0) {
+      return (
+        <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+          <p className="text-muted-foreground text-sm">
+            {isDesignMode ? "컴포넌트를 드래그하여 추가하세요" : "컴포넌트가 없습니다"}
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="relative h-full w-full">
+        {components.map((comp: TabInlineComponent) => {
+          const isSelected = selectedComponentId === comp.id;
+
+          return (
+            <div
+              key={comp.id}
+              className={cn(
+                "absolute",
+                isDesignMode && "cursor-move",
+                isDesignMode && isSelected && "ring-2 ring-primary ring-offset-2"
+              )}
+              style={{
+                left: comp.position?.x || 0,
+                top: comp.position?.y || 0,
+                width: comp.size?.width || 200,
+                height: comp.size?.height || 100,
+              }}
+              onClick={(e) => {
+                if (isDesignMode && onComponentSelect) {
+                  e.stopPropagation();
+                  onComponentSelect(tab.id, comp.id);
+                }
+              }}
+            >
+              <DynamicComponentRenderer
+                component={{
+                  id: comp.id,
+                  componentType: comp.componentType,
+                  label: comp.label,
+                  position: comp.position,
+                  size: comp.size,
+                  componentConfig: comp.componentConfig || {},
+                  style: comp.style,
+                }}
+                formData={formData}
+                onFormDataChange={onFormDataChange}
+                menuObjid={menuObjid}
+                isDesignMode={isDesignMode}
+              />
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
   if (visibleTabs.length === 0) {
     return (
       <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
@@ -162,7 +194,7 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
   }
 
   return (
-    <div className="flex h-full w-full flex-col pt-4" style={style}>
+    <div className={cn("flex h-full w-full flex-col pt-4", className)} style={style}>
       <Tabs
         value={selectedTab}
         onValueChange={handleTabChange}
@@ -175,6 +207,11 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
               <div key={tab.id} className="relative">
                 <TabsTrigger value={tab.id} disabled={tab.disabled} className="relative pr-8">
                   {tab.label}
+                  {tab.components && tab.components.length > 0 && (
+                    <span className="ml-1 text-xs text-muted-foreground">
+                      ({tab.components.length})
+                    </span>
+                  )}
                 </TabsTrigger>
                 {allowCloseable && (
                   <Button
@@ -191,86 +228,19 @@ export function TabsWidget({ component, className, style, menuObjid }: TabsWidge
           </TabsList>
         </div>
 
-        {/* 🆕 forceMount + CSS 숨김으로 탭 전환 시 리렌더링 방지 */}
         <div className="relative flex-1 overflow-hidden">
           {visibleTabs.map((tab) => {
-            // 한 번도 선택되지 않은 탭은 렌더링하지 않음 (지연 로딩)
             const shouldRender = mountedTabs.has(tab.id);
             const isActive = selectedTab === tab.id;
-            
+
             return (
-              <TabsContent 
+              <TabsContent
-                key={tab.id} 
+                key={tab.id}
-                value={tab.id} 
+                value={tab.id}
-                forceMount // 🆕 DOM에 항상 유지
+                forceMount
-                className={cn(
+                className={cn("h-full", !isActive && "hidden")}
-                  "h-full",
-                  !isActive && "hidden" // 🆕 비활성 탭은 CSS로 숨김
-                )}
               >
-                {/* 한 번 마운트된 탭만 내용 렌더링 */}
+                {shouldRender && renderTabComponents(tab)}
-                {shouldRender && (
-                  <>
-                    {tab.screenId ? (
-                      loadingScreens[tab.screenId] ? (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Loader2 className="h-8 w-8 animate-spin text-primary" />
-                          <span className="text-muted-foreground ml-2">화면 로딩 중...</span>
-                        </div>
-                      ) : screenLayouts[tab.screenId] ? (
-                        (() => {
-                          const layoutData = screenLayouts[tab.screenId];
-                          const { components = [], screenResolution } = layoutData;
-                          
-
-                          const designWidth = screenResolution?.width || 1920;
-                          const designHeight = screenResolution?.height || 1080;
-
-                          return (
-                            <div 
-                              className="relative h-full w-full overflow-auto bg-background"
-                              style={{
-                                minHeight: `${designHeight}px`,
-                              }}
-                            >
-                              <div
-                                className="relative"
-                                style={{
-                                  width: `${designWidth}px`,
-                                  height: `${designHeight}px`,
-                                  margin: "0 auto",
-                                }}
-                              >
-                                {components.map((comp: any) => (
-                                  <InteractiveScreenViewerDynamic
-                                    key={comp.id}
-                                    component={comp}
-                                    allComponents={components}
-                                    screenInfo={{
-                                      id: tab.screenId,
-                                      tableName: layoutData.tableName,
-                                    }}
-                                    menuObjid={menuObjid}
-                                    parentTabId={tab.id}
-                                    parentTabsComponentId={component.id}
-                                  />
-                                ))}
-                              </div>
-                            </div>
-                          );
-                        })()
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <p className="text-muted-foreground text-sm">화면을 불러올 수 없습니다</p>
-                        </div>
-                      )
-                    ) : (
-                      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
-                        <p className="text-muted-foreground text-sm">연결된 화면이 없습니다</p>
-                      </div>
-                    )}
-                  </>
-                )}
               </TabsContent>
             );
           })}

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -152,6 +152,11 @@ export interface DynamicComponentRendererProps {
   tableDisplayData?: any[]; // 🆕 화면 표시 데이터
   // 플로우 선택된 데이터 정보 (플로우 위젯 선택 액션용)
   flowSelectedData?: any[];
+  // 🆕 컴포넌트 업데이트 콜백 (탭 내부 컴포넌트 위치 조정 등)
+  onUpdateComponent?: (updatedComponent: any) => void;
+  // 🆕 탭 내부 컴포넌트 선택 콜백
+  onSelectTabComponent?: (tabId: string, compId: string, comp: any) => void;
+  selectedTabComponentId?: string;
   flowSelectedStepId?: number | null;
   onFlowSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
   // 테이블 새로고침 키
@@ -754,6 +759,11 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           // 🆕 탭 관련 정보 전달 (탭 내부의 테이블 컴포넌트에서 사용)
           parentTabId: props.parentTabId,
           parentTabsComponentId: props.parentTabsComponentId,
+          // 🆕 컴포넌트 업데이트 콜백 (탭 내부 컴포넌트 위치 조정 등)
+          onUpdateComponent: props.onUpdateComponent,
+          // 🆕 탭 내부 컴포넌트 선택 콜백
+          onSelectTabComponent: props.onSelectTabComponent,
+          selectedTabComponentId: props.selectedTabComponentId,
         };
 
         // 렌더러가 클래스인지 함수인지 확인

frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx

@@ -1,21 +1,357 @@
 "use client";
 
-import React from "react";
+import React, { useState, useRef, useCallback } from "react";
 import { ComponentRegistry } from "../../ComponentRegistry";
 import { ComponentCategory } from "@/types/component";
-import { Folder } from "lucide-react";
+import { Folder, Plus, Move, Settings, Trash2 } from "lucide-react";
-import type { TabsComponent, TabItem } from "@/types/screen-management";
+import type { TabItem, TabInlineComponent } from "@/types/screen-management";
+import { cn } from "@/lib/utils";
+import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
+
+// 디자인 모드용 탭 에디터 컴포넌트
+const TabsDesignEditor: React.FC<{
+  component: any;
+  tabs: TabItem[];
+  onUpdateComponent?: (updatedComponent: any) => void;
+  onSelectTabComponent?: (tabId: string, compId: string, comp: TabInlineComponent) => void;
+  selectedTabComponentId?: string;
+}> = ({ component, tabs, onUpdateComponent, onSelectTabComponent, selectedTabComponentId }) => {
+  const [activeTabId, setActiveTabId] = useState<string>(tabs[0]?.id || "");
+  const [draggingCompId, setDraggingCompId] = useState<string | null>(null);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const activeTab = tabs.find((t) => t.id === activeTabId);
+
+  const getTabStyle = (tab: TabItem) => {
+    const isActive = tab.id === activeTabId;
+    return cn(
+      "px-4 py-2 text-sm font-medium cursor-pointer transition-colors",
+      isActive
+        ? "bg-background border-b-2 border-primary text-primary"
+        : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+    );
+  };
+
+  // 컴포넌트 삭제
+  const handleDeleteComponent = useCallback(
+    (compId: string) => {
+      if (!onUpdateComponent) return;
+      
+      const updatedTabs = tabs.map((tab) => {
+        if (tab.id === activeTabId) {
+          return {
+            ...tab,
+            components: (tab.components || []).filter((c) => c.id !== compId),
+          };
+        }
+        return tab;
+      });
+
+      onUpdateComponent({
+        ...component,
+        componentConfig: {
+          ...component.componentConfig,
+          tabs: updatedTabs,
+        },
+      });
+    },
+    [activeTabId, component, onUpdateComponent, tabs]
+  );
+
+  // 컴포넌트 드래그 시작
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent, comp: TabInlineComponent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      
+      if (!containerRef.current) return;
+      
+      const targetElement = (e.currentTarget as HTMLElement);
+      const targetRect = targetElement.getBoundingClientRect();
+      const containerRect = containerRef.current.getBoundingClientRect();
+      
+      // 스크롤 위치 고려
+      const scrollLeft = containerRef.current.scrollLeft;
+      const scrollTop = containerRef.current.scrollTop;
+      
+      // 마우스 클릭 위치에서 컴포넌트의 좌상단까지의 오프셋
+      const offsetX = e.clientX - targetRect.left;
+      const offsetY = e.clientY - targetRect.top;
+      
+      // 초기 컨테이너 위치 저장
+      const initialContainerX = containerRect.left;
+      const initialContainerY = containerRect.top;
+      
+      setDraggingCompId(comp.id);
+      setDragOffset({ x: offsetX, y: offsetY });
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        if (!containerRef.current) return;
+        
+        // 현재 컨테이너의 위치 가져오기 (스크롤/리사이즈 고려)
+        const currentContainerRect = containerRef.current.getBoundingClientRect();
+        const currentScrollLeft = containerRef.current.scrollLeft;
+        const currentScrollTop = containerRef.current.scrollTop;
+        
+        // 컨테이너 내에서의 위치 계산 (스크롤 포함)
+        const newX = moveEvent.clientX - currentContainerRect.left - offsetX + currentScrollLeft;
+        const newY = moveEvent.clientY - currentContainerRect.top - offsetY + currentScrollTop;
+
+        // 실시간 위치 업데이트 (시각적 피드백)
+        const draggedElement = document.querySelector(
+          `[data-tab-comp-id="${comp.id}"]`
+        ) as HTMLElement;
+        if (draggedElement) {
+          draggedElement.style.left = `${Math.max(0, newX)}px`;
+          draggedElement.style.top = `${Math.max(0, newY)}px`;
+        }
+      };
+
+      const handleMouseUp = (upEvent: MouseEvent) => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        setDraggingCompId(null);
+        
+        if (!containerRef.current) {
+          return;
+        }
+
+        const currentContainerRect = containerRef.current.getBoundingClientRect();
+        const currentScrollLeft = containerRef.current.scrollLeft;
+        const currentScrollTop = containerRef.current.scrollTop;
+        
+        const newX = upEvent.clientX - currentContainerRect.left - offsetX + currentScrollLeft;
+        const newY = upEvent.clientY - currentContainerRect.top - offsetY + currentScrollTop;
+
+        // 탭 컴포넌트 위치 업데이트
+        if (onUpdateComponent) {
+          const updatedTabs = tabs.map((tab) => {
+            if (tab.id === activeTabId) {
+              return {
+                ...tab,
+                components: (tab.components || []).map((c) =>
+                  c.id === comp.id
+                    ? {
+                        ...c,
+                        position: {
+                          x: Math.max(0, Math.round(newX)),
+                          y: Math.max(0, Math.round(newY)),
+                        },
+                      }
+                    : c
+                ),
+              };
+            }
+            return tab;
+          });
+
+          onUpdateComponent({
+            ...component,
+            componentConfig: {
+              ...component.componentConfig,
+              tabs: updatedTabs,
+            },
+          });
+        }
+
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        setDraggingCompId(null);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [activeTabId, component, onUpdateComponent, tabs]
+  );
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-background">
+      {/* 탭 헤더 */}
+      <div className="flex items-center border-b bg-muted/30">
+        {tabs.length > 0 ? (
+          tabs.map((tab) => (
+            <div
+              key={tab.id}
+              className={getTabStyle(tab)}
+              onClick={(e) => {
+                e.stopPropagation();
+                setActiveTabId(tab.id);
+                onSelectTabComponent?.(null);
+              }}
+            >
+              {tab.label || "탭"}
+              {tab.components && tab.components.length > 0 && (
+                <span className="ml-1 text-xs text-muted-foreground">
+                  ({tab.components.length})
+                </span>
+              )}
+            </div>
+          ))
+        ) : (
+          <div className="px-4 py-2 text-sm text-muted-foreground">
+            탭이 없습니다
+          </div>
+        )}
+      </div>
+
+      {/* 탭 컨텐츠 영역 - 드롭 영역 */}
+      <div
+        ref={containerRef}
+        className="relative flex-1 overflow-hidden"
+        data-tabs-container="true"
+        data-component-id={component.id}
+        data-active-tab-id={activeTabId}
+        onClick={() => onSelectTabComponent?.(activeTabId, "", {} as TabInlineComponent)}
+      >
+        {activeTab ? (
+          <div className="absolute inset-0 overflow-auto p-2">
+            {activeTab.components && activeTab.components.length > 0 ? (
+              <div className="relative h-full w-full">
+                {activeTab.components.map((comp: TabInlineComponent) => {
+                  const isSelected = selectedTabComponentId === comp.id;
+                  const isDragging = draggingCompId === comp.id;
+
+                  // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
+                  const componentData = {
+                    id: comp.id,
+                    type: "component" as const,
+                    componentType: comp.componentType,
+                    label: comp.label,
+                    position: comp.position || { x: 0, y: 0 },
+                    size: comp.size || { width: 200, height: 100 },
+                    componentConfig: comp.componentConfig || {},
+                    style: comp.style || {},
+                  };
+
+                  return (
+                    <div
+                      key={comp.id}
+                      data-tab-comp-id={comp.id}
+                      className={cn(
+                        "absolute rounded border bg-white shadow-sm transition-all",
+                        isSelected
+                          ? "border-primary ring-2 ring-primary/30"
+                          : "border-gray-200 hover:border-primary/50",
+                        isDragging && "opacity-80 shadow-lg"
+                      )}
+                      style={{
+                        left: comp.position?.x || 0,
+                        top: comp.position?.y || 0,
+                        width: comp.size?.width || 200,
+                        height: comp.size?.height || 100,
+                        zIndex: isDragging ? 100 : isSelected ? 10 : 1,
+                      }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onSelectTabComponent?.(activeTabId, comp.id, comp);
+                      }}
+                    >
+                      {/* 드래그 핸들 - 상단 */}
+                      <div
+                        className="absolute left-0 right-0 top-0 z-10 flex h-5 cursor-move items-center justify-between bg-gray-100/80 px-1"
+                        onMouseDown={(e) => handleDragStart(e, comp)}
+                      >
+                        <div className="flex items-center gap-1">
+                          <Move className="h-3 w-3 text-gray-400" />
+                          <span className="text-[10px] text-gray-500 truncate max-w-[120px]">
+                            {comp.label || comp.componentType}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <button
+                            className="rounded p-0.5 hover:bg-gray-200"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onSelectTabComponent?.(activeTabId, comp.id, comp);
+                            }}
+                            title="설정"
+                          >
+                            <Settings className="h-3 w-3 text-gray-500" />
+                          </button>
+                          <button
+                            className="rounded p-0.5 hover:bg-red-100"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleDeleteComponent(comp.id);
+                            }}
+                            title="삭제"
+                          >
+                            <Trash2 className="h-3 w-3 text-red-500" />
+                          </button>
+                        </div>
+                      </div>
+
+                      {/* 실제 컴포넌트 렌더링 */}
+                      <div className="h-full w-full pt-5 overflow-hidden pointer-events-none">
+                        <DynamicComponentRenderer
+                          component={componentData as any}
+                          isDesignMode={true}
+                          formData={{}}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
+                <Plus className="mb-2 h-8 w-8 text-gray-400" />
+                <p className="text-sm font-medium text-gray-500">
+                  컴포넌트를 드래그하여 추가
+                </p>
+                <p className="mt-1 text-xs text-gray-400">
+                  좌측 패널에서 컴포넌트를 이 영역에 드롭하세요
+                </p>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <p className="text-sm text-muted-foreground">
+              설정 패널에서 탭을 추가하세요
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
 
 // TabsWidget 래퍼 컴포넌트
 const TabsWidgetWrapper: React.FC<any> = (props) => {
-  const { component, ...restProps } = props;
+  const { 
-  
+    component, 
+    isDesignMode, 
+    onUpdateComponent,
+    onSelectTabComponent,
+    selectedTabComponentId,
+    ...restProps 
+  } = props;
+
   // componentConfig에서 탭 정보 추출
   const tabsConfig = component.componentConfig || {};
+  const tabs: TabItem[] = tabsConfig.tabs || [];
+  
+  // 🎯 디자인 모드에서는 드롭 가능한 에디터 UI 렌더링
+  if (isDesignMode) {
+    return (
+      <TabsDesignEditor
+        component={component}
+        tabs={tabs}
+        onUpdateComponent={onUpdateComponent}
+        onSelectTabComponent={onSelectTabComponent}
+        selectedTabComponentId={selectedTabComponentId}
+      />
+    );
+  }
+
+  // 실행 모드에서는 TabsWidget 렌더링
   const tabsComponent = {
     ...component,
     type: "tabs" as const,
-    tabs: tabsConfig.tabs || [],
+    tabs: tabs,
     defaultTab: tabsConfig.defaultTab,
     orientation: tabsConfig.orientation || "horizontal",
     variant: tabsConfig.variant || "default",
@@ -23,10 +359,9 @@ const TabsWidgetWrapper: React.FC<any> = (props) => {
     persistSelection: tabsConfig.persistSelection || false,
   };
 
+  const TabsWidget =
+    require("@/components/screen/widgets/TabsWidget").TabsWidget;
 
-  // TabsWidget 동적 로드
-  const TabsWidget = require("@/components/screen/widgets/TabsWidget").TabsWidget;
-  
   return (
     <div className="h-full w-full">
       <TabsWidget component={tabsComponent} {...restProps} />
@@ -36,26 +371,49 @@ const TabsWidgetWrapper: React.FC<any> = (props) => {
 
 /**
  * 탭 컴포넌트 정의
- * 
+ *
- * 여러 화면을 탭으로 구분하여 전환할 수 있는 컴포넌트
+ * 탭별로 컴포넌트를 자유롭게 배치할 수 있는 레이아웃 컴포넌트
  */
 ComponentRegistry.registerComponent({
   id: "v2-tabs-widget",
   name: "탭 컴포넌트",
-  description: "화면을 탭으로 전환할 수 있는 컴포넌트입니다. 각 탭마다 다른 화면을 연결할 수 있습니다.",
+  description:
+    "탭별로 컴포넌트를 자유롭게 배치할 수 있는 레이아웃 컴포넌트입니다.",
   category: ComponentCategory.LAYOUT,
-  webType: "text" as any, // 레이아웃 컴포넌트이므로 임시값
+  webType: "text" as any,
-  component: TabsWidgetWrapper, // ✅ 실제 TabsWidget 렌더러
+  component: TabsWidgetWrapper,
-  defaultConfig: {},
+  defaultConfig: {
-  tags: ["tabs", "navigation", "layout", "screen"],
+    tabs: [
+      {
+        id: "tab-1",
+        label: "탭 1",
+        order: 0,
+        disabled: false,
+        components: [],
+      },
+      {
+        id: "tab-2",
+        label: "탭 2",
+        order: 1,
+        disabled: false,
+        components: [],
+      },
+    ],
+    defaultTab: "tab-1",
+    orientation: "horizontal",
+    variant: "default",
+    allowCloseable: false,
+    persistSelection: false,
+  },
+  tags: ["tabs", "navigation", "layout", "container"],
   icon: Folder,
-  version: "1.0.0",
+  version: "2.0.0",
-  
+
   defaultSize: {
     width: 800,
     height: 600,
   },
-  
+
   defaultProps: {
     type: "tabs" as const,
     tabs: [
@@ -64,12 +422,14 @@ ComponentRegistry.registerComponent({
         label: "탭 1",
         order: 0,
         disabled: false,
+        components: [],
       },
       {
         id: "tab-2",
         label: "탭 2",
         order: 1,
         disabled: false,
+        components: [],
       },
     ] as TabItem[],
     defaultTab: "tab-1",
@@ -78,82 +438,167 @@ ComponentRegistry.registerComponent({
     allowCloseable: false,
     persistSelection: false,
   },
-  
+
-  // 에디터 모드에서의 렌더링
+  // 에디터 모드에서의 렌더링 - 탭 선택 및 컴포넌트 드롭 지원
-  renderEditor: ({ component, isSelected, onClick, onDragStart, onDragEnd, children }) => {
+  renderEditor: ({
-    const tabsComponent = component as TabsComponent;
+    component,
-    const tabs = tabsComponent.tabs || [];
+    isSelected,
-    
+    onClick,
+    onDragStart,
+    onDragEnd,
+  }) => {
+    const tabsConfig = (component as any).componentConfig || {};
+    const tabs: TabItem[] = tabsConfig.tabs || [];
+
+    // 에디터 모드에서 선택된 탭 상태 관리
+    const [activeTabId, setActiveTabId] = useState<string>(
+      tabs[0]?.id || ""
+    );
+
+    const activeTab = tabs.find((t) => t.id === activeTabId);
+
+    // 탭 스타일 클래스
+    const getTabStyle = (tab: TabItem) => {
+      const isActive = tab.id === activeTabId;
+      return cn(
+        "px-4 py-2 text-sm font-medium cursor-pointer transition-colors",
+        isActive
+          ? "bg-background border-b-2 border-primary text-primary"
+          : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+      );
+    };
+
     return (
       <div
-        className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50"
+        className="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-background"
         onClick={onClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
-        <div className="text-center">
+        {/* 탭 헤더 */}
-          <div className="flex items-center justify-center">
+        <div className="flex items-center border-b bg-muted/30">
-            <Folder className="h-8 w-8 text-gray-400" />
+          {tabs.length > 0 ? (
-          </div>
+            tabs.map((tab) => (
-          <p className="text-muted-foreground mt-2 text-sm font-medium">탭 컴포넌트</p>
+              <div
-          <p className="text-xs text-gray-400">
+                key={tab.id}
-            {tabs.length > 0
+                className={getTabStyle(tab)}
-              ? `${tabs.length}개의 탭 (실제 화면에서 표시됩니다)`
+                onClick={(e) => {
-              : "탭이 없습니다. 설정 패널에서 탭을 추가하세요"}
+                  e.stopPropagation();
-          </p>
+                  setActiveTabId(tab.id);
-          {tabs.length > 0 && (
+                }}
-            <div className="mt-2 flex flex-wrap justify-center gap-1">
+              >
-              {tabs.map((tab: TabItem, index: number) => (
+                {tab.label || "탭"}
-                <span
+                {tab.components && tab.components.length > 0 && (
-                  key={tab.id}
+                  <span className="ml-1 text-xs text-muted-foreground">
-                  className="rounded-md border bg-white px-2 py-1 text-xs"
+                    ({tab.components.length})
-                >
+                  </span>
-                  {tab.label || `탭 ${index + 1}`}
+                )}
-                </span>
+              </div>
-              ))}
+            ))
+          ) : (
+            <div className="px-4 py-2 text-sm text-muted-foreground">
+              탭이 없습니다
             </div>
           )}
         </div>
+
+        {/* 탭 컨텐츠 영역 - 드롭 영역 */}
+        <div
+          className="relative flex-1 overflow-hidden"
+          data-tabs-container="true"
+          data-component-id={component.id}
+          data-active-tab-id={activeTabId}
+        >
+          {activeTab ? (
+            <div className="absolute inset-0 overflow-auto p-2">
+              {activeTab.components && activeTab.components.length > 0 ? (
+                <div className="relative h-full w-full">
+                  {activeTab.components.map((comp: TabInlineComponent) => (
+                    <div
+                      key={comp.id}
+                      className="absolute rounded border border-dashed border-gray-300 bg-white/80 p-2 shadow-sm"
+                      style={{
+                        left: comp.position?.x || 0,
+                        top: comp.position?.y || 0,
+                        width: comp.size?.width || 200,
+                        height: comp.size?.height || 100,
+                      }}
+                    >
+                      <div className="flex h-full flex-col items-center justify-center">
+                        <span className="text-xs font-medium text-gray-600">
+                          {comp.label || comp.componentType}
+                        </span>
+                        <span className="text-[10px] text-gray-400">
+                          {comp.componentType}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
+                  <Plus className="mb-2 h-8 w-8 text-gray-400" />
+                  <p className="text-sm font-medium text-gray-500">
+                    컴포넌트를 드래그하여 추가
+                  </p>
+                  <p className="mt-1 text-xs text-gray-400">
+                    좌측 패널에서 컴포넌트를 이 영역에 드롭하세요
+                  </p>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <p className="text-sm text-muted-foreground">
+                설정 패널에서 탭을 추가하세요
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* 선택 표시 */}
+        {isSelected && (
+          <div className="pointer-events-none absolute inset-0 rounded-lg ring-2 ring-primary ring-offset-2" />
+        )}
       </div>
     );
   },
-  
+
-  // 인터랙티브 모드에서의 렌더링 (실제 동작)
+  // 인터랙티브 모드에서의 렌더링
   renderInteractive: ({ component }) => {
-    // InteractiveScreenViewer에서 TabsWidget을 사용하므로 여기서는 null 반환
     return null;
   },
-  
+
-  // 설정 패널 (동적 로딩)
+  // 설정 패널
-  configPanel: React.lazy(() => 
+  configPanel: React.lazy(() =>
-    import("@/components/screen/config-panels/TabsConfigPanel").then(module => ({
+    import("@/components/screen/config-panels/TabsConfigPanel").then(
-      default: module.TabsConfigPanel
+      (module) => ({
-    }))
+        default: module.TabsConfigPanel,
+      })
+    )
   ),
-  
+
   // 검증 함수
   validate: (component) => {
-    const tabsComponent = component as TabsComponent;
+    const tabsConfig = (component as any).componentConfig || {};
+    const tabs: TabItem[] = tabsConfig.tabs || [];
     const errors: string[] = [];
-    
+
-    if (!tabsComponent.tabs || tabsComponent.tabs.length === 0) {
+    if (!tabs || tabs.length === 0) {
       errors.push("최소 1개 이상의 탭이 필요합니다.");
     }
-    
+
-    if (tabsComponent.tabs) {
+    if (tabs) {
-      const tabIds = tabsComponent.tabs.map((t) => t.id);
+      const tabIds = tabs.map((t) => t.id);
       const uniqueIds = new Set(tabIds);
       if (tabIds.length !== uniqueIds.size) {
         errors.push("탭 ID가 중복되었습니다.");
       }
     }
-    
+
     return {
       isValid: errors.length === 0,
       errors,
     };
   },
 });
-
-// console.log("✅ 탭 컴포넌트 등록 완료");
-

frontend/types/screen-management.ts

@@ -211,14 +211,27 @@ export interface ComponentComponent extends BaseComponent {
 /**
  * 탭 아이템 인터페이스
  */
+/**
+ * 탭 내부 컴포넌트 (자유 배치)
+ */
+export interface TabInlineComponent {
+  id: string;
+  componentType: string; // 컴포넌트 타입 (예: "v2-text-display", "v2-table-list")
+  label?: string;
+  position: Position; // 탭 내부에서의 위치
+  size: Size; // 컴포넌트 크기
+  componentConfig?: any; // 컴포넌트별 설정
+  style?: ComponentStyle;
+}
+
 export interface TabItem {
   id: string;
   label: string;
-  screenId?: number; // 연결된 화면 ID
-  screenName?: string; // 화면 이름 (표시용)
   icon?: string; // 아이콘 (선택사항)
   disabled?: boolean; // 비활성화 여부
   order: number; // 탭 순서
+  // 🆕 인라인 컴포넌트 배치
+  components?: TabInlineComponent[]; // 탭 내부 컴포넌트들
 }
 
 /**