132 lines
3.0 KiB
TypeScript
132 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
|
|
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
|
|
|
|
interface DashboardConfigPanelProps {
|
|
config?: Record<string, any>;
|
|
onChange?: (key: string, value: any) => void;
|
|
component?: any;
|
|
onUpdateProperty?: (path: string, value: any) => void;
|
|
}
|
|
|
|
const sections: ConfigSectionDefinition[] = [
|
|
{
|
|
id: "content",
|
|
title: "콘텐츠",
|
|
fields: [
|
|
{
|
|
key: "title",
|
|
label: "그리드 제목",
|
|
type: "text",
|
|
placeholder: "그리드 제목을 입력하세요",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "grid",
|
|
title: "그리드 설정",
|
|
fields: [
|
|
{
|
|
key: "rows",
|
|
label: "행 개수",
|
|
type: "select",
|
|
options: [
|
|
{ label: "1행", value: "1" },
|
|
{ label: "2행", value: "2" },
|
|
{ label: "3행", value: "3" },
|
|
{ label: "4행", value: "4" },
|
|
],
|
|
},
|
|
{
|
|
key: "columns",
|
|
label: "열 개수",
|
|
type: "select",
|
|
options: [
|
|
{ label: "1열", value: "1" },
|
|
{ label: "2열", value: "2" },
|
|
{ label: "3열", value: "3" },
|
|
{ label: "4열", value: "4" },
|
|
{ label: "6열", value: "6" },
|
|
],
|
|
},
|
|
{
|
|
key: "gap",
|
|
label: "그리드 간격",
|
|
type: "select",
|
|
options: [
|
|
{ label: "없음 (0px)", value: "none" },
|
|
{ label: "작게 (8px)", value: "small" },
|
|
{ label: "보통 (16px)", value: "medium" },
|
|
{ label: "크게 (24px)", value: "large" },
|
|
],
|
|
},
|
|
{
|
|
key: "itemHeight",
|
|
label: "아이템 높이",
|
|
type: "text",
|
|
placeholder: "120px",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "style",
|
|
title: "스타일",
|
|
fields: [
|
|
{
|
|
key: "backgroundColor",
|
|
label: "배경색",
|
|
type: "color",
|
|
},
|
|
{
|
|
key: "borderRadius",
|
|
label: "테두리 반경",
|
|
type: "text",
|
|
placeholder: "8px",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "display",
|
|
title: "표시 옵션",
|
|
fields: [
|
|
{
|
|
key: "responsive",
|
|
label: "반응형 레이아웃",
|
|
type: "switch",
|
|
},
|
|
{
|
|
key: "showBorders",
|
|
label: "그리드 테두리 표시",
|
|
type: "switch",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
export const DashboardConfigPanel: React.FC<DashboardConfigPanelProps> = ({
|
|
config: directConfig,
|
|
onChange: directOnChange,
|
|
component,
|
|
onUpdateProperty,
|
|
}) => {
|
|
const config = directConfig || component?.componentConfig || {};
|
|
|
|
const handleChange = (key: string, value: any) => {
|
|
if (directOnChange) {
|
|
directOnChange(key, value);
|
|
} else if (onUpdateProperty) {
|
|
onUpdateProperty(`componentConfig.${key}`, value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ConfigPanelBuilder
|
|
config={config}
|
|
onChange={handleChange}
|
|
sections={sections}
|
|
/>
|
|
);
|
|
};
|