80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { createLayoutDefinition } from "../../utils/createLayoutDefinition";
|
|
import { CardLayoutRenderer } from "./CardLayoutRenderer";
|
|
import { LayoutRendererProps } from "../BaseLayoutRenderer";
|
|
import React from "react";
|
|
|
|
/**
|
|
* 카드 레이아웃 래퍼 컴포넌트 (DynamicLayoutRenderer용)
|
|
*/
|
|
const CardLayoutWrapper: React.FC<LayoutRendererProps> = (props) => {
|
|
const renderer = new CardLayoutRenderer(props);
|
|
return renderer.render();
|
|
};
|
|
|
|
/**
|
|
* card-layout 레이아웃 정의
|
|
*/
|
|
export const CardLayoutDefinition = createLayoutDefinition({
|
|
id: "card-layout",
|
|
name: "카드 레이아웃",
|
|
nameEng: "Card Layout",
|
|
description: "카드 형태의 대시보드 레이아웃입니다",
|
|
category: "dashboard",
|
|
icon: "grid-3x3",
|
|
component: CardLayoutWrapper,
|
|
defaultConfig: {
|
|
cardLayout: {
|
|
columns: 3,
|
|
gap: 16,
|
|
aspectRatio: "4:3",
|
|
},
|
|
},
|
|
defaultZones: [
|
|
{
|
|
id: "card1",
|
|
name: "카드 1",
|
|
position: { row: 0, column: 0 },
|
|
size: { width: "33.33%", height: "300px" },
|
|
},
|
|
{
|
|
id: "card2",
|
|
name: "카드 2",
|
|
position: { row: 0, column: 1 },
|
|
size: { width: "33.33%", height: "300px" },
|
|
},
|
|
{
|
|
id: "card3",
|
|
name: "카드 3",
|
|
position: { row: 0, column: 2 },
|
|
size: { width: "33.33%", height: "300px" },
|
|
},
|
|
{
|
|
id: "card4",
|
|
name: "카드 4",
|
|
position: { row: 1, column: 0 },
|
|
size: { width: "33.33%", height: "300px" },
|
|
},
|
|
{
|
|
id: "card5",
|
|
name: "카드 5",
|
|
position: { row: 1, column: 1 },
|
|
size: { width: "33.33%", height: "300px" },
|
|
},
|
|
{
|
|
id: "card6",
|
|
name: "카드 6",
|
|
position: { row: 1, column: 2 },
|
|
size: { width: "33.33%", height: "300px" },
|
|
},
|
|
],
|
|
tags: ["card-layout", "dashboard", "layout"],
|
|
version: "1.0.0",
|
|
author: "개발자",
|
|
documentation: "카드 형태의 대시보드 레이아웃입니다",
|
|
});
|
|
|
|
// 자동 등록을 위한 export
|
|
export { CardLayoutRenderer } from "./CardLayoutRenderer";
|