@nine-lab/nine-mu 0.1.347 → 0.1.348

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -1,25 +1,85 @@
 import React from 'react';
 
+// ==========================================
+// 1. 외부에서 수정 및 관리가 용이하도록 CSS 분리
+// ==========================================
+export const NineExceptionStyles = {
+	container: {
+		padding: '30px',
+		margin: '20px',
+		background: '#FFF5F5',
+		border: '1px solid #FEB2B2',
+		borderRadius: '8px',
+		fontFamily: 'sans-serif',
+		textAlign: 'left'
+	},
+	title: {
+		color: '#C53030',
+		marginTop: 0,
+		fontSize: '18px',
+		display: 'flex',
+		alignItems: 'center',
+		gap: '8px'
+	},
+	label: {
+		margin: '10px 0 5px 0',
+		fontWeight: 'bold',
+		color: '#4A5568'
+	},
+	pre: {
+		background: '#1A202C',
+		color: '#EDF2F7',
+		padding: '15px',
+		borderRadius: '6px',
+		overflowX: 'auto',
+		whiteSpace: 'pre-wrap',
+		fontFamily: 'monospace',
+		fontSize: '14px'
+	},
+	footer: {
+		marginTop: '15px',
+		fontSize: '14px',
+		color: '#718096',
+		display: 'flex',
+		flexDirection: 'column',
+		gap: '10px'
+	},
+	button: {
+		padding: '10px 16px',
+		background: '#E53E3E',
+		color: '#FFFFFF',
+		border: 'none',
+		borderRadius: '6px',
+		cursor: 'pointer',
+		fontWeight: 'bold',
+		fontSize: '14px',
+		alignSelf: 'flex-start',
+		transition: 'background 0.2s',
+	}
+};
+
+// ==========================================
+// 2. 컴포넌트 본문
+// ==========================================
 export class NineExceptionHook extends React.Component {
 
 	constructor(props) {
 		super(props);
-		this.state = { hasError: false, error: null };
+		// 관제탑 전송 상태 관리를 위해 정송 단계(idle, sending, success) 추가
+		this.state = { hasError: false, error: null, reportStatus: 'idle' };
 		this.lastPath = window.location.pathname;
 		this.handleLocationChange = this.handleLocationChange.bind(this);
+		this.handleReport = this.handleReport.bind(this);
 	}
 
 	static getDerivedStateFromError(error) {
-		return { hasError: true, error };
+		return { hasError: true, error, reportStatus: 'idle' };
 	}
 
 	componentDidCatch(error, errorInfo) {
 		console.error("🚨 [Nine-Library] 본문 렌더링 에러 포착:", error);
 
-		if (window.triggerAutoRecovery) {
-			window.triggerAutoRecovery(error.message || String(error));
-		}
-
+		// 자동 복구 엔진 호출 제거 (버튼 클릭 시 처리로 이관)
 		if (this.props.onCatch) {
 			this.props.onCatch(error, errorInfo);
 		}
@@ -40,11 +100,28 @@ export class NineExceptionHook extends React.Component {
 			if (this.state.hasError && this.lastPath !== window.location.pathname) {
 				console.log("✨ [Nine-Library] 페이지 주소 변경 감지 -> 리액트 에러 상태 초기화");
 				this.lastPath = window.location.pathname;
-				this.setState({ hasError: false, error: null });
+				this.setState({ hasError: false, error: null, reportStatus: 'idle' });
 			}
 		}, 10);
 	}
 
+	// 🚀 버튼 클릭 시 실행될 관제탑 수동 신고 핸들러
+	handleReport() {
+		if (this.state.reportStatus !== 'idle') return;
+
+		this.setState({ reportStatus: 'sending' });
+		const errorMessage = this.state.error?.message || String(this.state.error);
+
+		setTimeout(() => {
+			if (window.triggerAutoRecovery) {
+				window.triggerAutoRecovery(errorMessage);
+			} else {
+				console.warn("⚠️ [Nine-Library] window.triggerAutoRecovery 가 정의되지 않았습니다.");
+			}
+			this.setState({ reportStatus: 'success' });
+		}, 500); // 사용자 경험(UX) 피드백용 0.5초 딜레이
+	}
+
 	render() {
 		if (this.state.hasError) {
 			if (this.props.fallback) {
@@ -52,36 +129,46 @@ export class NineExceptionHook extends React.Component {
 			}
 
 			const errorMessage = this.state.error?.message || String(this.state.error);
+			const customStyles = this.props.styles || {}; // props로 스타일 통째로 덮어쓰기 지원
+
+			// 버튼 텍스트 상태 제어
+			let buttonText = '🚀 관제탑에 에러 피드백 전송하기';
+			if (this.state.reportStatus === 'sending') buttonText = '⏳ 관제탑 연락 중...';
+			if (this.state.reportStatus === 'success') buttonText = '✅ 전송 완료! AI가 분석을 시작합니다.';
 
-			// ⭐ Vite 빌드 통과를 위해 순수 자바스크립트 함수(React.createElement)로 변경
 			return React.createElement(
 				'div',
 				{
-					style: {
-						padding: '30px',
-						margin: '20px',
-						background: '#FFF5F5',
-						border: '1px solid #FEB2B2',
-						borderRadius: '8px',
-						fontFamily: 'sans-serif',
-						textAlign: 'left',
-						...this.props.containerStyle
-					}
+					style: { ...NineExceptionStyles.container, ...customStyles.container, ...this.props.containerStyle }
 				},
-				React.createElement('h3', { style: { color: '#C53030', marginTop: 0, fontSize: '18px' } }, '⚠️ 컴포넌트 빌드/렌더링 에러 감지'),
-				React.createElement('p', { style: { margin: '10px 0 5px 0', fontWeight: 'bold', color: '#4A5568' } }, '[에러 원인 로그]:'),
-				React.createElement('pre', {
-					style: {
-						background: '#1A202C',
-						color: '#EDF2F7',
-						padding: '15px',
-						borderRadius: '6px',
-						overflowX: 'auto',
-						whiteSpace: 'pre-wrap',
-						fontFamily: 'monospace'
-					}
-				}, errorMessage),
-				React.createElement('div', { style: { marginTop: '15px', fontSize: '14px', color: '#718096' } }, '🔄 에러 로그가 관제탑으로 자동 피드백되었습니다. AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
+				React.createElement('h3', { style: { ...NineExceptionStyles.title, ...customStyles.title } }, '⚠️ 컴포넌트 빌드/렌더링 에러 감지'),
+				React.createElement('p', { style: { ...NineExceptionStyles.label, ...customStyles.label } }, '[에러 원인 로그]:'),
+				React.createElement('pre', { style: { ...NineExceptionStyles.pre, ...customStyles.pre } }, errorMessage),
+
+				// 하단 안내 영역 및 수동 전송 버튼
+				React.createElement(
+					'div',
+					{ style: { ...NineExceptionStyles.footer, ...customStyles.footer } },
+					React.createElement(
+						'button',
+						{
+							style: {
+								...NineExceptionStyles.button,
+								...customStyles.button,
+								backgroundColor: this.state.reportStatus === 'success' ? '#38A169' : (this.state.reportStatus === 'sending' ? '#A0AEC0' : '#E53E3E'),
+								cursor: this.state.reportStatus === 'idle' ? 'pointer' : 'not-allowed'
+							},
+							disabled: this.state.reportStatus !== 'idle',
+							onClick: this.handleReport
+						},
+						buttonText
+					),
+					this.state.reportStatus === 'success' && React.createElement(
+						'div',
+						{ style: { color: '#4A5568', fontSize: '13px', marginTop: '5px' } },
+						'🔄 AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...'
+					)
+				)
 			);
 		}