폼 통합

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useCallback } from "react";
 import { ComponentData } from "@/types/screen";
 import { DynamicLayoutRenderer } from "./DynamicLayoutRenderer";
 import { ComponentRegistry } from "./ComponentRegistry";
@@ -20,6 +20,9 @@ import {
 } from "@/components/unified";
 import { UnifiedRepeater } from "@/components/unified/UnifiedRepeater";
 
+// 통합 폼 시스템 import
+import { useUnifiedFormOptional } from "@/components/unified/UnifiedFormContext";
+
 // 컴포넌트 렌더러 인터페이스
 export interface ComponentRenderer {
   (props: {
@@ -181,14 +184,28 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   // 컴포넌트 타입 추출 - 새 시스템에서는 componentType 속성 사용, 레거시는 type 사용
   const componentType = (component as any).componentType || component.type;
 
+  // 🆕 Unified 폼 시스템 연동 (최상위에서 한 번만 호출)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const unifiedFormContextForUnified = useUnifiedFormOptional();
+
   // 🆕 Unified 컴포넌트 처리
   if (componentType?.startsWith("unified-")) {
     const unifiedType = componentType as string;
     const config = (component as any).componentConfig || {};
     const fieldName = (component as any).columnName || component.id;
-    const currentValue = props.formData?.[fieldName];
+    
+    // Unified 시스템이 있으면 거기서 값 가져오기, 없으면 props.formData 사용
+    const currentValue = unifiedFormContextForUnified 
+      ? unifiedFormContextForUnified.getValue(fieldName) 
+      : props.formData?.[fieldName];
 
+    // 🆕 통합 onChange 핸들러 - 양쪽 시스템에 전파
     const handleChange = (value: any) => {
+      // 1. Unified 시스템에 전파
+      if (unifiedFormContextForUnified) {
+        unifiedFormContextForUnified.setValue(fieldName, value);
+      }
+      // 2. 레거시 콜백도 호출 (호환성)
       if (props.onFormDataChange) {
         props.onFormDataChange(fieldName, value);
       }
@@ -589,7 +606,12 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           currentValue = formData?.[fieldName] || "";
         }
 
+        // 🆕 Unified 폼 시스템 연동 (Context가 있으면 사용, 없으면 null)
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const unifiedFormContext = useUnifiedFormOptional();
+
         // onChange 핸들러 - 컴포넌트 타입에 따라 다르게 처리
+        // 🆕 Unified 시스템과 레거시 시스템 모두에 전파
         const handleChange = (value: any) => {
           // autocomplete-search-input, entity-search-input은 자체적으로 onFormDataChange를 호출하므로 중복 저장 방지
           if (componentType === "autocomplete-search-input" || componentType === "entity-search-input") {
@@ -603,6 +625,12 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
             actualValue = value.target.value;
           }
 
+          // 1. Unified 폼 시스템에 전파 (있으면)
+          if (unifiedFormContext) {
+            unifiedFormContext.setValue(fieldName, actualValue);
+          }
+
+          // 2. 레거시 onFormDataChange 콜백도 호출 (호환성 유지)
           if (onFormDataChange) {
             // modal-repeater-table은 배열 데이터를 다룸
             if (componentType === "modal-repeater-table") {