## 노드 설정을 편하게 편집하려면 캔버스의 노드는 작은 카드 형태라 복잡한 설정을 표시하기 어렵다. 노드를 더블클릭하면 전체 파라미터를 편집할 수 있는 모달을 띄우는 방식을 도입했다. ### 동적 폼이 필요한 이유 XGen의 노드 타입은 계속 추가된다. 매번 새 노드 타입이 생길 때마다 편집 폼을 하드코딩하면 유지보수가 불가능해진다. 노드의 스키마 정보를 기반으로 폼을 자동 생성하는 동적 폼 시스템을 만들었다. ### 파라미터 스키마 정의 ```typescript interface ParameterSchema { key: string; label: string; type: 'string' | 'number' | 'boolean' | 'select' | 'textarea' | 'slider' | 'json' | 'code'; defaultValue: unknown; required: boolean; description?: string; validation?: { min?: number; max?: number; pattern?: string; options?: { label: string; value: string }[]; // select 타입용 }; group?: string; // 파라미터 그룹핑 advanced?: boolean; // 고급 설정 여부 } // ChatOpenAI 노드의 파라미터 스키마 예시 const chatOpenAISchema: ParameterSchema[] = [ { key: 'model', label: '모델', type: 'select', defaultValue: 'gpt-4o', required: true, validation: { options: [ { label: 'GPT-4o', value: 'gpt-4o' }, { label: 'GPT-4o Mini', value: 'gpt-4o-mini' }, ] }, group: '기본 설정' }, { key: 'temperature', label: 'Temperature', type: 'slider', defaultValue: 0.7, required: false, validation: { min: 0, max: 2 }, group: '기본 설정' }, { key: 'systemPrompt', label: '시스템 프롬프트', type: 'textarea', defaultValue: '', required: false, group: '프롬프트' }, { key: 'maxTokens', label: '최대 토큰', type: 'number', defaultValue: 4096, required: false, validation: { min: 1, max: 128000 }, group: '고급', advanced: true }, ]; ``` ### 동적 폼 렌더러 스키마를 받아서 자동으로 폼을 생성하는 렌더러를 구현했다. ```tsx const DynamicForm: React.FC<{ schema: ParameterSchema[]; values: Record; onChange: (key: string, value: unknown) => void }> = ({ schema, values, onChange }) => { const groups = groupBy(schema, 'group'); const [showAdvanced, setShowAdvanced] = useState(false); return (

{Object.entries(groups).map(([group, params]) => (

{group} {params .filter((p) => !p.advanced || showAdvanced) .map((param) => ( onChange(param.key, v)} /> ))}

))}

); }; ``` ### FormField 컴포넌트 분기 각 타입별로 적절한 입력 컴포넌트를 렌더링한다. ```typescript const FormField: React.FC = ({ schema, value, onChange }) => { switch (schema.type) { case 'string': return ; case 'number': return ; case 'boolean': return ; case 'select': return