범용폼모달 외부소스 지원

frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx

@@ -32,6 +32,8 @@ interface TableSectionRendererProps {
   onTableDataChange: (data: any[]) => void;
   // 조건부 테이블용 콜백 (조건별 데이터 변경)
   onConditionalTableDataChange?: (conditionValue: string, data: any[]) => void;
+  // 외부 데이터 (데이터 전달 모달열기 액션으로 전달받은 데이터)
+  groupedData?: Record<string, any>[];
   className?: string;
 }
 
@@ -337,6 +339,7 @@ export function TableSectionRenderer({
   onFormDataChange,
   onTableDataChange,
   onConditionalTableDataChange,
+  groupedData,
   className,
 }: TableSectionRendererProps) {
   // 테이블 데이터 상태 (일반 모드)
@@ -373,6 +376,13 @@ export function TableSectionRenderer({
   // 초기 데이터 로드 완료 플래그 (무한 루프 방지)
   const initialDataLoadedRef = React.useRef(false);
 
+  // 외부 데이터 로드 완료 플래그
+  const externalDataLoadedRef = React.useRef(false);
+
+  // 외부 데이터 소스 설정
+  const externalDataConfig = tableConfig.externalDataSource;
+  const isExternalDataMode = externalDataConfig?.enabled && externalDataConfig?.tableName;
+
   // 조건부 테이블 설정
   const conditionalConfig = tableConfig.conditionalTable;
   const isConditionalMode = conditionalConfig?.enabled ?? false;
@@ -388,6 +398,56 @@ export function TableSectionRenderer({
   // 소스 테이블의 컬럼 라벨 (API에서 동적 로드)
   const [sourceColumnLabels, setSourceColumnLabels] = useState<Record<string, string>>({});
 
+  // 외부 데이터(groupedData) 처리: 데이터 전달 모달열기 액션으로 전달받은 데이터를 초기 테이블 데이터로 설정
+  useEffect(() => {
+    // 외부 데이터 소스가 활성화되지 않았거나, groupedData가 없으면 스킵
+    if (!isExternalDataMode) return;
+    if (!groupedData || groupedData.length === 0) return;
+    // 이미 로드된 경우 스킵
+    if (externalDataLoadedRef.current) return;
+    
+    console.log("[TableSectionRenderer] 외부 데이터 처리 시작:", {
+      externalTableName: externalDataConfig?.tableName,
+      groupedDataCount: groupedData.length,
+      columns: tableConfig.columns?.length,
+    });
+
+    // groupedData를 테이블 컬럼 매핑에 따라 변환
+    const mappedData = groupedData.map((externalRow, index) => {
+      const newRow: Record<string, any> = {
+        _id: `external_${Date.now()}_${index}`,
+        _sourceData: externalRow, // 원본 데이터 보관
+      };
+
+      // 각 컬럼에 대해 externalField 또는 field로 값을 매핑
+      tableConfig.columns?.forEach((col) => {
+        // externalField가 설정되어 있으면 사용, 아니면 field와 동일한 이름으로 매핑
+        const externalFieldName = col.externalField || col.field;
+        const value = externalRow[externalFieldName];
+        
+        // 값이 있으면 설정
+        if (value !== undefined) {
+          newRow[col.field] = value;
+        } else if (col.defaultValue !== undefined) {
+          // 기본값이 설정되어 있으면 기본값 사용
+          newRow[col.field] = col.defaultValue;
+        }
+      });
+
+      return newRow;
+    });
+
+    console.log("[TableSectionRenderer] 외부 데이터 매핑 완료:", {
+      mappedCount: mappedData.length,
+      sampleRow: mappedData[0],
+    });
+
+    // 테이블 데이터 설정
+    setTableData(mappedData);
+    onTableDataChange(mappedData);
+    externalDataLoadedRef.current = true;
+  }, [isExternalDataMode, groupedData, tableConfig.columns, externalDataConfig?.tableName, onTableDataChange]);
+
   // 소스 테이블의 카테고리 타입 컬럼 목록 로드
   useEffect(() => {
     const loadCategoryColumns = async () => {

frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx

@@ -2295,6 +2295,7 @@ export function UniversalFormModalComponent({
                 // 테이블 섹션 데이터를 formData에 저장
                 handleFieldChange(`_tableSection_${section.id}`, data);
               }}
+              groupedData={_groupedData}
             />
           </CardContent>
         </Card>

frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx

@@ -710,6 +710,9 @@ interface ColumnSettingItemProps {
   displayColumns: string[];  // 검색 설정에서 선택한 표시 컬럼 목록
   sourceTableColumns: { column_name: string; data_type: string; is_nullable: string; comment?: string }[];  // 소스 테이블 컬럼
   sourceTableName: string;  // 소스 테이블명
+  externalTableColumns: { column_name: string; data_type: string; is_nullable: string; comment?: string }[];  // 외부 데이터 테이블 컬럼
+  externalTableName?: string;  // 외부 데이터 테이블명
+  externalDataEnabled?: boolean;  // 외부 데이터 소스 활성화 여부
   tables: { table_name: string; comment?: string }[];  // 전체 테이블 목록
   tableColumns: Record<string, { column_name: string; data_type: string; is_nullable: string; comment?: string }[]>;  // 테이블별 컬럼
   sections: { id: string; title: string }[];  // 섹션 목록
@@ -731,6 +734,9 @@ function ColumnSettingItem({
   displayColumns,
   sourceTableColumns,
   sourceTableName,
+  externalTableColumns,
+  externalTableName,
+  externalDataEnabled,
   tables,
   tableColumns,
   sections,
@@ -745,6 +751,7 @@ function ColumnSettingItem({
 }: ColumnSettingItemProps) {
   const [fieldSearchOpen, setFieldSearchOpen] = useState(false);
   const [sourceFieldSearchOpen, setSourceFieldSearchOpen] = useState(false);
+  const [externalFieldSearchOpen, setExternalFieldSearchOpen] = useState(false);
   const [parentFieldSearchOpen, setParentFieldSearchOpen] = useState(false);
   const [lookupTableOpenMap, setLookupTableOpenMap] = useState<Record<string, boolean>>({});
 
@@ -1014,6 +1021,88 @@ function ColumnSettingItem({
           </Popover>
         </div>
 
+        {/* 외부 필드 - Combobox (외부 데이터에서 가져올 컬럼) */}
+        {externalDataEnabled && externalTableName && (
+          <div>
+            <Label className="text-xs">외부 필드</Label>
+            <Popover open={externalFieldSearchOpen} onOpenChange={setExternalFieldSearchOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={externalFieldSearchOpen}
+                  className="h-8 w-full justify-between text-xs mt-1"
+                  disabled={externalTableColumns.length === 0}
+                >
+                  <span className="truncate">
+                    {col.externalField || "(필드명과 동일)"}
+                  </span>
+                  <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0 w-[250px]" align="start">
+                <Command>
+                  <CommandInput placeholder="외부 필드 검색..." className="text-xs" />
+                  <CommandList className="max-h-[200px]">
+                    <CommandEmpty className="text-xs py-4 text-center">
+                      외부 필드를 찾을 수 없습니다.
+                    </CommandEmpty>
+                    <CommandGroup>
+                      {/* 필드명과 동일 옵션 */}
+                      <CommandItem
+                        value="__same_as_field__"
+                        onSelect={() => {
+                          onUpdate({ externalField: undefined });
+                          setExternalFieldSearchOpen(false);
+                        }}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3",
+                            !col.externalField ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <span className="text-muted-foreground">(필드명과 동일)</span>
+                      </CommandItem>
+                      {/* 외부 테이블 컬럼 목록 */}
+                      {externalTableColumns.map((extCol) => (
+                        <CommandItem
+                          key={extCol.column_name}
+                          value={extCol.column_name}
+                          onSelect={() => {
+                            onUpdate({ externalField: extCol.column_name });
+                            setExternalFieldSearchOpen(false);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              col.externalField === extCol.column_name ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col flex-1 min-w-0">
+                            <span className="font-medium truncate">{extCol.column_name}</span>
+                            {extCol.comment && (
+                              <span className="text-[10px] text-muted-foreground truncate">
+                                {extCol.comment}
+                              </span>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            <p className="text-[10px] text-muted-foreground mt-0.5">
+              외부 데이터({externalTableName})에서 이 컬럼에 매핑할 필드
+            </p>
+          </div>
+        )}
+
         {/* 라벨 */}
         <div>
           <Label className="text-xs">라벨</Label>
@@ -2450,6 +2539,7 @@ export function TableSectionSettingsModal({
   // 테이블 검색 Combobox 상태
   const [tableSearchOpen, setTableSearchOpen] = useState(false);
   const [saveTableSearchOpen, setSaveTableSearchOpen] = useState(false);
+  const [externalTableSearchOpen, setExternalTableSearchOpen] = useState(false);
   
   // 활성 탭
   const [activeTab, setActiveTab] = useState("source");
@@ -2623,6 +2713,24 @@ export function TableSectionSettingsModal({
     });
   };
 
+  const updateExternalDataSource = (updates: Partial<NonNullable<TableSectionConfig["externalDataSource"]>>) => {
+    updateTableConfig({
+      externalDataSource: { ...tableConfig.externalDataSource, enabled: false, tableName: "", ...updates },
+    });
+  };
+
+  // 외부 데이터 소스 테이블 컬럼 목록
+  const externalTableColumns = useMemo(() => {
+    return tableColumns[tableConfig.externalDataSource?.tableName || ""] || [];
+  }, [tableColumns, tableConfig.externalDataSource?.tableName]);
+
+  // 외부 데이터 소스 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    if (tableConfig.externalDataSource?.enabled && tableConfig.externalDataSource?.tableName) {
+      onLoadTableColumns(tableConfig.externalDataSource.tableName);
+    }
+  }, [tableConfig.externalDataSource?.enabled, tableConfig.externalDataSource?.tableName, onLoadTableColumns]);
+
   // 저장 함수
   const handleSave = () => {
     onSave({
@@ -2986,6 +3094,98 @@ export function TableSectionSettingsModal({
                       </div>
                     </div>
                   </div>
+
+                  {/* 외부 데이터 소스 설정 */}
+                  <div className="space-y-3 border rounded-lg p-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <h4 className="text-sm font-medium">외부 데이터 소스</h4>
+                        <p className="text-xs text-muted-foreground">
+                          "데이터 전달 모달열기" 액션으로 전달받은 데이터를 테이블에 표시합니다.
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tableConfig.externalDataSource?.enabled ?? false}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            updateExternalDataSource({ enabled: true, tableName: "" });
+                          } else {
+                            updateTableConfig({ externalDataSource: undefined });
+                          }
+                        }}
+                      />
+                    </div>
+                    
+                    {tableConfig.externalDataSource?.enabled && (
+                      <div className="space-y-3 pt-2">
+                        <div>
+                          <Label className="text-xs font-medium mb-1.5 block">외부 데이터 테이블</Label>
+                          <Popover open={externalTableSearchOpen} onOpenChange={setExternalTableSearchOpen}>
+                            <PopoverTrigger asChild>
+                              <Button
+                                variant="outline"
+                                role="combobox"
+                                aria-expanded={externalTableSearchOpen}
+                                className="h-9 w-full justify-between text-sm"
+                              >
+                                {tableConfig.externalDataSource?.tableName || "테이블 선택..."}
+                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="p-0 w-full min-w-[400px]" align="start">
+                              <Command>
+                                <CommandInput placeholder="테이블 검색..." className="text-sm" />
+                                <CommandList className="max-h-[300px]">
+                                  <CommandEmpty className="text-sm py-6 text-center">
+                                    테이블을 찾을 수 없습니다.
+                                  </CommandEmpty>
+                                  <CommandGroup>
+                                    {tables.map((table) => (
+                                      <CommandItem
+                                        key={table.table_name}
+                                        value={table.table_name}
+                                        onSelect={() => {
+                                          updateExternalDataSource({ enabled: true, tableName: table.table_name });
+                                          onLoadTableColumns(table.table_name);
+                                          setExternalTableSearchOpen(false);
+                                        }}
+                                        className="text-sm"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            tableConfig.externalDataSource?.tableName === table.table_name ? "opacity-100" : "opacity-0"
+                                          )}
+                                        />
+                                        <div className="flex flex-col">
+                                          <span className="font-medium">{table.table_name}</span>
+                                          {table.comment && (
+                                            <span className="text-xs text-muted-foreground">{table.comment}</span>
+                                          )}
+                                        </div>
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                </CommandList>
+                              </Command>
+                            </PopoverContent>
+                          </Popover>
+                          <HelpText>이전 화면에서 전달받을 데이터의 원본 테이블을 선택하세요. (예: 수주상세 데이터를 전달받는 경우 sales_order_detail)</HelpText>
+                        </div>
+
+                        {tableConfig.externalDataSource?.tableName && externalTableColumns.length > 0 && (
+                          <div className="bg-muted/30 rounded-lg p-3">
+                            <p className="text-xs text-muted-foreground">
+                              선택한 테이블 컬럼: {externalTableColumns.length}개
+                            </p>
+                            <p className="text-[10px] text-muted-foreground mt-1">
+                              "컬럼 설정" 탭에서 각 컬럼의 "외부 필드"를 설정하여 전달받은 데이터의 컬럼을 매핑하세요.
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
                 </TabsContent>
 
                 {/* 컬럼 설정 탭 */}
@@ -3041,6 +3241,9 @@ export function TableSectionSettingsModal({
                           displayColumns={tableConfig.source.displayColumns || []}
                           sourceTableColumns={sourceTableColumns}
                           sourceTableName={tableConfig.source.tableName}
+                          externalTableColumns={externalTableColumns}
+                          externalTableName={tableConfig.externalDataSource?.tableName}
+                          externalDataEnabled={tableConfig.externalDataSource?.enabled}
                           tables={tables}
                           tableColumns={tableColumns}
                           sections={otherSections}

frontend/lib/registry/components/universal-form-modal/types.ts

@@ -230,6 +230,12 @@ export interface TableSectionConfig {
     columnLabels?: Record<string, string>; // 컬럼 라벨 (컬럼명 -> 표시 라벨)
   };
   
+  // 1-1. 외부 데이터 소스 설정 (데이터 전달 모달열기 액션으로 전달받은 데이터)
+  externalDataSource?: {
+    enabled: boolean;               // 외부 데이터 소스 사용 여부
+    tableName: string;              // 전달받을 데이터의 소스 테이블명 (예: sales_order_detail)
+  };
+  
   // 2. 필터 설정
   filters?: {
     // 사전 필터 (항상 적용, 사용자에게 노출되지 않음)
@@ -374,6 +380,9 @@ export interface TableColumnConfig {
   // 소스 필드 매핑 (검색 모달에서 가져올 컬럼명)
   sourceField?: string;             // 소스 테이블의 컬럼명 (미설정 시 field와 동일)
   
+  // 외부 데이터 필드 매핑 (데이터 전달 모달열기로 전달받은 데이터의 컬럼명)
+  externalField?: string;           // 외부 데이터의 컬럼명 (미설정 시 field와 동일)
+  
   // 편집 설정
   editable?: boolean;               // 편집 가능 여부 (기본: true)
   calculated?: boolean;             // 계산 필드 여부 (자동 읽기전용)