70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { createLayoutDefinition } from "../../utils/createLayoutDefinition";
|
|
import { GridLayout } from "./GridLayout";
|
|
import { GridLayoutRenderer } from "./GridLayoutRenderer";
|
|
import { LayoutRendererProps } from "../BaseLayoutRenderer";
|
|
import React from "react";
|
|
|
|
/**
|
|
* 그리드 레이아웃 래퍼 컴포넌트 (DynamicLayoutRenderer용)
|
|
*/
|
|
const GridLayoutWrapper: React.FC<LayoutRendererProps> = (props) => {
|
|
const renderer = new GridLayoutRenderer(props);
|
|
return renderer.render();
|
|
};
|
|
|
|
/**
|
|
* 그리드 레이아웃 정의
|
|
*/
|
|
export const GridLayoutDefinition = createLayoutDefinition({
|
|
id: "grid",
|
|
name: "그리드 레이아웃",
|
|
nameEng: "Grid Layout",
|
|
description: "행과 열로 구성된 격자 형태의 레이아웃입니다. 정확한 위치 제어가 가능합니다.",
|
|
category: "basic",
|
|
icon: "grid",
|
|
component: GridLayoutWrapper,
|
|
defaultConfig: {
|
|
grid: {
|
|
rows: 2,
|
|
columns: 2,
|
|
gap: 16,
|
|
},
|
|
},
|
|
defaultZones: [
|
|
{
|
|
id: "zone1",
|
|
name: "존 1",
|
|
position: { row: 0, column: 0 },
|
|
size: { width: "100%", height: "100%" },
|
|
},
|
|
{
|
|
id: "zone2",
|
|
name: "존 2",
|
|
position: { row: 0, column: 1 },
|
|
size: { width: "100%", height: "100%" },
|
|
},
|
|
{
|
|
id: "zone3",
|
|
name: "존 3",
|
|
position: { row: 1, column: 0 },
|
|
size: { width: "100%", height: "100%" },
|
|
},
|
|
{
|
|
id: "zone4",
|
|
name: "존 4",
|
|
position: { row: 1, column: 1 },
|
|
size: { width: "100%", height: "100%" },
|
|
},
|
|
],
|
|
tags: ["grid", "layout", "basic", "structured"],
|
|
version: "1.0.0",
|
|
author: "Screen Management System",
|
|
documentation: "2x2 그리드로 구성된 기본 레이아웃입니다. 각 존은 정확한 그리드 위치에 배치됩니다.",
|
|
});
|
|
|
|
// 자동 등록을 위한 export
|
|
export { GridLayout } from "./GridLayout";
|
|
export { GridLayoutRenderer } from "./GridLayoutRenderer";
|