56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { ComponentData } from "@/types/screen";
|
||
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
||
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
|
|
|
||
|
|
// 탭 컴포넌트 렌더러
|
||
|
|
const TabsRenderer: ComponentRenderer = ({ component, children, ...props }) => {
|
||
|
|
const config = component.componentConfig || {};
|
||
|
|
const {
|
||
|
|
tabs = [
|
||
|
|
{ id: "tab1", label: "탭 1", content: "첫 번째 탭 내용" },
|
||
|
|
{ id: "tab2", label: "탭 2", content: "두 번째 탭 내용" },
|
||
|
|
{ id: "tab3", label: "탭 3", content: "세 번째 탭 내용" },
|
||
|
|
],
|
||
|
|
defaultTab = "tab1",
|
||
|
|
orientation = "horizontal", // horizontal, vertical
|
||
|
|
style = {},
|
||
|
|
} = config;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="h-full w-full p-2" style={style}>
|
||
|
|
<Tabs defaultValue={defaultTab} orientation={orientation} className="h-full">
|
||
|
|
<TabsList className="grid w-full grid-cols-3">
|
||
|
|
{tabs.map((tab: any) => (
|
||
|
|
<TabsTrigger key={tab.id} value={tab.id} className="pointer-events-none" disabled>
|
||
|
|
{tab.label}
|
||
|
|
</TabsTrigger>
|
||
|
|
))}
|
||
|
|
</TabsList>
|
||
|
|
{tabs.map((tab: any) => (
|
||
|
|
<TabsContent key={tab.id} value={tab.id} className="mt-4 flex-1">
|
||
|
|
{children && React.Children.count(children) > 0 ? (
|
||
|
|
children
|
||
|
|
) : (
|
||
|
|
<div className="flex h-full items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-sm text-gray-600">{tab.content}</div>
|
||
|
|
<div className="mt-1 text-xs text-gray-400">탭 내용 영역</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</TabsContent>
|
||
|
|
))}
|
||
|
|
</Tabs>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 레지스트리에 등록
|
||
|
|
componentRegistry.register("tabs", TabsRenderer);
|
||
|
|
componentRegistry.register("tabs-horizontal", TabsRenderer);
|
||
|
|
|
||
|
|
export { TabsRenderer };
|