jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/v2-renewal' of http://39.117.244.52:3000/kjs/ERP-node into jskim-node

Browse Source
This commit is contained in:
kjs
2026-02-10 16:23:27 +09:00
parent e97fd05e75
commit 86a73267cb
3 changed files with 145 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
View File

@@ -221,6 +221,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
const [resizeSize, setResizeSize] = useState<{ width: number; height: number } | null>(null);
// 🆕 외부에서 전달받은 선택 상태 사용 (탭 컴포넌트와 동일 구조)
const selectedPanelComponentId = externalSelectedPanelComponentId || null;
// 🆕 커스텀 모드: 분할패널 내 탭 컴포넌트의 선택 상태 관리
const [nestedTabSelectedCompId, setNestedTabSelectedCompId] = useState<string | undefined>(undefined);
const rafRef = useRef<number | null>(null);
// 🆕 10px 단위 스냅 함수
@@ -300,8 +302,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
rafRef.current = requestAnimationFrame(() => {
const deltaX = moveEvent.clientX - startMouseX;
const deltaY = moveEvent.clientY - startMouseY;
const newX = Math.max(0, startLeft + deltaX);
const newY = Math.max(0, startTop + deltaY);
// 10px 단위 스냅 적용
const newX = snapTo10(Math.max(0, startLeft + deltaX));
const newY = snapTo10(Math.max(0, startTop + deltaY));
setDragPosition({ x: newX, y: newY });
});
};
@@ -317,8 +320,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
const deltaX = upEvent.clientX - startMouseX;
const deltaY = upEvent.clientY - startMouseY;
const newX = Math.max(0, startLeft + deltaX);
const newY = Math.max(0, startTop + deltaY);
// 10px 단위 스냅 적용
const newX = snapTo10(Math.max(0, startLeft + deltaX));
const newY = snapTo10(Math.max(0, startTop + deltaY));
setDraggingCompId(null);
setDragPosition(null);
@@ -328,7 +332,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
const panelConfig = componentConfig[panelKey] || {};
const updatedComponents = (panelConfig.components || []).map((c: PanelInlineComponent) =>
c.id === comp.id
? { ...c, position: { x: Math.round(newX), y: Math.round(newY) } }
? { ...c, position: { x: newX, y: newY } }
: c
);
@@ -348,7 +352,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
},
[component, componentConfig, onUpdateComponent]
[component, componentConfig, onUpdateComponent, snapTo10]
);
// 🆕 커스텀 모드: 리사이즈 시작 핸들러
@@ -2601,6 +2605,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
}}
onClick={(e) => {
e.stopPropagation();
// 패널 컴포넌트 선택 시 탭 내 선택 해제
if (comp.componentType !== "v2-tabs-widget") {
setNestedTabSelectedCompId(undefined);
}
onSelectPanelComponent?.("left", comp.id, comp);
}}
>
@@ -2680,6 +2688,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
// 🆕 중첩된 탭 내부 컴포넌트 선택 핸들러 - 부모 분할 패널 정보 포함
onSelectTabComponent={(tabId: string, compId: string, tabComp: any) => {
console.log("🔍 [SplitPanel-Left] onSelectTabComponent 호출:", { tabId, compId, tabComp, parentSplitPanelId: component.id });
// 탭 내 컴포넌트 선택 상태 업데이트
setNestedTabSelectedCompId(compId);
// 부모 분할 패널 정보와 함께 전역 이벤트 발생
const event = new CustomEvent("nested-tab-component-select", {
detail: {
@@ -2693,7 +2703,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
});
window.dispatchEvent(event);
}}
selectedTabComponentId={undefined}
selectedTabComponentId={nestedTabSelectedCompId}
/>
</div>
@@ -3494,6 +3504,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
}}
onClick={(e) => {
e.stopPropagation();
// 패널 컴포넌트 선택 시 탭 내 선택 해제
if (comp.componentType !== "v2-tabs-widget") {
setNestedTabSelectedCompId(undefined);
}
onSelectPanelComponent?.("right", comp.id, comp);
}}
>
@@ -3573,6 +3587,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
// 🆕 중첩된 탭 내부 컴포넌트 선택 핸들러 - 부모 분할 패널 정보 포함
onSelectTabComponent={(tabId: string, compId: string, tabComp: any) => {
console.log("🔍 [SplitPanel-Right] onSelectTabComponent 호출:", { tabId, compId, tabComp, parentSplitPanelId: component.id });
// 탭 내 컴포넌트 선택 상태 업데이트
setNestedTabSelectedCompId(compId);
// 부모 분할 패널 정보와 함께 전역 이벤트 발생
const event = new CustomEvent("nested-tab-component-select", {
detail: {
@@ -3586,7 +3602,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
});
window.dispatchEvent(event);
}}
selectedTabComponentId={undefined}
selectedTabComponentId={nestedTabSelectedCompId}
/>
</div>