diff --git a/frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx b/frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx new file mode 100644 index 00000000..e6507435 --- /dev/null +++ b/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 = ({ + config, + onChange, + tables, + screenTableName, + menuObjid, +}) => { + const handleChange = (newConfig: SplitPanelLayoutConfig) => { + onChange(newConfig); + + if (typeof window !== "undefined") { + window.dispatchEvent( + new CustomEvent("componentConfigChanged", { + detail: { config: newConfig }, + }) + ); + } + }; + + return ( + + ); +}; + +V2SplitPanelLayoutConfigPanel.displayName = "V2SplitPanelLayoutConfigPanel"; + +export default V2SplitPanelLayoutConfigPanel; diff --git a/frontend/lib/registry/components/v2-split-panel-layout/index.ts b/frontend/lib/registry/components/v2-split-panel-layout/index.ts index 5b7fb17d..356bd1b5 100644 --- a/frontend/lib/registry/components/v2-split-panel-layout/index.ts +++ b/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",