ninegrid2 6.857.0 → 6.859.0

package/dist/bundle.cjs.js

@@ -121167,20 +121167,25 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	#startDrag_BAK = (e) => {
-		e.preventDefault();
+	// 이전 #startDrag_BAK 함수는 삭제하거나 주석 처리합니다.
+	// #startDrag_BAK = (...) => { ... }
+
+	#startDrag = (e) => {
+		e.preventDefault(); // 기본 drag/select 동작 제거
 		e.stopPropagation();
 
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// 클릭 지점에서 스플리터 경계까지의 오프셋
+		// 클릭 지점에서 스플리터 경계까지의 오프셋 (이것은 dragBar 초기 위치와는 별개로, 최종 패널 사이즈 계산에 사용됨)
 		isHorizontal
 			? e.clientX - splitterRect.left
 			: e.clientY - splitterRect.top;
 
 		const dragBar = document.createElement("div");
 		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
+
+		// 스타일 지정
 		Object.assign(dragBar.style, {
 			position: "absolute",
 			zIndex: "999",
@@ -121190,7 +121195,6 @@ class nxSplitter extends HTMLElement {
 		});
 
 		const root = this.getRootNode({ composed: true });
-		// parent는 스플리터의 직접적인 컨테이너 (flex 컨테이너 역할)
 		const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
 
 		const prev = this.previousElementSibling;
@@ -121201,84 +121205,88 @@ class nxSplitter extends HTMLElement {
 			return;
 		}
 
-		const parentRect = parent.getBoundingClientRect();
-		const prevRect = prev.getBoundingClientRect();
-		const nextRect = next.getBoundingClientRect();
+		// ⭐ dragBar를 먼저 DOM에 추가하여 offsetParent를 확보합니다.
+		(parent.shadowRoot || parent).appendChild(dragBar);
+
+		// dragBar의 실제 offsetParent (position: absolute의 기준이 되는 요소)
+		const dragBarOffsetParent = dragBar.offsetParent;
+
+		if (!dragBarOffsetParent) {
+			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
+			dragBar.remove(); // 실패 시 dragBar 제거
+			return;
+		}
+
+		const dragBarOffsetParentRect = dragBarOffsetParent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect(); // 뷰포트 기준
+		const nextRect = next.getBoundingClientRect(); // 뷰포트 기준
+
 
-		// dragBar의 초기 위치 설정 (parent 기준)
-		// padding을 고려하지 않고 parentRect를 기준으로 하는 것이 일반적이며,
-		// 스플리터 컨테이너의 flex-basis가 padding을 포함하는지 여부에 따라 조절.
-		// 여기서는 parent의 content-box 기준으로 relative 위치를 계산.
-		let initialPos;
+		// 뷰포트 기준 클릭 위치를 dragBarOffsetParent 기준으로 변환하여 초기 dragBar 위치 설정
+		let initialPosInOffsetParent;
 		if (isHorizontal) {
-			initialPos = e.clientX - parentRect.left;
+			initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
 			dragBar.style.top = "0";
-			dragBar.style.left = `${initialPos}px`;
+			dragBar.style.left = `${initialPosInOffsetParent}px`;
 			dragBar.style.width = "1px";
 			dragBar.style.height = "100%";
 		} else {
-			initialPos = e.clientY - parentRect.top;
+			initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
 			dragBar.style.left = "0";
-			dragBar.style.top = `${initialPos}px`;
+			dragBar.style.top = `${initialPosInOffsetParent}px`;
 			dragBar.style.height = "1px";
 			dragBar.style.width = "100%";
 		}
 
-		// Shadow DOM이 있다면 ShadowRoot에, 아니면 일반 DOM에 삽입
-		(parent.shadowRoot || parent).appendChild(dragBar);
+		// 드래그 가능한 최소/최대 범위 (dragBarOffsetParent 기준으로 변환)
+		const minLimit = isHorizontal
+			? prevRect.left - dragBarOffsetParentRect.left
+			: prevRect.top - dragBarOffsetParentRect.top;
+		const maxLimit = isHorizontal
+			? nextRect.right - dragBarOffsetParentRect.left
+			: nextRect.bottom - dragBarOffsetParentRect.top;
 
-		// 드래그 가능한 범위 (부모 요소 내에서 이전/다음 엘리먼트의 실제 경계 기준)
-		const minLimit = isHorizontal ? prevRect.left : prevRect.top;
-		const maxLimit = isHorizontal ? nextRect.right : nextRect.bottom;
 
 		const onMove = moveEvent => {
 			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			// 드래그 바가 부모 영역을 벗어나지 않도록 클램프
-			const clampedPos = Math.max(minLimit, Math.min(clientPos, maxLimit));
+			// 뷰포트 기준 클릭 위치를 offsetParent 기준으로 변환
+			const currentPosInOffsetParent = isHorizontal
+				? clientPos - dragBarOffsetParentRect.left
+				: clientPos - dragBarOffsetParentRect.top;
 
-			// 부모 기준으로 드래그 바의 상대 위치
-			const relativePos = clampedPos - parentRect[isHorizontal ? "left" : "top"];
+			// 드래그 바가 최소/최대 범위 내에 있도록 클램프
+			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
 
 			if (isHorizontal) {
-				dragBar.style.left = `${relativePos}px`;
+				dragBar.style.left = `${clampedPos}px`;
 			} else {
-				dragBar.style.top = `${relativePos}px`;
+				dragBar.style.top = `${clampedPos}px`;
 			}
 		};
 
-		const onUp = upEvent => {
+		const onUp = (upEvent) => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			// 최종 드래그 바의 위치를 기준으로 새 크기 계산
-			const finalDragBarPos = isHorizontal
+			// 최종 드래그 바의 위치를 offsetParent 기준으로 가져옴
+			const finalDragBarPosInOffsetParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			// 이전 요소의 새로운 크기 (부모의 좌측/상단 경계부터 드래그 바까지)
-			const newPrevSize = finalDragBarPos;
+			// 이전 요소의 새로운 크기 (offsetParent의 시작점부터 드래그 바까지)
+			const newPrevSize = finalDragBarPosInOffsetParent;
 
-			// 다음 요소의 새로운 크기 (부모의 전체 크기에서 이전 요소 크기를 뺀 값)
-			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
-			const newNextSize = parentTotalSize - newPrevSize;
+			// 다음 요소의 새로운 크기 (offsetParent의 전체 크기에서 이전 요소 크기를 뺀 값)
+			const offsetParentTotalSize = isHorizontal
+				? dragBarOffsetParentRect.width
+				: dragBarOffsetParentRect.height;
+			const newNextSize = offsetParentTotalSize - newPrevSize;
 
-			// 최소/최대 크기 제약 (예: 1px 미만으로 작아지지 않도록)
 			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
 			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
 			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
 
-			// flex 레이아웃에 직접 width/height를 부여하는 대신 flex-basis를 사용하거나
-			// flex-grow 비율을 재조정하는 것이 일반적이나, 현재 flex: none; 으로 제어하는 방식을 유지한다면,
-			// 이와 같이 직접 style.width/height를 설정.
-			// 하지만 flex 컨테이너 내부에서는 flex-basis를 설정하는 것이 더 바람직합니다.
-			// 여기서는 기존 코드의 스타일 설정을 유지하면서 값을 정확히 계산.
-
-			// flex-grow 비율로 제어하는 경우
-			// const currentTotalFlex = parseFloat(getComputedStyle(prev).flexGrow || 0) + parseFloat(getComputedStyle(next).flexGrow || 0);
-			// prev.style.flexGrow = (newPrevSize / parentTotalSize) * currentTotalFlex;
-			// next.style.flexGrow = (newNextSize / parentTotalSize) * currentTotalFlex;
-
 			// 기존 flex 값을 저장하고 복원
 			const originalPrevFlex = prev.style.flex;
 			const originalNextFlex = next.style.flex;
@@ -121296,8 +121304,8 @@ class nxSplitter extends HTMLElement {
 			}
 
 			// 작업 완료 후 원래 flex 값으로 복원
-			// 단, width/height가 설정된 경우 flex 속성이 다시 적용되면 겹칠 수 있으므로 주의 필요.
-			// 일반적으로 flex-basis를 사용하거나, width/height 설정 후 flex-grow/shrink를 기본값으로 돌리는 것을 고려.
+			// 주의: width/height가 설정된 상태에서 flex를 복원하면 충돌할 수 있음.
+			// flex-basis나 flex-grow/shrink를 적절히 조절하는 것이 더 견고한 방법.
 			prev.style.flex = originalPrevFlex;
 			next.style.flex = originalNextFlex;
 		};
@@ -121306,137 +121314,6 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
-	#startDrag = (e) => {
-
-		e.preventDefault(); // 기본 drag/select 동작 제거
-		e.stopPropagation();
-
-		const splitterRect = this.getBoundingClientRect();
-		const clickOffset = this.#mode === "h"
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
-		//const mode = this.#mode;
-		const dragBar = document.createElement("div");
-		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
-
-		// 스타일 지정
-		Object.assign(dragBar.style, {
-			position: "absolute",
-			zIndex: "999",
-			background: "#666",
-			opacity: "0.6",
-			pointerEvents: "none"
-		});
-
-		const root = this.getRootNode({ composed: true });
-		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
-
-		//const parent = this.getRootNode().host || this.parentElement;
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-
-		if (!parent || !prev || !next) return;
-
-		const parentRect = parent.getBoundingClientRect();
-		const prevRect = prev.getBoundingClientRect();
-		const nextRect = next.getBoundingClientRect();
-
-		/**
-		const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
-		const position = Math.max(min, Math.min(clientPos, max));
-		const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-		*/
-
-		const left = e.clientX - parentRect.left;
-		const top = e.clientY - parentRect.top;
-
-		console.log(left, top);
-
-		// 방향별 위치 설정
-		if (this.#mode === "h") {
-			dragBar.style.top = "0";
-			dragBar.style.left = `${left}px`;
-			dragBar.style.width = "1px";
-			dragBar.style.height = "100%";
-		} else {
-			dragBar.style.left = "0";
-			dragBar.style.top = `${top}px`;
-			dragBar.style.height = "1px";
-			dragBar.style.width = "100%";
-		}
-
-		// 👇 부모 노드 기준으로 삽입
-		(parent.shadowRoot || parent).appendChild(dragBar);
-
-		const min = this.#mode === "h" ? prevRect.left : prevRect.top;
-		const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
-
-		const onMove = e => {
-			const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
-			const position = Math.max(min, Math.min(clientPos, max));
-
-			const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			if (this.#mode === "h") {
-				dragBar.style.left = `${relative}px`;
-			} else {
-				dragBar.style.top = `${relative}px`;
-			}
-
-			console.log(relative);
-		};
-
-
-
-		const onUp = (e) => {
-
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-
-			// 기준: prev + next 너비 합계
-			const totalSize = this.#mode === "h"
-				? prev.offsetWidth + next.offsetWidth
-				: prev.offsetHeight + next.offsetHeight;
-
-			// prev 기준 상대 거리 (드래그 거리)
-
-			let delta = this.#mode === "h"
-				? e.clientX - prev.getBoundingClientRect().left - clickOffset
-				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
-			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			const min = 1;
-			const max = totalSize - 1;
-			delta = Math.max(min, Math.min(delta, max));
-
-
-			const prev1 = prev.style.flex;
-			const prev2 = next.style.flex;
-			prev.style.flex = "none";
-			next.style.flex = "none";
-
-			console.log(delta, totalSize);
-
-			// 📌 사이즈 적용
-			if (this.#mode === "h") {
-				prev.style.width = `${delta}px`;
-				next.style.width = `${totalSize - delta}px`;
-			} else {
-				prev.style.height = `${delta}px`;
-				next.style.height = `${totalSize - delta}px`;
-			}
-
-			prev.style.flex = prev1;
-			next.style.flex = prev2;
-		};
-
-		window.addEventListener("mousemove", onMove);
-		window.addEventListener("mouseup", onUp);
-	};
-
 
 	#init = () => {
 		this.#detectMode(this);
@@ -121450,13 +121327,13 @@ class nxSplitter extends HTMLElement {
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
-				${ninegrid.getCustomPath(this,"nxSplitter.css")}
-			</style>
-			
-			${gripTmpl}
-		`;
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
+             ${ninegrid.getCustomPath(this,"nxSplitter.css")}
+          </style>
+          
+          ${gripTmpl}
+       `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 

package/dist/bundle.esm.js

@@ -121163,20 +121163,25 @@ class nxSplitter extends HTMLElement {
 		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
 	};
 
-	#startDrag_BAK = (e) => {
-		e.preventDefault();
+	// 이전 #startDrag_BAK 함수는 삭제하거나 주석 처리합니다.
+	// #startDrag_BAK = (...) => { ... }
+
+	#startDrag = (e) => {
+		e.preventDefault(); // 기본 drag/select 동작 제거
 		e.stopPropagation();
 
 		const splitterRect = this.getBoundingClientRect();
 		const isHorizontal = this.#mode === "h";
 
-		// 클릭 지점에서 스플리터 경계까지의 오프셋
+		// 클릭 지점에서 스플리터 경계까지의 오프셋 (이것은 dragBar 초기 위치와는 별개로, 최종 패널 사이즈 계산에 사용됨)
 		isHorizontal
 			? e.clientX - splitterRect.left
 			: e.clientY - splitterRect.top;
 
 		const dragBar = document.createElement("div");
 		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
+
+		// 스타일 지정
 		Object.assign(dragBar.style, {
 			position: "absolute",
 			zIndex: "999",
@@ -121186,7 +121191,6 @@ class nxSplitter extends HTMLElement {
 		});
 
 		const root = this.getRootNode({ composed: true });
-		// parent는 스플리터의 직접적인 컨테이너 (flex 컨테이너 역할)
 		const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
 
 		const prev = this.previousElementSibling;
@@ -121197,84 +121201,88 @@ class nxSplitter extends HTMLElement {
 			return;
 		}
 
-		const parentRect = parent.getBoundingClientRect();
-		const prevRect = prev.getBoundingClientRect();
-		const nextRect = next.getBoundingClientRect();
+		// ⭐ dragBar를 먼저 DOM에 추가하여 offsetParent를 확보합니다.
+		(parent.shadowRoot || parent).appendChild(dragBar);
+
+		// dragBar의 실제 offsetParent (position: absolute의 기준이 되는 요소)
+		const dragBarOffsetParent = dragBar.offsetParent;
+
+		if (!dragBarOffsetParent) {
+			console.error("dragBar's offsetParent could not be determined. Ensure parent or an ancestor has a position property (e.g., relative).");
+			dragBar.remove(); // 실패 시 dragBar 제거
+			return;
+		}
+
+		const dragBarOffsetParentRect = dragBarOffsetParent.getBoundingClientRect();
+		const prevRect = prev.getBoundingClientRect(); // 뷰포트 기준
+		const nextRect = next.getBoundingClientRect(); // 뷰포트 기준
+
 
-		// dragBar의 초기 위치 설정 (parent 기준)
-		// padding을 고려하지 않고 parentRect를 기준으로 하는 것이 일반적이며,
-		// 스플리터 컨테이너의 flex-basis가 padding을 포함하는지 여부에 따라 조절.
-		// 여기서는 parent의 content-box 기준으로 relative 위치를 계산.
-		let initialPos;
+		// 뷰포트 기준 클릭 위치를 dragBarOffsetParent 기준으로 변환하여 초기 dragBar 위치 설정
+		let initialPosInOffsetParent;
 		if (isHorizontal) {
-			initialPos = e.clientX - parentRect.left;
+			initialPosInOffsetParent = e.clientX - dragBarOffsetParentRect.left;
 			dragBar.style.top = "0";
-			dragBar.style.left = `${initialPos}px`;
+			dragBar.style.left = `${initialPosInOffsetParent}px`;
 			dragBar.style.width = "1px";
 			dragBar.style.height = "100%";
 		} else {
-			initialPos = e.clientY - parentRect.top;
+			initialPosInOffsetParent = e.clientY - dragBarOffsetParentRect.top;
 			dragBar.style.left = "0";
-			dragBar.style.top = `${initialPos}px`;
+			dragBar.style.top = `${initialPosInOffsetParent}px`;
 			dragBar.style.height = "1px";
 			dragBar.style.width = "100%";
 		}
 
-		// Shadow DOM이 있다면 ShadowRoot에, 아니면 일반 DOM에 삽입
-		(parent.shadowRoot || parent).appendChild(dragBar);
+		// 드래그 가능한 최소/최대 범위 (dragBarOffsetParent 기준으로 변환)
+		const minLimit = isHorizontal
+			? prevRect.left - dragBarOffsetParentRect.left
+			: prevRect.top - dragBarOffsetParentRect.top;
+		const maxLimit = isHorizontal
+			? nextRect.right - dragBarOffsetParentRect.left
+			: nextRect.bottom - dragBarOffsetParentRect.top;
 
-		// 드래그 가능한 범위 (부모 요소 내에서 이전/다음 엘리먼트의 실제 경계 기준)
-		const minLimit = isHorizontal ? prevRect.left : prevRect.top;
-		const maxLimit = isHorizontal ? nextRect.right : nextRect.bottom;
 
 		const onMove = moveEvent => {
 			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			// 드래그 바가 부모 영역을 벗어나지 않도록 클램프
-			const clampedPos = Math.max(minLimit, Math.min(clientPos, maxLimit));
+			// 뷰포트 기준 클릭 위치를 offsetParent 기준으로 변환
+			const currentPosInOffsetParent = isHorizontal
+				? clientPos - dragBarOffsetParentRect.left
+				: clientPos - dragBarOffsetParentRect.top;
 
-			// 부모 기준으로 드래그 바의 상대 위치
-			const relativePos = clampedPos - parentRect[isHorizontal ? "left" : "top"];
+			// 드래그 바가 최소/최대 범위 내에 있도록 클램프
+			const clampedPos = Math.max(minLimit, Math.min(currentPosInOffsetParent, maxLimit));
 
 			if (isHorizontal) {
-				dragBar.style.left = `${relativePos}px`;
+				dragBar.style.left = `${clampedPos}px`;
 			} else {
-				dragBar.style.top = `${relativePos}px`;
+				dragBar.style.top = `${clampedPos}px`;
 			}
 		};
 
-		const onUp = upEvent => {
+		const onUp = (upEvent) => {
 			window.removeEventListener("mousemove", onMove);
 			window.removeEventListener("mouseup", onUp);
 			dragBar.remove();
 
-			// 최종 드래그 바의 위치를 기준으로 새 크기 계산
-			const finalDragBarPos = isHorizontal
+			// 최종 드래그 바의 위치를 offsetParent 기준으로 가져옴
+			const finalDragBarPosInOffsetParent = isHorizontal
 				? parseFloat(dragBar.style.left)
 				: parseFloat(dragBar.style.top);
 
-			// 이전 요소의 새로운 크기 (부모의 좌측/상단 경계부터 드래그 바까지)
-			const newPrevSize = finalDragBarPos;
+			// 이전 요소의 새로운 크기 (offsetParent의 시작점부터 드래그 바까지)
+			const newPrevSize = finalDragBarPosInOffsetParent;
 
-			// 다음 요소의 새로운 크기 (부모의 전체 크기에서 이전 요소 크기를 뺀 값)
-			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
-			const newNextSize = parentTotalSize - newPrevSize;
+			// 다음 요소의 새로운 크기 (offsetParent의 전체 크기에서 이전 요소 크기를 뺀 값)
+			const offsetParentTotalSize = isHorizontal
+				? dragBarOffsetParentRect.width
+				: dragBarOffsetParentRect.height;
+			const newNextSize = offsetParentTotalSize - newPrevSize;
 
-			// 최소/최대 크기 제약 (예: 1px 미만으로 작아지지 않도록)
 			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
 			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
 			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
 
-			// flex 레이아웃에 직접 width/height를 부여하는 대신 flex-basis를 사용하거나
-			// flex-grow 비율을 재조정하는 것이 일반적이나, 현재 flex: none; 으로 제어하는 방식을 유지한다면,
-			// 이와 같이 직접 style.width/height를 설정.
-			// 하지만 flex 컨테이너 내부에서는 flex-basis를 설정하는 것이 더 바람직합니다.
-			// 여기서는 기존 코드의 스타일 설정을 유지하면서 값을 정확히 계산.
-
-			// flex-grow 비율로 제어하는 경우
-			// const currentTotalFlex = parseFloat(getComputedStyle(prev).flexGrow || 0) + parseFloat(getComputedStyle(next).flexGrow || 0);
-			// prev.style.flexGrow = (newPrevSize / parentTotalSize) * currentTotalFlex;
-			// next.style.flexGrow = (newNextSize / parentTotalSize) * currentTotalFlex;
-
 			// 기존 flex 값을 저장하고 복원
 			const originalPrevFlex = prev.style.flex;
 			const originalNextFlex = next.style.flex;
@@ -121292,8 +121300,8 @@ class nxSplitter extends HTMLElement {
 			}
 
 			// 작업 완료 후 원래 flex 값으로 복원
-			// 단, width/height가 설정된 경우 flex 속성이 다시 적용되면 겹칠 수 있으므로 주의 필요.
-			// 일반적으로 flex-basis를 사용하거나, width/height 설정 후 flex-grow/shrink를 기본값으로 돌리는 것을 고려.
+			// 주의: width/height가 설정된 상태에서 flex를 복원하면 충돌할 수 있음.
+			// flex-basis나 flex-grow/shrink를 적절히 조절하는 것이 더 견고한 방법.
 			prev.style.flex = originalPrevFlex;
 			next.style.flex = originalNextFlex;
 		};
@@ -121302,137 +121310,6 @@ class nxSplitter extends HTMLElement {
 		window.addEventListener("mouseup", onUp);
 	};
 
-	#startDrag = (e) => {
-
-		e.preventDefault(); // 기본 drag/select 동작 제거
-		e.stopPropagation();
-
-		const splitterRect = this.getBoundingClientRect();
-		const clickOffset = this.#mode === "h"
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
-		//const mode = this.#mode;
-		const dragBar = document.createElement("div");
-		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
-
-		// 스타일 지정
-		Object.assign(dragBar.style, {
-			position: "absolute",
-			zIndex: "999",
-			background: "#666",
-			opacity: "0.6",
-			pointerEvents: "none"
-		});
-
-		const root = this.getRootNode({ composed: true });
-		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
-
-		//const parent = this.getRootNode().host || this.parentElement;
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-
-		if (!parent || !prev || !next) return;
-
-		const parentRect = parent.getBoundingClientRect();
-		const prevRect = prev.getBoundingClientRect();
-		const nextRect = next.getBoundingClientRect();
-
-		/**
-		const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
-		const position = Math.max(min, Math.min(clientPos, max));
-		const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-		*/
-
-		const left = e.clientX - parentRect.left;
-		const top = e.clientY - parentRect.top;
-
-		console.log(left, top);
-
-		// 방향별 위치 설정
-		if (this.#mode === "h") {
-			dragBar.style.top = "0";
-			dragBar.style.left = `${left}px`;
-			dragBar.style.width = "1px";
-			dragBar.style.height = "100%";
-		} else {
-			dragBar.style.left = "0";
-			dragBar.style.top = `${top}px`;
-			dragBar.style.height = "1px";
-			dragBar.style.width = "100%";
-		}
-
-		// 👇 부모 노드 기준으로 삽입
-		(parent.shadowRoot || parent).appendChild(dragBar);
-
-		const min = this.#mode === "h" ? prevRect.left : prevRect.top;
-		const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
-
-		const onMove = e => {
-			const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
-			const position = Math.max(min, Math.min(clientPos, max));
-
-			const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			if (this.#mode === "h") {
-				dragBar.style.left = `${relative}px`;
-			} else {
-				dragBar.style.top = `${relative}px`;
-			}
-
-			console.log(relative);
-		};
-
-
-
-		const onUp = (e) => {
-
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-
-			// 기준: prev + next 너비 합계
-			const totalSize = this.#mode === "h"
-				? prev.offsetWidth + next.offsetWidth
-				: prev.offsetHeight + next.offsetHeight;
-
-			// prev 기준 상대 거리 (드래그 거리)
-
-			let delta = this.#mode === "h"
-				? e.clientX - prev.getBoundingClientRect().left - clickOffset
-				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
-			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			const min = 1;
-			const max = totalSize - 1;
-			delta = Math.max(min, Math.min(delta, max));
-
-
-			const prev1 = prev.style.flex;
-			const prev2 = next.style.flex;
-			prev.style.flex = "none";
-			next.style.flex = "none";
-
-			console.log(delta, totalSize);
-
-			// 📌 사이즈 적용
-			if (this.#mode === "h") {
-				prev.style.width = `${delta}px`;
-				next.style.width = `${totalSize - delta}px`;
-			} else {
-				prev.style.height = `${delta}px`;
-				next.style.height = `${totalSize - delta}px`;
-			}
-
-			prev.style.flex = prev1;
-			next.style.flex = prev2;
-		};
-
-		window.addEventListener("mousemove", onMove);
-		window.addEventListener("mouseup", onUp);
-	};
-
 
 	#init = () => {
 		this.#detectMode(this);
@@ -121446,13 +121323,13 @@ class nxSplitter extends HTMLElement {
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
-				${ninegrid.getCustomPath(this,"nxSplitter.css")}
-			</style>
-			
-			${gripTmpl}
-		`;
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
+             ${ninegrid.getCustomPath(this,"nxSplitter.css")}
+          </style>
+          
+          ${gripTmpl}
+       `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));