ninegrid2 6.1379.0 → 6.1380.0

package/dist/bundle.cjs.js

@@ -28436,15 +28436,19 @@ customElements.define("nx-title", nxTitle);
 class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root;
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
 	constructor() {
 		super();
+		// constructor에서는 속성을 읽을 수 없으므로 초기화만 준비합니다.
 	}
 
 	connectedCallback() {
 		if (!this.#isInitialized) {
+			// 1. 여기서 속성을 읽어 Shadow DOM 사용 여부를 결정합니다.
+			// use-shadow 속성이 "false"가 아닐 때만 Shadow DOM을 생성 (기본값 true)
 			const useShadow = this.getAttribute("use-shadow") !== "false";
+
 			if (useShadow && !this.shadowRoot) {
 				this.attachShadow({ mode: 'open' });
 				this.#root = this.shadowRoot;
@@ -28454,50 +28458,22 @@ class nxDiv extends HTMLElement {
 
 			this.#init();
 			this.#isInitialized = true;
+			return true;
 		}
+		return false;
 	}
 
-	get root() { return this.#root || this; }
+	// 자식 클래스에서 접근 가능하도록 getter 제공
+	get root() {
+		return this.#root || this;
+	}
 
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
 	#getElements() {
+		// ShadowRoot가 있으면 shadowRoot에서, 없으면 본체(this)에서 찾음
 		return ninegrid.querySelectorAll("input[name], textarea[name], select[name], nx-editor[name]", this.#root);
 	}
 
-	// [공통 로직 1] 특정 요소에 값을 쓰거나 초기화하는 핵심 함수
-	#updateElement(el, value) {
-		const tagName = el.tagName.toUpperCase();
-		const type = el.type;
-		let isChanged = false;
-
-		if (["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"].includes(tagName)) {
-			if (type === "checkbox") {
-				const t = el.getAttribute("true-value") || "Y";
-				const isChecked = (String(t) === String(value));
-				if (el.checked !== isChecked) isChanged = true;
-				el.checked = isChecked;
-			} else if (type === "radio") {
-				const isChecked = (String(el.value) === String(value));
-				if (el.checked !== isChecked) isChanged = true;
-				el.checked = isChecked;
-			} else {
-				if (el.value !== value) isChanged = true;
-				el.value = value;
-			}
-		} else {
-			if (el.textContent !== value) isChanged = true;
-			el.textContent = value;
-		}
-		return isChanged;
-	}
-
-	// [공통 로직 2] 이벤트 리스너 일괄 등록
-	#refreshListeners() {
-		this.#getElements().forEach(el => {
-			el.removeEventListener("input", this.#changeHandler);
-			el.addEventListener("input", this.#changeHandler);
-		});
-	}
-
 	getData = () => {
 		const jsonData = {};
 		this.#getElements().forEach(el => {
@@ -28506,14 +28482,15 @@ class nxDiv extends HTMLElement {
 
 			let value;
 			if (el.tagName === "INPUT" && el.type === "checkbox") {
-				const t = el.getAttribute("true-value") || "Y";
-				const f = el.getAttribute("false-value") || "N";
+				let t = el.getAttribute("true-value") || "Y";
+				let f = el.getAttribute("false-value") || "N";
 				value = el.checked ? t : f;
+			} else if (el.tagName === "INPUT" && el.type === "radio") {
+				value = el.value;
 			} else {
 				value = el.value;
 			}
 
-			// 중복 name 처리 (배열화)
 			if (jsonData[key]) {
 				if (!Array.isArray(jsonData[key])) jsonData[key] = [jsonData[key]];
 				jsonData[key].push(value);
@@ -28524,36 +28501,95 @@ class nxDiv extends HTMLElement {
 		return jsonData;
 	};
 
-	// 파라미터가 있으면 해당 값으로, 없으면 전체 공백 초기화
-	clearData = (jsonData = {}) => {
-		this.#refreshListeners();
+	clearData = (jsonData) => {
+		this.#getElements().forEach(el => {
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
+		//if (!jsonData || typeof jsonData !== 'object') return;
+
+		//let bChanged = false;
 		this.#getElements().forEach(el => {
 			const key = el.name;
-			if (!key) return;
-			const val = (jsonData && jsonData[key] !== undefined) ? jsonData[key] : "";
-			this.#updateElement(el, val);
+			if (!key) return; // name이 없는 요소는 스킵
+			//console.log(el.tagName, key, el.name);
+
+			// 2. jsonData에 해당 key가 없으면 공백("") 할당
+			const value = (jsonData && jsonData[key] !== undefined) ? jsonData[key] : "";
+
+			const tagName = el.tagName.toUpperCase();
+			const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
+
+			if (inputTags.includes(tagName)) {
+				if (el.type === "checkbox") {
+					// 3. true-value 속성을 읽어와서 체크 여부 결정
+					let t = el.getAttribute("true-value") || "Y";
+					el.checked = (String(t) === String(value));
+				} else if (el.type === "radio") {
+					// 라디오 버튼 그룹 내에서 값 일치 여부 확인
+					el.checked = (String(el.value) === String(value));
+				} else {
+					el.value = value;
+				}
+			} else {
+				el.textContent = value;
+			}
 		});
+
 		this.#changed(false);
 	};
 
 	setData = (jsonData) => {
+		this.#getElements().forEach(el => {
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
 		if (!jsonData || typeof jsonData !== 'object') return;
-		this.#refreshListeners();
 
 		let bChanged = false;
 		this.#getElements().forEach(el => {
 			const key = el.name;
+			//console.log(el.tagName, key, el.name);
+
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 
-			if (this.#updateElement(el, jsonData[key])) {
-				bChanged = true;
+			const value = jsonData[key];
+			const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
+
+			if (inputTags.includes(el.tagName)) {
+				if (el.type === "checkbox") {
+					let t = el.getAttribute("true-value") || "Y";
+					el.getAttribute("false-value") || "N";
+					const isChecked = (t === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
+				} else if (el.type === "radio") {
+					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 {
+				if (el.textContent !== value) bChanged = true;
+				el.textContent = value;
 			}
 		});
-		if (bChanged) this.#changed(true);
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	clearData = (bChanged) => {
+
+
+		this.#changed(false);
 	};
 
 	initData = (jsonData) => {
-		this.clearData(jsonData); // clearData가 이미 초기화 로직을 포함함
+		this.setData(jsonData);
 		this.#changed(false);
 	};
 
@@ -28565,15 +28601,30 @@ class nxDiv extends HTMLElement {
 		}
 	}
 
-	#changeHandler = (e) => this.#changed(true);
+	#changeHandler = (e) => {
+		this.#changed(true);
+	}
 
 	#init = () => {
+		/** CSS style 적용 */
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
+
+		//console.log("=========");
+		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
+
+		/**
+		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
+		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
+			this.shadowRoot.innerHTML = this.originContents;
+		} */
 	};
 }
 

package/dist/bundle.esm.js

@@ -28432,15 +28432,19 @@ customElements.define("nx-title", nxTitle);
 class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root;
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
 	constructor() {
 		super();
+		// constructor에서는 속성을 읽을 수 없으므로 초기화만 준비합니다.
 	}
 
 	connectedCallback() {
 		if (!this.#isInitialized) {
+			// 1. 여기서 속성을 읽어 Shadow DOM 사용 여부를 결정합니다.
+			// use-shadow 속성이 "false"가 아닐 때만 Shadow DOM을 생성 (기본값 true)
 			const useShadow = this.getAttribute("use-shadow") !== "false";
+
 			if (useShadow && !this.shadowRoot) {
 				this.attachShadow({ mode: 'open' });
 				this.#root = this.shadowRoot;
@@ -28450,50 +28454,22 @@ class nxDiv extends HTMLElement {
 
 			this.#init();
 			this.#isInitialized = true;
+			return true;
 		}
+		return false;
 	}
 
-	get root() { return this.#root || this; }
+	// 자식 클래스에서 접근 가능하도록 getter 제공
+	get root() {
+		return this.#root || this;
+	}
 
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
 	#getElements() {
+		// ShadowRoot가 있으면 shadowRoot에서, 없으면 본체(this)에서 찾음
 		return ninegrid.querySelectorAll("input[name], textarea[name], select[name], nx-editor[name]", this.#root);
 	}
 
-	// [공통 로직 1] 특정 요소에 값을 쓰거나 초기화하는 핵심 함수
-	#updateElement(el, value) {
-		const tagName = el.tagName.toUpperCase();
-		const type = el.type;
-		let isChanged = false;
-
-		if (["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"].includes(tagName)) {
-			if (type === "checkbox") {
-				const t = el.getAttribute("true-value") || "Y";
-				const isChecked = (String(t) === String(value));
-				if (el.checked !== isChecked) isChanged = true;
-				el.checked = isChecked;
-			} else if (type === "radio") {
-				const isChecked = (String(el.value) === String(value));
-				if (el.checked !== isChecked) isChanged = true;
-				el.checked = isChecked;
-			} else {
-				if (el.value !== value) isChanged = true;
-				el.value = value;
-			}
-		} else {
-			if (el.textContent !== value) isChanged = true;
-			el.textContent = value;
-		}
-		return isChanged;
-	}
-
-	// [공통 로직 2] 이벤트 리스너 일괄 등록
-	#refreshListeners() {
-		this.#getElements().forEach(el => {
-			el.removeEventListener("input", this.#changeHandler);
-			el.addEventListener("input", this.#changeHandler);
-		});
-	}
-
 	getData = () => {
 		const jsonData = {};
 		this.#getElements().forEach(el => {
@@ -28502,14 +28478,15 @@ class nxDiv extends HTMLElement {
 
 			let value;
 			if (el.tagName === "INPUT" && el.type === "checkbox") {
-				const t = el.getAttribute("true-value") || "Y";
-				const f = el.getAttribute("false-value") || "N";
+				let t = el.getAttribute("true-value") || "Y";
+				let f = el.getAttribute("false-value") || "N";
 				value = el.checked ? t : f;
+			} else if (el.tagName === "INPUT" && el.type === "radio") {
+				value = el.value;
 			} else {
 				value = el.value;
 			}
 
-			// 중복 name 처리 (배열화)
 			if (jsonData[key]) {
 				if (!Array.isArray(jsonData[key])) jsonData[key] = [jsonData[key]];
 				jsonData[key].push(value);
@@ -28520,36 +28497,95 @@ class nxDiv extends HTMLElement {
 		return jsonData;
 	};
 
-	// 파라미터가 있으면 해당 값으로, 없으면 전체 공백 초기화
-	clearData = (jsonData = {}) => {
-		this.#refreshListeners();
+	clearData = (jsonData) => {
+		this.#getElements().forEach(el => {
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
+		//if (!jsonData || typeof jsonData !== 'object') return;
+
+		//let bChanged = false;
 		this.#getElements().forEach(el => {
 			const key = el.name;
-			if (!key) return;
-			const val = (jsonData && jsonData[key] !== undefined) ? jsonData[key] : "";
-			this.#updateElement(el, val);
+			if (!key) return; // name이 없는 요소는 스킵
+			//console.log(el.tagName, key, el.name);
+
+			// 2. jsonData에 해당 key가 없으면 공백("") 할당
+			const value = (jsonData && jsonData[key] !== undefined) ? jsonData[key] : "";
+
+			const tagName = el.tagName.toUpperCase();
+			const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
+
+			if (inputTags.includes(tagName)) {
+				if (el.type === "checkbox") {
+					// 3. true-value 속성을 읽어와서 체크 여부 결정
+					let t = el.getAttribute("true-value") || "Y";
+					el.checked = (String(t) === String(value));
+				} else if (el.type === "radio") {
+					// 라디오 버튼 그룹 내에서 값 일치 여부 확인
+					el.checked = (String(el.value) === String(value));
+				} else {
+					el.value = value;
+				}
+			} else {
+				el.textContent = value;
+			}
 		});
+
 		this.#changed(false);
 	};
 
 	setData = (jsonData) => {
+		this.#getElements().forEach(el => {
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
 		if (!jsonData || typeof jsonData !== 'object') return;
-		this.#refreshListeners();
 
 		let bChanged = false;
 		this.#getElements().forEach(el => {
 			const key = el.name;
+			//console.log(el.tagName, key, el.name);
+
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 
-			if (this.#updateElement(el, jsonData[key])) {
-				bChanged = true;
+			const value = jsonData[key];
+			const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
+
+			if (inputTags.includes(el.tagName)) {
+				if (el.type === "checkbox") {
+					let t = el.getAttribute("true-value") || "Y";
+					el.getAttribute("false-value") || "N";
+					const isChecked = (t === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
+				} else if (el.type === "radio") {
+					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 {
+				if (el.textContent !== value) bChanged = true;
+				el.textContent = value;
 			}
 		});
-		if (bChanged) this.#changed(true);
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	clearData = (bChanged) => {
+
+
+		this.#changed(false);
 	};
 
 	initData = (jsonData) => {
-		this.clearData(jsonData); // clearData가 이미 초기화 로직을 포함함
+		this.setData(jsonData);
 		this.#changed(false);
 	};
 
@@ -28561,15 +28597,30 @@ class nxDiv extends HTMLElement {
 		}
 	}
 
-	#changeHandler = (e) => this.#changed(true);
+	#changeHandler = (e) => {
+		this.#changed(true);
+	}
 
 	#init = () => {
+		/** CSS style 적용 */
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
+
+		//console.log("=========");
+		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
+
+		/**
+		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
+		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
+			this.shadowRoot.innerHTML = this.originContents;
+		} */
 	};
 }
 

package/dist/nx/_nxDiv.js

@@ -3,15 +3,19 @@ import ninegrid from "../index.js";
 export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root;
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
 	constructor() {
 		super();
+		// constructor에서는 속성을 읽을 수 없으므로 초기화만 준비합니다.
 	}
 
 	connectedCallback() {
 		if (!this.#isInitialized) {
+			// 1. 여기서 속성을 읽어 Shadow DOM 사용 여부를 결정합니다.
+			// use-shadow 속성이 "false"가 아닐 때만 Shadow DOM을 생성 (기본값 true)
 			const useShadow = this.getAttribute("use-shadow") !== "false";
+
 			if (useShadow && !this.shadowRoot) {
 				this.attachShadow({ mode: 'open' });
 				this.#root = this.shadowRoot;
@@ -21,50 +25,22 @@ export class nxDiv extends HTMLElement {
 
 			this.#init();
 			this.#isInitialized = true;
+			return true;
 		}
+		return false;
 	}
 
-	get root() { return this.#root || this; }
+	// 자식 클래스에서 접근 가능하도록 getter 제공
+	get root() {
+		return this.#root || this;
+	}
 
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
 	#getElements() {
+		// ShadowRoot가 있으면 shadowRoot에서, 없으면 본체(this)에서 찾음
 		return ninegrid.querySelectorAll("input[name], textarea[name], select[name], nx-editor[name]", this.#root);
 	}
 
-	// [공통 로직 1] 특정 요소에 값을 쓰거나 초기화하는 핵심 함수
-	#updateElement(el, value) {
-		const tagName = el.tagName.toUpperCase();
-		const type = el.type;
-		let isChanged = false;
-
-		if (["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"].includes(tagName)) {
-			if (type === "checkbox") {
-				const t = el.getAttribute("true-value") || "Y";
-				const isChecked = (String(t) === String(value));
-				if (el.checked !== isChecked) isChanged = true;
-				el.checked = isChecked;
-			} else if (type === "radio") {
-				const isChecked = (String(el.value) === String(value));
-				if (el.checked !== isChecked) isChanged = true;
-				el.checked = isChecked;
-			} else {
-				if (el.value !== value) isChanged = true;
-				el.value = value;
-			}
-		} else {
-			if (el.textContent !== value) isChanged = true;
-			el.textContent = value;
-		}
-		return isChanged;
-	}
-
-	// [공통 로직 2] 이벤트 리스너 일괄 등록
-	#refreshListeners() {
-		this.#getElements().forEach(el => {
-			el.removeEventListener("input", this.#changeHandler);
-			el.addEventListener("input", this.#changeHandler);
-		});
-	}
-
 	getData = () => {
 		const jsonData = {};
 		this.#getElements().forEach(el => {
@@ -73,14 +49,15 @@ export class nxDiv extends HTMLElement {
 
 			let value;
 			if (el.tagName === "INPUT" && el.type === "checkbox") {
-				const t = el.getAttribute("true-value") || "Y";
-				const f = el.getAttribute("false-value") || "N";
+				let t = el.getAttribute("true-value") || "Y";
+				let f = el.getAttribute("false-value") || "N";
 				value = el.checked ? t : f;
+			} else if (el.tagName === "INPUT" && el.type === "radio") {
+				value = el.value;
 			} else {
 				value = el.value;
 			}
 
-			// 중복 name 처리 (배열화)
 			if (jsonData[key]) {
 				if (!Array.isArray(jsonData[key])) jsonData[key] = [jsonData[key]];
 				jsonData[key].push(value);
@@ -91,36 +68,95 @@ export class nxDiv extends HTMLElement {
 		return jsonData;
 	};
 
-	// 파라미터가 있으면 해당 값으로, 없으면 전체 공백 초기화
-	clearData = (jsonData = {}) => {
-		this.#refreshListeners();
+	clearData = (jsonData) => {
+		this.#getElements().forEach(el => {
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
+		//if (!jsonData || typeof jsonData !== 'object') return;
+
+		//let bChanged = false;
 		this.#getElements().forEach(el => {
 			const key = el.name;
-			if (!key) return;
-			const val = (jsonData && jsonData[key] !== undefined) ? jsonData[key] : "";
-			this.#updateElement(el, val);
+			if (!key) return; // name이 없는 요소는 스킵
+			//console.log(el.tagName, key, el.name);
+
+			// 2. jsonData에 해당 key가 없으면 공백("") 할당
+			const value = (jsonData && jsonData[key] !== undefined) ? jsonData[key] : "";
+
+			const tagName = el.tagName.toUpperCase();
+			const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
+
+			if (inputTags.includes(tagName)) {
+				if (el.type === "checkbox") {
+					// 3. true-value 속성을 읽어와서 체크 여부 결정
+					let t = el.getAttribute("true-value") || "Y";
+					el.checked = (String(t) === String(value));
+				} else if (el.type === "radio") {
+					// 라디오 버튼 그룹 내에서 값 일치 여부 확인
+					el.checked = (String(el.value) === String(value));
+				} else {
+					el.value = value;
+				}
+			} else {
+				el.textContent = value;
+			}
 		});
+
 		this.#changed(false);
 	};
 
 	setData = (jsonData) => {
+		this.#getElements().forEach(el => {
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
 		if (!jsonData || typeof jsonData !== 'object') return;
-		this.#refreshListeners();
 
 		let bChanged = false;
 		this.#getElements().forEach(el => {
 			const key = el.name;
+			//console.log(el.tagName, key, el.name);
+
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 
-			if (this.#updateElement(el, jsonData[key])) {
-				bChanged = true;
+			const value = jsonData[key];
+			const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
+
+			if (inputTags.includes(el.tagName)) {
+				if (el.type === "checkbox") {
+					let t = el.getAttribute("true-value") || "Y";
+					let f = el.getAttribute("false-value") || "N";
+					const isChecked = (t === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
+				} else if (el.type === "radio") {
+					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 {
+				if (el.textContent !== value) bChanged = true;
+				el.textContent = value;
 			}
 		});
-		if (bChanged) this.#changed(true);
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	clearData = (bChanged) => {
+
+
+		this.#changed(false);
 	};
 
 	initData = (jsonData) => {
-		this.clearData(jsonData); // clearData가 이미 초기화 로직을 포함함
+		this.setData(jsonData);
 		this.#changed(false);
 	};
 
@@ -132,14 +168,29 @@ export class nxDiv extends HTMLElement {
 		}
 	}
 
-	#changeHandler = (e) => this.#changed(true);
+	#changeHandler = (e) => {
+		this.#changed(true);
+	}
 
 	#init = () => {
+		/** CSS style 적용 */
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
+
+		//console.log("=========");
+		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
+
+		/**
+		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
+		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
+			this.shadowRoot.innerHTML = this.originContents;
+		} */
 	};
 }

package/package.json

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

package/src/nx/_nxDiv.js

@@ -3,15 +3,19 @@ import ninegrid from "../index.js";
 export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
-	#root;
+	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
 
 	constructor() {
 		super();
+		// constructor에서는 속성을 읽을 수 없으므로 초기화만 준비합니다.
 	}
 
 	connectedCallback() {
 		if (!this.#isInitialized) {
+			// 1. 여기서 속성을 읽어 Shadow DOM 사용 여부를 결정합니다.
+			// use-shadow 속성이 "false"가 아닐 때만 Shadow DOM을 생성 (기본값 true)
 			const useShadow = this.getAttribute("use-shadow") !== "false";
+
 			if (useShadow && !this.shadowRoot) {
 				this.attachShadow({ mode: 'open' });
 				this.#root = this.shadowRoot;
@@ -21,50 +25,22 @@ export class nxDiv extends HTMLElement {
 
 			this.#init();
 			this.#isInitialized = true;
+			return true;
 		}
+		return false;
 	}
 
-	get root() { return this.#root || this; }
+	// 자식 클래스에서 접근 가능하도록 getter 제공
+	get root() {
+		return this.#root || this;
+	}
 
+	// 공통 쿼리 함수: 현재 root(Shadow 또는 Light DOM)에서 요소를 찾음
 	#getElements() {
+		// ShadowRoot가 있으면 shadowRoot에서, 없으면 본체(this)에서 찾음
 		return ninegrid.querySelectorAll("input[name], textarea[name], select[name], nx-editor[name]", this.#root);
 	}
 
-	// [공통 로직 1] 특정 요소에 값을 쓰거나 초기화하는 핵심 함수
-	#updateElement(el, value) {
-		const tagName = el.tagName.toUpperCase();
-		const type = el.type;
-		let isChanged = false;
-
-		if (["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"].includes(tagName)) {
-			if (type === "checkbox") {
-				const t = el.getAttribute("true-value") || "Y";
-				const isChecked = (String(t) === String(value));
-				if (el.checked !== isChecked) isChanged = true;
-				el.checked = isChecked;
-			} else if (type === "radio") {
-				const isChecked = (String(el.value) === String(value));
-				if (el.checked !== isChecked) isChanged = true;
-				el.checked = isChecked;
-			} else {
-				if (el.value !== value) isChanged = true;
-				el.value = value;
-			}
-		} else {
-			if (el.textContent !== value) isChanged = true;
-			el.textContent = value;
-		}
-		return isChanged;
-	}
-
-	// [공통 로직 2] 이벤트 리스너 일괄 등록
-	#refreshListeners() {
-		this.#getElements().forEach(el => {
-			el.removeEventListener("input", this.#changeHandler);
-			el.addEventListener("input", this.#changeHandler);
-		});
-	}
-
 	getData = () => {
 		const jsonData = {};
 		this.#getElements().forEach(el => {
@@ -73,14 +49,15 @@ export class nxDiv extends HTMLElement {
 
 			let value;
 			if (el.tagName === "INPUT" && el.type === "checkbox") {
-				const t = el.getAttribute("true-value") || "Y";
-				const f = el.getAttribute("false-value") || "N";
+				let t = el.getAttribute("true-value") || "Y";
+				let f = el.getAttribute("false-value") || "N";
 				value = el.checked ? t : f;
+			} else if (el.tagName === "INPUT" && el.type === "radio") {
+				value = el.value;
 			} else {
 				value = el.value;
 			}
 
-			// 중복 name 처리 (배열화)
 			if (jsonData[key]) {
 				if (!Array.isArray(jsonData[key])) jsonData[key] = [jsonData[key]];
 				jsonData[key].push(value);
@@ -91,36 +68,95 @@ export class nxDiv extends HTMLElement {
 		return jsonData;
 	};
 
-	// 파라미터가 있으면 해당 값으로, 없으면 전체 공백 초기화
-	clearData = (jsonData = {}) => {
-		this.#refreshListeners();
+	clearData = (jsonData) => {
+		this.#getElements().forEach(el => {
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
+		//if (!jsonData || typeof jsonData !== 'object') return;
+
+		//let bChanged = false;
 		this.#getElements().forEach(el => {
 			const key = el.name;
-			if (!key) return;
-			const val = (jsonData && jsonData[key] !== undefined) ? jsonData[key] : "";
-			this.#updateElement(el, val);
+			if (!key) return; // name이 없는 요소는 스킵
+			//console.log(el.tagName, key, el.name);
+
+			// 2. jsonData에 해당 key가 없으면 공백("") 할당
+			const value = (jsonData && jsonData[key] !== undefined) ? jsonData[key] : "";
+
+			const tagName = el.tagName.toUpperCase();
+			const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
+
+			if (inputTags.includes(tagName)) {
+				if (el.type === "checkbox") {
+					// 3. true-value 속성을 읽어와서 체크 여부 결정
+					let t = el.getAttribute("true-value") || "Y";
+					el.checked = (String(t) === String(value));
+				} else if (el.type === "radio") {
+					// 라디오 버튼 그룹 내에서 값 일치 여부 확인
+					el.checked = (String(el.value) === String(value));
+				} else {
+					el.value = value;
+				}
+			} else {
+				el.textContent = value;
+			}
 		});
+
 		this.#changed(false);
 	};
 
 	setData = (jsonData) => {
+		this.#getElements().forEach(el => {
+			el.removeEventListener("input", this.#changeHandler);
+			el.addEventListener("input", this.#changeHandler);
+		});
+
 		if (!jsonData || typeof jsonData !== 'object') return;
-		this.#refreshListeners();
 
 		let bChanged = false;
 		this.#getElements().forEach(el => {
 			const key = el.name;
+			//console.log(el.tagName, key, el.name);
+
 			if (!key || !jsonData.hasOwnProperty(key)) return;
 
-			if (this.#updateElement(el, jsonData[key])) {
-				bChanged = true;
+			const value = jsonData[key];
+			const inputTags = ["INPUT", "TEXTAREA", "SELECT", "NX-EDITOR"];
+
+			if (inputTags.includes(el.tagName)) {
+				if (el.type === "checkbox") {
+					let t = el.getAttribute("true-value") || "Y";
+					let f = el.getAttribute("false-value") || "N";
+					const isChecked = (t === String(value));
+					if (el.checked !== isChecked) bChanged = true;
+					el.checked = isChecked;
+				} else if (el.type === "radio") {
+					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 {
+				if (el.textContent !== value) bChanged = true;
+				el.textContent = value;
 			}
 		});
-		if (bChanged) this.#changed(true);
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	clearData = (bChanged) => {
+
+
+		this.#changed(false);
 	};
 
 	initData = (jsonData) => {
-		this.clearData(jsonData); // clearData가 이미 초기화 로직을 포함함
+		this.setData(jsonData);
 		this.#changed(false);
 	};
 
@@ -132,14 +168,29 @@ export class nxDiv extends HTMLElement {
 		}
 	}
 
-	#changeHandler = (e) => this.#changed(true);
+	#changeHandler = (e) => {
+		this.#changed(true);
+	}
 
 	#init = () => {
+		/** CSS style 적용 */
 		for (const attr of this.attributes) {
 			if (attr.name.startsWith("css-")) {
 				this.style.setProperty(attr.name.substring(4), attr.value);
 			}
 		}
+
+		//console.log("=========");
+		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
+
+		/**
+		this.originContents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
+		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
+			this.shadowRoot.innerHTML = this.originContents;
+		} */
 	};
 }