ninegrid2 6.873.0 → 6.874.0

package/dist/ai/aiMessage.js

@@ -229,9 +229,11 @@ class aiMyMessage extends HTMLElement
 }
 
 // aiProgressMessage 클래스 정의
+// aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
 	#progressData = []; // 진행 상태 데이터를 저장할 배열
 	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+	#animationIntervals = new Map(); // 각 항목의 애니메이션 인터벌 ID를 저장할 Map
 
 	constructor() {
 		super();
@@ -252,14 +254,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'
+		// 초기 상태는 'pending'으로 설정하고, 원본 메시지 저장 (애니메이션용)
+		this.#progressData = data.map(item => ({
+			...item,
+			status: 'pending',
+			originalMessage: item.message // 애니메이션을 위해 원본 메시지 저장
+		}));
 		setTimeout(() => {
 			this.#renderProgress();
 		}, 300);
-
 	}
 
 	/**
@@ -270,8 +276,11 @@ 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]);
+			}
 		}
 	}
 
@@ -279,26 +288,55 @@ class aiProgressMessage extends HTMLElement {
 		const progressList = this.shadowRoot.querySelector(".progress-list");
 		progressList.innerHTML = ''; // 기존 목록 초기화
 		this.#progressElements.clear(); // 기존 요소 Map 초기화
+		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="step-number">${index + 1}.</span>
                 <span class="text">${item.message}</span>
-            `;
+                <span class="animated-dots"></span>
+            `; // animated-dots 스판 추가
 			progressList.appendChild(li);
-			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+			this.#progressElements.set(item.id, li);
+
+			// 초기 상태에 따라 업데이트 (특히 애니메이션 시작)
+			this.#updateProgressItem(item);
 		});
 	}
 
 	#updateProgressItem(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.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+
+			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; // 원본 메시지로 복원
+				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);
+			}
 		}
 	}
 }

package/dist/bundle.cjs.js

@@ -121866,9 +121866,11 @@ class aiMyMessage extends HTMLElement
 }
 
 // aiProgressMessage 클래스 정의
+// aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
 	#progressData = []; // 진행 상태 데이터를 저장할 배열
 	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+	#animationIntervals = new Map(); // 각 항목의 애니메이션 인터벌 ID를 저장할 Map
 
 	constructor() {
 		super();
@@ -121889,14 +121891,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'
+		// 초기 상태는 'pending'으로 설정하고, 원본 메시지 저장 (애니메이션용)
+		this.#progressData = data.map(item => ({
+			...item,
+			status: 'pending',
+			originalMessage: item.message // 애니메이션을 위해 원본 메시지 저장
+		}));
 		setTimeout(() => {
 			this.#renderProgress();
 		}, 300);
-
 	}
 
 	/**
@@ -121907,8 +121913,11 @@ 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]);
+			}
 		}
 	}
 
@@ -121916,26 +121925,55 @@ class aiProgressMessage extends HTMLElement {
 		const progressList = this.shadowRoot.querySelector(".progress-list");
 		progressList.innerHTML = ''; // 기존 목록 초기화
 		this.#progressElements.clear(); // 기존 요소 Map 초기화
+		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="step-number">${index + 1}.</span>
                 <span class="text">${item.message}</span>
-            `;
+                <span class="animated-dots"></span>
+            `; // animated-dots 스판 추가
 			progressList.appendChild(li);
-			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+			this.#progressElements.set(item.id, li);
+
+			// 초기 상태에 따라 업데이트 (특히 애니메이션 시작)
+			this.#updateProgressItem(item);
 		});
 	}
 
 	#updateProgressItem(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.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+
+			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; // 원본 메시지로 복원
+				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);
+			}
 		}
 	}
 }

package/dist/bundle.esm.js

@@ -121862,9 +121862,11 @@ class aiMyMessage extends HTMLElement
 }
 
 // aiProgressMessage 클래스 정의
+// aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
 	#progressData = []; // 진행 상태 데이터를 저장할 배열
 	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+	#animationIntervals = new Map(); // 각 항목의 애니메이션 인터벌 ID를 저장할 Map
 
 	constructor() {
 		super();
@@ -121885,14 +121887,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'
+		// 초기 상태는 'pending'으로 설정하고, 원본 메시지 저장 (애니메이션용)
+		this.#progressData = data.map(item => ({
+			...item,
+			status: 'pending',
+			originalMessage: item.message // 애니메이션을 위해 원본 메시지 저장
+		}));
 		setTimeout(() => {
 			this.#renderProgress();
 		}, 300);
-
 	}
 
 	/**
@@ -121903,8 +121909,11 @@ 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]);
+			}
 		}
 	}
 
@@ -121912,26 +121921,55 @@ class aiProgressMessage extends HTMLElement {
 		const progressList = this.shadowRoot.querySelector(".progress-list");
 		progressList.innerHTML = ''; // 기존 목록 초기화
 		this.#progressElements.clear(); // 기존 요소 Map 초기화
+		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="step-number">${index + 1}.</span>
                 <span class="text">${item.message}</span>
-            `;
+                <span class="animated-dots"></span>
+            `; // animated-dots 스판 추가
 			progressList.appendChild(li);
-			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+			this.#progressElements.set(item.id, li);
+
+			// 초기 상태에 따라 업데이트 (특히 애니메이션 시작)
+			this.#updateProgressItem(item);
 		});
 	}
 
 	#updateProgressItem(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.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+
+			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; // 원본 메시지로 복원
+				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);
+			}
 		}
 	}
 }

package/package.json

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

package/src/ai/aiMessage.js

@@ -229,9 +229,11 @@ class aiMyMessage extends HTMLElement
 }
 
 // aiProgressMessage 클래스 정의
+// aiProgressMessage 클래스 정의 수정
 class aiProgressMessage extends HTMLElement {
 	#progressData = []; // 진행 상태 데이터를 저장할 배열
 	#progressElements = new Map(); // 각 진행 단계의 DOM 요소를 저장할 Map
+	#animationIntervals = new Map(); // 각 항목의 애니메이션 인터벌 ID를 저장할 Map
 
 	constructor() {
 		super();
@@ -252,14 +254,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'
+		// 초기 상태는 'pending'으로 설정하고, 원본 메시지 저장 (애니메이션용)
+		this.#progressData = data.map(item => ({
+			...item,
+			status: 'pending',
+			originalMessage: item.message // 애니메이션을 위해 원본 메시지 저장
+		}));
 		setTimeout(() => {
 			this.#renderProgress();
 		}, 300);
-
 	}
 
 	/**
@@ -270,8 +276,11 @@ 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]);
+			}
 		}
 	}
 
@@ -279,26 +288,55 @@ class aiProgressMessage extends HTMLElement {
 		const progressList = this.shadowRoot.querySelector(".progress-list");
 		progressList.innerHTML = ''; // 기존 목록 초기화
 		this.#progressElements.clear(); // 기존 요소 Map 초기화
+		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="step-number">${index + 1}.</span>
                 <span class="text">${item.message}</span>
-            `;
+                <span class="animated-dots"></span>
+            `; // animated-dots 스판 추가
 			progressList.appendChild(li);
-			this.#progressElements.set(item.id, li); // DOM 요소 참조 저장
+			this.#progressElements.set(item.id, li);
+
+			// 초기 상태에 따라 업데이트 (특히 애니메이션 시작)
+			this.#updateProgressItem(item);
 		});
 	}
 
 	#updateProgressItem(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.querySelector(".text").textContent = item.status === 'completed' ? item.completedMessage : item.message;
+
+			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; // 원본 메시지로 복원
+				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);
+			}
 		}
 	}
 }