@nine-lab/nine-mu 0.1.381 → 0.1.383

package/package.json

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

package/src/components/hook/NineHook.js

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext, lazy, Suspense } from 'react';
+import React, { createContext, useEffect, useState, useContext, lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 // ==========================================
@@ -208,29 +208,47 @@ class NineExceptionHook extends React.Component {
 export function NineHook({ menuUrl, views, error404, onCatch, fallback, styles, containerStyle }) {
 	const [menuData, setMenuData] = useState([]);
 
-	// 🎯 AI가 파일을 수정하면 런타임에 실시간 반영되도록 동적 fetch 처리
-	useEffect(() => {
+	// 🎯 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();
 
-		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);
+				// 💡 기존 데이터와 새로 가져온 데이터가 다를 때만 상태를 업데이트하여 무한 루프 방지
+				setMenuData((prev) => {
+					if (JSON.stringify(prev) === JSON.stringify(data)) return prev;
+					console.log("🔥 [Nine-Library] AI에 의한 routes.json 변경 감지 -> 메뉴 및 라우터 실시간 동기화 완료");
+					return data;
+				});
 			}
-		};
+		} catch (e) {
+			console.error("[Nine-Library] 런타임 메뉴 동기화 실패:", e);
+		}
+	};
 
+	// 🎯 2. 실시간 반응형 트리거 엔진 체인
+	useEffect(() => {
+		// 최초 로드 시 실행
 		fetchRoutes();
 
-		// 필요시: 주소창 popstate나 특정 복구 이벤트 시점에 재호출하도록 트리거 연동 가능
-	}, [menuUrl]);
+		// 💡 트리거 A: AI가 코드를 고치고 주소를 바꿨을 때(popstate/click) 즉시 동기화
+		window.addEventListener('popstate', fetchRoutes);
+		document.addEventListener('click', fetchRoutes, true);
+
+		// 💡 트리거 B: 사용자가 가만히 있어도 AI가 백엔드에서 파일을 수정하면 3초마다 자동 체크 (폴링)
+		const intervalId = setInterval(fetchRoutes, 3000);
+
+		return () => {
+			window.removeEventListener('popstate', fetchRoutes);
+			document.removeEventListener('click', fetchRoutes, true);
+			clearInterval(intervalId);
+		};
+	}, [menuUrl]); // menuUrl이 주입되면 이벤트와 타이머가 안전하게 바인딩됩니다.
 
-	// 데이터가 로드되기 전에는 가볍게 로딩 상태를 보여주고, 완료되면 라우터 구축
+	// 데이터가 로드되고 정제되면 동적 라우트 매트릭스 생성
 	const dynamicRoutes = createDynamicRoutes(menuData, views, error404);
 
 	return React.createElement(