ninegrid2 6.1150.0 → 6.1152.0

package/dist/bundle.cjs.js

@@ -121946,10 +121946,31 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		console.log(this.querySelectorAll(".row"));
+		const allLabels = [];
+
+		// 1. 모든 .row에서 .label 요소를 찾아서 위치(인덱스)별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
-			const label = el.querySelector(".label");
-			label.style.width = "100px";
+			const labelsInRow = el.querySelectorAll(".label");
+			labelsInRow.forEach((label, index) => {
+				if (!allLabels[index]) {
+					allLabels[index] = [];
+				}
+				allLabels[index].push(label);
+			});
+		});
+
+		// 2. 각 그룹(위치)별로 최대 너비 계산 및 적용
+		allLabels.forEach((labelGroup) => {
+			// 그룹이 비어있지 않은지 확인
+			if (labelGroup && labelGroup.length > 0) {
+				// 3. 그룹 내 모든 라벨의 너비 중 가장 큰 값(최대값) 찾기
+				const maxWidth = Math.max(...labelGroup.map(label => label.getBoundingClientRect().width));
+
+				// 4. 계산된 최대 너비를 동일 그룹의 모든 라벨에 적용
+				labelGroup.forEach(label => {
+					label.style.width = `${maxWidth}px`;
+				});
+			}
 		});
 	};
 }

package/dist/bundle.esm.js

@@ -121942,10 +121942,31 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		console.log(this.querySelectorAll(".row"));
+		const allLabels = [];
+
+		// 1. 모든 .row에서 .label 요소를 찾아서 위치(인덱스)별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
-			const label = el.querySelector(".label");
-			label.style.width = "100px";
+			const labelsInRow = el.querySelectorAll(".label");
+			labelsInRow.forEach((label, index) => {
+				if (!allLabels[index]) {
+					allLabels[index] = [];
+				}
+				allLabels[index].push(label);
+			});
+		});
+
+		// 2. 각 그룹(위치)별로 최대 너비 계산 및 적용
+		allLabels.forEach((labelGroup) => {
+			// 그룹이 비어있지 않은지 확인
+			if (labelGroup && labelGroup.length > 0) {
+				// 3. 그룹 내 모든 라벨의 너비 중 가장 큰 값(최대값) 찾기
+				const maxWidth = Math.max(...labelGroup.map(label => label.getBoundingClientRect().width));
+
+				// 4. 계산된 최대 너비를 동일 그룹의 모든 라벨에 적용
+				labelGroup.forEach(label => {
+					label.style.width = `${maxWidth}px`;
+				});
+			}
 		});
 	};
 }

package/dist/nx/nxLayout2.js

@@ -59,11 +59,32 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		console.log(this.querySelectorAll(".row"));
+		const allLabels = [];
+
+		// 1. 모든 .row에서 .label 요소를 찾아서 위치(인덱스)별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
-			const label = el.querySelector(".label");
-			label.style.width = "100px";
-		})
+			const labelsInRow = el.querySelectorAll(".label");
+			labelsInRow.forEach((label, index) => {
+				if (!allLabels[index]) {
+					allLabels[index] = [];
+				}
+				allLabels[index].push(label);
+			});
+		});
+
+		// 2. 각 그룹(위치)별로 최대 너비 계산 및 적용
+		allLabels.forEach((labelGroup) => {
+			// 그룹이 비어있지 않은지 확인
+			if (labelGroup && labelGroup.length > 0) {
+				// 3. 그룹 내 모든 라벨의 너비 중 가장 큰 값(최대값) 찾기
+				const maxWidth = Math.max(...labelGroup.map(label => label.getBoundingClientRect().width));
+
+				// 4. 계산된 최대 너비를 동일 그룹의 모든 라벨에 적용
+				labelGroup.forEach(label => {
+					label.style.width = `${maxWidth}px`;
+				});
+			}
+		});
 	};
 }
 

package/package.json

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

package/src/nx/nxLayout2.js

@@ -59,11 +59,32 @@ class NxLayout2 extends HTMLElement {
 	};
 
 	#position = () => {
-		console.log(this.querySelectorAll(".row"));
+		const allLabels = [];
+
+		// 1. 모든 .row에서 .label 요소를 찾아서 위치(인덱스)별로 그룹화
 		this.querySelectorAll(".row").forEach((el) => {
-			const label = el.querySelector(".label");
-			label.style.width = "100px";
-		})
+			const labelsInRow = el.querySelectorAll(".label");
+			labelsInRow.forEach((label, index) => {
+				if (!allLabels[index]) {
+					allLabels[index] = [];
+				}
+				allLabels[index].push(label);
+			});
+		});
+
+		// 2. 각 그룹(위치)별로 최대 너비 계산 및 적용
+		allLabels.forEach((labelGroup) => {
+			// 그룹이 비어있지 않은지 확인
+			if (labelGroup && labelGroup.length > 0) {
+				// 3. 그룹 내 모든 라벨의 너비 중 가장 큰 값(최대값) 찾기
+				const maxWidth = Math.max(...labelGroup.map(label => label.getBoundingClientRect().width));
+
+				// 4. 계산된 최대 너비를 동일 그룹의 모든 라벨에 적용
+				labelGroup.forEach(label => {
+					label.style.width = `${maxWidth}px`;
+				});
+			}
+		});
 	};
 }