64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"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;
|