화면 분할 패널 자동으로 데이터 넘기는 기능 설정 가능하게 변경

2025-12-05 14:08:07 +09:00
parent 3f2739a4a5
commit 09fee58186
7 changed files with 46 additions and 4 deletions
--- a/frontend/components/screen-embedding/EmbeddedScreen.tsx
+++ b/frontend/components/screen-embedding/EmbeddedScreen.tsx
@@ -92,10 +92,17 @@ export const EmbeddedScreen = forwardRef<EmbeddedScreenHandle, EmbeddedScreenPro
    }, [initialFormData]);

    // 🆕 분할 패널에서 좌측 선택 데이터가 변경되면 우측 화면의 formData에 자동 반영
+    // disableAutoDataTransfer가 true이면 자동 전달 비활성화 (버튼 클릭으로만 전달)
    useEffect(() => {
      // 우측 화면인 경우에만 적용
      if (position !== "right" || !splitPanelContext) return;
      
+      // 자동 데이터 전달이 비활성화된 경우 스킵
+      if (splitPanelContext.disableAutoDataTransfer) {
+        console.log("🔗 [EmbeddedScreen] 자동 데이터 전달 비활성화됨 - 버튼 클릭으로만 전달");
+        return;
+      }
+      
      const mappedData = splitPanelContext.getMappedParentData();
      if (Object.keys(mappedData).length > 0) {
        console.log("🔗 [EmbeddedScreen] 분할 패널 부모 데이터 자동 반영:", mappedData);
--- a/frontend/components/screen-embedding/ScreenSplitPanel.tsx
+++ b/frontend/components/screen-embedding/ScreenSplitPanel.tsx
@@ -128,6 +128,7 @@ export function ScreenSplitPanel({ screenId, config, initialFormData }: ScreenSp
      rightScreenId={config?.rightScreenId || null}
      parentDataMapping={config?.parentDataMapping || []}
      linkedFilters={config?.linkedFilters || []}
+      disableAutoDataTransfer={config?.disableAutoDataTransfer ?? false}
    >
      <div className="flex h-full">
        {/* 좌측 패널 */}
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -118,17 +118,19 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
  const [popupFormData, setPopupFormData] = useState<Record<string, any>>({});

  // 🆕 분할 패널에서 매핑된 부모 데이터 가져오기
+  // disableAutoDataTransfer가 true이면 자동 전달 비활성화 (버튼 클릭으로만 전달)
  const splitPanelMappedData = React.useMemo(() => {
-    if (splitPanelContext) {
+    if (splitPanelContext && !splitPanelContext.disableAutoDataTransfer) {
      return splitPanelContext.getMappedParentData();
    }
    return {};
-  }, [splitPanelContext, splitPanelContext?.selectedLeftData]);
+  }, [splitPanelContext, splitPanelContext?.selectedLeftData, splitPanelContext?.disableAutoDataTransfer]);

  // formData 결정 (외부에서 전달받은 것이 있으면 우선 사용, 분할 패널 데이터도 병합)
  const formData = React.useMemo(() => {
    const baseData = externalFormData || localFormData;
    // 분할 패널 매핑 데이터가 있으면 병합 (기존 값이 없는 경우에만)
+    // disableAutoDataTransfer가 true이면 자동 병합 안함
    if (Object.keys(splitPanelMappedData).length > 0) {
      const merged = { ...baseData };
      for (const [key, value] of Object.entries(splitPanelMappedData)) {
--- a/frontend/contexts/SplitPanelContext.tsx
+++ b/frontend/contexts/SplitPanelContext.tsx
@@ -88,6 +88,9 @@ interface SplitPanelContextValue {
  
  // 🆕 연결 필터 값 가져오기 (우측 테이블 조회 시 사용)
  getLinkedFilterValues: () => Record<string, any>;
+  
+  // 🆕 자동 데이터 전달 비활성화 여부 (버튼 클릭 시에만 데이터 전달)
+  disableAutoDataTransfer: boolean;
 }

 const SplitPanelContext = createContext<SplitPanelContextValue | null>(null);
@@ -98,6 +101,7 @@ interface SplitPanelProviderProps {
  rightScreenId: number | null;
  parentDataMapping?: ParentDataMapping[];  // 🆕 부모 데이터 매핑 설정
  linkedFilters?: LinkedFilter[];  // 🆕 연결 필터 설정
+  disableAutoDataTransfer?: boolean;  // 🆕 자동 데이터 전달 비활성화 (버튼 클릭 시에만 전달)
  children: React.ReactNode;
 }

@@ -110,6 +114,7 @@ export function SplitPanelProvider({
  rightScreenId,
  parentDataMapping = [],
  linkedFilters = [],
+  disableAutoDataTransfer = false,
  children,
 }: SplitPanelProviderProps) {
  // 좌측/우측 화면의 데이터 수신자 맵
@@ -372,6 +377,8 @@ export function SplitPanelProvider({
    // 🆕 연결 필터 관련
    linkedFilters,
    getLinkedFilterValues,
+    // 🆕 자동 데이터 전달 비활성화 여부
+    disableAutoDataTransfer,
  }), [
    splitPanelId,
    leftScreenId,
@@ -391,6 +398,7 @@ export function SplitPanelProvider({
    getMappedParentData,
    linkedFilters,
    getLinkedFilterValues,
+    disableAutoDataTransfer,
  ]);

  return (
--- a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
@@ -345,7 +345,8 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
    }

    // 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
-    if (splitPanelContext && splitPanelPosition === "left") {
+    // disableAutoDataTransfer가 true이면 자동 전달 비활성화 (버튼 클릭으로만 전달)
+    if (splitPanelContext && splitPanelPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
      if (checked) {
        splitPanelContext.setSelectedLeftData(data);
        console.log("[CardDisplay] 분할 패널 좌측 데이터 저장:", {
--- a/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
+++ b/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
@@ -53,6 +53,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
    buttonPosition: config.buttonPosition || "center",
    parentDataMapping: config.parentDataMapping || [] as ParentDataMapping[],
    linkedFilters: config.linkedFilters || [] as LinkedFilter[],
+    disableAutoDataTransfer: config.disableAutoDataTransfer ?? false,  // 자동 데이터 전달 비활성화
    ...config,
  });

@@ -69,6 +70,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
      buttonPosition: config.buttonPosition || "center",
      parentDataMapping: config.parentDataMapping || [],
      linkedFilters: config.linkedFilters || [],
+      disableAutoDataTransfer: config.disableAutoDataTransfer ?? false,
      ...config,
    });
  }, [config]);
@@ -386,6 +388,26 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                  onCheckedChange={(checked) => updateConfig("resizable", checked)}
                />
              </div>
+
+              <Separator />
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label htmlFor="disableAutoDataTransfer" className="text-xs font-medium">
+                    자동 데이터 전달 비활성화
+                  </Label>
+                  <p className="text-muted-foreground text-xs">
+                    좌측 행 선택 시 우측으로 데이터가 자동 전달되지 않습니다.
+                    <br />
+                    버튼 클릭으로만 데이터를 전달하려면 활성화하세요.
+                  </p>
+                </div>
+                <Checkbox
+                  id="disableAutoDataTransfer"
+                  checked={localConfig.disableAutoDataTransfer}
+                  onCheckedChange={(checked) => updateConfig("disableAutoDataTransfer", checked)}
+                />
+              </div>
            </CardContent>
          </Card>
        </TabsContent>
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1764,7 +1764,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
    handleRowSelection(rowKey, !isCurrentlySelected);

    // 🆕 분할 패널 컨텍스트에 선택된 데이터 저장 (좌측 화면인 경우)
-    if (splitPanelContext && splitPanelPosition === "left") {
+    // disableAutoDataTransfer가 true이면 자동 전달 비활성화 (버튼 클릭으로만 전달)
+    if (splitPanelContext && splitPanelPosition === "left" && !splitPanelContext.disableAutoDataTransfer) {
      if (!isCurrentlySelected) {
        // 선택된 경우: 데이터 저장
        splitPanelContext.setSelectedLeftData(row);