101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Layers } from "lucide-react";
|
|
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
|
|
import { ComponentDefinition, ComponentCategory, ComponentRendererProps } from "@/types/component";
|
|
import { RepeaterInput } from "@/components/webtypes/RepeaterInput";
|
|
import { RepeaterConfigPanel } from "@/components/webtypes/config/RepeaterConfigPanel";
|
|
|
|
/**
|
|
* Repeater Field Group 컴포넌트
|
|
*/
|
|
const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) => {
|
|
const { component, value, onChange, readonly, disabled } = props;
|
|
|
|
// repeaterConfig 또는 componentConfig에서 설정 가져오기
|
|
const config = (component as any).repeaterConfig || component.componentConfig || { fields: [] };
|
|
|
|
// 값이 JSON 문자열인 경우 파싱
|
|
let parsedValue: any[] = [];
|
|
if (typeof value === "string") {
|
|
try {
|
|
parsedValue = JSON.parse(value);
|
|
} catch {
|
|
parsedValue = [];
|
|
}
|
|
} else if (Array.isArray(value)) {
|
|
parsedValue = value;
|
|
}
|
|
|
|
return (
|
|
<RepeaterInput
|
|
value={parsedValue}
|
|
onChange={(newValue) => {
|
|
// 배열을 JSON 문자열로 변환하여 저장
|
|
const jsonValue = JSON.stringify(newValue);
|
|
onChange?.(jsonValue);
|
|
}}
|
|
config={config}
|
|
disabled={disabled}
|
|
readonly={readonly}
|
|
className="w-full"
|
|
/>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Repeater Field Group 렌더러
|
|
* 여러 필드를 가진 항목들을 동적으로 추가/제거할 수 있는 컴포넌트
|
|
*/
|
|
export class RepeaterFieldGroupRenderer extends AutoRegisteringComponentRenderer {
|
|
/**
|
|
* 컴포넌트 정의
|
|
*/
|
|
static componentDefinition: ComponentDefinition = {
|
|
id: "repeater-field-group",
|
|
name: "반복 필드 그룹",
|
|
nameEng: "Repeater Field Group",
|
|
description: "여러 필드를 가진 항목들을 동적으로 추가/제거할 수 있는 반복 가능한 필드 그룹",
|
|
category: ComponentCategory.INPUT,
|
|
webType: "array", // 배열 데이터를 다룸
|
|
icon: Layers,
|
|
component: RepeaterFieldGroupRenderer,
|
|
configPanel: RepeaterConfigPanel,
|
|
defaultSize: {
|
|
width: 600,
|
|
height: 200, // 기본 높이 조정
|
|
},
|
|
defaultConfig: {
|
|
fields: [], // 빈 배열로 시작 - 사용자가 직접 필드 추가
|
|
minItems: 1, // 기본 1개 항목
|
|
maxItems: 20,
|
|
addButtonText: "항목 추가",
|
|
allowReorder: true,
|
|
showIndex: true,
|
|
collapsible: false,
|
|
layout: "grid",
|
|
showDivider: true,
|
|
emptyMessage: "필드를 먼저 정의하세요.",
|
|
},
|
|
tags: ["repeater", "fieldgroup", "dynamic", "multi", "form", "array", "fields"],
|
|
author: "System",
|
|
version: "1.0.0",
|
|
};
|
|
|
|
/**
|
|
* 컴포넌트 렌더링
|
|
*/
|
|
render(): React.ReactElement {
|
|
return <RepeaterFieldGroupComponent {...this.props} />;
|
|
}
|
|
}
|
|
|
|
// 컴포넌트 자동 등록
|
|
RepeaterFieldGroupRenderer.registerSelf();
|
|
|
|
// Hot Reload 지원 (개발 모드)
|
|
if (process.env.NODE_ENV === "development") {
|
|
RepeaterFieldGroupRenderer.enableHotReload();
|
|
}
|