109 lines
2.6 KiB
TypeScript
109 lines
2.6 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 CardConfigPanelProps {
|
|
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: "카드 제목을 입력하세요",
|
|
},
|
|
{
|
|
key: "content",
|
|
label: "카드 내용",
|
|
type: "textarea",
|
|
placeholder: "카드 내용을 입력하세요",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "style",
|
|
title: "스타일",
|
|
fields: [
|
|
{
|
|
key: "variant",
|
|
label: "카드 스타일",
|
|
type: "select",
|
|
options: [
|
|
{ label: "기본 (Default)", value: "default" },
|
|
{ label: "테두리 (Outlined)", value: "outlined" },
|
|
{ label: "그림자 (Elevated)", value: "elevated" },
|
|
{ label: "채움 (Filled)", value: "filled" },
|
|
],
|
|
},
|
|
{
|
|
key: "padding",
|
|
label: "패딩",
|
|
type: "select",
|
|
options: [
|
|
{ label: "없음 (None)", value: "none" },
|
|
{ label: "작게 (Small)", value: "small" },
|
|
{ label: "기본 (Default)", value: "default" },
|
|
{ label: "크게 (Large)", value: "large" },
|
|
],
|
|
},
|
|
{
|
|
key: "backgroundColor",
|
|
label: "배경색",
|
|
type: "color",
|
|
},
|
|
{
|
|
key: "borderRadius",
|
|
label: "테두리 반경",
|
|
type: "text",
|
|
placeholder: "8px",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "display",
|
|
title: "표시 옵션",
|
|
fields: [
|
|
{
|
|
key: "showHeader",
|
|
label: "헤더 표시",
|
|
type: "switch",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
export const CardConfigPanel: React.FC<CardConfigPanelProps> = ({
|
|
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}
|
|
/>
|
|
);
|
|
};
|