ninegrid2 6.874.0 → 6.876.0

package/dist/ai/aiMessage.js

@@ -231,9 +231,9 @@ class aiMyMessage extends HTMLElement
 // aiProgressMessage 클래스 정의
 // aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
-	#progressData = []; // 진행 상태 데이터를 저장할 배열
-	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
-	#animationIntervals = new Map(); // 각 항목의 애니메이션 인터벌 ID를 저장할 Map
+	#progressData = [];
+	#progressElements = new Map();
+	#animationIntervals = new Map();
 
 	constructor() {
 		super();
@@ -257,14 +257,14 @@ class aiProgressMessage extends HTMLElement {
 	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다.', completedMessage: '분석이 완료되었습니다.'}, ...]
 	 */
 	initialize(data) {
-		// 초기 상태는 'pending'으로 설정하고, 원본 메시지 저장 (애니메이션용)
 		this.#progressData = data.map(item => ({
 			...item,
 			status: 'pending',
-			originalMessage: item.message // 애니메이션을 위해 원본 메시지 저장
+			originalMessage: item.message
 		}));
 		setTimeout(() => {
-			this.#renderProgress();
+			this.#renderProgress(); // 초기 렌더링 시 현재 진행 단계를 활성화
+			this.#updateCurrentActiveProgress(); // 초기 활성 단계 설정
 		}, 300);
 	}
 
@@ -276,50 +276,68 @@ class aiProgressMessage extends HTMLElement {
 	updateProgress(id, status) {
 		const itemIndex = this.#progressData.findIndex(item => item.id === id);
 		if (itemIndex > -1) {
-			// 기존 상태와 다를 경우에만 업데이트
 			if (this.#progressData[itemIndex].status !== status) {
 				this.#progressData[itemIndex].status = status;
-				this.#updateProgressItem(this.#progressData[itemIndex]);
+				this.#updateProgressItem(this.#progressData[itemIndex]); // 개별 항목 업데이트
+				this.#updateCurrentActiveProgress(); // 활성 진행 단계 재설정
 			}
 		}
 	}
 
+	// 현재 진행 중인 첫 번째 pending 항목을 찾아 'active' 상태로 만들고 애니메이션 시작
+	// 이전에 active였던 항목의 애니메이션은 중지
+	#updateCurrentActiveProgress() {
+		let foundActive = false;
+		this.#progressData.forEach(item => {
+			const li = this.#progressElements.get(item.id);
+			if (!li) return; // 요소가 아직 렌더링되지 않았으면 스킵
+
+			// 모든 항목에서 'active' 클래스 제거 및 애니메이션 중지
+			li.classList.remove('active');
+			if (this.#animationIntervals.has(item.id)) {
+				clearInterval(this.#animationIntervals.get(item.id));
+				this.#animationIntervals.delete(item.id);
+				li.querySelector(".animated-dots").textContent = ''; // 점 제거
+			}
+
+			// 첫 번째 pending 항목을 찾으면 'active'로 설정하고 애니메이션 시작
+			if (item.status === 'pending' && !foundActive) {
+				li.classList.add('active');
+				this.#startAnimation(item);
+				foundActive = true;
+			}
+		});
+	}
+
 	#renderProgress() {
 		const progressList = this.shadowRoot.querySelector(".progress-list");
-		progressList.innerHTML = ''; // 기존 목록 초기화
-		this.#progressElements.clear(); // 기존 요소 Map 초기화
-		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId)); // 기존 애니메이션 정리
+		progressList.innerHTML = '';
+		this.#progressElements.clear();
+		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId));
 		this.#animationIntervals.clear();
 
 		this.#progressData.forEach((item, index) => {
 			const li = document.createElement("li");
 			li.setAttribute("data-id", item.id);
 			li.classList.add("progress-item");
-			// 번호와 초기 메시지 설정
 			li.innerHTML = `
                 <span class="step-number">${index + 1}.</span>
-                <span class="text">${item.message}</span>
+                <span class="text">${item.originalMessage}</span>
                 <span class="animated-dots"></span>
-            `; // animated-dots 스판 추가
+            `;
 			progressList.appendChild(li);
 			this.#progressElements.set(item.id, li);
-
-			// 초기 상태에 따라 업데이트 (특히 애니메이션 시작)
-			this.#updateProgressItem(item);
+			// 초기 렌더링 시에는 'active' 상태는 `#updateCurrentActiveProgress`에서 처리
+			this.#updateProgressItemVisuals(item); // 텍스트만 업데이트
 		});
 	}
 
-	#updateProgressItem(item) {
+	// 항목의 시각적 상태(텍스트, 완료 체크)만 업데이트
+	#updateProgressItemVisuals(item) {
 		const li = this.#progressElements.get(item.id);
 		if (li) {
-			// 기존 애니메이션 중지
-			if (this.#animationIntervals.has(item.id)) {
-				clearInterval(this.#animationIntervals.get(item.id));
-				this.#animationIntervals.delete(item.id);
-			}
-
-			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
-			li.classList.add(item.status); // 새 상태 클래스 추가
+			li.classList.remove('pending', 'completed');
+			li.classList.add(item.status);
 
 			const textSpan = li.querySelector(".text");
 			const dotsSpan = li.querySelector(".animated-dots");
@@ -327,18 +345,32 @@ class aiProgressMessage extends HTMLElement {
 			if (item.status === 'completed') {
 				textSpan.textContent = item.completedMessage;
 				dotsSpan.textContent = ''; // 완료 시 점 제거
-			} else { // pending 상태일 경우
-				textSpan.textContent = item.originalMessage; // 원본 메시지로 복원
-				let dotsCount = 0;
-				// 애니메이션 시작
-				const intervalId = setInterval(() => {
-					dotsCount = (dotsCount + 1) % 4; // 0, 1, 2, 3 반복
-					dotsSpan.textContent = '.'.repeat(dotsCount);
-				}, 300); // 300ms마다 점 업데이트
-				this.#animationIntervals.set(item.id, intervalId);
+			} else { // pending 상태
+				textSpan.textContent = item.originalMessage;
+				// pending이지만 active가 아닌 경우 점 없음 (CSS의 role)
 			}
 		}
 	}
+
+	// 점 애니메이션 시작 함수
+	#startAnimation(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			const dotsSpan = li.querySelector(".animated-dots");
+			let dotsCount = 0;
+			const intervalId = setInterval(() => {
+				dotsCount = (dotsCount + 1) % 4; // 0, 1, 2, 3 반복
+				dotsSpan.textContent = '.'.repeat(dotsCount);
+			}, 300);
+			this.#animationIntervals.set(item.id, intervalId);
+		}
+	}
+
+	// 개별 항목의 상태 업데이트 (텍스트 변경, 클래스 추가/제거)
+	// 애니메이션 시작/중지는 `#updateCurrentActiveProgress`에서 담당
+	#updateProgressItem(item) {
+		this.#updateProgressItemVisuals(item); // 텍스트와 클래스 업데이트
+	}
 }
 
 

package/dist/bundle.cjs.js

@@ -121042,8 +121042,20 @@ class nxTab extends HTMLElement {
 		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
 		
         this.switchTabHandler = this.#switchTab.bind(this);
+
+
+        this.tappage = {
+            hide: (v) => {
+                this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
+                    if (el.innerText.trim() === v) {
+                        el.style.display = "none";
+                    }
+                });
+            }
+        };
     }
 
+
     connectedCallback() {
         this.#init();
         this.dispatchEvent(new CustomEvent(ninegrid.EVENT.TAB_LOAD, { bubbles: true, detail: {} }));
@@ -121868,9 +121880,9 @@ class aiMyMessage extends HTMLElement
 // aiProgressMessage 클래스 정의
 // aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
-	#progressData = []; // 진행 상태 데이터를 저장할 배열
-	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
-	#animationIntervals = new Map(); // 각 항목의 애니메이션 인터벌 ID를 저장할 Map
+	#progressData = [];
+	#progressElements = new Map();
+	#animationIntervals = new Map();
 
 	constructor() {
 		super();
@@ -121894,14 +121906,14 @@ class aiProgressMessage extends HTMLElement {
 	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다.', completedMessage: '분석이 완료되었습니다.'}, ...]
 	 */
 	initialize(data) {
-		// 초기 상태는 'pending'으로 설정하고, 원본 메시지 저장 (애니메이션용)
 		this.#progressData = data.map(item => ({
 			...item,
 			status: 'pending',
-			originalMessage: item.message // 애니메이션을 위해 원본 메시지 저장
+			originalMessage: item.message
 		}));
 		setTimeout(() => {
-			this.#renderProgress();
+			this.#renderProgress(); // 초기 렌더링 시 현재 진행 단계를 활성화
+			this.#updateCurrentActiveProgress(); // 초기 활성 단계 설정
 		}, 300);
 	}
 
@@ -121913,50 +121925,68 @@ class aiProgressMessage extends HTMLElement {
 	updateProgress(id, status) {
 		const itemIndex = this.#progressData.findIndex(item => item.id === id);
 		if (itemIndex > -1) {
-			// 기존 상태와 다를 경우에만 업데이트
 			if (this.#progressData[itemIndex].status !== status) {
 				this.#progressData[itemIndex].status = status;
-				this.#updateProgressItem(this.#progressData[itemIndex]);
+				this.#updateProgressItem(this.#progressData[itemIndex]); // 개별 항목 업데이트
+				this.#updateCurrentActiveProgress(); // 활성 진행 단계 재설정
 			}
 		}
 	}
 
+	// 현재 진행 중인 첫 번째 pending 항목을 찾아 'active' 상태로 만들고 애니메이션 시작
+	// 이전에 active였던 항목의 애니메이션은 중지
+	#updateCurrentActiveProgress() {
+		let foundActive = false;
+		this.#progressData.forEach(item => {
+			const li = this.#progressElements.get(item.id);
+			if (!li) return; // 요소가 아직 렌더링되지 않았으면 스킵
+
+			// 모든 항목에서 'active' 클래스 제거 및 애니메이션 중지
+			li.classList.remove('active');
+			if (this.#animationIntervals.has(item.id)) {
+				clearInterval(this.#animationIntervals.get(item.id));
+				this.#animationIntervals.delete(item.id);
+				li.querySelector(".animated-dots").textContent = ''; // 점 제거
+			}
+
+			// 첫 번째 pending 항목을 찾으면 'active'로 설정하고 애니메이션 시작
+			if (item.status === 'pending' && !foundActive) {
+				li.classList.add('active');
+				this.#startAnimation(item);
+				foundActive = true;
+			}
+		});
+	}
+
 	#renderProgress() {
 		const progressList = this.shadowRoot.querySelector(".progress-list");
-		progressList.innerHTML = ''; // 기존 목록 초기화
-		this.#progressElements.clear(); // 기존 요소 Map 초기화
-		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId)); // 기존 애니메이션 정리
+		progressList.innerHTML = '';
+		this.#progressElements.clear();
+		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId));
 		this.#animationIntervals.clear();
 
 		this.#progressData.forEach((item, index) => {
 			const li = document.createElement("li");
 			li.setAttribute("data-id", item.id);
 			li.classList.add("progress-item");
-			// 번호와 초기 메시지 설정
 			li.innerHTML = `
                 <span class="step-number">${index + 1}.</span>
-                <span class="text">${item.message}</span>
+                <span class="text">${item.originalMessage}</span>
                 <span class="animated-dots"></span>
-            `; // animated-dots 스판 추가
+            `;
 			progressList.appendChild(li);
 			this.#progressElements.set(item.id, li);
-
-			// 초기 상태에 따라 업데이트 (특히 애니메이션 시작)
-			this.#updateProgressItem(item);
+			// 초기 렌더링 시에는 'active' 상태는 `#updateCurrentActiveProgress`에서 처리
+			this.#updateProgressItemVisuals(item); // 텍스트만 업데이트
 		});
 	}
 
-	#updateProgressItem(item) {
+	// 항목의 시각적 상태(텍스트, 완료 체크)만 업데이트
+	#updateProgressItemVisuals(item) {
 		const li = this.#progressElements.get(item.id);
 		if (li) {
-			// 기존 애니메이션 중지
-			if (this.#animationIntervals.has(item.id)) {
-				clearInterval(this.#animationIntervals.get(item.id));
-				this.#animationIntervals.delete(item.id);
-			}
-
-			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
-			li.classList.add(item.status); // 새 상태 클래스 추가
+			li.classList.remove('pending', 'completed');
+			li.classList.add(item.status);
 
 			const textSpan = li.querySelector(".text");
 			const dotsSpan = li.querySelector(".animated-dots");
@@ -121964,18 +121994,32 @@ class aiProgressMessage extends HTMLElement {
 			if (item.status === 'completed') {
 				textSpan.textContent = item.completedMessage;
 				dotsSpan.textContent = ''; // 완료 시 점 제거
-			} else { // pending 상태일 경우
-				textSpan.textContent = item.originalMessage; // 원본 메시지로 복원
-				let dotsCount = 0;
-				// 애니메이션 시작
-				const intervalId = setInterval(() => {
-					dotsCount = (dotsCount + 1) % 4; // 0, 1, 2, 3 반복
-					dotsSpan.textContent = '.'.repeat(dotsCount);
-				}, 300); // 300ms마다 점 업데이트
-				this.#animationIntervals.set(item.id, intervalId);
+			} else { // pending 상태
+				textSpan.textContent = item.originalMessage;
+				// pending이지만 active가 아닌 경우 점 없음 (CSS의 role)
 			}
 		}
 	}
+
+	// 점 애니메이션 시작 함수
+	#startAnimation(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			const dotsSpan = li.querySelector(".animated-dots");
+			let dotsCount = 0;
+			const intervalId = setInterval(() => {
+				dotsCount = (dotsCount + 1) % 4; // 0, 1, 2, 3 반복
+				dotsSpan.textContent = '.'.repeat(dotsCount);
+			}, 300);
+			this.#animationIntervals.set(item.id, intervalId);
+		}
+	}
+
+	// 개별 항목의 상태 업데이트 (텍스트 변경, 클래스 추가/제거)
+	// 애니메이션 시작/중지는 `#updateCurrentActiveProgress`에서 담당
+	#updateProgressItem(item) {
+		this.#updateProgressItemVisuals(item); // 텍스트와 클래스 업데이트
+	}
 }
 
 

package/dist/bundle.esm.js

@@ -121038,8 +121038,20 @@ class nxTab extends HTMLElement {
 		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
 		
         this.switchTabHandler = this.#switchTab.bind(this);
+
+
+        this.tappage = {
+            hide: (v) => {
+                this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
+                    if (el.innerText.trim() === v) {
+                        el.style.display = "none";
+                    }
+                });
+            }
+        };
     }
 
+
     connectedCallback() {
         this.#init();
         this.dispatchEvent(new CustomEvent(ninegrid.EVENT.TAB_LOAD, { bubbles: true, detail: {} }));
@@ -121864,9 +121876,9 @@ class aiMyMessage extends HTMLElement
 // aiProgressMessage 클래스 정의
 // aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
-	#progressData = []; // 진행 상태 데이터를 저장할 배열
-	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
-	#animationIntervals = new Map(); // 각 항목의 애니메이션 인터벌 ID를 저장할 Map
+	#progressData = [];
+	#progressElements = new Map();
+	#animationIntervals = new Map();
 
 	constructor() {
 		super();
@@ -121890,14 +121902,14 @@ class aiProgressMessage extends HTMLElement {
 	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다.', completedMessage: '분석이 완료되었습니다.'}, ...]
 	 */
 	initialize(data) {
-		// 초기 상태는 'pending'으로 설정하고, 원본 메시지 저장 (애니메이션용)
 		this.#progressData = data.map(item => ({
 			...item,
 			status: 'pending',
-			originalMessage: item.message // 애니메이션을 위해 원본 메시지 저장
+			originalMessage: item.message
 		}));
 		setTimeout(() => {
-			this.#renderProgress();
+			this.#renderProgress(); // 초기 렌더링 시 현재 진행 단계를 활성화
+			this.#updateCurrentActiveProgress(); // 초기 활성 단계 설정
 		}, 300);
 	}
 
@@ -121909,50 +121921,68 @@ class aiProgressMessage extends HTMLElement {
 	updateProgress(id, status) {
 		const itemIndex = this.#progressData.findIndex(item => item.id === id);
 		if (itemIndex > -1) {
-			// 기존 상태와 다를 경우에만 업데이트
 			if (this.#progressData[itemIndex].status !== status) {
 				this.#progressData[itemIndex].status = status;
-				this.#updateProgressItem(this.#progressData[itemIndex]);
+				this.#updateProgressItem(this.#progressData[itemIndex]); // 개별 항목 업데이트
+				this.#updateCurrentActiveProgress(); // 활성 진행 단계 재설정
 			}
 		}
 	}
 
+	// 현재 진행 중인 첫 번째 pending 항목을 찾아 'active' 상태로 만들고 애니메이션 시작
+	// 이전에 active였던 항목의 애니메이션은 중지
+	#updateCurrentActiveProgress() {
+		let foundActive = false;
+		this.#progressData.forEach(item => {
+			const li = this.#progressElements.get(item.id);
+			if (!li) return; // 요소가 아직 렌더링되지 않았으면 스킵
+
+			// 모든 항목에서 'active' 클래스 제거 및 애니메이션 중지
+			li.classList.remove('active');
+			if (this.#animationIntervals.has(item.id)) {
+				clearInterval(this.#animationIntervals.get(item.id));
+				this.#animationIntervals.delete(item.id);
+				li.querySelector(".animated-dots").textContent = ''; // 점 제거
+			}
+
+			// 첫 번째 pending 항목을 찾으면 'active'로 설정하고 애니메이션 시작
+			if (item.status === 'pending' && !foundActive) {
+				li.classList.add('active');
+				this.#startAnimation(item);
+				foundActive = true;
+			}
+		});
+	}
+
 	#renderProgress() {
 		const progressList = this.shadowRoot.querySelector(".progress-list");
-		progressList.innerHTML = ''; // 기존 목록 초기화
-		this.#progressElements.clear(); // 기존 요소 Map 초기화
-		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId)); // 기존 애니메이션 정리
+		progressList.innerHTML = '';
+		this.#progressElements.clear();
+		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId));
 		this.#animationIntervals.clear();
 
 		this.#progressData.forEach((item, index) => {
 			const li = document.createElement("li");
 			li.setAttribute("data-id", item.id);
 			li.classList.add("progress-item");
-			// 번호와 초기 메시지 설정
 			li.innerHTML = `
                 <span class="step-number">${index + 1}.</span>
-                <span class="text">${item.message}</span>
+                <span class="text">${item.originalMessage}</span>
                 <span class="animated-dots"></span>
-            `; // animated-dots 스판 추가
+            `;
 			progressList.appendChild(li);
 			this.#progressElements.set(item.id, li);
-
-			// 초기 상태에 따라 업데이트 (특히 애니메이션 시작)
-			this.#updateProgressItem(item);
+			// 초기 렌더링 시에는 'active' 상태는 `#updateCurrentActiveProgress`에서 처리
+			this.#updateProgressItemVisuals(item); // 텍스트만 업데이트
 		});
 	}
 
-	#updateProgressItem(item) {
+	// 항목의 시각적 상태(텍스트, 완료 체크)만 업데이트
+	#updateProgressItemVisuals(item) {
 		const li = this.#progressElements.get(item.id);
 		if (li) {
-			// 기존 애니메이션 중지
-			if (this.#animationIntervals.has(item.id)) {
-				clearInterval(this.#animationIntervals.get(item.id));
-				this.#animationIntervals.delete(item.id);
-			}
-
-			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
-			li.classList.add(item.status); // 새 상태 클래스 추가
+			li.classList.remove('pending', 'completed');
+			li.classList.add(item.status);
 
 			const textSpan = li.querySelector(".text");
 			const dotsSpan = li.querySelector(".animated-dots");
@@ -121960,18 +121990,32 @@ class aiProgressMessage extends HTMLElement {
 			if (item.status === 'completed') {
 				textSpan.textContent = item.completedMessage;
 				dotsSpan.textContent = ''; // 완료 시 점 제거
-			} else { // pending 상태일 경우
-				textSpan.textContent = item.originalMessage; // 원본 메시지로 복원
-				let dotsCount = 0;
-				// 애니메이션 시작
-				const intervalId = setInterval(() => {
-					dotsCount = (dotsCount + 1) % 4; // 0, 1, 2, 3 반복
-					dotsSpan.textContent = '.'.repeat(dotsCount);
-				}, 300); // 300ms마다 점 업데이트
-				this.#animationIntervals.set(item.id, intervalId);
+			} else { // pending 상태
+				textSpan.textContent = item.originalMessage;
+				// pending이지만 active가 아닌 경우 점 없음 (CSS의 role)
 			}
 		}
 	}
+
+	// 점 애니메이션 시작 함수
+	#startAnimation(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			const dotsSpan = li.querySelector(".animated-dots");
+			let dotsCount = 0;
+			const intervalId = setInterval(() => {
+				dotsCount = (dotsCount + 1) % 4; // 0, 1, 2, 3 반복
+				dotsSpan.textContent = '.'.repeat(dotsCount);
+			}, 300);
+			this.#animationIntervals.set(item.id, intervalId);
+		}
+	}
+
+	// 개별 항목의 상태 업데이트 (텍스트 변경, 클래스 추가/제거)
+	// 애니메이션 시작/중지는 `#updateCurrentActiveProgress`에서 담당
+	#updateProgressItem(item) {
+		this.#updateProgressItemVisuals(item); // 텍스트와 클래스 업데이트
+	}
 }
 
 

package/dist/nx/nxTab.js

@@ -19,8 +19,20 @@ class nxTab extends HTMLElement {
 		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
 		
         this.switchTabHandler = this.#switchTab.bind(this);
+
+
+        this.tappage = {
+            hide: (v) => {
+                this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
+                    if (el.innerText.trim() === v) {
+                        el.style.display = "none";
+                    }
+                })
+            }
+        }
     }
 
+
     connectedCallback() {
         this.#init();
         this.dispatchEvent(new CustomEvent(ninegrid.EVENT.TAB_LOAD, { bubbles: true, detail: {} }));

package/package.json

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

package/src/ai/aiMessage.js

@@ -231,9 +231,9 @@ class aiMyMessage extends HTMLElement
 // aiProgressMessage 클래스 정의
 // aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
-	#progressData = []; // 진행 상태 데이터를 저장할 배열
-	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
-	#animationIntervals = new Map(); // 각 항목의 애니메이션 인터벌 ID를 저장할 Map
+	#progressData = [];
+	#progressElements = new Map();
+	#animationIntervals = new Map();
 
 	constructor() {
 		super();
@@ -257,14 +257,14 @@ class aiProgressMessage extends HTMLElement {
 	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다.', completedMessage: '분석이 완료되었습니다.'}, ...]
 	 */
 	initialize(data) {
-		// 초기 상태는 'pending'으로 설정하고, 원본 메시지 저장 (애니메이션용)
 		this.#progressData = data.map(item => ({
 			...item,
 			status: 'pending',
-			originalMessage: item.message // 애니메이션을 위해 원본 메시지 저장
+			originalMessage: item.message
 		}));
 		setTimeout(() => {
-			this.#renderProgress();
+			this.#renderProgress(); // 초기 렌더링 시 현재 진행 단계를 활성화
+			this.#updateCurrentActiveProgress(); // 초기 활성 단계 설정
 		}, 300);
 	}
 
@@ -276,50 +276,68 @@ class aiProgressMessage extends HTMLElement {
 	updateProgress(id, status) {
 		const itemIndex = this.#progressData.findIndex(item => item.id === id);
 		if (itemIndex > -1) {
-			// 기존 상태와 다를 경우에만 업데이트
 			if (this.#progressData[itemIndex].status !== status) {
 				this.#progressData[itemIndex].status = status;
-				this.#updateProgressItem(this.#progressData[itemIndex]);
+				this.#updateProgressItem(this.#progressData[itemIndex]); // 개별 항목 업데이트
+				this.#updateCurrentActiveProgress(); // 활성 진행 단계 재설정
 			}
 		}
 	}
 
+	// 현재 진행 중인 첫 번째 pending 항목을 찾아 'active' 상태로 만들고 애니메이션 시작
+	// 이전에 active였던 항목의 애니메이션은 중지
+	#updateCurrentActiveProgress() {
+		let foundActive = false;
+		this.#progressData.forEach(item => {
+			const li = this.#progressElements.get(item.id);
+			if (!li) return; // 요소가 아직 렌더링되지 않았으면 스킵
+
+			// 모든 항목에서 'active' 클래스 제거 및 애니메이션 중지
+			li.classList.remove('active');
+			if (this.#animationIntervals.has(item.id)) {
+				clearInterval(this.#animationIntervals.get(item.id));
+				this.#animationIntervals.delete(item.id);
+				li.querySelector(".animated-dots").textContent = ''; // 점 제거
+			}
+
+			// 첫 번째 pending 항목을 찾으면 'active'로 설정하고 애니메이션 시작
+			if (item.status === 'pending' && !foundActive) {
+				li.classList.add('active');
+				this.#startAnimation(item);
+				foundActive = true;
+			}
+		});
+	}
+
 	#renderProgress() {
 		const progressList = this.shadowRoot.querySelector(".progress-list");
-		progressList.innerHTML = ''; // 기존 목록 초기화
-		this.#progressElements.clear(); // 기존 요소 Map 초기화
-		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId)); // 기존 애니메이션 정리
+		progressList.innerHTML = '';
+		this.#progressElements.clear();
+		this.#animationIntervals.forEach(intervalId => clearInterval(intervalId));
 		this.#animationIntervals.clear();
 
 		this.#progressData.forEach((item, index) => {
 			const li = document.createElement("li");
 			li.setAttribute("data-id", item.id);
 			li.classList.add("progress-item");
-			// 번호와 초기 메시지 설정
 			li.innerHTML = `
                 <span class="step-number">${index + 1}.</span>
-                <span class="text">${item.message}</span>
+                <span class="text">${item.originalMessage}</span>
                 <span class="animated-dots"></span>
-            `; // animated-dots 스판 추가
+            `;
 			progressList.appendChild(li);
 			this.#progressElements.set(item.id, li);
-
-			// 초기 상태에 따라 업데이트 (특히 애니메이션 시작)
-			this.#updateProgressItem(item);
+			// 초기 렌더링 시에는 'active' 상태는 `#updateCurrentActiveProgress`에서 처리
+			this.#updateProgressItemVisuals(item); // 텍스트만 업데이트
 		});
 	}
 
-	#updateProgressItem(item) {
+	// 항목의 시각적 상태(텍스트, 완료 체크)만 업데이트
+	#updateProgressItemVisuals(item) {
 		const li = this.#progressElements.get(item.id);
 		if (li) {
-			// 기존 애니메이션 중지
-			if (this.#animationIntervals.has(item.id)) {
-				clearInterval(this.#animationIntervals.get(item.id));
-				this.#animationIntervals.delete(item.id);
-			}
-
-			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
-			li.classList.add(item.status); // 새 상태 클래스 추가
+			li.classList.remove('pending', 'completed');
+			li.classList.add(item.status);
 
 			const textSpan = li.querySelector(".text");
 			const dotsSpan = li.querySelector(".animated-dots");
@@ -327,18 +345,32 @@ class aiProgressMessage extends HTMLElement {
 			if (item.status === 'completed') {
 				textSpan.textContent = item.completedMessage;
 				dotsSpan.textContent = ''; // 완료 시 점 제거
-			} else { // pending 상태일 경우
-				textSpan.textContent = item.originalMessage; // 원본 메시지로 복원
-				let dotsCount = 0;
-				// 애니메이션 시작
-				const intervalId = setInterval(() => {
-					dotsCount = (dotsCount + 1) % 4; // 0, 1, 2, 3 반복
-					dotsSpan.textContent = '.'.repeat(dotsCount);
-				}, 300); // 300ms마다 점 업데이트
-				this.#animationIntervals.set(item.id, intervalId);
+			} else { // pending 상태
+				textSpan.textContent = item.originalMessage;
+				// pending이지만 active가 아닌 경우 점 없음 (CSS의 role)
 			}
 		}
 	}
+
+	// 점 애니메이션 시작 함수
+	#startAnimation(item) {
+		const li = this.#progressElements.get(item.id);
+		if (li) {
+			const dotsSpan = li.querySelector(".animated-dots");
+			let dotsCount = 0;
+			const intervalId = setInterval(() => {
+				dotsCount = (dotsCount + 1) % 4; // 0, 1, 2, 3 반복
+				dotsSpan.textContent = '.'.repeat(dotsCount);
+			}, 300);
+			this.#animationIntervals.set(item.id, intervalId);
+		}
+	}
+
+	// 개별 항목의 상태 업데이트 (텍스트 변경, 클래스 추가/제거)
+	// 애니메이션 시작/중지는 `#updateCurrentActiveProgress`에서 담당
+	#updateProgressItem(item) {
+		this.#updateProgressItemVisuals(item); // 텍스트와 클래스 업데이트
+	}
 }
 
 

package/src/nx/nxTab.js

@@ -19,8 +19,20 @@ class nxTab extends HTMLElement {
 		//this.shadowRoot.querySelector('.tab-pages').style.height = this.shadowRoot.querySelector('.tab-page').style.height;
 		
         this.switchTabHandler = this.#switchTab.bind(this);
+
+
+        this.tappage = {
+            hide: (v) => {
+                this.shadowRoot.querySelectorAll(".tab-button").forEach((el, i) => {
+                    if (el.innerText.trim() === v) {
+                        el.style.display = "none";
+                    }
+                })
+            }
+        }
     }
 
+
     connectedCallback() {
         this.#init();
         this.dispatchEvent(new CustomEvent(ninegrid.EVENT.TAB_LOAD, { bubbles: true, detail: {} }));