@nine-lab/nine-mu 0.1.348 → 0.1.349

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -1,44 +1,51 @@
 import React from 'react';
 
 // ==========================================
-// 1. 외부에서 수정 및 관리가 용이하도록 CSS 분리
+// 1. 터미널 프롬프트 테마 스타일 (블랙/화이트/그레이 기반)
 // ==========================================
 export const NineExceptionStyles = {
 	container: {
 		padding: '30px',
 		margin: '20px',
-		background: '#FFF5F5',
-		border: '1px solid #FEB2B2',
-		borderRadius: '8px',
-		fontFamily: 'sans-serif',
-		textAlign: 'left'
+		background: '#121314',              // 터미널 다크 블랙 배경
+		border: '1px solid #343A40',        // 소프트한 메탈릭 테두리
+		borderRadius: '6px',
+		fontFamily: 'Consolas, Monaco, "Courier New", monospace', // 터미널 고정폭 글꼴 우선
+		textAlign: 'left',
+		boxShadow: '0 4px 12px rgba(0,0,0,0.3)' // 터미널 윈도우 입체감
 	},
 	title: {
-		color: '#C53030',
+		color: '#FFFFFF',                   // 화이트 타이틀
 		marginTop: 0,
-		fontSize: '18px',
+		fontSize: '16px',
+		fontWeight: '600',
 		display: 'flex',
 		alignItems: 'center',
-		gap: '8px'
+		gap: '8px',
+		borderBottom: '1px solid #2D3139',  // 상단 바 구분선 느낌
+		paddingBottom: '12px'
 	},
 	label: {
-		margin: '10px 0 5px 0',
+		margin: '15px 0 8px 0',
 		fontWeight: 'bold',
-		color: '#4A5568'
+		color: '#A0AEC0',                   // 프롬프트 서브 텍스트 (연한 그레이)
+		fontSize: '13px'
 	},
 	pre: {
-		background: '#1A202C',
-		color: '#EDF2F7',
+		background: '#1A1C1E',              // 코드 블록 내부의 살짝 더 깊은 블랙
+		color: '#F8F9FA',                   // 에러 로그 화이트 출력
 		padding: '15px',
-		borderRadius: '6px',
+		borderRadius: '4px',
+		border: '1px solid #2A2D30',
 		overflowX: 'auto',
 		whiteSpace: 'pre-wrap',
-		fontFamily: 'monospace',
-		fontSize: '14px'
+		fontFamily: 'Consolas, Monaco, monospace',
+		fontSize: '13px',
+		lineHeight: '1.5'
 	},
 	footer: {
-		marginTop: '15px',
-		fontSize: '14px',
+		marginTop: '20px',
+		fontSize: '13px',
 		color: '#718096',
 		display: 'flex',
 		flexDirection: 'column',
@@ -46,26 +53,26 @@ export const NineExceptionStyles = {
 	},
 	button: {
 		padding: '10px 16px',
-		background: '#E53E3E',
+		background: '#E53E3E',              // 버튼의 고유 아이덴티티 유지 (레드)
 		color: '#FFFFFF',
 		border: 'none',
-		borderRadius: '6px',
+		borderRadius: '4px',
 		cursor: 'pointer',
 		fontWeight: 'bold',
-		fontSize: '14px',
+		fontSize: '13px',
 		alignSelf: 'flex-start',
 		transition: 'background 0.2s',
+		fontFamily: 'sans-serif'             // 버튼 텍스트는 일반 폰트로 가독성 확보
 	}
 };
 
 // ==========================================
-// 2. 컴포넌트 본문
+// 2. 컴포넌트 본문 (기존 로직 유지)
 // ==========================================
 export class NineExceptionHook extends React.Component {
 
 	constructor(props) {
 		super(props);
-		// 관제탑 전송 상태 관리를 위해 정송 단계(idle, sending, success) 추가
 		this.state = { hasError: false, error: null, reportStatus: 'idle' };
 		this.lastPath = window.location.pathname;
 		this.handleLocationChange = this.handleLocationChange.bind(this);
@@ -79,7 +86,6 @@ export class NineExceptionHook extends React.Component {
 	componentDidCatch(error, errorInfo) {
 		console.error("🚨 [Nine-Library] 본문 렌더링 에러 포착:", error);
 
-		// 자동 복구 엔진 호출 제거 (버튼 클릭 시 처리로 이관)
 		if (this.props.onCatch) {
 			this.props.onCatch(error, errorInfo);
 		}
@@ -98,14 +104,13 @@ export class NineExceptionHook extends React.Component {
 	handleLocationChange() {
 		setTimeout(() => {
 			if (this.state.hasError && this.lastPath !== window.location.pathname) {
-				console.log("✨ [Nine-Library] 페이지 주소 변경 감지 -> 리액트 에러 상태 초기화");
+				console.log("[Nine-Library] 페이지 주소 변경 감지 -> 리액트 에러 상태 초기화");
 				this.lastPath = window.location.pathname;
 				this.setState({ hasError: false, error: null, reportStatus: 'idle' });
 			}
 		}, 10);
 	}
 
-	// 🚀 버튼 클릭 시 실행될 관제탑 수동 신고 핸들러
 	handleReport() {
 		if (this.state.reportStatus !== 'idle') return;
 
@@ -116,10 +121,10 @@ export class NineExceptionHook extends React.Component {
 			if (window.triggerAutoRecovery) {
 				window.triggerAutoRecovery(errorMessage);
 			} else {
-				console.warn("⚠️ [Nine-Library] window.triggerAutoRecovery 가 정의되지 않았습니다.");
+				console.warn("[Nine-Library] window.triggerAutoRecovery 가 정의되지 않았습니다.");
 			}
 			this.setState({ reportStatus: 'success' });
-		}, 500); // 사용자 경험(UX) 피드백용 0.5초 딜레이
+		}, 500);
 	}
 
 	render() {
@@ -129,23 +134,21 @@ export class NineExceptionHook extends React.Component {
 			}
 
 			const errorMessage = this.state.error?.message || String(this.state.error);
-			const customStyles = this.props.styles || {}; // props로 스타일 통째로 덮어쓰기 지원
+			const customStyles = this.props.styles || {};
 
-			// 버튼 텍스트 상태 제어
 			let buttonText = '🚀 관제탑에 에러 피드백 전송하기';
 			if (this.state.reportStatus === 'sending') buttonText = '⏳ 관제탑 연락 중...';
-			if (this.state.reportStatus === 'success') buttonText = '✅ 전송 완료! AI가 분석을 시작합니다.';
+			if (this.state.reportStatus === 'success') buttonText = '✅ 전송 완료! AI 분석 시작';
 
 			return React.createElement(
 				'div',
 				{
 					style: { ...NineExceptionStyles.container, ...customStyles.container, ...this.props.containerStyle }
 				},
-				React.createElement('h3', { style: { ...NineExceptionStyles.title, ...customStyles.title } }, '⚠️ 컴포넌트 빌드/렌더링 에러 감지'),
-				React.createElement('p', { style: { ...NineExceptionStyles.label, ...customStyles.label } }, '[에러 원인 로그]:'),
+				React.createElement('h3', { style: { ...NineExceptionStyles.title, ...customStyles.title } }, '🤖 [SYSTEM] COMPONENT RENDER ERROR DETECTED'),
+				React.createElement('p', { style: { ...NineExceptionStyles.label, ...customStyles.label } }, '$ cat error.log'),
 				React.createElement('pre', { style: { ...NineExceptionStyles.pre, ...customStyles.pre } }, errorMessage),
 
-				// 하단 안내 영역 및 수동 전송 버튼
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.footer, ...customStyles.footer } },
@@ -165,8 +168,8 @@ export class NineExceptionHook extends React.Component {
 					),
 					this.state.reportStatus === 'success' && React.createElement(
 						'div',
-						{ style: { color: '#4A5568', fontSize: '13px', marginTop: '5px' } },
-						'🔄 AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...'
+						{ style: { color: '#CBD5E0', fontSize: '13px', marginTop: '5px', fontStyle: 'italic' } },
+						'>> AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...'
 					)
 				)
 			);