ninegrid2 6.1156.0 → 6.1158.0

package/dist/bundle.cjs.js

@@ -121946,23 +121946,32 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		// 요소를 복제하여 너비를 측정하는 헬퍼 함수
 		const getRenderedWidthWithClone = (element) => {
-			// 1. 요소를 깊은 복제(deep clone)합니다.
+			// 1. 요소의 모든 계산된 스타일을 가져옵니다.
+			const computedStyle = window.getComputedStyle(element);
+
+			// 2. 요소를 깊은 복제합니다.
 			const clone = element.cloneNode(true);
 
-			// 2. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			// 3. 복사본에 가져온 모든 스타일을 적용합니다.
+			for (const prop of computedStyle) {
+
+				clone.style[prop] = computedStyle.getPropertyValue(prop);
+				console.log(prop, clone.style[prop]);
+			}
+
+			// 4. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
 			clone.style.position = 'absolute';
 			clone.style.left = '-9999px';
 			clone.style.visibility = 'hidden';
 
-			// 3. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			// 5. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
 			document.body.appendChild(clone);
 
-			// 4. 너비 측정
+			// 6. 너비 측정
 			const width = clone.getBoundingClientRect().width;
 
-			// 5. 측정이 끝나면 복제본을 제거합니다.
+			// 7. 측정이 끝나면 복제본을 제거합니다.
 			document.body.removeChild(clone);
 
 			return width;
@@ -121970,7 +121979,6 @@ class NxLayout2 extends HTMLElement {
 
 		const allLabels = [];
 
-		// 모든 .row에서 .label 요소를 찾아서 위치별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -121981,10 +121989,8 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
-		// 각 그룹별로 최대 너비를 계산하고 적용
 		allLabels.forEach((labelGroup) => {
 			if (labelGroup && labelGroup.length > 0) {
-				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
 				const renderedWidths = labelGroup.map(label => getRenderedWidthWithClone(label));
 				const maxWidth = Math.max(...renderedWidths);
 

package/dist/bundle.esm.js

@@ -121942,23 +121942,32 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		// 요소를 복제하여 너비를 측정하는 헬퍼 함수
 		const getRenderedWidthWithClone = (element) => {
-			// 1. 요소를 깊은 복제(deep clone)합니다.
+			// 1. 요소의 모든 계산된 스타일을 가져옵니다.
+			const computedStyle = window.getComputedStyle(element);
+
+			// 2. 요소를 깊은 복제합니다.
 			const clone = element.cloneNode(true);
 
-			// 2. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			// 3. 복사본에 가져온 모든 스타일을 적용합니다.
+			for (const prop of computedStyle) {
+
+				clone.style[prop] = computedStyle.getPropertyValue(prop);
+				console.log(prop, clone.style[prop]);
+			}
+
+			// 4. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
 			clone.style.position = 'absolute';
 			clone.style.left = '-9999px';
 			clone.style.visibility = 'hidden';
 
-			// 3. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			// 5. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
 			document.body.appendChild(clone);
 
-			// 4. 너비 측정
+			// 6. 너비 측정
 			const width = clone.getBoundingClientRect().width;
 
-			// 5. 측정이 끝나면 복제본을 제거합니다.
+			// 7. 측정이 끝나면 복제본을 제거합니다.
 			document.body.removeChild(clone);
 
 			return width;
@@ -121966,7 +121975,6 @@ class NxLayout2 extends HTMLElement {
 
 		const allLabels = [];
 
-		// 모든 .row에서 .label 요소를 찾아서 위치별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -121977,10 +121985,8 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
-		// 각 그룹별로 최대 너비를 계산하고 적용
 		allLabels.forEach((labelGroup) => {
 			if (labelGroup && labelGroup.length > 0) {
-				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
 				const renderedWidths = labelGroup.map(label => getRenderedWidthWithClone(label));
 				const maxWidth = Math.max(...renderedWidths);
 

package/dist/nx/nxLayout2.js

@@ -59,23 +59,32 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		// 요소를 복제하여 너비를 측정하는 헬퍼 함수
 		const getRenderedWidthWithClone = (element) => {
-			// 1. 요소를 깊은 복제(deep clone)합니다.
+			// 1. 요소의 모든 계산된 스타일을 가져옵니다.
+			const computedStyle = window.getComputedStyle(element);
+
+			// 2. 요소를 깊은 복제합니다.
 			const clone = element.cloneNode(true);
 
-			// 2. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			// 3. 복사본에 가져온 모든 스타일을 적용합니다.
+			for (const prop of computedStyle) {
+
+				clone.style[prop] = computedStyle.getPropertyValue(prop);
+				console.log(prop, clone.style[prop]);
+			}
+
+			// 4. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
 			clone.style.position = 'absolute';
 			clone.style.left = '-9999px';
 			clone.style.visibility = 'hidden';
 
-			// 3. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			// 5. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
 			document.body.appendChild(clone);
 
-			// 4. 너비 측정
+			// 6. 너비 측정
 			const width = clone.getBoundingClientRect().width;
 
-			// 5. 측정이 끝나면 복제본을 제거합니다.
+			// 7. 측정이 끝나면 복제본을 제거합니다.
 			document.body.removeChild(clone);
 
 			return width;
@@ -83,7 +92,6 @@ class NxLayout2 extends HTMLElement {
 
 		const allLabels = [];
 
-		// 모든 .row에서 .label 요소를 찾아서 위치별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -94,10 +102,8 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
-		// 각 그룹별로 최대 너비를 계산하고 적용
 		allLabels.forEach((labelGroup) => {
 			if (labelGroup && labelGroup.length > 0) {
-				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
 				const renderedWidths = labelGroup.map(label => getRenderedWidthWithClone(label));
 				const maxWidth = Math.max(...renderedWidths);
 

package/package.json

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

package/src/nx/nxLayout2.js

@@ -59,23 +59,32 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		// 요소를 복제하여 너비를 측정하는 헬퍼 함수
 		const getRenderedWidthWithClone = (element) => {
-			// 1. 요소를 깊은 복제(deep clone)합니다.
+			// 1. 요소의 모든 계산된 스타일을 가져옵니다.
+			const computedStyle = window.getComputedStyle(element);
+
+			// 2. 요소를 깊은 복제합니다.
 			const clone = element.cloneNode(true);
 
-			// 2. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			// 3. 복사본에 가져온 모든 스타일을 적용합니다.
+			for (const prop of computedStyle) {
+
+				clone.style[prop] = computedStyle.getPropertyValue(prop);
+				console.log(prop, clone.style[prop]);
+			}
+
+			// 4. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
 			clone.style.position = 'absolute';
 			clone.style.left = '-9999px';
 			clone.style.visibility = 'hidden';
 
-			// 3. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			// 5. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
 			document.body.appendChild(clone);
 
-			// 4. 너비 측정
+			// 6. 너비 측정
 			const width = clone.getBoundingClientRect().width;
 
-			// 5. 측정이 끝나면 복제본을 제거합니다.
+			// 7. 측정이 끝나면 복제본을 제거합니다.
 			document.body.removeChild(clone);
 
 			return width;
@@ -83,7 +92,6 @@ class NxLayout2 extends HTMLElement {
 
 		const allLabels = [];
 
-		// 모든 .row에서 .label 요소를 찾아서 위치별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
 			const labelsInRow = el.querySelectorAll(".label");
 			labelsInRow.forEach((label, index) => {
@@ -94,10 +102,8 @@ class NxLayout2 extends HTMLElement {
 			});
 		});
 
-		// 각 그룹별로 최대 너비를 계산하고 적용
 		allLabels.forEach((labelGroup) => {
 			if (labelGroup && labelGroup.length > 0) {
-				// ⭐⭐ 헬퍼 함수를 사용하여 너비 계산 ⭐⭐
 				const renderedWidths = labelGroup.map(label => getRenderedWidthWithClone(label));
 				const maxWidth = Math.max(...renderedWidths);