@nine-lab/nine-mu 0.1.340 → 0.1.342

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.340",
+  "version": "0.1.342",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",

package/src/components/exception/ExceptionHook.js

@@ -177,45 +177,50 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	#renderError(errorMessage, errorStack) {
-		trace.log("🎨 [nine-exception-hook] #renderError() 실행 시작. UI 전환 진행");
+		if (this.#hasError) return;
+		this.#hasError = true;
 
-		const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
-		if (coreContainer) {
-			coreContainer.style.display = 'none';
-			trace.log("🎨 [nine-exception-hook] <slot> 본문 영역 컨테이너 숨김 (display: none)");
-		} else {
-			trace.error("❌ [nine-exception-hook] .nine-hook-core 엘리먼트를 찾을 수 없습니다.");
-		}
+		// 🎯 [핵심] 리액트가 에러 발생 후 하위 DOM을 Unmount/조작하는 동기적인 타이밍을
+		// 완전히 흘려보낸 뒤(setTimeout 0)에 안전하게 Web Component UI를 꽂아 넣습니다.
+		setTimeout(() => {
+			trace.log("🎨 [nine-exception-hook] 리액트 사이클 종료 후 에러 UI 최종 렌더링");
 
-		const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
-		if (!exceptionBoard) {
-			trace.error("❌ [nine-exception-hook] .nine-exception-board 엘리먼트를 찾을 수 없습니다.");
-			return;
-		}
+			const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
+			if (coreContainer) {
+				coreContainer.style.display = 'none';
+				trace.log("🎨 [nine-exception-hook] <slot> 본문 영역 컨테이너 숨김");
+			}
 
-		const errorHTML = `
-			<div class="nine-error-container">
-				<h3 class="nine-error-title">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
-				<p class="nine-error-label">[에러 원인 로그]:</p>
-				<pre class="nine-error-log">${errorMessage}</pre>
-				
-				<div class="nine-action-area" style="margin-top: 20px; display: flex; align-items: center; gap: 15px;">
-					<button class="nine-ai-btn">🤖 AI에게 소스코드 수정 요청</button>
-					<div class="nine-error-footer">
-						버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
+			const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
+			if (!exceptionBoard) {
+				trace.error("❌ [nine-exception-hook] .nine-exception-board 엘리먼트를 찾을 수 없습니다.");
+				return;
+			}
+
+			const errorHTML = `
+				<div class="nine-error-container">
+					<h3 class="nine-error-title">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
+					<p class="nine-error-label">[에러 원인 로그]:</p>
+					<pre class="nine-error-log">${errorMessage}</pre>
+					
+					<div class="nine-action-area" style="margin-top: 20px; display: flex; align-items: center; gap: 15px;">
+						<button class="nine-ai-btn">🤖 AI에게 소스코드 수정 요청</button>
+						<div class="nine-error-footer">
+							버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
+						</div>
 					</div>
 				</div>
-			</div>
-		`;
+			`;
 
-		exceptionBoard.innerHTML = errorHTML;
-		trace.log("🎨 [nine-exception-hook] Shadow DOM에 에러 UI 삽입 완료");
+			exceptionBoard.innerHTML = errorHTML;
+			trace.log("🎨 [nine-exception-hook] Shadow DOM에 에러 UI 최종 삽입 성공");
 
-		const aiBtn = this.shadowRoot.querySelector('.nine-ai-btn');
-		if (aiBtn) {
-			aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));
-			trace.log("🎨 [nine-exception-hook] AI 요청 버튼 이벤트 리스너 바인딩 성공");
-		}
+			const aiBtn = this.shadowRoot.querySelector('.nine-ai-btn');
+			if (aiBtn) {
+				aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));
+				trace.log("🎨 [nine-exception-hook] AI 요청 버튼 이벤트 리스너 최종 바인딩 성공");
+			}
+		}, 0);
 	}
 }