/** * useConnectionResolver - 런타임 컴포넌트 연결 해석기 * * PopViewerWithModals에서 사용. * layout.dataFlow.connections를 읽고, 소스 컴포넌트의 __comp_output__ 이벤트를 * 타겟 컴포넌트의 __comp_input__ 이벤트로 자동 변환/중계한다. * * 이벤트 규칙: * 소스: __comp_output__${sourceComponentId}__${outputKey} * 타겟: __comp_input__${targetComponentId}__${inputKey} * * _auto 모드: * sourceOutput="_auto"인 연결은 소스/타겟의 connectionMeta를 비교하여 * key가 같고 category="event"인 쌍을 양방향으로 자동 라우팅한다. * (정방향: 소스->타겟, 역방향: 타겟->소스) */ import { useEffect, useRef } from "react"; import { usePopEvent } from "./usePopEvent"; import type { PopDataConnection } from "@/components/pop/designer/types/pop-layout"; import { PopComponentRegistry, type ConnectionMetaItem, } from "@/lib/registry/PopComponentRegistry"; interface UseConnectionResolverOptions { screenId: string; connections: PopDataConnection[]; componentTypes?: Map; } /** * 소스/타겟의 connectionMeta에서 자동 매칭 가능한 이벤트 쌍을 찾는다. * 규칙: category="event"이고 key가 동일한 쌍 */ function getAutoMatchPairs( sourceType: string, targetType: string ): { sourceKey: string; targetKey: string }[] { const sourceDef = PopComponentRegistry.getComponent(sourceType); const targetDef = PopComponentRegistry.getComponent(targetType); if (!sourceDef?.connectionMeta?.sendable || !targetDef?.connectionMeta?.receivable) { return []; } const pairs: { sourceKey: string; targetKey: string }[] = []; for (const s of sourceDef.connectionMeta.sendable) { if (s.category !== "event") continue; for (const r of targetDef.connectionMeta.receivable) { if (r.category !== "event") continue; if (s.key === r.key) { pairs.push({ sourceKey: s.key, targetKey: r.key }); } } } return pairs; } export function useConnectionResolver({ screenId, connections, componentTypes, }: UseConnectionResolverOptions): void { const { publish, subscribe } = usePopEvent(screenId); const connectionsRef = useRef(connections); connectionsRef.current = connections; const componentTypesRef = useRef(componentTypes); componentTypesRef.current = componentTypes; useEffect(() => { if (!connections || connections.length === 0) return; const unsubscribers: (() => void)[] = []; for (const conn of connections) { const isAutoMode = conn.sourceOutput === "_auto" || !conn.sourceOutput; if (isAutoMode && componentTypesRef.current) { const sourceType = componentTypesRef.current.get(conn.sourceComponent); const targetType = componentTypesRef.current.get(conn.targetComponent); if (!sourceType || !targetType) continue; // 정방향: 소스 sendable -> 타겟 receivable const forwardPairs = getAutoMatchPairs(sourceType, targetType); for (const pair of forwardPairs) { const sourceEvent = `__comp_output__${conn.sourceComponent}__${pair.sourceKey}`; const targetEvent = `__comp_input__${conn.targetComponent}__${pair.targetKey}`; const unsub = subscribe(sourceEvent, (payload: unknown) => { publish(targetEvent, { value: payload, _connectionId: conn.id, }); }); unsubscribers.push(unsub); } // 역방향: 타겟 sendable -> 소스 receivable const reversePairs = getAutoMatchPairs(targetType, sourceType); for (const pair of reversePairs) { const sourceEvent = `__comp_output__${conn.targetComponent}__${pair.sourceKey}`; const targetEvent = `__comp_input__${conn.sourceComponent}__${pair.targetKey}`; const unsub = subscribe(sourceEvent, (payload: unknown) => { publish(targetEvent, { value: payload, _connectionId: conn.id, }); }); unsubscribers.push(unsub); } } else { const sourceEvent = `__comp_output__${conn.sourceComponent}__${conn.sourceOutput || conn.sourceField}`; const unsub = subscribe(sourceEvent, (payload: unknown) => { const targetEvent = `__comp_input__${conn.targetComponent}__${conn.targetInput || conn.targetField}`; const enrichedPayload = { value: payload, filterConfig: conn.filterConfig, _connectionId: conn.id, }; publish(targetEvent, enrichedPayload); }); unsubscribers.push(unsub); } } return () => { for (const unsub of unsubscribers) { unsub(); } }; }, [screenId, connections, subscribe, publish]); }