ninegrid2 6.1021.0 → 6.1023.0

package/dist/bundle.cjs.js

@@ -121369,8 +121369,6 @@ customElements.define('nx-tab-page', nxTabPage);
 
 class nxSplitter extends HTMLElement {
 	#mode;
-	#originalPrevFlex;
-	#originalNextFlex;
 
 	constructor() {
 		super();
@@ -121397,7 +121395,6 @@ class nxSplitter extends HTMLElement {
 		} else if (this.classList.contains('v')) {
 			this.#mode = "v";
 		} else {
-			// 형제 요소의 위치를 비교하여 모드를 감지
 			this.#mode = (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 		}
 	};
@@ -121406,13 +121403,9 @@ class nxSplitter extends HTMLElement {
 		e.preventDefault();
 		e.stopPropagation();
 
-		const splitterRect = this.getBoundingClientRect();
+		this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		isHorizontal
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
 		const dragBar = document.createElement("div");
 		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
 
@@ -121470,25 +121463,26 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
-		// #startDrag 메서드 내부 (수정된 onUp 함수)
 		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
+			const parent = this.parentElement;
+			const isHorizontal = this.#mode === "h";
+
+			// 모든 패널과 스플리터의 현재 크기를 가져옵니다.
+			const allChildren = Array.from(parent.children);
+			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
 			const finalDragBarPosInParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			const parent = this.parentElement;
 			const parentRect = parent.getBoundingClientRect();
-			const splitterRect = this.getBoundingClientRect();
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-			const isHorizontal = this.#mode === "h";
-
 			const prevRect = prev.getBoundingClientRect();
 			const nextRect = next.getBoundingClientRect();
+			const splitterRect = this.getBoundingClientRect();
 
 			const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
 			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
@@ -121497,24 +121491,14 @@ class nxSplitter extends HTMLElement {
 			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
 			const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
 
-			const totalInitialSize = Array.from(parent.children)
-				.filter(el => el.tagName.toLowerCase() !== 'nx-splitter')
-				.reduce((sum, el) => {
-					const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
-					return sum + size;
-				}, 0);
-
-			const newTotalSize = totalInitialSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
+			const totalContentSize = allPanels.reduce((sum, el) => {
+				const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+				return sum + size;
+			}, 0);
 
-			// 전체 패널의 새로운 Flex 비율을 계산하고 적용
-			const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
-
-			allPanels.length;
+			const newTotalContentSize = totalContentSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
 
 			allPanels.forEach(panel => {
-
-				console.log(panel);
-
 				const panelRect = panel.getBoundingClientRect();
 				const currentSize = isHorizontal ? panelRect.width : panelRect.height;
 
@@ -121522,10 +121506,8 @@ class nxSplitter extends HTMLElement {
 				if (panel === prev) newSize = newPrevSize;
 				if (panel === next) newSize = newNextSize;
 
-				const newFlexBasis = newSize / newTotalSize;
+				const newFlexBasis = newSize / newTotalContentSize;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
-
-				console.log(panel.style.flex);
 			});
 		};
 
@@ -121533,7 +121515,6 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
-
 	#init = () => {
 		this.#detectMode(this);
 
@@ -121567,28 +121548,25 @@ class nxSplitter extends HTMLElement {
 	#prepareLayout = () => {
 		const isHorizontal = this.#mode === "h";
 		const parent = this.parentElement;
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-		if (!prev || !next || !parent) return;
+		const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
+		if (allPanels.length < 2) return;
 
 		const parentRect = parent.getBoundingClientRect();
-		const currentPrevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-		const currentNextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
 
-		const totalContentSize = Array.from(parent.children).reduce((sum, el) => {
-			const rect = el.getBoundingClientRect();
-			const size = isHorizontal ? rect.width : rect.height;
+		const totalContentSize = allPanels.reduce((sum, el) => {
+			const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
 			return sum + size;
 		}, 0);
 
 		const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		// 리사이즈 시 비율 유지
-		const newPrevSize = totalParentSize * (currentPrevSize / totalContentSize);
-		const newNextSize = totalParentSize * (currentNextSize / totalContentSize);
-
-		prev.style.flex = `0 0 ${newPrevSize}px`;
-		next.style.flex = `0 0 ${newNextSize}px`;
+		allPanels.forEach(panel => {
+			const size = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
+			const newSize = totalParentSize * (size / totalContentSize);
+			const flexGrow = newSize / totalParentSize;
+			panel.style.flex = `${flexGrow} ${flexGrow} 0`;
+		});
 	};
 }
 

package/dist/bundle.esm.js

@@ -121365,8 +121365,6 @@ customElements.define('nx-tab-page', nxTabPage);
 
 class nxSplitter extends HTMLElement {
 	#mode;
-	#originalPrevFlex;
-	#originalNextFlex;
 
 	constructor() {
 		super();
@@ -121393,7 +121391,6 @@ class nxSplitter extends HTMLElement {
 		} else if (this.classList.contains('v')) {
 			this.#mode = "v";
 		} else {
-			// 형제 요소의 위치를 비교하여 모드를 감지
 			this.#mode = (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 		}
 	};
@@ -121402,13 +121399,9 @@ class nxSplitter extends HTMLElement {
 		e.preventDefault();
 		e.stopPropagation();
 
-		const splitterRect = this.getBoundingClientRect();
+		this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		isHorizontal
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
 		const dragBar = document.createElement("div");
 		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
 
@@ -121466,25 +121459,26 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
-		// #startDrag 메서드 내부 (수정된 onUp 함수)
 		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
+			const parent = this.parentElement;
+			const isHorizontal = this.#mode === "h";
+
+			// 모든 패널과 스플리터의 현재 크기를 가져옵니다.
+			const allChildren = Array.from(parent.children);
+			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
 			const finalDragBarPosInParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			const parent = this.parentElement;
 			const parentRect = parent.getBoundingClientRect();
-			const splitterRect = this.getBoundingClientRect();
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-			const isHorizontal = this.#mode === "h";
-
 			const prevRect = prev.getBoundingClientRect();
 			const nextRect = next.getBoundingClientRect();
+			const splitterRect = this.getBoundingClientRect();
 
 			const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
 			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
@@ -121493,24 +121487,14 @@ class nxSplitter extends HTMLElement {
 			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
 			const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
 
-			const totalInitialSize = Array.from(parent.children)
-				.filter(el => el.tagName.toLowerCase() !== 'nx-splitter')
-				.reduce((sum, el) => {
-					const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
-					return sum + size;
-				}, 0);
-
-			const newTotalSize = totalInitialSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
+			const totalContentSize = allPanels.reduce((sum, el) => {
+				const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+				return sum + size;
+			}, 0);
 
-			// 전체 패널의 새로운 Flex 비율을 계산하고 적용
-			const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
-
-			allPanels.length;
+			const newTotalContentSize = totalContentSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
 
 			allPanels.forEach(panel => {
-
-				console.log(panel);
-
 				const panelRect = panel.getBoundingClientRect();
 				const currentSize = isHorizontal ? panelRect.width : panelRect.height;
 
@@ -121518,10 +121502,8 @@ class nxSplitter extends HTMLElement {
 				if (panel === prev) newSize = newPrevSize;
 				if (panel === next) newSize = newNextSize;
 
-				const newFlexBasis = newSize / newTotalSize;
+				const newFlexBasis = newSize / newTotalContentSize;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
-
-				console.log(panel.style.flex);
 			});
 		};
 
@@ -121529,7 +121511,6 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
-
 	#init = () => {
 		this.#detectMode(this);
 
@@ -121563,28 +121544,25 @@ class nxSplitter extends HTMLElement {
 	#prepareLayout = () => {
 		const isHorizontal = this.#mode === "h";
 		const parent = this.parentElement;
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-		if (!prev || !next || !parent) return;
+		const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
+		if (allPanels.length < 2) return;
 
 		const parentRect = parent.getBoundingClientRect();
-		const currentPrevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-		const currentNextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
 
-		const totalContentSize = Array.from(parent.children).reduce((sum, el) => {
-			const rect = el.getBoundingClientRect();
-			const size = isHorizontal ? rect.width : rect.height;
+		const totalContentSize = allPanels.reduce((sum, el) => {
+			const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
 			return sum + size;
 		}, 0);
 
 		const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		// 리사이즈 시 비율 유지
-		const newPrevSize = totalParentSize * (currentPrevSize / totalContentSize);
-		const newNextSize = totalParentSize * (currentNextSize / totalContentSize);
-
-		prev.style.flex = `0 0 ${newPrevSize}px`;
-		next.style.flex = `0 0 ${newNextSize}px`;
+		allPanels.forEach(panel => {
+			const size = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
+			const newSize = totalParentSize * (size / totalContentSize);
+			const flexGrow = newSize / totalParentSize;
+			panel.style.flex = `${flexGrow} ${flexGrow} 0`;
+		});
 	};
 }
 

package/dist/nx/nxSplitter.js

@@ -2,8 +2,6 @@ import ninegrid from "../index.js";
 
 class nxSplitter extends HTMLElement {
 	#mode;
-	#originalPrevFlex;
-	#originalNextFlex;
 
 	constructor() {
 		super();
@@ -30,7 +28,6 @@ class nxSplitter extends HTMLElement {
 		} else if (this.classList.contains('v')) {
 			this.#mode = "v";
 		} else {
-			// 형제 요소의 위치를 비교하여 모드를 감지
 			this.#mode = (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 		}
 	};
@@ -42,10 +39,6 @@ class nxSplitter extends HTMLElement {
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		const clickOffset = isHorizontal
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
 		const dragBar = document.createElement("div");
 		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
 
@@ -103,25 +96,26 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
-		// #startDrag 메서드 내부 (수정된 onUp 함수)
 		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
+			const parent = this.parentElement;
+			const isHorizontal = this.#mode === "h";
+
+			// 모든 패널과 스플리터의 현재 크기를 가져옵니다.
+			const allChildren = Array.from(parent.children);
+			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
 			const finalDragBarPosInParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			const parent = this.parentElement;
 			const parentRect = parent.getBoundingClientRect();
-			const splitterRect = this.getBoundingClientRect();
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-			const isHorizontal = this.#mode === "h";
-
 			const prevRect = prev.getBoundingClientRect();
 			const nextRect = next.getBoundingClientRect();
+			const splitterRect = this.getBoundingClientRect();
 
 			const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
 			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
@@ -130,24 +124,14 @@ class nxSplitter extends HTMLElement {
 			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
 			const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
 
-			const totalInitialSize = Array.from(parent.children)
-				.filter(el => el.tagName.toLowerCase() !== 'nx-splitter')
-				.reduce((sum, el) => {
-					const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
-					return sum + size;
-				}, 0);
-
-			const newTotalSize = totalInitialSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
+			const totalContentSize = allPanels.reduce((sum, el) => {
+				const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+				return sum + size;
+			}, 0);
 
-			// 전체 패널의 새로운 Flex 비율을 계산하고 적용
-			const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
-
-			const newTotalFlex = allPanels.length;
+			const newTotalContentSize = totalContentSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
 
 			allPanels.forEach(panel => {
-
-				console.log(panel);
-
 				const panelRect = panel.getBoundingClientRect();
 				const currentSize = isHorizontal ? panelRect.width : panelRect.height;
 
@@ -155,10 +139,8 @@ class nxSplitter extends HTMLElement {
 				if (panel === prev) newSize = newPrevSize;
 				if (panel === next) newSize = newNextSize;
 
-				const newFlexBasis = newSize / newTotalSize;
+				const newFlexBasis = newSize / newTotalContentSize;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
-
-				console.log(panel.style.flex);
 			});
 		};
 
@@ -166,7 +148,6 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
-
 	#init = () => {
 		this.#detectMode(this);
 
@@ -200,28 +181,25 @@ class nxSplitter extends HTMLElement {
 	#prepareLayout = () => {
 		const isHorizontal = this.#mode === "h";
 		const parent = this.parentElement;
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-		if (!prev || !next || !parent) return;
+		const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
+		if (allPanels.length < 2) return;
 
 		const parentRect = parent.getBoundingClientRect();
-		const currentPrevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-		const currentNextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
 
-		const totalContentSize = Array.from(parent.children).reduce((sum, el) => {
-			const rect = el.getBoundingClientRect();
-			const size = isHorizontal ? rect.width : rect.height;
+		const totalContentSize = allPanels.reduce((sum, el) => {
+			const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
 			return sum + size;
 		}, 0);
 
 		const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		// 리사이즈 시 비율 유지
-		const newPrevSize = totalParentSize * (currentPrevSize / totalContentSize);
-		const newNextSize = totalParentSize * (currentNextSize / totalContentSize);
-
-		prev.style.flex = `0 0 ${newPrevSize}px`;
-		next.style.flex = `0 0 ${newNextSize}px`;
+		allPanels.forEach(panel => {
+			const size = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
+			const newSize = totalParentSize * (size / totalContentSize);
+			const flexGrow = newSize / totalParentSize;
+			panel.style.flex = `${flexGrow} ${flexGrow} 0`;
+		});
 	};
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.1021.0",
+  "version": "6.1023.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxSplitter.js

@@ -2,8 +2,6 @@ import ninegrid from "../index.js";
 
 class nxSplitter extends HTMLElement {
 	#mode;
-	#originalPrevFlex;
-	#originalNextFlex;
 
 	constructor() {
 		super();
@@ -30,7 +28,6 @@ class nxSplitter extends HTMLElement {
 		} else if (this.classList.contains('v')) {
 			this.#mode = "v";
 		} else {
-			// 형제 요소의 위치를 비교하여 모드를 감지
 			this.#mode = (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 		}
 	};
@@ -42,10 +39,6 @@ class nxSplitter extends HTMLElement {
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		const clickOffset = isHorizontal
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
 		const dragBar = document.createElement("div");
 		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
 
@@ -103,25 +96,26 @@ class nxSplitter extends HTMLElement {
 			}
 		};
 
-		// #startDrag 메서드 내부 (수정된 onUp 함수)
 		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
+			const parent = this.parentElement;
+			const isHorizontal = this.#mode === "h";
+
+			// 모든 패널과 스플리터의 현재 크기를 가져옵니다.
+			const allChildren = Array.from(parent.children);
+			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
 			const finalDragBarPosInParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			const parent = this.parentElement;
 			const parentRect = parent.getBoundingClientRect();
-			const splitterRect = this.getBoundingClientRect();
-			const prev = this.previousElementSibling;
-			const next = this.nextElementSibling;
-			const isHorizontal = this.#mode === "h";
-
 			const prevRect = prev.getBoundingClientRect();
 			const nextRect = next.getBoundingClientRect();
+			const splitterRect = this.getBoundingClientRect();
 
 			const prevStartPosInParent = isHorizontal ? prevRect.left - parentRect.left : prevRect.top - parentRect.top;
 			const splitterThickness = isHorizontal ? splitterRect.width : splitterRect.height;
@@ -130,24 +124,14 @@ class nxSplitter extends HTMLElement {
 			const newPrevSize = finalDragBarPosInParent - prevStartPosInParent;
 			const newNextSize = (isHorizontal ? nextRect.right : nextRect.bottom) - finalDragBarPosInParent - splitterThickness;
 
-			const totalInitialSize = Array.from(parent.children)
-				.filter(el => el.tagName.toLowerCase() !== 'nx-splitter')
-				.reduce((sum, el) => {
-					const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
-					return sum + size;
-				}, 0);
-
-			const newTotalSize = totalInitialSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
+			const totalContentSize = allPanels.reduce((sum, el) => {
+				const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+				return sum + size;
+			}, 0);
 
-			// 전체 패널의 새로운 Flex 비율을 계산하고 적용
-			const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
-
-			const newTotalFlex = allPanels.length;
+			const newTotalContentSize = totalContentSize - (isHorizontal ? prevRect.width + nextRect.width : prevRect.height + nextRect.height) + newPrevSize + newNextSize;
 
 			allPanels.forEach(panel => {
-
-				console.log(panel);
-
 				const panelRect = panel.getBoundingClientRect();
 				const currentSize = isHorizontal ? panelRect.width : panelRect.height;
 
@@ -155,10 +139,8 @@ class nxSplitter extends HTMLElement {
 				if (panel === prev) newSize = newPrevSize;
 				if (panel === next) newSize = newNextSize;
 
-				const newFlexBasis = newSize / newTotalSize;
+				const newFlexBasis = newSize / newTotalContentSize;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
-
-				console.log(panel.style.flex);
 			});
 		};
 
@@ -166,7 +148,6 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
-
 	#init = () => {
 		this.#detectMode(this);
 
@@ -200,28 +181,25 @@ class nxSplitter extends HTMLElement {
 	#prepareLayout = () => {
 		const isHorizontal = this.#mode === "h";
 		const parent = this.parentElement;
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-		if (!prev || !next || !parent) return;
+		const allPanels = Array.from(parent.children).filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
+
+		if (allPanels.length < 2) return;
 
 		const parentRect = parent.getBoundingClientRect();
-		const currentPrevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-		const currentNextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
 
-		const totalContentSize = Array.from(parent.children).reduce((sum, el) => {
-			const rect = el.getBoundingClientRect();
-			const size = isHorizontal ? rect.width : rect.height;
+		const totalContentSize = allPanels.reduce((sum, el) => {
+			const size = isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
 			return sum + size;
 		}, 0);
 
 		const totalParentSize = isHorizontal ? parentRect.width : parentRect.height;
 
-		// 리사이즈 시 비율 유지
-		const newPrevSize = totalParentSize * (currentPrevSize / totalContentSize);
-		const newNextSize = totalParentSize * (currentNextSize / totalContentSize);
-
-		prev.style.flex = `0 0 ${newPrevSize}px`;
-		next.style.flex = `0 0 ${newNextSize}px`;
+		allPanels.forEach(panel => {
+			const size = isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height;
+			const newSize = totalParentSize * (size / totalContentSize);
+			const flexGrow = newSize / totalParentSize;
+			panel.style.flex = `${flexGrow} ${flexGrow} 0`;
+		});
 	};
 }