@nine-lab/nine-mu 0.1.344 → 0.1.345

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -11,14 +11,11 @@ export class ExceptionHook extends HTMLElement {
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
-		trace.log("🔍 [nine-exception-hook] 인스턴스 생성됨");
 	}
 
 	connectedCallback() {
-		trace.log("🔍 [nine-exception-hook] DOM에 마운트됨. 이벤트 리스너 바인딩 시작");
 		this.#renderer();
 		this.#injectShadowStylesheet();
-
 		this.#setupGlobalSniffer();
 
 		window.addEventListener('unhandledrejection', this.#handlePromiseError, true);
@@ -27,7 +24,6 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	disconnectedCallback() {
-		trace.log("🔍 [nine-exception-hook] DOM에서 언마운트됨. 리스너 해제");
 		window.removeEventListener('error', this.#handleRuntimeError, true);
 		window.removeEventListener('unhandledrejection', this.#handlePromiseError, true);
 		window.removeEventListener('popstate', this.#handleLocationChange);
@@ -35,56 +31,67 @@ export class ExceptionHook extends HTMLElement {
 
 		if (window.onerror === this.#handleRuntimeError || this.#oldOnError) {
 			window.onerror = this.#oldOnError;
-			trace.log("🔍 [nine-exception-hook] window.onerror 복구 완료");
 		}
-
-		// 화면 리셋 시 박혀있던 바깥쪽 에러 컨테이너 제거
-		this.#removeExternalOverlay();
 	}
 
 	#setupGlobalSniffer() {
 		window.addEventListener('error', this.#handleRuntimeError, true);
-		trace.log("🔍 [nine-exception-hook] window.addEventListener('error') 등록 완료");
 
 		this.#oldOnError = window.onerror;
 		window.onerror = (message, source, lineno, colno, error) => {
-			trace.log("🚨 [nine-exception-hook] 원시 window.onerror 포착!!", { message, source, lineno, error });
-
 			if (!this.#hasError) {
-				trace.log("🎯 [nine-exception-hook] 현재 에러 상태 없음 -> 에러 보드 출력 시도");
 				const errorMessage = error?.message || message || "알 수 없는 런타임 예외";
 				const errorStack = error?.stack || `${source}:${lineno}:${colno}`;
 				this.#renderError(errorMessage, errorStack);
-			} else {
-				trace.log("⚠️ [nine-exception-hook] 이미 에러 화면이 활성화되어 있어 원시 onerror 패스");
 			}
-
 			if (this.#oldOnError) {
-				trace.log("🔄 [nine-exception-hook] 기존에 등록되어 있던 다른 onerror 엔진으로 위임");
 				return this.#oldOnError(message, source, lineno, colno, error);
 			}
 			return false;
 		};
-		trace.log("🔍 [nine-exception-hook] 원시 window.onerror 가로채기(Chaining) 완료");
 	}
 
 	#renderer = () => {
 		const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
 
+		// 🎯 [핵심 변경 1] :host 자체를 absolute의 기준점이 되는 block으로 잡고,
+		// 리액트 슬롯 내용물(메뉴 등)은 절대 숨기지 않고 100% 크기로 유지합니다.
 		this.shadowRoot.innerHTML = `
 			<style>
 				@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
 				${customImport}
+				
 				:host {
 					display: block;
 					width: 100%;
 					height: 100%;
+					position: relative !important; /* 내부 에러 보드의 기준점 기둥 생성 */
+				}
+				
+				.nine-hook-core {
+					width: 100%;
+					height: 100%;
+				}
+
+				/* 🎯 [핵심 변경 2] 리액트 슬롯을 가리지 않고, 오직 "이 컴포넌트 구역"만 가득 채우는 독립 팝업 레이어 */
+				.nine-hook-inner-cover {
+					position: absolute !important;
+					top: 0 !important;
+					left: 0 !important;
+					width: 100% !important;
+					height: 100% !important;
+					box-sizing: border-box !important;
+					background-color: #FFF5F5 !important;
+					z-index: 2147483647 !important; /* 리액트 내부 그 어떤 오버레이보다 무조건 위 */
+					overflow: auto !important;
+					display: none; /* 평소엔 숨김 */
 				}
 			</style>
-			<div class="nine-hook-core" style="width: 100%; height: 100%;">
+			
+			<div class="nine-hook-core">
 				<slot></slot>
 			</div>
-			<div class="nine-exception-board"></div>
+			<div class="nine-exception-board class-target-board"></div>
 		`;
 	}
 
@@ -98,8 +105,6 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	#handleRuntimeError = (event) => {
-		trace.log("🚨 [nine-exception-hook] window.addEventListener('error') 리스너 포착!!", event);
-
 		if (this.#hasError) return;
 
 		const errorMessage = event.error?.message || event.message || String(event);
@@ -111,8 +116,6 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	#handlePromiseError = (event) => {
-		trace.log("🚨 [nine-exception-hook] unhandledrejection (Promise 에러) 포착!!", event);
-
 		if (this.#hasError) return;
 
 		const reason = event.reason;
@@ -125,28 +128,21 @@ export class ExceptionHook extends HTMLElement {
 	#handleLocationChange = () => {
 		setTimeout(() => {
 			if (this.#hasError && this.#lastPath !== window.location.pathname) {
-				trace.log("✨ [nine-exception-hook] Shadow DOM 및 글로벌 오버레이 내부 예외 청소 및 정상 복구");
 				this.#lastPath = window.location.pathname;
 				this.#hasError = false;
 
-				this.#removeExternalOverlay();
-
-				const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
-				if (coreContainer) coreContainer.style.display = '';
+				const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
+				if (exceptionBoard) {
+					exceptionBoard.innerHTML = '';
+					exceptionBoard.className = 'nine-exception-board'; // 클래스 리셋
+				}
 			}
 		}, 50);
 	}
 
-	#removeExternalOverlay() {
-		const target = document.getElementById('nine-global-exception-container');
-		if (target) target.remove();
-	}
-
 	#sendToAiAction = async (errorMessage, errorStack) => {
-		// 글로벌 엘리먼트 내에서 탐색하도록 변경
-		const root = document.getElementById('nine-global-exception-container') || this.shadowRoot;
-		const btn = root.querySelector('.nine-ai-btn');
-		const footer = root.querySelector('.nine-error-footer');
+		const btn = this.shadowRoot.querySelector('.nine-ai-btn');
+		const footer = this.shadowRoot.querySelector('.nine-error-footer');
 		if (!btn) return;
 
 		btn.disabled = true;
@@ -167,7 +163,6 @@ export class ExceptionHook extends HTMLElement {
 				throw new Error("window.triggerAutoRecovery 관제탑 엔진이 로드되지 않았습니다.");
 			}
 		} catch (err) {
-			trace.error("❌ AI 전송 실패:", err);
 			btn.disabled = false;
 			btn.innerText = "❌ 재전송 시도";
 			footer.innerHTML = `<span style="color: #E53E3E;">⚠️ 전송 실패: ${err.message}</span>`;
@@ -179,55 +174,33 @@ export class ExceptionHook extends HTMLElement {
 		this.#hasError = true;
 
 		setTimeout(() => {
-			trace.log("🎨 [nine-exception-hook] 리액트 사이클 종료 후 최상단 글로벌 에러 레이어 생성");
-
-			const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
-			if (coreContainer) coreContainer.style.display = 'none';
-
-			// 🎯 [핵심 변경] Shadow DOM 내부가 아니라 document.body에 직접 fixed 컨테이너를 꽂아버려
-			// global-loading-overlay를 완벽히 덮어버립니다.
-			this.#removeExternalOverlay();
-
-			const externalContainer = document.createElement('div');
-			externalContainer.id = 'nine-global-exception-container';
-
-			// 인라인 스타일로 외부 요소를 완전히 차단하고 맨 앞으로 배치
-			Object.assign(externalContainer.style, {
-				position: 'fixed',
-				top: '0',
-				left: '0',
-				width: '100vw',
-				height: '100vh',
-				backgroundColor: '#FFF5F5',
-				zIndex: '2147483647', // 브라우저 표현 최대 z-index 값 부여
-				overflow: 'auto',
-				boxSizing: 'border-box',
-				display: 'block'
-			});
+			const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
+			if (!exceptionBoard) return;
+
+			// 🎯 [핵심 변경 3] 기존 슬롯 컨테이너를 숨기지(display: none) 않습니다!
+			// 대신 에러 보드에 커버 클래스를 주입하여 "오직 본문 공간만" 물리적으로 완전히 덮어씌웁니다.
+			exceptionBoard.className = 'nine-hook-inner-cover';
 
 			const errorHTML = `
-				<div class="nine-error-container" style="padding: 40px; max-width: 1200px; margin: 40px auto; font-family: sans-serif; background: white; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); text-align: left;">
-					<h3 class="nine-error-title" style="color: #C53030; margin-top: 0; font-size: 22px; font-weight: 700; border-bottom: 2px solid #FED2D2; padding-bottom: 12px; font-family: sans-serif;">⚠️ 시스템 예외 감지 (nine-exception-hook)</h3>
-					<p class="nine-error-label" style="font-weight: bold; margin: 20px 0 8px 0; color: #4A5568; font-size: 15px; font-family: sans-serif;">[에러 원인 로그]:</p>
-					<pre class="nine-error-log" style="background: #1A202C; color: #EDF2F7; padding: 20px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; font-family: monospace; font-size: 14px; line-height: 1.6; margin-bottom: 25px;">${errorMessage}\n\n[Stack Trace]\n${errorStack}</pre>
+				<div class="nine-error-container" style="padding: 30px; box-sizing: border-box; font-family: sans-serif; background: white; min-height: 100%; text-align: left;">
+					<h3 class="nine-error-title" style="color: #C53030; margin-top: 0; font-size: 20px; font-weight: 700; border-bottom: 2px solid #FED2D2; padding-bottom: 12px; font-family: sans-serif;">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
+					<p class="nine-error-label" style="font-weight: bold; margin: 15px 0 6px 0; color: #4A5568; font-size: 14px; font-family: sans-serif;">[에러 원인 로그]:</p>
+					<pre class="nine-error-log" style="background: #1A202C; color: #EDF2F7; padding: 15px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; font-family: monospace; font-size: 13px; line-height: 1.5; margin-bottom: 20px;">${errorMessage}\n\n[Stack Trace]\n${errorStack}</pre>
 					
-					<div class="nine-action-area" style="display: flex; align-items: center; gap: 20px; border-top: 1px solid #E2E8F0; padding-top: 20px;">
-						<button class="nine-ai-btn" style="background: #3182CE; color: white; border: none; padding: 14px 28px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 16px;">🤖 AI에게 소스코드 수정 요청</button>
-						<div class="nine-error-footer" style="font-size: 14px; color: #718096; line-height: 1.4; font-family: sans-serif;">
+					<div class="nine-action-area" style="display: flex; align-items: center; gap: 15px; border-top: 1px solid #E2E8F0; padding-top: 15px;">
+						<button class="nine-ai-btn" style="background: #3182CE; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 14px;">🤖 AI에게 소스코드 수정 요청</button>
+						<div class="nine-error-footer" style="font-size: 13px; color: #718096; line-height: 1.4; font-family: sans-serif;">
 							버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
 						</div>
 					</div>
 				</div>
 			`;
 
-			externalContainer.innerHTML = errorHTML;
-			document.body.appendChild(externalContainer);
-			trace.log("🎨 [nine-exception-hook] 브라우저 Body 최상단 레이어 배정 성공");
+			exceptionBoard.innerHTML = errorHTML;
 
-			const aiBtn = externalContainer.querySelector('.nine-ai-btn');
+			const aiBtn = exceptionBoard.querySelector('.nine-ai-btn');
 			if (aiBtn) {
 				aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));
-				trace.log("🎨 [nine-exception-hook] AI 요청 버튼 이벤트 리스너 최종 바인딩 성공");
 			}
 		}, 0);
 	}