@nine-lab/nine-mu 0.1.334 → 0.1.336

package/package.json

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

package/public/css/nine-mu.css

@@ -943,9 +943,19 @@
 }
 
 :host(nine-exception-hook) {
-	display: block;
+	display: flex;
 	width: 100%;
 	height: 100%;
+	color: inherit;
+	font-size: inherit;
+	line-height: inherit;
+
+	/* 내부 모든 엘리먼트의 여백 계산법을 어드민 기본형에 동기화 */
+	.nine-error-container *,
+	.nine-error-container *::before,
+	.nine-error-container *::after {
+		box-sizing: border-box;
+	}
 
 	.nine-error-container {
 		padding: 30px;
@@ -1012,10 +1022,10 @@
 		font-size: 14px;
 		color: #718096;
 	}
+}
 
-	@keyframes pulse {
-		0% { opacity: 0.6; }
-		50% { opacity: 1; }
-		100% { opacity: 0.6; }
-	}
+@keyframes pulse {
+	0% { opacity: 0.6; }
+	50% { opacity: 1; }
+	100% { opacity: 0.6; }
 }

package/src/components/exception/ExceptionHook.js

@@ -1,38 +1,36 @@
 // src/components/exception/ExceptionHook.js
 export class ExceptionHook extends HTMLElement {
+	// 💡 [핵심] 비공개 인스턴스 필드는 클래스 최상단에 먼저 선언해야 합니다.
+	#lastPath = window.location.pathname;
+	#hasError = false;
+	#cssPath = "/css/nine-exception-hook.css";
+
 	constructor() {
 		super();
-		this.lastPath = window.location.pathname;
-		this.hasError = false;
-		this.cssPath = "/css/nine-exception-hook.css";
-
-		// 💡 1. Shadow DOM(open 모드) 활성화 및 슬롯 공간 준비
+		// Shadow DOM(open 모드) 활성화
 		this.attachShadow({ mode: 'open' });
-
-		// 기본 구조 선언: 자식 엘리먼트들이 위치할 <slot>을 배치합니다.
-
 	}
 
-	connectedCallback() {
+	// src/components/exception/ExceptionHook.js 내부 수정
 
+	connectedCallback() {
 		this.#renderer();
-
-		// Shadow DOM 내부에 캡슐화된 스타일시트 링크 주입
 		this.#injectShadowStylesheet();
 
-		window.addEventListener('error', this.#handleRuntimeError.bind(this), true);
-		window.addEventListener('unhandledrejection', this.#handlePromiseError.bind(this), true);
-		window.addEventListener('popstate', this.#handleLocationChange.bind(this));
-		document.addEventListener('click', this.#handleLocationChange.bind(this), true);
+		window.addEventListener('error', this.#handleRuntimeError, true);
+		window.addEventListener('unhandledrejection', this.#handlePromiseError, true);
+		window.addEventListener('popstate', this.#handleLocationChange);
+		document.addEventListener('click', this.#handleLocationChange, true);
 	}
 
 	disconnectedCallback() {
-		window.removeEventListener('error', this.#handleRuntimeError);
-		window.removeEventListener('unhandledrejection', this.#handlePromiseError);
+		window.removeEventListener('error', this.#handleRuntimeError, true);
+		window.removeEventListener('unhandledrejection', this.#handlePromiseError, true);
 		window.removeEventListener('popstate', this.#handleLocationChange);
 		document.removeEventListener('click', this.#handleLocationChange, true);
 	}
 
+
 	#renderer = () => {
 		const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
 
@@ -45,52 +43,65 @@ export class ExceptionHook extends HTMLElement {
 			<div class="nine-hook-core">
 				<slot></slot>
 			</div>
+			<div class="nine-exception-board"></div>
 		`;
 	}
 
-	// 💡 2. Shadow Root 내부 전용 스타일 링크 주입 함수
 	#injectShadowStylesheet() {
-		if (this.shadowRoot.querySelector(`link[href="${this.cssPath}"]`)) return;
+		// 💡 내부 필드 호출 시에도 모두 this.#형식으로 매핑합니다.
+		if (this.shadowRoot.querySelector(`link[href="${this.#cssPath}"]`)) return;
 
 		const link = document.createElement('link');
 		link.rel = 'stylesheet';
-		link.href = this.cssPath;
-		// head가 아닌 shadowRoot에 집어넣어 글로벌 오염을 완벽히 격리합니다.
+		link.href = this.#cssPath;
 		this.shadowRoot.appendChild(link);
 	}
 
-	#handleRuntimeError(event) {
-		// Shadow DOM 외부의 자식 영역(Light DOM) 검증을 위해 여전히 this.contains 활용
-		if (this.contains(event.target) || event.error) {
-			this.#renderError(event.error?.message || event.message, event.error?.stack);
+	// src/components/exception/ExceptionHook.js
+
+	#handleRuntimeError = (event) => {
+		if (this.#hasError) return;
+
+		// 🎯 핵심 1: 리액트 에러는 내부 가상 DOM에서 발생하므로
+		// event.error가 존재하거나, 에러 타겟이 이 컴포넌트 하위에 속해있는지 확인합니다.
+		const isReactError = event.error || (event.target && this.contains(event.target));
+
+		if (isReactError) {
+			// 에러 스택과 메시지 추출
+			const message = event.error?.message || event.message || "알 수 없는 런타임 에러";
+			const stack = event.error?.stack || "Stack trace unavailable";
+
+			// 🎯 핵심 2: 리액트가 에러 때문에 화면을 통째로 날려버리기 전에
+			// 기본 렌더링 슬롯(<slot>)을 즉시 숨기고 Web Component 자체 에러 보드를 띄웁니다.
+			this.#renderError(message, stack);
+
+			// 브라우저 기본 에러 동작(콘솔 중복 출력 등)을 필요에 따라 제어하려면 추가
+			// event.preventDefault();
 		}
 	}
 
-
-	#handlePromiseError(event) {
+	#handlePromiseError = (event) => {
+		if (this.#hasError) return;
 		this.#renderError(event.reason?.message || String(event.reason), event.reason?.stack);
 	}
 
-	#handleLocationChange() {
+	#handleLocationChange = () => {
 		setTimeout(() => {
-			if (this.hasError && this.lastPath !== window.location.pathname) {
+			if (this.#hasError && this.#lastPath !== window.location.pathname) {
 				console.log("✨ [nine-exception-hook] Shadow DOM 내부 예외 청소 및 정상 복구");
-				this.lastPath = window.location.pathname;
-				this.hasError = false;
+				this.#lastPath = window.location.pathname;
+				this.#hasError = false;
 
-				// 💡 3. 복구 시 Shadow Root 내부의 에러 컨테이너만 타겟팅해서 제거
-				const errorBox = this.shadowRoot.querySelector('.nine-error-container');
-				if (errorBox) errorBox.remove();
+				const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
+				if (exceptionBoard) exceptionBoard.innerHTML = '';
 
-				// 숨겨두었던 원래 본문 슬롯 구역을 다시 노출
 				const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
 				if (coreContainer) coreContainer.style.display = '';
 			}
 		}, 10);
 	}
 
-	async #sendToAiAction(errorMessage, errorStack) {
-		// 💡 4. DOM 쿼리 탐색을 모두 this가 아닌 this.shadowRoot로 전환
+	#sendToAiAction = async (errorMessage, errorStack) => {
 		const btn = this.shadowRoot.querySelector('.nine-ai-btn');
 		const footer = this.shadowRoot.querySelector('.nine-error-footer');
 		if (!btn) return;
@@ -121,14 +132,15 @@ export class ExceptionHook extends HTMLElement {
 	}
 
 	#renderError(errorMessage, errorStack) {
-		if (this.hasError) return;
-		this.hasError = true;
+		if (this.#hasError) return;
+		this.#hasError = true;
 
-		// 💡 5. 리액트의 원본 마크업을 건드리지 않고, 슬롯이 감싸진 껍데기만 숨김 처리
 		const coreContainer = this.shadowRoot.querySelector('.nine-hook-core');
 		if (coreContainer) coreContainer.style.display = 'none';
 
-		// Shadow DOM 내부에 렌더링할 마크업 구조 설계
+		const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
+		if (!exceptionBoard) return;
+
 		const errorHTML = `
             <div class="nine-error-container">
                 <h3 class="nine-error-title">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
@@ -144,10 +156,8 @@ export class ExceptionHook extends HTMLElement {
             </div>
         `;
 
-		// shadowRoot 최하단에 안전하게 안착시킵니다.
-		this.shadowRoot.insertAdjacentHTML('beforeend', errorHTML);
+		exceptionBoard.innerHTML = errorHTML;
 
-		// 버튼 이벤트 바인딩도 shadowRoot 기준 처리
 		const aiBtn = this.shadowRoot.querySelector('.nine-ai-btn');
 		if (aiBtn) {
 			aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));