ninegrid2 6.1249.0 → 6.1250.0

package/dist/bundle.cjs.js

@@ -121838,33 +121838,48 @@ class nxTitle extends HTMLElement {
 
 customElements.define("nx-title", nxTitle);
 
-class nxDiv extends HTMLElement
-{
+class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
-	constructor () {
+	constructor() {
 		super();
-		this.attachShadow({ mode: 'open' });
+		// 1. 'use-shadow' 속성이 "false"가 아니면 기본적으로 Shadow DOM을 사용하도록 설정
+		const useShadow = this.getAttribute("use-shadow") !== "false";
+
+		if (useShadow) {
+			this.attachShadow({ mode: 'open' });
+			this.#root = this.shadowRoot;
+		} else {
+			this.#root = this;
+		}
 	}
-	
+
 	connectedCallback() {
 		if (!this.#isInitialized) {
 			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+			this.#isInitialized = true;
 			return true;
 		}
-
 		return false;
 	}
 
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
+	#getElements() {
+		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
+	}
+
+	// 자식 클래스에서 접근할 수 있도록 getter 제공
+	get root() {
+		return this.#root;
+	}
+
 	getData = () => {
 		const jsonData = {};
-
-		// Shadow DOM 내의 폼 요소만 선택
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+		this.#getElements().forEach(el => {
 			const key = el.name;
-			if (!key) return; // name이 없는 요소는 건너뜁니다.
+			if (!key) return;
 
 			let value;
 			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
@@ -121873,50 +121888,40 @@ class nxDiv extends HTMLElement
 				value = el.value;
 			}
 
-			// 중복 name을 대비한 배열 처리
 			if (jsonData[key]) {
-				if (!Array.isArray(jsonData[key])) {
-					jsonData[key] = [jsonData[key]];
-				}
+				if (!Array.isArray(jsonData[key])) jsonData[key] = [jsonData[key]];
 				jsonData[key].push(value);
 			} else {
 				jsonData[key] = value;
 			}
 		});
-
 		return jsonData;
 	};
 
 	setData = (jsonData) => {
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
-			console.log("------", el);
+		this.#getElements().forEach(el => {
 			el.removeEventListener("input", this.#changeHandler);
 			el.addEventListener("input", this.#changeHandler);
 		});
 
-		if (!jsonData || typeof jsonData !== 'object') {
-			console.error("setData: Invalid data provided. Expected an object.");
-			return;
-		}
+		if (!jsonData || typeof jsonData !== 'object') return;
 
 		let bChanged = false;
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+		this.#getElements().forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 
 			const value = jsonData[key];
-
-			// 폼 요소에만 데이터를 설정합니다.
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					if (el.checked !== (el.value === String(value))) bChanged = true;
-					el.checked = (el.value === String(value));
+					const isChecked = (String(el.value) === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
 				}
 			} else {
-				// 폼 요소가 아닌 경우, textContent를 사용합니다.
 				if (el.textContent !== value) bChanged = true;
 				el.textContent = value;
 			}
@@ -121943,22 +121948,22 @@ class nxDiv extends HTMLElement
 	}
 
 	#init = () => {
-
-		//console.log(this);
-		//console.log(this.querySelectorAll("input[name], textarea[name], select[name]"));
-
-		/**
-		 * css style 적용
-		 */
+		// CSS Style 적용
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
-				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
+		// 2. HTML 내용 처리
 		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		// Shadow DOM을 사용할 경우 내용을 안으로 옮김
+		if (this.shadowRoot) {
+			this.shadowRoot.innerHTML = this.originContents;
+			this.innerHTML = ""; // 외부(Light DOM) 내용은 비움
+		}
+		// Shadow DOM을 안 쓰면 그대로 유지 (this.#root가 this이므로 별도 처리 불필요)
 	};
 }
 
@@ -122244,28 +122249,37 @@ class nxPanel extends nxDiv {
 
 customElements.define("nx-panel", nxPanel);
 
-class nxButtons extends HTMLElement {
-
+class nxButtons extends nxDiv {
 	constructor() {
 		super();
 	}
 
 	connectedCallback() {
 		if (super.connectedCallback()) this.#init();
-	};
+	}
 
 	#init = () => {
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
-				${ninegrid.getCustomPath(this,"nxButtons.css")}
-			</style>
-            
-			${this.originContents}
+		// 1. 스타일과 내용을 합친 템플릿 생성
+		const styleContent = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+                ${ninegrid.getCustomPath(this, "nxButtons.css")}
+            </style>
         `;
+console.log("11111");
+		const htmlTmpl = document.createElement("template");
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		// Shadow DOM일 때는 originContents를 옮겨야 하고,
+		// Light DOM일 때는 이미 본문에 있으므로 스타일만 추가하면 됨
+		if (this.shadowRoot) {
+			htmlTmpl.innerHTML = `${styleContent}${this.originContents}`;
+			this.root.appendChild(htmlTmpl.content.cloneNode(true));
+		} else {
+			// Light DOM 모드일 때: 스타일만 상단에 추가
+			const styleDiv = document.createElement("div");
+			styleDiv.innerHTML = styleContent;
+			this.root.prepend(styleDiv);
+		}
 	}
 }
 

package/dist/bundle.esm.js

@@ -121834,33 +121834,48 @@ class nxTitle extends HTMLElement {
 
 customElements.define("nx-title", nxTitle);
 
-class nxDiv extends HTMLElement
-{
+class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
-	constructor () {
+	constructor() {
 		super();
-		this.attachShadow({ mode: 'open' });
+		// 1. 'use-shadow' 속성이 "false"가 아니면 기본적으로 Shadow DOM을 사용하도록 설정
+		const useShadow = this.getAttribute("use-shadow") !== "false";
+
+		if (useShadow) {
+			this.attachShadow({ mode: 'open' });
+			this.#root = this.shadowRoot;
+		} else {
+			this.#root = this;
+		}
 	}
-	
+
 	connectedCallback() {
 		if (!this.#isInitialized) {
 			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+			this.#isInitialized = true;
 			return true;
 		}
-
 		return false;
 	}
 
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
+	#getElements() {
+		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
+	}
+
+	// 자식 클래스에서 접근할 수 있도록 getter 제공
+	get root() {
+		return this.#root;
+	}
+
 	getData = () => {
 		const jsonData = {};
-
-		// Shadow DOM 내의 폼 요소만 선택
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+		this.#getElements().forEach(el => {
 			const key = el.name;
-			if (!key) return; // name이 없는 요소는 건너뜁니다.
+			if (!key) return;
 
 			let value;
 			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
@@ -121869,50 +121884,40 @@ class nxDiv extends HTMLElement
 				value = el.value;
 			}
 
-			// 중복 name을 대비한 배열 처리
 			if (jsonData[key]) {
-				if (!Array.isArray(jsonData[key])) {
-					jsonData[key] = [jsonData[key]];
-				}
+				if (!Array.isArray(jsonData[key])) jsonData[key] = [jsonData[key]];
 				jsonData[key].push(value);
 			} else {
 				jsonData[key] = value;
 			}
 		});
-
 		return jsonData;
 	};
 
 	setData = (jsonData) => {
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
-			console.log("------", el);
+		this.#getElements().forEach(el => {
 			el.removeEventListener("input", this.#changeHandler);
 			el.addEventListener("input", this.#changeHandler);
 		});
 
-		if (!jsonData || typeof jsonData !== 'object') {
-			console.error("setData: Invalid data provided. Expected an object.");
-			return;
-		}
+		if (!jsonData || typeof jsonData !== 'object') return;
 
 		let bChanged = false;
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+		this.#getElements().forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 
 			const value = jsonData[key];
-
-			// 폼 요소에만 데이터를 설정합니다.
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					if (el.checked !== (el.value === String(value))) bChanged = true;
-					el.checked = (el.value === String(value));
+					const isChecked = (String(el.value) === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
 				}
 			} else {
-				// 폼 요소가 아닌 경우, textContent를 사용합니다.
 				if (el.textContent !== value) bChanged = true;
 				el.textContent = value;
 			}
@@ -121939,22 +121944,22 @@ class nxDiv extends HTMLElement
 	}
 
 	#init = () => {
-
-		//console.log(this);
-		//console.log(this.querySelectorAll("input[name], textarea[name], select[name]"));
-
-		/**
-		 * css style 적용
-		 */
+		// CSS Style 적용
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
-				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
+		// 2. HTML 내용 처리
 		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		// Shadow DOM을 사용할 경우 내용을 안으로 옮김
+		if (this.shadowRoot) {
+			this.shadowRoot.innerHTML = this.originContents;
+			this.innerHTML = ""; // 외부(Light DOM) 내용은 비움
+		}
+		// Shadow DOM을 안 쓰면 그대로 유지 (this.#root가 this이므로 별도 처리 불필요)
 	};
 }
 
@@ -122240,28 +122245,37 @@ class nxPanel extends nxDiv {
 
 customElements.define("nx-panel", nxPanel);
 
-class nxButtons extends HTMLElement {
-
+class nxButtons extends nxDiv {
 	constructor() {
 		super();
 	}
 
 	connectedCallback() {
 		if (super.connectedCallback()) this.#init();
-	};
+	}
 
 	#init = () => {
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
-				${ninegrid.getCustomPath(this,"nxButtons.css")}
-			</style>
-            
-			${this.originContents}
+		// 1. 스타일과 내용을 합친 템플릿 생성
+		const styleContent = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+                ${ninegrid.getCustomPath(this, "nxButtons.css")}
+            </style>
         `;
+console.log("11111");
+		const htmlTmpl = document.createElement("template");
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		// Shadow DOM일 때는 originContents를 옮겨야 하고,
+		// Light DOM일 때는 이미 본문에 있으므로 스타일만 추가하면 됨
+		if (this.shadowRoot) {
+			htmlTmpl.innerHTML = `${styleContent}${this.originContents}`;
+			this.root.appendChild(htmlTmpl.content.cloneNode(true));
+		} else {
+			// Light DOM 모드일 때: 스타일만 상단에 추가
+			const styleDiv = document.createElement("div");
+			styleDiv.innerHTML = styleContent;
+			this.root.prepend(styleDiv);
+		}
 	}
 }
 

package/dist/nx/_nxDiv.js

@@ -1,32 +1,47 @@
 import ninegrid from "../index.js";
 
-export class nxDiv extends HTMLElement
-{
+export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
-	constructor () {
+	constructor() {
 		super();
-		this.attachShadow({ mode: 'open' });
+		// 1. 'use-shadow' 속성이 "false"가 아니면 기본적으로 Shadow DOM을 사용하도록 설정
+		const useShadow = this.getAttribute("use-shadow") !== "false";
+
+		if (useShadow) {
+			this.attachShadow({ mode: 'open' });
+			this.#root = this.shadowRoot;
+		} else {
+			this.#root = this;
+		}
 	}
-	
+
 	connectedCallback() {
 		if (!this.#isInitialized) {
 			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+			this.#isInitialized = true;
 			return true;
 		}
-
 		return false;
 	}
 
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
+	#getElements() {
+		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
+	}
+
+	// 자식 클래스에서 접근할 수 있도록 getter 제공
+	get root() {
+		return this.#root;
+	}
+
 	getData = () => {
 		const jsonData = {};
-
-		// Shadow DOM 내의 폼 요소만 선택
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+		this.#getElements().forEach(el => {
 			const key = el.name;
-			if (!key) return; // name이 없는 요소는 건너뜁니다.
+			if (!key) return;
 
 			let value;
 			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
@@ -35,50 +50,40 @@ export class nxDiv extends HTMLElement
 				value = el.value;
 			}
 
-			// 중복 name을 대비한 배열 처리
 			if (jsonData[key]) {
-				if (!Array.isArray(jsonData[key])) {
-					jsonData[key] = [jsonData[key]];
-				}
+				if (!Array.isArray(jsonData[key])) jsonData[key] = [jsonData[key]];
 				jsonData[key].push(value);
 			} else {
 				jsonData[key] = value;
 			}
 		});
-
 		return jsonData;
 	};
 
 	setData = (jsonData) => {
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
-			console.log("------", el);
+		this.#getElements().forEach(el => {
 			el.removeEventListener("input", this.#changeHandler);
 			el.addEventListener("input", this.#changeHandler);
 		});
 
-		if (!jsonData || typeof jsonData !== 'object') {
-			console.error("setData: Invalid data provided. Expected an object.");
-			return;
-		}
+		if (!jsonData || typeof jsonData !== 'object') return;
 
 		let bChanged = false;
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+		this.#getElements().forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 
 			const value = jsonData[key];
-
-			// 폼 요소에만 데이터를 설정합니다.
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					if (el.checked !== (el.value === String(value))) bChanged = true;
-					el.checked = (el.value === String(value));
+					const isChecked = (String(el.value) === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
 				}
 			} else {
-				// 폼 요소가 아닌 경우, textContent를 사용합니다.
 				if (el.textContent !== value) bChanged = true;
 				el.textContent = value;
 			}
@@ -105,21 +110,21 @@ export class nxDiv extends HTMLElement
 	}
 
 	#init = () => {
-
-		//console.log(this);
-		//console.log(this.querySelectorAll("input[name], textarea[name], select[name]"));
-
-		/**
-		 * css style 적용
-		 */
+		// CSS Style 적용
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
-				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
+		// 2. HTML 내용 처리
 		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		// Shadow DOM을 사용할 경우 내용을 안으로 옮김
+		if (this.shadowRoot) {
+			this.shadowRoot.innerHTML = this.originContents;
+			this.innerHTML = ""; // 외부(Light DOM) 내용은 비움
+		}
+		// Shadow DOM을 안 쓰면 그대로 유지 (this.#root가 this이므로 별도 처리 불필요)
 	};
 }

package/dist/nx/_nxDiv.js.bak2

@@ -0,0 +1,125 @@
+import ninegrid from "../index.js";
+
+export class nxDiv extends HTMLElement
+{
+	originContents;
+	#isInitialized = false;
+
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		if (!this.#isInitialized) {
+			this.#init();
+			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+			return true;
+		}
+
+		return false;
+	}
+
+	getData = () => {
+		const jsonData = {};
+
+		// Shadow DOM 내의 폼 요소만 선택
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key) return; // name이 없는 요소는 건너뜁니다.
+
+			let value;
+			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
+				value = el.checked;
+			} else {
+				value = el.value;
+			}
+
+			// 중복 name을 대비한 배열 처리
+			if (jsonData[key]) {
+				if (!Array.isArray(jsonData[key])) {
+					jsonData[key] = [jsonData[key]];
+				}
+				jsonData[key].push(value);
+			} else {
+				jsonData[key] = value;
+			}
+		});
+
+		return jsonData;
+	};
+
+	setData = (jsonData) => {
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			console.log("------", el);
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
+		if (!jsonData || typeof jsonData !== 'object') {
+			console.error("setData: Invalid data provided. Expected an object.");
+			return;
+		}
+
+		let bChanged = false;
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key || !jsonData.hasOwnProperty(key)) return;
+
+			const value = jsonData[key];
+
+			// 폼 요소에만 데이터를 설정합니다.
+			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
+				if (el.type === "checkbox" || el.type === "radio") {
+					if (el.checked !== (el.value === String(value))) bChanged = true;
+					el.checked = (el.value === String(value));
+				} else {
+					if (el.value !== value) bChanged = true;
+					el.value = value;
+				}
+			} else {
+				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				if (el.textContent !== value) bChanged = true;
+				el.textContent = value;
+			}
+		});
+
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	initData = (jsonData) => {
+		this.setData(jsonData);
+		this.#changed(false);
+	};
+
+	#changed = (v) => {
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = v;
+		}
+	}
+
+	#changeHandler = (e) => {
+		this.#changed(true);
+	}
+
+	#init = () => {
+
+		//console.log(this);
+		//console.log(this.querySelectorAll("input[name], textarea[name], select[name]"));
+
+		/**
+		 * css style 적용
+		 */
+		for (const attr of this.attributes) {
+			if (attr.name.startsWith("css-")) {
+				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
+				this.style.setProperty(attr.name.substring(4), attr.value);
+			}
+		}
+
+		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+	};
+}

package/dist/nx/nxButtons.js

@@ -1,29 +1,38 @@
 import ninegrid from "../index.js";
-import {nxDiv} from "./_nxDiv.js";
-
-class nxButtons extends HTMLElement {
+import { nxDiv } from "./_nxDiv.js";
 
+class nxButtons extends nxDiv {
 	constructor() {
 		super();
 	}
 
 	connectedCallback() {
 		if (super.connectedCallback()) this.#init();
-	};
+	}
 
 	#init = () => {
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
-				${ninegrid.getCustomPath(this,"nxButtons.css")}
-			</style>
-            
-			${this.originContents}
+		// 1. 스타일과 내용을 합친 템플릿 생성
+		const styleContent = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+                ${ninegrid.getCustomPath(this, "nxButtons.css")}
+            </style>
         `;
+console.log("11111")
+		const htmlTmpl = document.createElement("template");
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		// Shadow DOM일 때는 originContents를 옮겨야 하고,
+		// Light DOM일 때는 이미 본문에 있으므로 스타일만 추가하면 됨
+		if (this.shadowRoot) {
+			htmlTmpl.innerHTML = `${styleContent}${this.originContents}`;
+			this.root.appendChild(htmlTmpl.content.cloneNode(true));
+		} else {
+			// Light DOM 모드일 때: 스타일만 상단에 추가
+			const styleDiv = document.createElement("div");
+			styleDiv.innerHTML = styleContent;
+			this.root.prepend(styleDiv);
+		}
 	}
 }
 
-customElements.define("nx-buttons", nxButtons);
+customElements.define("nx-buttons", nxButtons);

package/dist/nx/nxButtons.js.bak

@@ -0,0 +1,29 @@
+import ninegrid from "../index.js";
+import {nxDiv} from "./_nxDiv.js";
+
+class nxButtons extends nxDiv {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	};
+
+	#init = () => {
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${this.originContents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-buttons", nxButtons);

package/package.json

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

package/src/nx/_nxDiv.js

@@ -1,32 +1,47 @@
 import ninegrid from "../index.js";
 
-export class nxDiv extends HTMLElement
-{
+export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
-	constructor () {
+	constructor() {
 		super();
-		this.attachShadow({ mode: 'open' });
+		// 1. 'use-shadow' 속성이 "false"가 아니면 기본적으로 Shadow DOM을 사용하도록 설정
+		const useShadow = this.getAttribute("use-shadow") !== "false";
+
+		if (useShadow) {
+			this.attachShadow({ mode: 'open' });
+			this.#root = this.shadowRoot;
+		} else {
+			this.#root = this;
+		}
 	}
-	
+
 	connectedCallback() {
 		if (!this.#isInitialized) {
 			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+			this.#isInitialized = true;
 			return true;
 		}
-
 		return false;
 	}
 
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
+	#getElements() {
+		return ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.#root);
+	}
+
+	// 자식 클래스에서 접근할 수 있도록 getter 제공
+	get root() {
+		return this.#root;
+	}
+
 	getData = () => {
 		const jsonData = {};
-
-		// Shadow DOM 내의 폼 요소만 선택
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+		this.#getElements().forEach(el => {
 			const key = el.name;
-			if (!key) return; // name이 없는 요소는 건너뜁니다.
+			if (!key) return;
 
 			let value;
 			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
@@ -35,50 +50,40 @@ export class nxDiv extends HTMLElement
 				value = el.value;
 			}
 
-			// 중복 name을 대비한 배열 처리
 			if (jsonData[key]) {
-				if (!Array.isArray(jsonData[key])) {
-					jsonData[key] = [jsonData[key]];
-				}
+				if (!Array.isArray(jsonData[key])) jsonData[key] = [jsonData[key]];
 				jsonData[key].push(value);
 			} else {
 				jsonData[key] = value;
 			}
 		});
-
 		return jsonData;
 	};
 
 	setData = (jsonData) => {
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
-			console.log("------", el);
+		this.#getElements().forEach(el => {
 			el.removeEventListener("input", this.#changeHandler);
 			el.addEventListener("input", this.#changeHandler);
 		});
 
-		if (!jsonData || typeof jsonData !== 'object') {
-			console.error("setData: Invalid data provided. Expected an object.");
-			return;
-		}
+		if (!jsonData || typeof jsonData !== 'object') return;
 
 		let bChanged = false;
-		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+		this.#getElements().forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 
 			const value = jsonData[key];
-
-			// 폼 요소에만 데이터를 설정합니다.
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
-					if (el.checked !== (el.value === String(value))) bChanged = true;
-					el.checked = (el.value === String(value));
+					const isChecked = (String(el.value) === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
 				} else {
 					if (el.value !== value) bChanged = true;
 					el.value = value;
 				}
 			} else {
-				// 폼 요소가 아닌 경우, textContent를 사용합니다.
 				if (el.textContent !== value) bChanged = true;
 				el.textContent = value;
 			}
@@ -105,21 +110,21 @@ export class nxDiv extends HTMLElement
 	}
 
 	#init = () => {
-
-		//console.log(this);
-		//console.log(this.querySelectorAll("input[name], textarea[name], select[name]"));
-
-		/**
-		 * css style 적용
-		 */
+		// CSS Style 적용
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
-				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
 
+		// 2. HTML 내용 처리
 		this.originContents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		// Shadow DOM을 사용할 경우 내용을 안으로 옮김
+		if (this.shadowRoot) {
+			this.shadowRoot.innerHTML = this.originContents;
+			this.innerHTML = ""; // 외부(Light DOM) 내용은 비움
+		}
+		// Shadow DOM을 안 쓰면 그대로 유지 (this.#root가 this이므로 별도 처리 불필요)
 	};
 }

package/src/nx/_nxDiv.js.bak2

@@ -0,0 +1,125 @@
+import ninegrid from "../index.js";
+
+export class nxDiv extends HTMLElement
+{
+	originContents;
+	#isInitialized = false;
+
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		if (!this.#isInitialized) {
+			this.#init();
+			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+			return true;
+		}
+
+		return false;
+	}
+
+	getData = () => {
+		const jsonData = {};
+
+		// Shadow DOM 내의 폼 요소만 선택
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key) return; // name이 없는 요소는 건너뜁니다.
+
+			let value;
+			if (el.tagName === "INPUT" && (el.type === "checkbox" || el.type === "radio")) {
+				value = el.checked;
+			} else {
+				value = el.value;
+			}
+
+			// 중복 name을 대비한 배열 처리
+			if (jsonData[key]) {
+				if (!Array.isArray(jsonData[key])) {
+					jsonData[key] = [jsonData[key]];
+				}
+				jsonData[key].push(value);
+			} else {
+				jsonData[key] = value;
+			}
+		});
+
+		return jsonData;
+	};
+
+	setData = (jsonData) => {
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			console.log("------", el);
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
+		if (!jsonData || typeof jsonData !== 'object') {
+			console.error("setData: Invalid data provided. Expected an object.");
+			return;
+		}
+
+		let bChanged = false;
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
+			const key = el.name;
+			if (!key || !jsonData.hasOwnProperty(key)) return;
+
+			const value = jsonData[key];
+
+			// 폼 요소에만 데이터를 설정합니다.
+			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
+				if (el.type === "checkbox" || el.type === "radio") {
+					if (el.checked !== (el.value === String(value))) bChanged = true;
+					el.checked = (el.value === String(value));
+				} else {
+					if (el.value !== value) bChanged = true;
+					el.value = value;
+				}
+			} else {
+				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				if (el.textContent !== value) bChanged = true;
+				el.textContent = value;
+			}
+		});
+
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	initData = (jsonData) => {
+		this.setData(jsonData);
+		this.#changed(false);
+	};
+
+	#changed = (v) => {
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = v;
+		}
+	}
+
+	#changeHandler = (e) => {
+		this.#changed(true);
+	}
+
+	#init = () => {
+
+		//console.log(this);
+		//console.log(this.querySelectorAll("input[name], textarea[name], select[name]"));
+
+		/**
+		 * css style 적용
+		 */
+		for (const attr of this.attributes) {
+			if (attr.name.startsWith("css-")) {
+				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
+				this.style.setProperty(attr.name.substring(4), attr.value);
+			}
+		}
+
+		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+	};
+}

package/src/nx/nxButtons.js

@@ -1,29 +1,38 @@
 import ninegrid from "../index.js";
-import {nxDiv} from "./_nxDiv.js";
-
-class nxButtons extends HTMLElement {
+import { nxDiv } from "./_nxDiv.js";
 
+class nxButtons extends nxDiv {
 	constructor() {
 		super();
 	}
 
 	connectedCallback() {
 		if (super.connectedCallback()) this.#init();
-	};
+	}
 
 	#init = () => {
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
-				${ninegrid.getCustomPath(this,"nxButtons.css")}
-			</style>
-            
-			${this.originContents}
+		// 1. 스타일과 내용을 합친 템플릿 생성
+		const styleContent = `
+            <style>
+                @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+                ${ninegrid.getCustomPath(this, "nxButtons.css")}
+            </style>
         `;
+console.log("11111")
+		const htmlTmpl = document.createElement("template");
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		// Shadow DOM일 때는 originContents를 옮겨야 하고,
+		// Light DOM일 때는 이미 본문에 있으므로 스타일만 추가하면 됨
+		if (this.shadowRoot) {
+			htmlTmpl.innerHTML = `${styleContent}${this.originContents}`;
+			this.root.appendChild(htmlTmpl.content.cloneNode(true));
+		} else {
+			// Light DOM 모드일 때: 스타일만 상단에 추가
+			const styleDiv = document.createElement("div");
+			styleDiv.innerHTML = styleContent;
+			this.root.prepend(styleDiv);
+		}
 	}
 }
 
-customElements.define("nx-buttons", nxButtons);
+customElements.define("nx-buttons", nxButtons);

package/src/nx/nxButtons.js.bak

@@ -0,0 +1,29 @@
+import ninegrid from "../index.js";
+import {nxDiv} from "./_nxDiv.js";
+
+class nxButtons extends nxDiv {
+
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		if (super.connectedCallback()) this.#init();
+	};
+
+	#init = () => {
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${this.originContents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-buttons", nxButtons);