ninegrid2 6.1069.0 → 6.1071.0

package/dist/bundle.cjs.js

@@ -121406,9 +121406,6 @@ class nxSplitter extends HTMLElement {
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// ⭐ 마우스 초기 위치 저장 ⭐
-		const initialMousePos = isHorizontal ? e.clientX : e.clientY;
-
 		// 마우스 포인터와 스플리터 시작점 사이의 거리
 		isHorizontal
 			? e.clientX - splitterRect.left
@@ -121436,23 +121433,25 @@ class nxSplitter extends HTMLElement {
 		}
 
 		(parent.shadowRoot || parent).appendChild(dragBar);
-		//const parentRect = parent.getBoundingClientRect();
+		const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
+
 		const prevRect = prev.getBoundingClientRect();
 		const nextRect = next.getBoundingClientRect();
 
 		// 드래그 바의 초기 위치와 크기 설정
-		// startDrag 메서드 내부
-		const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
+		const initialSplitterPosInParent = isHorizontal
+			? splitterRect.left - dragBarOffsetParentRect.left
+			: splitterRect.top - dragBarOffsetParentRect.top;
 
 		if (isHorizontal) {
 			dragBar.style.top = "0";
-			dragBar.style.left = `${e.clientX - dragBarOffsetParentRect.left}px`;
-			dragBar.style.width = "1px"; // ⭐ 1px로 변경
+			dragBar.style.left = `${initialSplitterPosInParent}px`;
+			dragBar.style.width = "1px";
 			dragBar.style.height = "100%";
 		} else {
 			dragBar.style.left = "0";
-			dragBar.style.top = `${e.clientY - dragBarOffsetParentRect.top}px`;
-			dragBar.style.height = "1px"; // ⭐ 1px로 변경
+			dragBar.style.top = `${initialSplitterPosInParent}px`;
+			dragBar.style.height = "1px";
 			dragBar.style.width = "100%";
 		}
 
@@ -121476,11 +121475,9 @@ class nxSplitter extends HTMLElement {
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
-		const onUp = (e) => {
+		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
@@ -121488,10 +121485,17 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
-			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
+			const dragOffset = finalDragBarPos - initialSplitterPosInParent;
+
+			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
+
+			const newPrevSize = prevSize + dragOffset;
+			const newNextSize = nextSize - dragOffset;
+
+			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
 
-			// ⭐⭐ 모든 스플리터의 총 픽셀 크기 ⭐⭐
 			const totalSplitterSize = allChildren.reduce((sum, child) => {
 				if (child.tagName.toLowerCase() === 'nx-splitter') {
 					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
@@ -121499,32 +121503,8 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
-			allChildren.length - 1;
-			const totalGapSize = 0;//gapCount * 8;
-
-			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
-			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
-
-// ⭐⭐ 모든 패널의 초기 크기를 미리 저장 ⭐⭐
-			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
-
-
-			// 드래그로 인한 픽셀 변화량 계산
-			//const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
-			//	(isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top);
-
-			// ⭐ 정확한 dragOffset 계산 ⭐
-			const finalMousePos = isHorizontal ? e.clientX : e.clientY;
-			const dragOffset = finalMousePos - initialMousePos;
-
-			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
-
-			const newPrevSize = prevSize + dragOffset;
-			const newNextSize = nextSize - dragOffset;
-
-			console.log(prevSize, newPrevSize);
+			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
+			const totalFlexSpace = totalContainerSize - totalSplitterSize;
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -121537,16 +121517,12 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
-				//console.log(newSize)
-
-				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
-			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
-			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
+			console.log(`dragOffset: ${dragOffset}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 

package/dist/bundle.esm.js

@@ -121402,9 +121402,6 @@ class nxSplitter extends HTMLElement {
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// ⭐ 마우스 초기 위치 저장 ⭐
-		const initialMousePos = isHorizontal ? e.clientX : e.clientY;
-
 		// 마우스 포인터와 스플리터 시작점 사이의 거리
 		isHorizontal
 			? e.clientX - splitterRect.left
@@ -121432,23 +121429,25 @@ class nxSplitter extends HTMLElement {
 		}
 
 		(parent.shadowRoot || parent).appendChild(dragBar);
-		//const parentRect = parent.getBoundingClientRect();
+		const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
+
 		const prevRect = prev.getBoundingClientRect();
 		const nextRect = next.getBoundingClientRect();
 
 		// 드래그 바의 초기 위치와 크기 설정
-		// startDrag 메서드 내부
-		const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
+		const initialSplitterPosInParent = isHorizontal
+			? splitterRect.left - dragBarOffsetParentRect.left
+			: splitterRect.top - dragBarOffsetParentRect.top;
 
 		if (isHorizontal) {
 			dragBar.style.top = "0";
-			dragBar.style.left = `${e.clientX - dragBarOffsetParentRect.left}px`;
-			dragBar.style.width = "1px"; // ⭐ 1px로 변경
+			dragBar.style.left = `${initialSplitterPosInParent}px`;
+			dragBar.style.width = "1px";
 			dragBar.style.height = "100%";
 		} else {
 			dragBar.style.left = "0";
-			dragBar.style.top = `${e.clientY - dragBarOffsetParentRect.top}px`;
-			dragBar.style.height = "1px"; // ⭐ 1px로 변경
+			dragBar.style.top = `${initialSplitterPosInParent}px`;
+			dragBar.style.height = "1px";
 			dragBar.style.width = "100%";
 		}
 
@@ -121472,11 +121471,9 @@ class nxSplitter extends HTMLElement {
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
-		const onUp = (e) => {
+		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
@@ -121484,10 +121481,17 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
-			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
+			const dragOffset = finalDragBarPos - initialSplitterPosInParent;
+
+			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
+
+			const newPrevSize = prevSize + dragOffset;
+			const newNextSize = nextSize - dragOffset;
+
+			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
 
-			// ⭐⭐ 모든 스플리터의 총 픽셀 크기 ⭐⭐
 			const totalSplitterSize = allChildren.reduce((sum, child) => {
 				if (child.tagName.toLowerCase() === 'nx-splitter') {
 					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
@@ -121495,32 +121499,8 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
-			allChildren.length - 1;
-			const totalGapSize = 0;//gapCount * 8;
-
-			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
-			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
-
-// ⭐⭐ 모든 패널의 초기 크기를 미리 저장 ⭐⭐
-			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
-
-
-			// 드래그로 인한 픽셀 변화량 계산
-			//const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
-			//	(isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top);
-
-			// ⭐ 정확한 dragOffset 계산 ⭐
-			const finalMousePos = isHorizontal ? e.clientX : e.clientY;
-			const dragOffset = finalMousePos - initialMousePos;
-
-			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
-
-			const newPrevSize = prevSize + dragOffset;
-			const newNextSize = nextSize - dragOffset;
-
-			console.log(prevSize, newPrevSize);
+			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
+			const totalFlexSpace = totalContainerSize - totalSplitterSize;
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -121533,16 +121513,12 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
-				//console.log(newSize)
-
-				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
-			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
-			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
+			console.log(`dragOffset: ${dragOffset}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 

package/dist/nx/nxSplitter.js

@@ -39,9 +39,6 @@ class nxSplitter extends HTMLElement {
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// ⭐ 마우스 초기 위치 저장 ⭐
-		const initialMousePos = isHorizontal ? e.clientX : e.clientY;
-
 		// 마우스 포인터와 스플리터 시작점 사이의 거리
 		const clickOffset = isHorizontal
 			? e.clientX - splitterRect.left
@@ -69,23 +66,25 @@ class nxSplitter extends HTMLElement {
 		}
 
 		(parent.shadowRoot || parent).appendChild(dragBar);
-		//const parentRect = parent.getBoundingClientRect();
+		const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
+
 		const prevRect = prev.getBoundingClientRect();
 		const nextRect = next.getBoundingClientRect();
 
 		// 드래그 바의 초기 위치와 크기 설정
-		// startDrag 메서드 내부
-		const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
+		const initialSplitterPosInParent = isHorizontal
+			? splitterRect.left - dragBarOffsetParentRect.left
+			: splitterRect.top - dragBarOffsetParentRect.top;
 
 		if (isHorizontal) {
 			dragBar.style.top = "0";
-			dragBar.style.left = `${e.clientX - dragBarOffsetParentRect.left}px`;
-			dragBar.style.width = "1px"; // ⭐ 1px로 변경
+			dragBar.style.left = `${initialSplitterPosInParent}px`;
+			dragBar.style.width = "1px";
 			dragBar.style.height = "100%";
 		} else {
 			dragBar.style.left = "0";
-			dragBar.style.top = `${e.clientY - dragBarOffsetParentRect.top}px`;
-			dragBar.style.height = "1px"; // ⭐ 1px로 변경
+			dragBar.style.top = `${initialSplitterPosInParent}px`;
+			dragBar.style.height = "1px";
 			dragBar.style.width = "100%";
 		}
 
@@ -109,11 +108,9 @@ class nxSplitter extends HTMLElement {
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
-		const onUp = (e) => {
+		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
@@ -121,10 +118,17 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
-			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
+			const dragOffset = finalDragBarPos - initialSplitterPosInParent;
+
+			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
+
+			const newPrevSize = prevSize + dragOffset;
+			const newNextSize = nextSize - dragOffset;
+
+			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
 
-			// ⭐⭐ 모든 스플리터의 총 픽셀 크기 ⭐⭐
 			const totalSplitterSize = allChildren.reduce((sum, child) => {
 				if (child.tagName.toLowerCase() === 'nx-splitter') {
 					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
@@ -132,32 +136,8 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
-			const gapCount = allChildren.length - 1;
-			const totalGapSize = 0;//gapCount * 8;
-
-			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
-			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
-
-// ⭐⭐ 모든 패널의 초기 크기를 미리 저장 ⭐⭐
-			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
-
-
-			// 드래그로 인한 픽셀 변화량 계산
-			//const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
-			//	(isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top);
-
-			// ⭐ 정확한 dragOffset 계산 ⭐
-			const finalMousePos = isHorizontal ? e.clientX : e.clientY;
-			const dragOffset = finalMousePos - initialMousePos;
-
-			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
-
-			const newPrevSize = prevSize + dragOffset;
-			const newNextSize = nextSize - dragOffset;
-
-			console.log(prevSize, newPrevSize);
+			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
+			const totalFlexSpace = totalContainerSize - totalSplitterSize;
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -170,16 +150,12 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
-				//console.log(newSize)
-
-				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
-			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
-			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
+			console.log(`dragOffset: ${dragOffset}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};
 

package/package.json

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

package/src/nx/nxSplitter.js

@@ -39,9 +39,6 @@ class nxSplitter extends HTMLElement {
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// ⭐ 마우스 초기 위치 저장 ⭐
-		const initialMousePos = isHorizontal ? e.clientX : e.clientY;
-
 		// 마우스 포인터와 스플리터 시작점 사이의 거리
 		const clickOffset = isHorizontal
 			? e.clientX - splitterRect.left
@@ -69,23 +66,25 @@ class nxSplitter extends HTMLElement {
 		}
 
 		(parent.shadowRoot || parent).appendChild(dragBar);
-		//const parentRect = parent.getBoundingClientRect();
+		const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
+
 		const prevRect = prev.getBoundingClientRect();
 		const nextRect = next.getBoundingClientRect();
 
 		// 드래그 바의 초기 위치와 크기 설정
-		// startDrag 메서드 내부
-		const dragBarOffsetParentRect = dragBar.offsetParent.getBoundingClientRect();
+		const initialSplitterPosInParent = isHorizontal
+			? splitterRect.left - dragBarOffsetParentRect.left
+			: splitterRect.top - dragBarOffsetParentRect.top;
 
 		if (isHorizontal) {
 			dragBar.style.top = "0";
-			dragBar.style.left = `${e.clientX - dragBarOffsetParentRect.left}px`;
-			dragBar.style.width = "1px"; // ⭐ 1px로 변경
+			dragBar.style.left = `${initialSplitterPosInParent}px`;
+			dragBar.style.width = "1px";
 			dragBar.style.height = "100%";
 		} else {
 			dragBar.style.left = "0";
-			dragBar.style.top = `${e.clientY - dragBarOffsetParentRect.top}px`;
-			dragBar.style.height = "1px"; // ⭐ 1px로 변경
+			dragBar.style.top = `${initialSplitterPosInParent}px`;
+			dragBar.style.height = "1px";
 			dragBar.style.width = "100%";
 		}
 
@@ -109,11 +108,9 @@ class nxSplitter extends HTMLElement {
 			} else {
 				dragBar.style.top = `${clampedPos}px`;
 			}
-
-			console.log(clampedPos);
 		};
 
-		const onUp = (e) => {
+		const onUp = () => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
@@ -121,10 +118,17 @@ class nxSplitter extends HTMLElement {
 			const allChildren = Array.from(parent.children);
 			const allPanels = allChildren.filter(el => el.tagName.toLowerCase() !== 'nx-splitter');
 
-			// ⭐⭐ 부모의 총 픽셀 크기 ⭐⭐
-			const totalContainerSize = isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height;
+			const finalDragBarPos = isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top);
+			const dragOffset = finalDragBarPos - initialSplitterPosInParent;
+
+			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
+			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
+
+			const newPrevSize = prevSize + dragOffset;
+			const newNextSize = nextSize - dragOffset;
+
+			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
 
-			// ⭐⭐ 모든 스플리터의 총 픽셀 크기 ⭐⭐
 			const totalSplitterSize = allChildren.reduce((sum, child) => {
 				if (child.tagName.toLowerCase() === 'nx-splitter') {
 					return sum + (isHorizontal ? child.getBoundingClientRect().width : child.getBoundingClientRect().height);
@@ -132,32 +136,8 @@ class nxSplitter extends HTMLElement {
 				return sum;
 			}, 0);
 
-			// ⭐⭐ Flexbox의 'gap' 크기 계산 (하드코딩된 8px 사용) ⭐⭐
-			const gapCount = allChildren.length - 1;
-			const totalGapSize = 0;//gapCount * 8;
-
-			// ⭐⭐ Flexbox 컨테이너의 '총 유효 공간' (패널들이 차지할 수 있는 공간) 계산 ⭐⭐
-			const totalFlexSpace = totalContainerSize - totalSplitterSize - totalGapSize;
-
-// ⭐⭐ 모든 패널의 초기 크기를 미리 저장 ⭐⭐
-			const initialSizes = allPanels.map(panel => isHorizontal ? panel.getBoundingClientRect().width : panel.getBoundingClientRect().height);
-
-
-			// 드래그로 인한 픽셀 변화량 계산
-			//const dragOffset = (isHorizontal ? parseFloat(dragBar.style.left) : parseFloat(dragBar.style.top)) -
-			//	(isHorizontal ? this.getBoundingClientRect().left - parent.getBoundingClientRect().left : this.getBoundingClientRect().top - parent.getBoundingClientRect().top);
-
-			// ⭐ 정확한 dragOffset 계산 ⭐
-			const finalMousePos = isHorizontal ? e.clientX : e.clientY;
-			const dragOffset = finalMousePos - initialMousePos;
-
-			const prevSize = isHorizontal ? prev.getBoundingClientRect().width : prev.getBoundingClientRect().height;
-			const nextSize = isHorizontal ? next.getBoundingClientRect().width : next.getBoundingClientRect().height;
-
-			const newPrevSize = prevSize + dragOffset;
-			const newNextSize = nextSize - dragOffset;
-
-			console.log(prevSize, newPrevSize);
+			const totalContainerSize = (isHorizontal ? parent.getBoundingClientRect().width : parent.getBoundingClientRect().height);
+			const totalFlexSpace = totalContainerSize - totalSplitterSize;
 
 			let flexSum = 0;
 			allPanels.forEach((panel, index) => {
@@ -170,16 +150,12 @@ class nxSplitter extends HTMLElement {
 					newSize = initialSizes[index];
 				}
 
-				//console.log(newSize)
-
-				// ⭐⭐ 새로운 FlexBasis 계산 ⭐⭐
 				const newFlexBasis = newSize / totalFlexSpace;
 				panel.style.flex = `${newFlexBasis} ${newFlexBasis} 0`;
 				flexSum += newFlexBasis;
 			});
 
-			// ⭐⭐ 계산된 합계를 로그로 출력하여 확인 ⭐⭐
-			console.log(`newTotalFlexSpace: ${totalFlexSpace}`);
+			console.log(`dragOffset: ${dragOffset}`);
 			console.log(`Calculated FlexSum: ${flexSum}`);
 		};