60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { createLayoutDefinition } from "../../utils/createLayoutDefinition";
|
|
import { FlexboxLayout } from "./FlexboxLayout";
|
|
import { FlexboxLayoutRenderer } from "./FlexboxLayoutRenderer";
|
|
import { LayoutRendererProps } from "../BaseLayoutRenderer";
|
|
import React from "react";
|
|
|
|
/**
|
|
* 플렉스박스 레이아웃 래퍼 컴포넌트 (DynamicLayoutRenderer용)
|
|
*/
|
|
const FlexboxLayoutWrapper: React.FC<LayoutRendererProps> = (props) => {
|
|
const renderer = new FlexboxLayoutRenderer(props);
|
|
return renderer.render();
|
|
};
|
|
|
|
/**
|
|
* flexbox 레이아웃 정의
|
|
*/
|
|
export const FlexboxLayoutDefinition = createLayoutDefinition({
|
|
id: "flexbox",
|
|
name: "플렉스박스 레이아웃",
|
|
nameEng: "Flexbox Layout",
|
|
description: "유연한 박스 모델을 사용하는 레이아웃입니다.",
|
|
category: "basic",
|
|
icon: "flex",
|
|
component: FlexboxLayoutWrapper,
|
|
defaultConfig: {
|
|
flexbox: {
|
|
direction: "row",
|
|
justify: "flex-start",
|
|
align: "stretch",
|
|
wrap: "nowrap",
|
|
gap: 16,
|
|
},
|
|
},
|
|
defaultZones: [
|
|
{
|
|
id: "left",
|
|
name: "좌측 영역",
|
|
position: {},
|
|
size: { width: "50%", height: "100%" },
|
|
},
|
|
{
|
|
id: "right",
|
|
name: "우측 영역",
|
|
position: {},
|
|
size: { width: "50%", height: "100%" },
|
|
},
|
|
],
|
|
tags: ["flexbox", "flex", "layout", "basic"],
|
|
version: "1.0.0",
|
|
author: "Screen Management System",
|
|
documentation: "유연한 박스 모델을 사용하는 레이아웃입니다. 수평/수직 방향과 정렬 방식을 설정할 수 있습니다.",
|
|
});
|
|
|
|
// 자동 등록을 위한 export
|
|
export { FlexboxLayout } from "./FlexboxLayout";
|
|
export { FlexboxLayoutRenderer } from "./FlexboxLayoutRenderer";
|