ninegrid2 6.1152.0 → 6.1154.0

package/dist/bundle.cjs.js

@@ -121946,9 +121946,41 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
+		// 임시로 숨겨진 요소의 너비를 측정하는 헬퍼 함수
+		const getRenderedWidth = (element) => {
+			// 요소의 현재 부모 노드를 저장
+			const parent = element.parentNode;
+
+			// 1. 요소를 원래 위치에서 임시로 제거
+			parent.removeChild(element);
+
+			// 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);
+
+			// 4. 너비 측정
+			const width = element.getBoundingClientRect().width;
+
+			// 5. 원래 스타일을 복구
+			element.style.position = '';
+			element.style.left = '';
+			element.style.visibility = '';
+			element.style.display = '';
+
+			// 6. 요소를 다시 원래 부모의 위치로 복원
+			document.body.removeChild(element);
+			parent.appendChild(element);
+
+			return width;
+		};
+
 		const allLabels = [];
 
-		// 1. 모든 .row에서 .label 요소를 찾아서 위치(인덱스)별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -121959,14 +121991,12 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
-		// 2. 각 그룹(위치)별로 최대 너비 계산 및 적용
 		allLabels.forEach((labelGroup) => {
-			// 그룹이 비어있지 않은지 확인
 			if (labelGroup && labelGroup.length > 0) {
-				// 3. 그룹 내 모든 라벨의 너비 중 가장 큰 값(최대값) 찾기
-				const maxWidth = Math.max(...labelGroup.map(label => label.getBoundingClientRect().width));
+				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
+				const renderedWidths = labelGroup.map(label => getRenderedWidth(label));
+				const maxWidth = Math.max(...renderedWidths);
 
-				// 4. 계산된 최대 너비를 동일 그룹의 모든 라벨에 적용
 				labelGroup.forEach(label => {
 					label.style.width = `${maxWidth}px`;
 				});

package/dist/bundle.esm.js

@@ -121942,9 +121942,41 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
+		// 임시로 숨겨진 요소의 너비를 측정하는 헬퍼 함수
+		const getRenderedWidth = (element) => {
+			// 요소의 현재 부모 노드를 저장
+			const parent = element.parentNode;
+
+			// 1. 요소를 원래 위치에서 임시로 제거
+			parent.removeChild(element);
+
+			// 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);
+
+			// 4. 너비 측정
+			const width = element.getBoundingClientRect().width;
+
+			// 5. 원래 스타일을 복구
+			element.style.position = '';
+			element.style.left = '';
+			element.style.visibility = '';
+			element.style.display = '';
+
+			// 6. 요소를 다시 원래 부모의 위치로 복원
+			document.body.removeChild(element);
+			parent.appendChild(element);
+
+			return width;
+		};
+
 		const allLabels = [];
 
-		// 1. 모든 .row에서 .label 요소를 찾아서 위치(인덱스)별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -121955,14 +121987,12 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
-		// 2. 각 그룹(위치)별로 최대 너비 계산 및 적용
 		allLabels.forEach((labelGroup) => {
-			// 그룹이 비어있지 않은지 확인
 			if (labelGroup && labelGroup.length > 0) {
-				// 3. 그룹 내 모든 라벨의 너비 중 가장 큰 값(최대값) 찾기
-				const maxWidth = Math.max(...labelGroup.map(label => label.getBoundingClientRect().width));
+				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
+				const renderedWidths = labelGroup.map(label => getRenderedWidth(label));
+				const maxWidth = Math.max(...renderedWidths);
 
-				// 4. 계산된 최대 너비를 동일 그룹의 모든 라벨에 적용
 				labelGroup.forEach(label => {
 					label.style.width = `${maxWidth}px`;
 				});

package/dist/nx/nxLayout2.js

@@ -59,9 +59,41 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
+		// 임시로 숨겨진 요소의 너비를 측정하는 헬퍼 함수
+		const getRenderedWidth = (element) => {
+			// 요소의 현재 부모 노드를 저장
+			const parent = element.parentNode;
+
+			// 1. 요소를 원래 위치에서 임시로 제거
+			parent.removeChild(element);
+
+			// 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);
+
+			// 4. 너비 측정
+			const width = element.getBoundingClientRect().width;
+
+			// 5. 원래 스타일을 복구
+			element.style.position = '';
+			element.style.left = '';
+			element.style.visibility = '';
+			element.style.display = '';
+
+			// 6. 요소를 다시 원래 부모의 위치로 복원
+			document.body.removeChild(element);
+			parent.appendChild(element);
+
+			return width;
+		};
+
 		const allLabels = [];
 
-		// 1. 모든 .row에서 .label 요소를 찾아서 위치(인덱스)별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -72,14 +104,12 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
-		// 2. 각 그룹(위치)별로 최대 너비 계산 및 적용
 		allLabels.forEach((labelGroup) => {
-			// 그룹이 비어있지 않은지 확인
 			if (labelGroup && labelGroup.length > 0) {
-				// 3. 그룹 내 모든 라벨의 너비 중 가장 큰 값(최대값) 찾기
-				const maxWidth = Math.max(...labelGroup.map(label => label.getBoundingClientRect().width));
+				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
+				const renderedWidths = labelGroup.map(label => getRenderedWidth(label));
+				const maxWidth = Math.max(...renderedWidths);
 
-				// 4. 계산된 최대 너비를 동일 그룹의 모든 라벨에 적용
 				labelGroup.forEach(label => {
 					label.style.width = `${maxWidth}px`;
 				});

package/package.json

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

package/src/nx/nxLayout2.js

@@ -59,9 +59,41 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
+		// 임시로 숨겨진 요소의 너비를 측정하는 헬퍼 함수
+		const getRenderedWidth = (element) => {
+			// 요소의 현재 부모 노드를 저장
+			const parent = element.parentNode;
+
+			// 1. 요소를 원래 위치에서 임시로 제거
+			parent.removeChild(element);
+
+			// 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);
+
+			// 4. 너비 측정
+			const width = element.getBoundingClientRect().width;
+
+			// 5. 원래 스타일을 복구
+			element.style.position = '';
+			element.style.left = '';
+			element.style.visibility = '';
+			element.style.display = '';
+
+			// 6. 요소를 다시 원래 부모의 위치로 복원
+			document.body.removeChild(element);
+			parent.appendChild(element);
+
+			return width;
+		};
+
 		const allLabels = [];
 
-		// 1. 모든 .row에서 .label 요소를 찾아서 위치(인덱스)별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -72,14 +104,12 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
-		// 2. 각 그룹(위치)별로 최대 너비 계산 및 적용
 		allLabels.forEach((labelGroup) => {
-			// 그룹이 비어있지 않은지 확인
 			if (labelGroup && labelGroup.length > 0) {
-				// 3. 그룹 내 모든 라벨의 너비 중 가장 큰 값(최대값) 찾기
-				const maxWidth = Math.max(...labelGroup.map(label => label.getBoundingClientRect().width));
+				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
+				const renderedWidths = labelGroup.map(label => getRenderedWidth(label));
+				const maxWidth = Math.max(...renderedWidths);
 
-				// 4. 계산된 최대 너비를 동일 그룹의 모든 라벨에 적용
 				labelGroup.forEach(label => {
 					label.style.width = `${maxWidth}px`;
 				});