@nine-lab/nine-mu 0.1.383 → 0.1.384

package/package.json

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

package/src/components/hook/NineHook.js

@@ -205,22 +205,21 @@ class NineExceptionHook extends React.Component {
 // ==========================================
 // 🎯 3. 핵심: 외부 주입형 404 라우팅 기능 탑재
 // ==========================================
-export function NineHook({ menuUrl, views, error404, onCatch, fallback, styles, containerStyle }) {
+// ==========================================
+// 🎯 3. 최종 완결: 자식 컴포넌트(children)를 수용하는 구조로 변경
+// ==========================================
+export function NineHook({ children, menuUrl, views, error404, onCatch, fallback, styles, containerStyle }) {
 	const [menuData, setMenuData] = useState([]);
 
-	// 🎯 1. 런타임 동적 fetch 함수 분리
 	const fetchRoutes = async () => {
 		if (!menuUrl) return;
 		try {
-			// 타임스탬프(?t=...)를 주어 브라우저 캐시를 무조건 파괴하고 하드디스크의 날것 파일 내용을 가져옴
 			const response = await fetch(`${menuUrl}?t=${Date.now()}`);
 			if (response.ok) {
 				const data = await response.json();
-
-				// 💡 기존 데이터와 새로 가져온 데이터가 다를 때만 상태를 업데이트하여 무한 루프 방지
 				setMenuData((prev) => {
 					if (JSON.stringify(prev) === JSON.stringify(data)) return prev;
-					console.log("🔥 [Nine-Library] AI에 의한 routes.json 변경 감지 -> 메뉴 및 라우터 실시간 동기화 완료");
+					console.log("🔥 [Nine-Library] routes.json 변경 감지 -> 전체 시스템 동기화");
 					return data;
 				});
 			}
@@ -229,16 +228,10 @@ export function NineHook({ menuUrl, views, error404, onCatch, fallback, styles,
 		}
 	};
 
-	// 🎯 2. 실시간 반응형 트리거 엔진 체인
 	useEffect(() => {
-		// 최초 로드 시 실행
 		fetchRoutes();
-
-		// 💡 트리거 A: AI가 코드를 고치고 주소를 바꿨을 때(popstate/click) 즉시 동기화
 		window.addEventListener('popstate', fetchRoutes);
 		document.addEventListener('click', fetchRoutes, true);
-
-		// 💡 트리거 B: 사용자가 가만히 있어도 AI가 백엔드에서 파일을 수정하면 3초마다 자동 체크 (폴링)
 		const intervalId = setInterval(fetchRoutes, 3000);
 
 		return () => {
@@ -246,17 +239,18 @@ export function NineHook({ menuUrl, views, error404, onCatch, fallback, styles,
 			document.removeEventListener('click', fetchRoutes, true);
 			clearInterval(intervalId);
 		};
-	}, [menuUrl]); // menuUrl이 주입되면 이벤트와 타이머가 안전하게 바인딩됩니다.
+	}, [menuUrl]);
 
-	// 데이터가 로드되고 정제되면 동적 라우트 매트릭스 생성
 	const dynamicRoutes = createDynamicRoutes(menuData, views, error404);
 
 	return React.createElement(
 		ScreenProvider,
-		{ menuData },
+		{ menuData }, // 🎯 이 전역 컨텍스트 공급자가 감싸는 범위를 대폭 넓힙니다.
 		React.createElement(
 			NineExceptionHook,
 			{ onCatch, fallback, styles, containerStyle },
+			// 💡 [레이아웃 유연성 확보]: Routes 바깥의 컴포넌트(예: LeftMenu)가 있다면 여기에 먼저 뿌려줍니다.
+			children,
 			React.createElement(
 				Suspense,
 				{ fallback: React.createElement('div', { style: { padding: '25px', color: '#666', fontFamily: 'monospace' } }, '>> Loading component matrix...') },