[agent-pipeline] pipe-20260311151253-nyk7 round-4

frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+/**
+ * V2SplitPanelLayout 설정 패널
+ * 기존 SplitPanelLayoutConfigPanel의 전체 기능을 토스식 UX로 래핑
+ * - 메인 진입점: 카드 네비게이션 (기본설정/좌측패널/우측패널/추가탭)
+ * - 각 모달 내부: 기존 로직 100% 유지하되 Checkbox→Switch, 일부 Select→카드선택
+ */
+
+import React from "react";
+import { SplitPanelLayoutConfigPanel } from "@/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel";
+import type { SplitPanelLayoutConfig } from "@/lib/registry/components/v2-split-panel-layout/types";
+import type { TableInfo } from "@/types/screen";
+
+interface V2SplitPanelLayoutConfigPanelProps {
+  config: SplitPanelLayoutConfig;
+  onChange: (config: SplitPanelLayoutConfig) => void;
+  tables?: TableInfo[];
+  screenTableName?: string;
+  menuObjid?: number;
+}
+
+/**
+ * V2SplitPanelLayoutConfigPanel
+ * 기존 SplitPanelLayoutConfigPanel을 토스식 UX 래퍼로 감싸서 제공
+ * 
+ * 기존 패널은 이미 4개 카드→Dialog 모달 패턴을 사용하고 있어
+ * 토스식 구조(카드 선택, Switch, Collapsible)와 일치하므로
+ * componentConfigChanged 이벤트만 추가하여 실시간 업데이트 지원
+ */
+export const V2SplitPanelLayoutConfigPanel: React.FC<V2SplitPanelLayoutConfigPanelProps> = ({
+  config,
+  onChange,
+  tables,
+  screenTableName,
+  menuObjid,
+}) => {
+  const handleChange = (newConfig: SplitPanelLayoutConfig) => {
+    onChange(newConfig);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  };
+
+  return (
+    <SplitPanelLayoutConfigPanel
+      config={config}
+      onChange={handleChange}
+      tables={tables}
+      screenTableName={screenTableName}
+      menuObjid={menuObjid}
+    />
+  );
+};
+
+V2SplitPanelLayoutConfigPanel.displayName = "V2SplitPanelLayoutConfigPanel";
+
+export default V2SplitPanelLayoutConfigPanel;

frontend/lib/registry/components/v2-split-panel-layout/index.ts

@@ -4,7 +4,7 @@ import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { SplitPanelLayoutWrapper } from "./SplitPanelLayoutComponent";
-import { SplitPanelLayoutConfigPanel } from "./SplitPanelLayoutConfigPanel";
+import { V2SplitPanelLayoutConfigPanel } from "@/components/v2/config-panels/V2SplitPanelLayoutConfigPanel";
 import { SplitPanelLayoutConfig } from "./types";
 
 /**
@@ -42,7 +42,7 @@ export const V2SplitPanelLayoutDefinition = createComponentDefinition({
     syncSelection: true,
   } as SplitPanelLayoutConfig,
   defaultSize: { width: 800, height: 600 },
-  configPanel: SplitPanelLayoutConfigPanel,
+  configPanel: V2SplitPanelLayoutConfigPanel,
   icon: "PanelLeftRight",
   tags: ["분할", "마스터", "디테일", "레이아웃"],
   version: "1.0.0",