132 lines
3.9 KiB
TypeScript
132 lines
3.9 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";
|
|
|
|
/**
|
|
* 탭 컴포넌트 정의
|
|
*
|
|
* 여러 화면을 탭으로 구분하여 전환할 수 있는 컴포넌트
|
|
*/
|
|
ComponentRegistry.registerComponent({
|
|
id: "tabs-widget",
|
|
name: "탭 컴포넌트",
|
|
description: "화면을 탭으로 전환할 수 있는 컴포넌트입니다. 각 탭마다 다른 화면을 연결할 수 있습니다.",
|
|
category: ComponentCategory.LAYOUT,
|
|
webType: "text" as any, // 레이아웃 컴포넌트이므로 임시값
|
|
component: () => null as any, // 레이아웃 컴포넌트이므로 임시값
|
|
defaultConfig: {},
|
|
tags: ["tabs", "navigation", "layout", "screen"],
|
|
icon: Folder,
|
|
version: "1.0.0",
|
|
|
|
defaultSize: {
|
|
width: 800,
|
|
height: 600,
|
|
},
|
|
|
|
defaultProps: {
|
|
type: "tabs" as const,
|
|
tabs: [
|
|
{
|
|
id: "tab-1",
|
|
label: "탭 1",
|
|
order: 0,
|
|
disabled: false,
|
|
},
|
|
{
|
|
id: "tab-2",
|
|
label: "탭 2",
|
|
order: 1,
|
|
disabled: false,
|
|
},
|
|
] as TabItem[],
|
|
defaultTab: "tab-1",
|
|
orientation: "horizontal" as const,
|
|
variant: "default" as const,
|
|
allowCloseable: false,
|
|
persistSelection: false,
|
|
},
|
|
|
|
// 에디터 모드에서의 렌더링
|
|
renderEditor: ({ component, isSelected, onClick, onDragStart, onDragEnd, children }) => {
|
|
const tabsComponent = component as TabsComponent;
|
|
const tabs = tabsComponent.tabs || [];
|
|
|
|
return (
|
|
<div
|
|
className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50"
|
|
onClick={onClick}
|
|
onDragStart={onDragStart}
|
|
onDragEnd={onDragEnd}
|
|
>
|
|
<div className="text-center">
|
|
<div className="flex items-center justify-center">
|
|
<Folder className="h-8 w-8 text-gray-400" />
|
|
</div>
|
|
<p className="text-muted-foreground mt-2 text-sm font-medium">탭 컴포넌트</p>
|
|
<p className="text-xs text-gray-400">
|
|
{tabs.length > 0
|
|
? `${tabs.length}개의 탭 (실제 화면에서 표시됩니다)`
|
|
: "탭이 없습니다. 설정 패널에서 탭을 추가하세요"}
|
|
</p>
|
|
{tabs.length > 0 && (
|
|
<div className="mt-2 flex flex-wrap justify-center gap-1">
|
|
{tabs.map((tab: TabItem, index: number) => (
|
|
<span
|
|
key={tab.id}
|
|
className="rounded-md border bg-white px-2 py-1 text-xs"
|
|
>
|
|
{tab.label || `탭 ${index + 1}`}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
|
|
// 인터랙티브 모드에서의 렌더링 (실제 동작)
|
|
renderInteractive: ({ component }) => {
|
|
// InteractiveScreenViewer에서 TabsWidget을 사용하므로 여기서는 null 반환
|
|
return null;
|
|
},
|
|
|
|
// 설정 패널 (동적 로딩)
|
|
configPanel: React.lazy(() =>
|
|
import("@/components/screen/config-panels/TabsConfigPanel").then(module => ({
|
|
default: module.TabsConfigPanel
|
|
}))
|
|
),
|
|
|
|
// 검증 함수
|
|
validate: (component) => {
|
|
const tabsComponent = component as TabsComponent;
|
|
const errors: string[] = [];
|
|
|
|
if (!tabsComponent.tabs || tabsComponent.tabs.length === 0) {
|
|
errors.push("최소 1개 이상의 탭이 필요합니다.");
|
|
}
|
|
|
|
if (tabsComponent.tabs) {
|
|
const tabIds = tabsComponent.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("✅ 탭 컴포넌트 등록 완료");
|
|
|