@nine-lab/nine-mu 0.1.382 → 0.1.384

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.382",
+  "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,40 +205,52 @@ 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([]);
 
-	// 🎯 AI가 파일을 수정하면 런타임에 실시간 반영되도록 동적 fetch 처리
-	useEffect(() => {
+	const fetchRoutes = async () => {
 		if (!menuUrl) return;
-
-		const fetchRoutes = async () => {
-			try {
-				// 캐시 버스팅(?t=...)을 추가하면 AI가 수정했을 때 브라우저 캐시를 타지 않고 즉시 반영됩니다.
-				const response = await fetch(`${menuUrl}?t=${Date.now()}`);
-				if (response.ok) {
-					const data = await response.json();
-					setMenuData(data);
-				}
-			} catch (e) {
-				console.error("[Nine-Library] 런타임 메뉴 동기화 실패:", e);
+		try {
+			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] routes.json 변경 감지 -> 전체 시스템 동기화");
+					return data;
+				});
 			}
-		};
+		} catch (e) {
+			console.error("[Nine-Library] 런타임 메뉴 동기화 실패:", e);
+		}
+	};
 
+	useEffect(() => {
 		fetchRoutes();
+		window.addEventListener('popstate', fetchRoutes);
+		document.addEventListener('click', fetchRoutes, true);
+		const intervalId = setInterval(fetchRoutes, 3000);
 
-		// 필요시: 주소창 popstate나 특정 복구 이벤트 시점에 재호출하도록 트리거 연동 가능
+		return () => {
+			window.removeEventListener('popstate', fetchRoutes);
+			document.removeEventListener('click', fetchRoutes, true);
+			clearInterval(intervalId);
+		};
 	}, [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...') },