68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { ComponentData } from "@/types/screen";
|
||
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
||
|
|
import { LayoutGrid } from "lucide-react";
|
||
|
|
|
||
|
|
// 대시보드 컴포넌트 렌더러
|
||
|
|
const DashboardRenderer: ComponentRenderer = ({ component, children, isInteractive = false, ...props }) => {
|
||
|
|
const config = component.componentConfig || {};
|
||
|
|
const { columns = 3, gap = 16, items = [], style = {} } = config;
|
||
|
|
|
||
|
|
console.log("📊 DashboardRenderer 렌더링:", {
|
||
|
|
componentId: component.id,
|
||
|
|
isInteractive,
|
||
|
|
config,
|
||
|
|
columns,
|
||
|
|
gap,
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="h-full w-full overflow-hidden p-4"
|
||
|
|
style={{
|
||
|
|
display: "grid",
|
||
|
|
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
||
|
|
gap: `${gap}px`,
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
boxSizing: "border-box",
|
||
|
|
...style,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{children && React.Children.count(children) > 0
|
||
|
|
? children
|
||
|
|
: // 플레이스홀더 그리드 아이템들
|
||
|
|
Array.from({ length: columns * 2 }).map((_, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className={`flex min-h-0 items-center justify-center rounded p-2 ${
|
||
|
|
isInteractive
|
||
|
|
? "border border-gray-200 bg-white shadow-sm"
|
||
|
|
: "border-2 border-dashed border-gray-300 bg-gray-50"
|
||
|
|
}`}
|
||
|
|
style={{
|
||
|
|
minWidth: 0,
|
||
|
|
minHeight: "60px",
|
||
|
|
maxWidth: "100%",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="text-center">
|
||
|
|
<LayoutGrid className={`mx-auto mb-2 h-6 w-6 ${isInteractive ? "text-blue-500" : "text-gray-400"}`} />
|
||
|
|
<div className={`text-xs ${isInteractive ? "font-medium text-gray-700" : "text-gray-400"}`}>
|
||
|
|
그리드 {index + 1}
|
||
|
|
</div>
|
||
|
|
{isInteractive && <div className="mt-1 text-xs text-gray-500">실제 화면</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 레지스트리에 등록
|
||
|
|
componentRegistry.register("dashboard", DashboardRenderer);
|
||
|
|
|
||
|
|
export { DashboardRenderer };
|