ninegrid2 6.1154.0 → 6.1155.0

package/dist/bundle.cjs.js

@@ -121946,41 +121946,31 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		// 임시로 숨겨진 요소의 너비를 측정하는 헬퍼 함수
-		const getRenderedWidth = (element) => {
-			// 요소의 현재 부모 노드를 저장
-			const parent = element.parentNode;
+		// 요소를 복제하여 너비를 측정하는 헬퍼 함수
+		const getRenderedWidthWithClone = (element) => {
+			// 1. 요소를 깊은 복제(deep clone)합니다.
+			const clone = element.cloneNode(true);
 
-			// 1. 요소를 원래 위치에서 임시로 제거
-			parent.removeChild(element);
+			// 2. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			clone.style.position = 'absolute';
+			clone.style.left = '-9999px';
+			clone.style.visibility = 'hidden';
 
-			// 2. 요소를 화면 밖으로 이동시킬 스타일을 적용
-			element.style.position = 'absolute';
-			element.style.left = '-9999px';
-			element.style.visibility = 'hidden';
-			element.style.display = 'block'; // display:none이 아님을 보장
-
-			// 3. body에 임시로 추가하여 렌더링되도록 함
-			document.body.appendChild(element);
+			// 3. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			document.body.appendChild(clone);
 
 			// 4. 너비 측정
-			const width = element.getBoundingClientRect().width;
-
-			// 5. 원래 스타일을 복구
-			element.style.position = '';
-			element.style.left = '';
-			element.style.visibility = '';
-			element.style.display = '';
+			const width = clone.getBoundingClientRect().width;
 
-			// 6. 요소를 다시 원래 부모의 위치로 복원
-			document.body.removeChild(element);
-			parent.appendChild(element);
+			// 5. 측정이 끝나면 복제본을 제거합니다.
+			document.body.removeChild(clone);
 
 			return width;
 		};
 
 		const allLabels = [];
 
+		// 모든 .row에서 .label 요소를 찾아서 위치별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -121991,10 +121981,11 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
+		// 각 그룹별로 최대 너비를 계산하고 적용
 		allLabels.forEach((labelGroup) => {
 			if (labelGroup && labelGroup.length > 0) {
 				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
-				const renderedWidths = labelGroup.map(label => getRenderedWidth(label));
+				const renderedWidths = labelGroup.map(label => getRenderedWidthWithClone(label));
 				const maxWidth = Math.max(...renderedWidths);
 
 				labelGroup.forEach(label => {

package/dist/bundle.esm.js

@@ -121942,41 +121942,31 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		// 임시로 숨겨진 요소의 너비를 측정하는 헬퍼 함수
-		const getRenderedWidth = (element) => {
-			// 요소의 현재 부모 노드를 저장
-			const parent = element.parentNode;
+		// 요소를 복제하여 너비를 측정하는 헬퍼 함수
+		const getRenderedWidthWithClone = (element) => {
+			// 1. 요소를 깊은 복제(deep clone)합니다.
+			const clone = element.cloneNode(true);
 
-			// 1. 요소를 원래 위치에서 임시로 제거
-			parent.removeChild(element);
+			// 2. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			clone.style.position = 'absolute';
+			clone.style.left = '-9999px';
+			clone.style.visibility = 'hidden';
 
-			// 2. 요소를 화면 밖으로 이동시킬 스타일을 적용
-			element.style.position = 'absolute';
-			element.style.left = '-9999px';
-			element.style.visibility = 'hidden';
-			element.style.display = 'block'; // display:none이 아님을 보장
-
-			// 3. body에 임시로 추가하여 렌더링되도록 함
-			document.body.appendChild(element);
+			// 3. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			document.body.appendChild(clone);
 
 			// 4. 너비 측정
-			const width = element.getBoundingClientRect().width;
-
-			// 5. 원래 스타일을 복구
-			element.style.position = '';
-			element.style.left = '';
-			element.style.visibility = '';
-			element.style.display = '';
+			const width = clone.getBoundingClientRect().width;
 
-			// 6. 요소를 다시 원래 부모의 위치로 복원
-			document.body.removeChild(element);
-			parent.appendChild(element);
+			// 5. 측정이 끝나면 복제본을 제거합니다.
+			document.body.removeChild(clone);
 
 			return width;
 		};
 
 		const allLabels = [];
 
+		// 모든 .row에서 .label 요소를 찾아서 위치별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -121987,10 +121977,11 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
+		// 각 그룹별로 최대 너비를 계산하고 적용
 		allLabels.forEach((labelGroup) => {
 			if (labelGroup && labelGroup.length > 0) {
 				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
-				const renderedWidths = labelGroup.map(label => getRenderedWidth(label));
+				const renderedWidths = labelGroup.map(label => getRenderedWidthWithClone(label));
 				const maxWidth = Math.max(...renderedWidths);
 
 				labelGroup.forEach(label => {

package/dist/nx/nxLayout2.js

@@ -59,41 +59,31 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		// 임시로 숨겨진 요소의 너비를 측정하는 헬퍼 함수
-		const getRenderedWidth = (element) => {
-			// 요소의 현재 부모 노드를 저장
-			const parent = element.parentNode;
+		// 요소를 복제하여 너비를 측정하는 헬퍼 함수
+		const getRenderedWidthWithClone = (element) => {
+			// 1. 요소를 깊은 복제(deep clone)합니다.
+			const clone = element.cloneNode(true);
 
-			// 1. 요소를 원래 위치에서 임시로 제거
-			parent.removeChild(element);
+			// 2. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			clone.style.position = 'absolute';
+			clone.style.left = '-9999px';
+			clone.style.visibility = 'hidden';
 
-			// 2. 요소를 화면 밖으로 이동시킬 스타일을 적용
-			element.style.position = 'absolute';
-			element.style.left = '-9999px';
-			element.style.visibility = 'hidden';
-			element.style.display = 'block'; // display:none이 아님을 보장
-
-			// 3. body에 임시로 추가하여 렌더링되도록 함
-			document.body.appendChild(element);
+			// 3. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			document.body.appendChild(clone);
 
 			// 4. 너비 측정
-			const width = element.getBoundingClientRect().width;
-
-			// 5. 원래 스타일을 복구
-			element.style.position = '';
-			element.style.left = '';
-			element.style.visibility = '';
-			element.style.display = '';
+			const width = clone.getBoundingClientRect().width;
 
-			// 6. 요소를 다시 원래 부모의 위치로 복원
-			document.body.removeChild(element);
-			parent.appendChild(element);
+			// 5. 측정이 끝나면 복제본을 제거합니다.
+			document.body.removeChild(clone);
 
 			return width;
 		};
 
 		const allLabels = [];
 
+		// 모든 .row에서 .label 요소를 찾아서 위치별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -104,10 +94,11 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
+		// 각 그룹별로 최대 너비를 계산하고 적용
 		allLabels.forEach((labelGroup) => {
 			if (labelGroup && labelGroup.length > 0) {
 				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
-				const renderedWidths = labelGroup.map(label => getRenderedWidth(label));
+				const renderedWidths = labelGroup.map(label => getRenderedWidthWithClone(label));
 				const maxWidth = Math.max(...renderedWidths);
 
 				labelGroup.forEach(label => {

package/package.json

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

package/src/nx/nxLayout2.js

@@ -59,41 +59,31 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		// 임시로 숨겨진 요소의 너비를 측정하는 헬퍼 함수
-		const getRenderedWidth = (element) => {
-			// 요소의 현재 부모 노드를 저장
-			const parent = element.parentNode;
+		// 요소를 복제하여 너비를 측정하는 헬퍼 함수
+		const getRenderedWidthWithClone = (element) => {
+			// 1. 요소를 깊은 복제(deep clone)합니다.
+			const clone = element.cloneNode(true);
 
-			// 1. 요소를 원래 위치에서 임시로 제거
-			parent.removeChild(element);
+			// 2. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			clone.style.position = 'absolute';
+			clone.style.left = '-9999px';
+			clone.style.visibility = 'hidden';
 
-			// 2. 요소를 화면 밖으로 이동시킬 스타일을 적용
-			element.style.position = 'absolute';
-			element.style.left = '-9999px';
-			element.style.visibility = 'hidden';
-			element.style.display = 'block'; // display:none이 아님을 보장
-
-			// 3. body에 임시로 추가하여 렌더링되도록 함
-			document.body.appendChild(element);
+			// 3. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			document.body.appendChild(clone);
 
 			// 4. 너비 측정
-			const width = element.getBoundingClientRect().width;
-
-			// 5. 원래 스타일을 복구
-			element.style.position = '';
-			element.style.left = '';
-			element.style.visibility = '';
-			element.style.display = '';
+			const width = clone.getBoundingClientRect().width;
 
-			// 6. 요소를 다시 원래 부모의 위치로 복원
-			document.body.removeChild(element);
-			parent.appendChild(element);
+			// 5. 측정이 끝나면 복제본을 제거합니다.
+			document.body.removeChild(clone);
 
 			return width;
 		};
 
 		const allLabels = [];
 
+		// 모든 .row에서 .label 요소를 찾아서 위치별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -104,10 +94,11 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
+		// 각 그룹별로 최대 너비를 계산하고 적용
 		allLabels.forEach((labelGroup) => {
 			if (labelGroup && labelGroup.length > 0) {
 				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
-				const renderedWidths = labelGroup.map(label => getRenderedWidth(label));
+				const renderedWidths = labelGroup.map(label => getRenderedWidthWithClone(label));
 				const maxWidth = Math.max(...renderedWidths);
 
 				labelGroup.forEach(label => {