docs: 화면 컴포넌트 개발 가이드 업데이트

- 화면 컴포넌트 개발 가이드를 개선하여 핵심 원칙과 패턴을 명확히 설명하였습니다.
- 목차를 재구성하고, V2 컴포넌트 규칙, 표준 Props 인터페이스, 멀티테넌시 관련 내용을 추가하였습니다.
- 각 컴포넌트의 역할과 사용법을 상세히 설명하여 개발자들이 이해하기 쉽게 하였습니다.
- API 호출 시 autoFilter 패턴과 렌더링 최적화 패턴을 포함하여 가이드의 실용성을 높였습니다.

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -499,9 +499,9 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       );
     }
 
-    // 탭 컴포넌트 처리
+    // 탭 컴포넌트 처리 (v1, v2 모두 지원)
     const componentType = (comp as any).componentType || (comp as any).componentId;
-    if (comp.type === "tabs" || (comp.type === "component" && componentType === "tabs-widget")) {
+    if (comp.type === "tabs" || (comp.type === "component" && (componentType === "tabs-widget" || componentType === "v2-tabs-widget"))) {
       const TabsWidget = require("@/components/screen/widgets/TabsWidget").TabsWidget;
       
       // componentConfig에서 탭 정보 추출
@@ -517,19 +517,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
         persistSelection: tabsConfig.persistSelection || false,
       };
       
-      console.log("🔍 탭 컴포넌트 렌더링:", {
-        originalType: comp.type,
-        componentType,
-        componentId: (comp as any).componentId,
-        tabs: tabsComponent.tabs,
-        tabsConfig,
-      });
-      
       return (
         <div className="h-full w-full">
           <TabsWidget 
             component={tabsComponent as any} 
-            menuObjid={menuObjid} // 🆕 부모의 menuObjid 전달
+            menuObjid={menuObjid}
+            formData={formData}
+            onFormDataChange={updateFormData}
           />
         </div>
       );

frontend/components/screen/widgets/TabsWidget.tsx

@@ -15,7 +15,7 @@ interface TabsWidgetProps {
   style?: React.CSSProperties;
   menuObjid?: number;
   formData?: Record<string, any>;
-  onFormDataChange?: (data: Record<string, any>) => void;
+  onFormDataChange?: (fieldName: string, value: any) => void; // DynamicComponentRenderer와 동일한 시그니처
   isDesignMode?: boolean; // 디자인 모드 여부
   onComponentSelect?: (tabId: string, componentId: string) => void; // 컴포넌트 선택 콜백
   selectedComponentId?: string; // 선택된 컴포넌트 ID