ide-assi 0.479.0 → 0.482.0

package/dist/bundle.cjs.js

@@ -121046,8 +121046,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: {} }));
@@ -121870,9 +121882,11 @@ class aiMyMessage extends HTMLElement
 }
 
 // aiProgressMessage 클래스 정의
+// aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
-	#progressData = []; // 진행 상태 데이터를 저장할 배열
-	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+	#progressData = [];
+	#progressElements = new Map();
+	#animationIntervals = new Map();
 
 	constructor() {
 		super();
@@ -121893,11 +121907,18 @@ class aiProgressMessage extends HTMLElement {
 
 	/**
 	 * 진행 상태 데이터를 초기화하고 화면에 표시합니다.
-	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다...', completedMessage: '분석이 완료되었습니다.'}, ...]
+	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다.', completedMessage: '분석이 완료되었습니다.'}, ...]
 	 */
 	initialize(data) {
-		this.#progressData = data.map(item => ({ ...item, status: 'pending' })); // 초기 상태는 'pending'
-		this.#renderProgress();
+		this.#progressData = data.map(item => ({
+			...item,
+			status: 'pending',
+			originalMessage: item.message
+		}));
+		setTimeout(() => {
+			this.#renderProgress(); // 초기 렌더링 시 현재 진행 단계를 활성화
+			this.#updateCurrentActiveProgress(); // 초기 활성 단계 설정
+		}, 300);
 	}
 
 	/**
@@ -121908,37 +121929,101 @@ class aiProgressMessage extends HTMLElement {
 	updateProgress(id, status) {
 		const itemIndex = this.#progressData.findIndex(item => item.id === id);
 		if (itemIndex > -1) {
-			this.#progressData[itemIndex].status = status;
-			this.#updateProgressItem(this.#progressData[itemIndex]);
+			if (this.#progressData[itemIndex].status !== status) {
+				this.#progressData[itemIndex].status = status;
+				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 초기화
+		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", item.status);
+			li.classList.add("progress-item");
 			li.innerHTML = `
-                <span class="icon"></span>
-                <span class="text">${item.message}</span>
+                <span class="step-number">${index + 1}.</span>
+                <span class="text">${item.originalMessage}</span>
+                <span class="animated-dots"></span>
             `;
 			progressList.appendChild(li);
-			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+			this.#progressElements.set(item.id, li);
+			// 초기 렌더링 시에는 'active' 상태는 `#updateCurrentActiveProgress`에서 처리
+			this.#updateProgressItemVisuals(item); // 텍스트만 업데이트
 		});
 	}
 
-	#updateProgressItem(item) {
+	// 항목의 시각적 상태(텍스트, 완료 체크)만 업데이트
+	#updateProgressItemVisuals(item) {
 		const li = this.#progressElements.get(item.id);
 		if (li) {
-			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
-			li.classList.add(item.status); // 새 상태 클래스 추가
-			li.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+			li.classList.remove('pending', 'completed');
+			li.classList.add(item.status);
+
+			const textSpan = li.querySelector(".text");
+			const dotsSpan = li.querySelector(".animated-dots");
+
+			if (item.status === 'completed') {
+				textSpan.textContent = item.completedMessage;
+				dotsSpan.textContent = ''; // 완료 시 점 제거
+			} 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); // 텍스트와 클래스 업데이트
+	}
 }
 
 
@@ -202774,11 +202859,10 @@ class IdeDiffPopup extends HTMLElement
 
 		this.shadowRoot.innerHTML = `
 			<style>
-				
 			</style>
 			
 			<nx-dialog>
-				<nx-tab theme="theme-4" ref={tabRef}>
+				<nx-tab theme="theme-4">
 				  <nx-tab-page caption="mybatis">
 					<ide-diff class="mybatis"></ide-diff>
 				  </nx-tab-page>
@@ -202797,18 +202881,10 @@ class IdeDiffPopup extends HTMLElement
 	}
 	
 	popup = (chagedSource) => {
-
-		console.log(chagedSource);
-
-
 		setTimeout(() => {
 			for (const item of chagedSource) {
 				const [type, diffData] = Object.entries(item)[0]; // 예: type = "mybatis", diffData = { asis, tobe }
-
-				console.log(type, diffData);
-
 				const diff = ninegrid.querySelector(`ide-diff.${type}`, this.shadowRoot);
-				console.log(diff);
 				if (!diff) continue;
 
 				diff.initialize(
@@ -202819,9 +202895,9 @@ class IdeDiffPopup extends HTMLElement
 			}
 
 			this.shadowRoot.querySelector('nx-dialog')?.showModal();
-		}, 800);
-
 
+			this.shadowRoot.querySelector('nx-tab').tabpage.hide("mybatis");
+		}, 100);
 	};
 }
 

package/dist/bundle.esm.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: {} }));
@@ -121866,9 +121878,11 @@ class aiMyMessage extends HTMLElement
 }
 
 // aiProgressMessage 클래스 정의
+// aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
-	#progressData = []; // 진행 상태 데이터를 저장할 배열
-	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+	#progressData = [];
+	#progressElements = new Map();
+	#animationIntervals = new Map();
 
 	constructor() {
 		super();
@@ -121889,11 +121903,18 @@ class aiProgressMessage extends HTMLElement {
 
 	/**
 	 * 진행 상태 데이터를 초기화하고 화면에 표시합니다.
-	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다...', completedMessage: '분석이 완료되었습니다.'}, ...]
+	 * @param {Array<Object>} data - [{id: 'step1', message: '분석중입니다.', completedMessage: '분석이 완료되었습니다.'}, ...]
 	 */
 	initialize(data) {
-		this.#progressData = data.map(item => ({ ...item, status: 'pending' })); // 초기 상태는 'pending'
-		this.#renderProgress();
+		this.#progressData = data.map(item => ({
+			...item,
+			status: 'pending',
+			originalMessage: item.message
+		}));
+		setTimeout(() => {
+			this.#renderProgress(); // 초기 렌더링 시 현재 진행 단계를 활성화
+			this.#updateCurrentActiveProgress(); // 초기 활성 단계 설정
+		}, 300);
 	}
 
 	/**
@@ -121904,37 +121925,101 @@ class aiProgressMessage extends HTMLElement {
 	updateProgress(id, status) {
 		const itemIndex = this.#progressData.findIndex(item => item.id === id);
 		if (itemIndex > -1) {
-			this.#progressData[itemIndex].status = status;
-			this.#updateProgressItem(this.#progressData[itemIndex]);
+			if (this.#progressData[itemIndex].status !== status) {
+				this.#progressData[itemIndex].status = status;
+				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 초기화
+		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", item.status);
+			li.classList.add("progress-item");
 			li.innerHTML = `
-                <span class="icon"></span>
-                <span class="text">${item.message}</span>
+                <span class="step-number">${index + 1}.</span>
+                <span class="text">${item.originalMessage}</span>
+                <span class="animated-dots"></span>
             `;
 			progressList.appendChild(li);
-			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+			this.#progressElements.set(item.id, li);
+			// 초기 렌더링 시에는 'active' 상태는 `#updateCurrentActiveProgress`에서 처리
+			this.#updateProgressItemVisuals(item); // 텍스트만 업데이트
 		});
 	}
 
-	#updateProgressItem(item) {
+	// 항목의 시각적 상태(텍스트, 완료 체크)만 업데이트
+	#updateProgressItemVisuals(item) {
 		const li = this.#progressElements.get(item.id);
 		if (li) {
-			li.classList.remove('pending', 'completed'); // 기존 클래스 제거
-			li.classList.add(item.status); // 새 상태 클래스 추가
-			li.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+			li.classList.remove('pending', 'completed');
+			li.classList.add(item.status);
+
+			const textSpan = li.querySelector(".text");
+			const dotsSpan = li.querySelector(".animated-dots");
+
+			if (item.status === 'completed') {
+				textSpan.textContent = item.completedMessage;
+				dotsSpan.textContent = ''; // 완료 시 점 제거
+			} 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); // 텍스트와 클래스 업데이트
+	}
 }
 
 
@@ -202770,11 +202855,10 @@ class IdeDiffPopup extends HTMLElement
 
 		this.shadowRoot.innerHTML = `
 			<style>
-				
 			</style>
 			
 			<nx-dialog>
-				<nx-tab theme="theme-4" ref={tabRef}>
+				<nx-tab theme="theme-4">
 				  <nx-tab-page caption="mybatis">
 					<ide-diff class="mybatis"></ide-diff>
 				  </nx-tab-page>
@@ -202793,18 +202877,10 @@ class IdeDiffPopup extends HTMLElement
 	}
 	
 	popup = (chagedSource) => {
-
-		console.log(chagedSource);
-
-
 		setTimeout(() => {
 			for (const item of chagedSource) {
 				const [type, diffData] = Object.entries(item)[0]; // 예: type = "mybatis", diffData = { asis, tobe }
-
-				console.log(type, diffData);
-
 				const diff = ninegrid.querySelector(`ide-diff.${type}`, this.shadowRoot);
-				console.log(diff);
 				if (!diff) continue;
 
 				diff.initialize(
@@ -202815,9 +202891,9 @@ class IdeDiffPopup extends HTMLElement
 			}
 
 			this.shadowRoot.querySelector('nx-dialog')?.showModal();
-		}, 800);
-
 
+			this.shadowRoot.querySelector('nx-tab').tabpage.hide("mybatis");
+		}, 100);
 	};
 }
 

package/dist/components/ideDiffPopup.js

@@ -15,11 +15,10 @@ class IdeDiffPopup extends HTMLElement
 
 		this.shadowRoot.innerHTML = `
 			<style>
-				
 			</style>
 			
 			<nx-dialog>
-				<nx-tab theme="theme-4" ref={tabRef}>
+				<nx-tab theme="theme-4">
 				  <nx-tab-page caption="mybatis">
 					<ide-diff class="mybatis"></ide-diff>
 				  </nx-tab-page>
@@ -38,18 +37,10 @@ class IdeDiffPopup extends HTMLElement
 	}
 	
 	popup = (chagedSource) => {
-
-		console.log(chagedSource);
-
-
 		setTimeout(() => {
 			for (const item of chagedSource) {
 				const [type, diffData] = Object.entries(item)[0]; // 예: type = "mybatis", diffData = { asis, tobe }
-
-				console.log(type, diffData);
-
 				const diff = ninegrid.querySelector(`ide-diff.${type}`, this.shadowRoot);
-				console.log(diff);
 				if (!diff) continue;
 
 				diff.initialize(
@@ -60,9 +51,9 @@ class IdeDiffPopup extends HTMLElement
 			}
 
 			this.shadowRoot.querySelector('nx-dialog')?.showModal();
-		}, 800);
-
 
+			this.shadowRoot.querySelector('nx-tab').tabpage.hide("mybatis");
+		}, 100);
 	};
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.479.0",
+  "version": "0.482.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideDiffPopup.js

@@ -15,11 +15,10 @@ class IdeDiffPopup extends HTMLElement
 
 		this.shadowRoot.innerHTML = `
 			<style>
-				
 			</style>
 			
 			<nx-dialog>
-				<nx-tab theme="theme-4" ref={tabRef}>
+				<nx-tab theme="theme-4">
 				  <nx-tab-page caption="mybatis">
 					<ide-diff class="mybatis"></ide-diff>
 				  </nx-tab-page>
@@ -38,18 +37,10 @@ class IdeDiffPopup extends HTMLElement
 	}
 	
 	popup = (chagedSource) => {
-
-		console.log(chagedSource);
-
-
 		setTimeout(() => {
 			for (const item of chagedSource) {
 				const [type, diffData] = Object.entries(item)[0]; // 예: type = "mybatis", diffData = { asis, tobe }
-
-				console.log(type, diffData);
-
 				const diff = ninegrid.querySelector(`ide-diff.${type}`, this.shadowRoot);
-				console.log(diff);
 				if (!diff) continue;
 
 				diff.initialize(
@@ -60,9 +51,9 @@ class IdeDiffPopup extends HTMLElement
 			}
 
 			this.shadowRoot.querySelector('nx-dialog')?.showModal();
-		}, 800);
-
 
+			this.shadowRoot.querySelector('nx-tab').tabpage.hide("mybatis");
+		}, 100);
 	};
 }