ninegrid2 6.939.0 → 6.941.0

package/dist/bundle.cjs.js

@@ -121711,7 +121711,6 @@ class nxTitle extends HTMLElement {
 		*/
 		ninegrid.delayQuerySelector('nx-side-menu-item.active')
 			.then((el) => {
-				console.log(el);
 				this.#generateBreadcrumb(el); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 				this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
 			});
@@ -121721,8 +121720,6 @@ class nxTitle extends HTMLElement {
 	#generateBreadcrumb = (activeMenuItem) => {
 		this.#breadcrumbPath = [];
 
-		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
-		const currentPageCaption = this.getAttribute("caption") || "Current Page";
 
 		// 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
 		//const activeMenuItem = ninegrid.querySelector('nx-side-menu-item.active');
@@ -121732,7 +121729,6 @@ class nxTitle extends HTMLElement {
 
 			// 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
 			const currentActiveCaption = activeMenuItem.caption;//activeMenuItem.caption;
-			console.log("nxTitle", activeMenuItem.caption);
 
 			if (currentActiveCaption) {
 				this.#breadcrumbPath.unshift({
@@ -121754,7 +121750,6 @@ class nxTitle extends HTMLElement {
 
 				// 이전 형제 탐색
 				currentElement = currentElement.previousElementSibling;
-console.log(currentElement);
 
 				if (currentElement && currentElement.tagName === 'NX-SIDE-MENU-ITEM') {
 					const caption = currentElement.caption;//.getAttribute('caption');
@@ -121762,6 +121757,7 @@ console.log(currentElement);
 					// 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
 					if (currentElement.getAttribute('type') === "group") {
 						if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
+
 							this.#breadcrumbPath.unshift({
 								path: currentElement.getAttribute("href"),
 								caption: caption,
@@ -121773,16 +121769,25 @@ console.log(currentElement);
 					}
 				}
 			}
+
+			// tempPath의 내용을 Home 다음으로 삽입
+			// activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
+			// tempPath: ['자료관리', '심의자료']
+
 		}
+
+		// 마지막으로 현재 페이지의 구체적인 제목 추가
+		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
 		this.#breadcrumbPath.push({
 			path: "",
-			caption: currentPageCaption,
+			caption: this.getAttribute("caption") || "Current Page",
 		});
 
 		this.#breadcrumbPath.unshift({
 			path: "/",
 			caption: "Home",
 		});
+
 console.log(this.#breadcrumbPath);
 		//this.#breadcrumbPath = path;
 		//this.#renderer();
@@ -121813,18 +121818,42 @@ console.log(this.#breadcrumbPath);
                     <span class="title-text">${caption}</span>
                 </div>
                 <div class="breadcrumb-container">
-                    ${this.#breadcrumbPath.map((item, index) => `
-                       <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
-                          ${item.caption}
-                       </span>
-                       ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
-                    `).join('')}
+                    ${this.#breadcrumbPath.map((item, index) => {
+						
+						const isCurrent = index === this.#breadcrumbPath.length - 1;
+						// static 메서드를 직접 호출하도록 수정
+						const linkTag = item.path && !isCurrent
+							? `<a href="javascript:void(0)" 
+											class="breadcrumb-item breadcrumb-link" 
+											onclick="nxTitle.#goto('${item.path}')">${item.caption}</a>`
+							: `<span class="breadcrumb-item ${isCurrent ? 'breadcrumb-current' : ''}">${item.caption}</span>`;
+			
+						const separator = index < this.#breadcrumbPath.length - 1
+							? `<span class="breadcrumb-separator"> &gt; </span>`
+							: '';
+			
+						return `${linkTag}${separator}`;
+					}).join('')}
                 </div>
             </div>
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
+
+	// static 메서드 aaa() 선언
+	static #goto(path) {
+		console.log('static aaa()가 호출되었습니다. Path:', path);
+
+		if (window.location.pathname === path) {
+			console.log('현재 URL과 path가 동일합니다. 탭 로직을 실행합니다.');
+			// 여기에 탭을 숨기거나 보여주는 로직을 작성합니다.
+			// 예: ninegrid.showTab('tab-id');
+		} else {
+			console.log('현재 URL과 path가 다릅니다. 페이지를 이동합니다.');
+			window.location.href = path;
+		}
+	}
 }
 
 customElements.define("nx-title", nxTitle);

package/dist/bundle.esm.js

@@ -121707,7 +121707,6 @@ class nxTitle extends HTMLElement {
 		*/
 		ninegrid.delayQuerySelector('nx-side-menu-item.active')
 			.then((el) => {
-				console.log(el);
 				this.#generateBreadcrumb(el); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 				this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
 			});
@@ -121717,8 +121716,6 @@ class nxTitle extends HTMLElement {
 	#generateBreadcrumb = (activeMenuItem) => {
 		this.#breadcrumbPath = [];
 
-		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
-		const currentPageCaption = this.getAttribute("caption") || "Current Page";
 
 		// 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
 		//const activeMenuItem = ninegrid.querySelector('nx-side-menu-item.active');
@@ -121728,7 +121725,6 @@ class nxTitle extends HTMLElement {
 
 			// 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
 			const currentActiveCaption = activeMenuItem.caption;//activeMenuItem.caption;
-			console.log("nxTitle", activeMenuItem.caption);
 
 			if (currentActiveCaption) {
 				this.#breadcrumbPath.unshift({
@@ -121750,7 +121746,6 @@ class nxTitle extends HTMLElement {
 
 				// 이전 형제 탐색
 				currentElement = currentElement.previousElementSibling;
-console.log(currentElement);
 
 				if (currentElement && currentElement.tagName === 'NX-SIDE-MENU-ITEM') {
 					const caption = currentElement.caption;//.getAttribute('caption');
@@ -121758,6 +121753,7 @@ console.log(currentElement);
 					// 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
 					if (currentElement.getAttribute('type') === "group") {
 						if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
+
 							this.#breadcrumbPath.unshift({
 								path: currentElement.getAttribute("href"),
 								caption: caption,
@@ -121769,16 +121765,25 @@ console.log(currentElement);
 					}
 				}
 			}
+
+			// tempPath의 내용을 Home 다음으로 삽입
+			// activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
+			// tempPath: ['자료관리', '심의자료']
+
 		}
+
+		// 마지막으로 현재 페이지의 구체적인 제목 추가
+		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
 		this.#breadcrumbPath.push({
 			path: "",
-			caption: currentPageCaption,
+			caption: this.getAttribute("caption") || "Current Page",
 		});
 
 		this.#breadcrumbPath.unshift({
 			path: "/",
 			caption: "Home",
 		});
+
 console.log(this.#breadcrumbPath);
 		//this.#breadcrumbPath = path;
 		//this.#renderer();
@@ -121809,18 +121814,42 @@ console.log(this.#breadcrumbPath);
                     <span class="title-text">${caption}</span>
                 </div>
                 <div class="breadcrumb-container">
-                    ${this.#breadcrumbPath.map((item, index) => `
-                       <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
-                          ${item.caption}
-                       </span>
-                       ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
-                    `).join('')}
+                    ${this.#breadcrumbPath.map((item, index) => {
+						
+						const isCurrent = index === this.#breadcrumbPath.length - 1;
+						// static 메서드를 직접 호출하도록 수정
+						const linkTag = item.path && !isCurrent
+							? `<a href="javascript:void(0)" 
+											class="breadcrumb-item breadcrumb-link" 
+											onclick="nxTitle.#goto('${item.path}')">${item.caption}</a>`
+							: `<span class="breadcrumb-item ${isCurrent ? 'breadcrumb-current' : ''}">${item.caption}</span>`;
+			
+						const separator = index < this.#breadcrumbPath.length - 1
+							? `<span class="breadcrumb-separator"> &gt; </span>`
+							: '';
+			
+						return `${linkTag}${separator}`;
+					}).join('')}
                 </div>
             </div>
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
+
+	// static 메서드 aaa() 선언
+	static #goto(path) {
+		console.log('static aaa()가 호출되었습니다. Path:', path);
+
+		if (window.location.pathname === path) {
+			console.log('현재 URL과 path가 동일합니다. 탭 로직을 실행합니다.');
+			// 여기에 탭을 숨기거나 보여주는 로직을 작성합니다.
+			// 예: ninegrid.showTab('tab-id');
+		} else {
+			console.log('현재 URL과 path가 다릅니다. 페이지를 이동합니다.');
+			window.location.href = path;
+		}
+	}
 }
 
 customElements.define("nx-title", nxTitle);

package/dist/nx/nxTitle.js

@@ -30,7 +30,6 @@ class nxTitle extends HTMLElement {
 		*/
 		ninegrid.delayQuerySelector('nx-side-menu-item.active')
 			.then((el) => {
-				console.log(el);
 				this.#generateBreadcrumb(el); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 				this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
 			});
@@ -38,25 +37,19 @@ class nxTitle extends HTMLElement {
 
 	// Breadcrumb 경로를 구성하는 비공개 메서드
 	#generateBreadcrumb = (activeMenuItem) => {
-		const path = ["Home"]; // 기본 경로 시작은 Home
 		this.#breadcrumbPath = [];
 
-		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
-		const currentPageCaption = this.getAttribute("caption") || "Current Page";
 
 		// 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
 		//const activeMenuItem = ninegrid.querySelector('nx-side-menu-item.active');
 		//console.log(activeMenuItem);
 
 		if (activeMenuItem) {
-			const tempPath = []; // 임시 경로를 저장하여 역순으로 처리
 
 			// 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
 			const currentActiveCaption = activeMenuItem.caption;//activeMenuItem.caption;
-			console.log("nxTitle", activeMenuItem.caption);
 
 			if (currentActiveCaption) {
-				tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
 				this.#breadcrumbPath.unshift({
 					path: activeMenuItem.getAttribute("href"),
 					caption: currentActiveCaption,
@@ -77,7 +70,6 @@ class nxTitle extends HTMLElement {
 
 				// 이전 형제 탐색
 				currentElement = currentElement.previousElementSibling;
-console.log(currentElement);
 
 				if (currentElement && currentElement.tagName === 'NX-SIDE-MENU-ITEM') {
 					const caption = currentElement.caption;//.getAttribute('caption');
@@ -85,7 +77,7 @@ console.log(currentElement);
 					// 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
 					if (currentElement.getAttribute('type') === "group") {
 						if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
-							tempPath.unshift(caption);
+
 							this.#breadcrumbPath.unshift({
 								path: currentElement.getAttribute("href"),
 								caption: caption,
@@ -116,20 +108,21 @@ console.log(currentElement);
 			// tempPath의 내용을 Home 다음으로 삽입
 			// activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
 			// tempPath: ['자료관리', '심의자료']
-			path.push(...tempPath);
+
 		}
 
 		// 마지막으로 현재 페이지의 구체적인 제목 추가
-		path.push(currentPageCaption);
+		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
 		this.#breadcrumbPath.push({
 			path: "",
-			caption: currentPageCaption,
+			caption: this.getAttribute("caption") || "Current Page",
 		});
 
 		this.#breadcrumbPath.unshift({
 			path: "/",
 			caption: "Home",
 		});
+
 console.log(this.#breadcrumbPath);
 		//this.#breadcrumbPath = path;
 		//this.#renderer();
@@ -160,18 +153,42 @@ console.log(this.#breadcrumbPath);
                     <span class="title-text">${caption}</span>
                 </div>
                 <div class="breadcrumb-container">
-                    ${this.#breadcrumbPath.map((item, index) => `
-                       <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
-                          ${item.caption}
-                       </span>
-                       ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
-                    `).join('')}
+                    ${this.#breadcrumbPath.map((item, index) => {
+						
+						const isCurrent = index === this.#breadcrumbPath.length - 1;
+						// static 메서드를 직접 호출하도록 수정
+						const linkTag = item.path && !isCurrent
+							? `<a href="javascript:void(0)" 
+											class="breadcrumb-item breadcrumb-link" 
+											onclick="nxTitle.#goto('${item.path}')">${item.caption}</a>`
+							: `<span class="breadcrumb-item ${isCurrent ? 'breadcrumb-current' : ''}">${item.caption}</span>`;
+			
+						const separator = index < this.#breadcrumbPath.length - 1
+							? `<span class="breadcrumb-separator"> &gt; </span>`
+							: '';
+			
+						return `${linkTag}${separator}`;
+					}).join('')}
                 </div>
             </div>
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
+
+	// static 메서드 aaa() 선언
+	static #goto(path) {
+		console.log('static aaa()가 호출되었습니다. Path:', path);
+
+		if (window.location.pathname === path) {
+			console.log('현재 URL과 path가 동일합니다. 탭 로직을 실행합니다.');
+			// 여기에 탭을 숨기거나 보여주는 로직을 작성합니다.
+			// 예: ninegrid.showTab('tab-id');
+		} else {
+			console.log('현재 URL과 path가 다릅니다. 페이지를 이동합니다.');
+			window.location.href = path;
+		}
+	}
 }
 
 customElements.define("nx-title", nxTitle);

package/package.json

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

package/src/nx/nxTitle.js

@@ -30,7 +30,6 @@ class nxTitle extends HTMLElement {
 		*/
 		ninegrid.delayQuerySelector('nx-side-menu-item.active')
 			.then((el) => {
-				console.log(el);
 				this.#generateBreadcrumb(el); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 				this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)
 			});
@@ -38,25 +37,19 @@ class nxTitle extends HTMLElement {
 
 	// Breadcrumb 경로를 구성하는 비공개 메서드
 	#generateBreadcrumb = (activeMenuItem) => {
-		const path = ["Home"]; // 기본 경로 시작은 Home
 		this.#breadcrumbPath = [];
 
-		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
-		const currentPageCaption = this.getAttribute("caption") || "Current Page";
 
 		// 'active' 클래스를 가진 가장 하위 nx-side-menu-item 찾기
 		//const activeMenuItem = ninegrid.querySelector('nx-side-menu-item.active');
 		//console.log(activeMenuItem);
 
 		if (activeMenuItem) {
-			const tempPath = []; // 임시 경로를 저장하여 역순으로 처리
 
 			// 1. 현재 활성화된 메뉴 항목의 캡션을 추가 (예: '심의자료')
 			const currentActiveCaption = activeMenuItem.caption;//activeMenuItem.caption;
-			console.log("nxTitle", activeMenuItem.caption);
 
 			if (currentActiveCaption) {
-				tempPath.unshift(currentActiveCaption); // 맨 앞에 추가
 				this.#breadcrumbPath.unshift({
 					path: activeMenuItem.getAttribute("href"),
 					caption: currentActiveCaption,
@@ -77,7 +70,6 @@ class nxTitle extends HTMLElement {
 
 				// 이전 형제 탐색
 				currentElement = currentElement.previousElementSibling;
-console.log(currentElement);
 
 				if (currentElement && currentElement.tagName === 'NX-SIDE-MENU-ITEM') {
 					const caption = currentElement.caption;//.getAttribute('caption');
@@ -85,7 +77,7 @@ console.log(currentElement);
 					// 'group' 속성을 가진 메뉴 항목 찾기 (예: '자료관리')
 					if (currentElement.getAttribute('type') === "group") {
 						if (caption && !foundGroupParent) { // 이미 찾지 않은 경우에만 추가
-							tempPath.unshift(caption);
+
 							this.#breadcrumbPath.unshift({
 								path: currentElement.getAttribute("href"),
 								caption: caption,
@@ -116,20 +108,21 @@ console.log(currentElement);
 			// tempPath의 내용을 Home 다음으로 삽입
 			// activeMenuItem이 '심의자료' 역할을 하고, 그 이전에 '자료관리' 그룹이 있다면
 			// tempPath: ['자료관리', '심의자료']
-			path.push(...tempPath);
+
 		}
 
 		// 마지막으로 현재 페이지의 구체적인 제목 추가
-		path.push(currentPageCaption);
+		// 현재 nx-title의 캡션을 현재 페이지 캡션으로 사용
 		this.#breadcrumbPath.push({
 			path: "",
-			caption: currentPageCaption,
+			caption: this.getAttribute("caption") || "Current Page",
 		});
 
 		this.#breadcrumbPath.unshift({
 			path: "/",
 			caption: "Home",
 		});
+
 console.log(this.#breadcrumbPath);
 		//this.#breadcrumbPath = path;
 		//this.#renderer();
@@ -160,18 +153,42 @@ console.log(this.#breadcrumbPath);
                     <span class="title-text">${caption}</span>
                 </div>
                 <div class="breadcrumb-container">
-                    ${this.#breadcrumbPath.map((item, index) => `
-                       <span class="breadcrumb-item ${index === this.#breadcrumbPath.length - 1 ? 'breadcrumb-current' : ''}">
-                          ${item.caption}
-                       </span>
-                       ${index < this.#breadcrumbPath.length - 1 ? '<span class="breadcrumb-separator"> &gt; </span>' : ''}
-                    `).join('')}
+                    ${this.#breadcrumbPath.map((item, index) => {
+						
+						const isCurrent = index === this.#breadcrumbPath.length - 1;
+						// static 메서드를 직접 호출하도록 수정
+						const linkTag = item.path && !isCurrent
+							? `<a href="javascript:void(0)" 
+											class="breadcrumb-item breadcrumb-link" 
+											onclick="nxTitle.#goto('${item.path}')">${item.caption}</a>`
+							: `<span class="breadcrumb-item ${isCurrent ? 'breadcrumb-current' : ''}">${item.caption}</span>`;
+			
+						const separator = index < this.#breadcrumbPath.length - 1
+							? `<span class="breadcrumb-separator"> &gt; </span>`
+							: '';
+			
+						return `${linkTag}${separator}`;
+					}).join('')}
                 </div>
             </div>
         `;
 
 		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
 	}
+
+	// static 메서드 aaa() 선언
+	static #goto(path) {
+		console.log('static aaa()가 호출되었습니다. Path:', path);
+
+		if (window.location.pathname === path) {
+			console.log('현재 URL과 path가 동일합니다. 탭 로직을 실행합니다.');
+			// 여기에 탭을 숨기거나 보여주는 로직을 작성합니다.
+			// 예: ninegrid.showTab('tab-id');
+		} else {
+			console.log('현재 URL과 path가 다릅니다. 페이지를 이동합니다.');
+			window.location.href = path;
+		}
+	}
 }
 
 customElements.define("nx-title", nxTitle);