DDD1542
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentRegistry } from "../../ComponentRegistry";
|
|
import { ComponentCategory } from "@/types/component";
|
|
import { Folder } from "lucide-react";
|
|
import type { TabsComponent, TabItem } from "@/types/screen-management";
|
|
|
|
// TabsWidget 래퍼 컴포넌트
|
|
const TabsWidgetWrapper: React.FC<any> = (props) => {
|
|
const { component, ...restProps } = props;
|
|
|
|
// componentConfig에서 탭 정보 추출
|
|
const tabsConfig = component.componentConfig || {};
|
|
const tabsComponent = {
|
|
...component,
|
|
type: "tabs" as const,
|
|
tabs: tabsConfig.tabs || [],
|
|
defaultTab: tabsConfig.defaultTab,
|
|
orientation: tabsConfig.orientation || "horizontal",
|
|
variant: tabsConfig.variant || "default",
|
|
allowCloseable: tabsConfig.allowCloseable || false,
|
|
persistSelection: tabsConfig.persistSelection || false,
|
|
};
|
|
|
|
|
|
// TabsWidget 동적 로드
|
|
const TabsWidget = require("@/components/screen/widgets/TabsWidget").TabsWidget;
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
<TabsWidget component={tabsComponent} {...restProps} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* 탭 컴포넌트 정의
|
|
*
|
|
* 여러 화면을 탭으로 구분하여 전환할 수 있는 컴포넌트
|
|
*/
|
|
ComponentRegistry.registerComponent({
|
|
id: "tabs-widget",
|
|
name: "탭 컴포넌트",
|
|
description: "화면을 탭으로 전환할 수 있는 컴포넌트입니다. 각 탭마다 다른 화면을 연결할 수 있습니다.",
|
|
category: ComponentCategory.LAYOUT,
|
|
web_type: "text" as any, // 레이아웃 컴포넌트이므로 임시값
|
|
component: TabsWidgetWrapper, // ✅ 실제 TabsWidget 렌더러
|
|
default_config: {},
|
|
tags: ["tabs", "navigation", "layout", "screen"],
|
|
icon: Folder,
|
|
version: "1.0.0",
|
|
|
|
default_size: {
|
|
width: 800,
|
|
height: 600,
|
|
},
|
|
|
|
hidden: true, // v2-tabs-widget 사용으로 패널에서 숨김
|
|
|
|
// 설정 패널 (동적 로딩)
|
|
config_panel: React.lazy(() =>
|
|
import("@/components/screen/config-panels/TabsConfigPanel").then(module => ({
|
|
default: module.TabsConfigPanel
|
|
}))
|
|
),
|
|
});
|
|
|
|
// console.log("✅ 탭 컴포넌트 등록 완료");
|
|
|