탭기능 중간커밋

frontend/types/screen-management.ts

@@ -190,6 +190,32 @@ export interface ComponentComponent extends BaseComponent {
   componentConfig: any; // 컴포넌트별 설정
 }
 
+/**
+ * 탭 아이템 인터페이스
+ */
+export interface TabItem {
+  id: string;
+  label: string;
+  screenId?: number; // 연결된 화면 ID
+  screenName?: string; // 화면 이름 (표시용)
+  icon?: string; // 아이콘 (선택사항)
+  disabled?: boolean; // 비활성화 여부
+  order: number; // 탭 순서
+}
+
+/**
+ * 탭 컴포넌트
+ */
+export interface TabsComponent extends BaseComponent {
+  type: "tabs";
+  tabs: TabItem[]; // 탭 목록
+  defaultTab?: string; // 기본 선택 탭 ID
+  orientation?: "horizontal" | "vertical"; // 탭 방향
+  variant?: "default" | "pills" | "underline"; // 탭 스타일
+  allowCloseable?: boolean; // 탭 닫기 버튼 표시 여부
+  persistSelection?: boolean; // 선택 상태 유지 (localStorage)
+}
+
 /**
  * 통합 컴포넌트 데이터 타입
  */
@@ -200,7 +226,8 @@ export type ComponentData =
   | DataTableComponent
   | FileComponent
   | FlowComponent
-  | ComponentComponent;
+  | ComponentComponent
+  | TabsComponent;
 
 // ===== 웹타입별 설정 인터페이스 =====
 
@@ -791,6 +818,13 @@ export const isFlowComponent = (component: ComponentData): component is FlowComp
   return component.type === "flow";
 };
 
+/**
+ * TabsComponent 타입 가드
+ */
+export const isTabsComponent = (component: ComponentData): component is TabsComponent => {
+  return component.type === "tabs";
+};
+
 // ===== 안전한 타입 캐스팅 유틸리티 =====
 
 /**
@@ -852,3 +886,13 @@ export const asFlowComponent = (component: ComponentData): FlowComponent => {
   }
   return component;
 };
+
+/**
+ * ComponentData를 TabsComponent로 안전하게 캐스팅
+ */
+export const asTabsComponent = (component: ComponentData): TabsComponent => {
+  if (!isTabsComponent(component)) {
+    throw new Error(`Expected TabsComponent, got ${component.type}`);
+  }
+  return component;
+};

frontend/types/unified-core.ts

@@ -85,7 +85,8 @@ export type ComponentType =
   | "area"
   | "layout"
   | "flow"
-  | "component";
+  | "component"
+  | "tabs";
 
 /**
  * 기본 위치 정보