ninegrid2 6.1161.0 → 6.1163.0

package/dist/bundle.cjs.js

@@ -121942,35 +121942,31 @@ class NxLayout2 extends HTMLElement {
 			this.appendChild(rowWrapper);
 		}
 
-		this.#position();
+		setTimeout(() => {
+			this.#position();
+		}, 500);
 	};
 
 	#position = () => {
 		const getRenderedWidthWithClone = (element) => {
+			// 1. 요소의 계산된 스타일을 가져옵니다.
 			const computedStyle = window.getComputedStyle(element);
 
-			// ⭐ 커스텀 속성 값을 직접 가져옵니다. ⭐
-			const fontSize = computedStyle.getPropertyValue('font-size') || '16px';
-			const fontFamily = computedStyle.getPropertyValue('font-family') || 'sans-serif';
-
+			// 2. 복사본을 생성합니다.
 			const clone = element.cloneNode(true);
 
-			for (const prop of computedStyle) {
-				clone.style[prop] = computedStyle.getPropertyValue(prop);
-			}
-
-			console.log(fontSize);
-
-			// ⭐ 폰트 스타일을 명시적으로 재정의합니다. ⭐
-			clone.style.fontSize = fontSize;
-			clone.style.fontFamily = fontFamily;
+			// 3. 복사본에 필요한 스타일만 명시적으로 적용합니다.
+			// 이렇게 하면 부모가 숨겨져 있어도 정확한 스타일을 얻을 수 있습니다.
+			clone.style.fontSize = computedStyle.fontSize;
+			clone.style.fontFamily = computedStyle.fontFamily;
+			clone.style.fontWeight = computedStyle.fontWeight;
 
-			// 4. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			// 4. 복제본을 화면 밖으로 이동시킬 스타일을 적용합니다.
 			clone.style.position = 'absolute';
 			clone.style.left = '-9999px';
 			clone.style.visibility = 'hidden';
 
-			// 5. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			// 5. 복제본을 body에 임시로 추가합니다.
 			document.body.appendChild(clone);
 
 			// 6. 너비 측정

package/dist/bundle.esm.js

@@ -121938,35 +121938,31 @@ class NxLayout2 extends HTMLElement {
 			this.appendChild(rowWrapper);
 		}
 
-		this.#position();
+		setTimeout(() => {
+			this.#position();
+		}, 500);
 	};
 
 	#position = () => {
 		const getRenderedWidthWithClone = (element) => {
+			// 1. 요소의 계산된 스타일을 가져옵니다.
 			const computedStyle = window.getComputedStyle(element);
 
-			// ⭐ 커스텀 속성 값을 직접 가져옵니다. ⭐
-			const fontSize = computedStyle.getPropertyValue('font-size') || '16px';
-			const fontFamily = computedStyle.getPropertyValue('font-family') || 'sans-serif';
-
+			// 2. 복사본을 생성합니다.
 			const clone = element.cloneNode(true);
 
-			for (const prop of computedStyle) {
-				clone.style[prop] = computedStyle.getPropertyValue(prop);
-			}
-
-			console.log(fontSize);
-
-			// ⭐ 폰트 스타일을 명시적으로 재정의합니다. ⭐
-			clone.style.fontSize = fontSize;
-			clone.style.fontFamily = fontFamily;
+			// 3. 복사본에 필요한 스타일만 명시적으로 적용합니다.
+			// 이렇게 하면 부모가 숨겨져 있어도 정확한 스타일을 얻을 수 있습니다.
+			clone.style.fontSize = computedStyle.fontSize;
+			clone.style.fontFamily = computedStyle.fontFamily;
+			clone.style.fontWeight = computedStyle.fontWeight;
 
-			// 4. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			// 4. 복제본을 화면 밖으로 이동시킬 스타일을 적용합니다.
 			clone.style.position = 'absolute';
 			clone.style.left = '-9999px';
 			clone.style.visibility = 'hidden';
 
-			// 5. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			// 5. 복제본을 body에 임시로 추가합니다.
 			document.body.appendChild(clone);
 
 			// 6. 너비 측정

package/dist/nx/nxLayout2.js

@@ -55,35 +55,31 @@ class NxLayout2 extends HTMLElement {
 			this.appendChild(rowWrapper);
 		}
 
-		this.#position();
+		setTimeout(() => {
+			this.#position();
+		}, 500);
 	};
 
 	#position = () => {
 		const getRenderedWidthWithClone = (element) => {
+			// 1. 요소의 계산된 스타일을 가져옵니다.
 			const computedStyle = window.getComputedStyle(element);
 
-			// ⭐ 커스텀 속성 값을 직접 가져옵니다. ⭐
-			const fontSize = computedStyle.getPropertyValue('font-size') || '16px';
-			const fontFamily = computedStyle.getPropertyValue('font-family') || 'sans-serif';
-
+			// 2. 복사본을 생성합니다.
 			const clone = element.cloneNode(true);
 
-			for (const prop of computedStyle) {
-				clone.style[prop] = computedStyle.getPropertyValue(prop);
-			}
-
-			console.log(fontSize);
-
-			// ⭐ 폰트 스타일을 명시적으로 재정의합니다. ⭐
-			clone.style.fontSize = fontSize;
-			clone.style.fontFamily = fontFamily;
+			// 3. 복사본에 필요한 스타일만 명시적으로 적용합니다.
+			// 이렇게 하면 부모가 숨겨져 있어도 정확한 스타일을 얻을 수 있습니다.
+			clone.style.fontSize = computedStyle.fontSize;
+			clone.style.fontFamily = computedStyle.fontFamily;
+			clone.style.fontWeight = computedStyle.fontWeight;
 
-			// 4. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			// 4. 복제본을 화면 밖으로 이동시킬 스타일을 적용합니다.
 			clone.style.position = 'absolute';
 			clone.style.left = '-9999px';
 			clone.style.visibility = 'hidden';
 
-			// 5. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			// 5. 복제본을 body에 임시로 추가합니다.
 			document.body.appendChild(clone);
 
 			// 6. 너비 측정

package/package.json

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

package/src/nx/nxLayout2.js

@@ -55,35 +55,31 @@ class NxLayout2 extends HTMLElement {
 			this.appendChild(rowWrapper);
 		}
 
-		this.#position();
+		setTimeout(() => {
+			this.#position();
+		}, 500);
 	};
 
 	#position = () => {
 		const getRenderedWidthWithClone = (element) => {
+			// 1. 요소의 계산된 스타일을 가져옵니다.
 			const computedStyle = window.getComputedStyle(element);
 
-			// ⭐ 커스텀 속성 값을 직접 가져옵니다. ⭐
-			const fontSize = computedStyle.getPropertyValue('font-size') || '16px';
-			const fontFamily = computedStyle.getPropertyValue('font-family') || 'sans-serif';
-
+			// 2. 복사본을 생성합니다.
 			const clone = element.cloneNode(true);
 
-			for (const prop of computedStyle) {
-				clone.style[prop] = computedStyle.getPropertyValue(prop);
-			}
-
-			console.log(fontSize);
-
-			// ⭐ 폰트 스타일을 명시적으로 재정의합니다. ⭐
-			clone.style.fontSize = fontSize;
-			clone.style.fontFamily = fontFamily;
+			// 3. 복사본에 필요한 스타일만 명시적으로 적용합니다.
+			// 이렇게 하면 부모가 숨겨져 있어도 정확한 스타일을 얻을 수 있습니다.
+			clone.style.fontSize = computedStyle.fontSize;
+			clone.style.fontFamily = computedStyle.fontFamily;
+			clone.style.fontWeight = computedStyle.fontWeight;
 
-			// 4. 복제본을 시각적으로 숨기고 레이아웃에 포함시킬 스타일을 적용합니다.
+			// 4. 복제본을 화면 밖으로 이동시킬 스타일을 적용합니다.
 			clone.style.position = 'absolute';
 			clone.style.left = '-9999px';
 			clone.style.visibility = 'hidden';
 
-			// 5. 복제본을 body에 임시로 추가하여 렌더링되도록 합니다.
+			// 5. 복제본을 body에 임시로 추가합니다.
 			document.body.appendChild(clone);
 
 			// 6. 너비 측정