ERP-node/frontend/lib/registry/layouts/split/index.ts

62 lines
1.6 KiB
TypeScript

"use client";
import { createLayoutDefinition } from "../../utils/createLayoutDefinition";
import { SplitLayout } from "./SplitLayout";
import { SplitLayoutRenderer } from "./SplitLayoutRenderer";
import { LayoutRendererProps } from "../BaseLayoutRenderer";
import React from "react";
/**
* 분할 레이아웃 래퍼 컴포넌트 (DynamicLayoutRenderer용)
*/
const SplitLayoutWrapper: React.FC<LayoutRendererProps> = (props) => {
const renderer = new SplitLayoutRenderer(props);
return renderer.render();
};
/**
* split 레이아웃 정의
*/
export const SplitLayoutDefinition = createLayoutDefinition({
id: "split",
name: "분할 레이아웃",
nameEng: "Split Layout",
description: "크기 조절이 가능한 분할된 영역의 레이아웃입니다.",
category: "basic",
icon: "split",
component: SplitLayoutWrapper,
defaultConfig: {
split: {
direction: "horizontal",
ratio: [50, 50],
minSize: [200, 200],
resizable: true,
splitterSize: 4,
},
},
defaultZones: [
{
id: "left",
name: "좌측 패널",
position: {},
size: { width: "50%", height: "100%" },
isResizable: true,
},
{
id: "right",
name: "우측 패널",
position: {},
size: { width: "50%", height: "100%" },
isResizable: true,
},
],
tags: ["split", "basic", "layout"],
version: "1.0.0",
author: "Developer",
documentation: "크기 조절이 가능한 분할된 영역의 레이아웃입니다.",
});
// 자동 등록을 위한 export
export { SplitLayout } from "./SplitLayout";
export { SplitLayoutRenderer } from "./SplitLayoutRenderer";