@nine-lab/nine-mu 0.1.389 → 0.1.391

package/package.json

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

package/src/components/hook/NineHook.js

@@ -1,17 +1,15 @@
-import React, { createContext, useState, useContext, lazy, Suspense, useEffect } from 'react';
+import React, { createContext, useEffect, useState, useContext, lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 // ==========================================
-// 1. 내부 기능 A: ScreenContext 및 전역 공급자 (수출형)
+// 1. 내부 기능 A: ScreenContext 및 구조
 // ==========================================
 const ScreenContext = createContext();
 export const useScreen = () => useContext(ScreenContext);
 
-// 🎯 기존 ScreenProvider를 이름 변경 및 전역 동적 데이터 바인딩 셋업
-export const NineScreenProvider = ({ children }) => {
+const ScreenProvider = ({ children }) => {
 	const [activeView, setActiveView] = useState('list-wrapper');
 	const [selectedData, setSelectedData] = useState(null);
-	const [menuData, setMenuData] = useState([]); // 💡 데이터 통신 허브를 여기로 단일화
 
 	const goto = (selector, data) => {
 		setActiveView(selector);
@@ -20,7 +18,7 @@ export const NineScreenProvider = ({ children }) => {
 
 	return React.createElement(
 		ScreenContext.Provider,
-		{ value: { activeView, selectedData, goto, menuData, setMenuData } }, // 🎯 데이터 변경 권한까지 자식들에게 공유
+		{ value: { activeView, selectedData, goto } },
 		children
 	);
 };
@@ -35,9 +33,14 @@ const Default404 = () => {
 };
 
 const createDynamicRoutes = (menuData, projectViews, Custom404) => {
+	// 기본 404 및 홈 설정
 	const lazyLoad = (viewPath) => {
 		const importer = projectViews[viewPath];
-		if (!importer) return Custom404 ? Custom404 : Default404;
+
+		// 🎯 [404 해결 포인트] 사용자가 등록한 404가 있으면 그걸 쓰고, 없으면 기본 내장 404를 띄웁니다.
+		if (!importer) {
+			return Custom404 ? Custom404 : Default404;
+		}
 		return lazy(() => importer());
 	};
 
@@ -63,6 +66,7 @@ const createDynamicRoutes = (menuData, projectViews, Custom404) => {
 				const sanitizedParts = pathParts.map(part => part.replace(/-/g, "_"));
 				const fullFolderPath = sanitizedParts.join("/");
 
+				// 사용자 프로젝트 루트 기준 상대 경로 매핑
 				const componentPath = `./views/${fullFolderPath}/${pascalName}.jsx`;
 
 				dynamicRoutes.push({
@@ -73,6 +77,7 @@ const createDynamicRoutes = (menuData, projectViews, Custom404) => {
 		});
 	}
 
+	// 🎯 [404 해결 포인트] 정의되지 않은 모든 주소(*)는 라우터 레벨에서 404 매핑 컴포넌트로 리다이렉트
 	dynamicRoutes.push({ path: "*", Component: Custom404 ? Custom404 : Default404 });
 	return dynamicRoutes;
 };
@@ -197,76 +202,36 @@ class NineExceptionHook extends React.Component {
 	}
 }
 
-// ==========================================
-// 🎯 3. 최종 완결: 순수 라우터 및 에러 실드 역할만 수행
-// ==========================================
-export function NineHook({ menuUrl, views, error404, onCatch, fallback, styles, containerStyle }) {
-	// 🎯 상위 최상단 NineScreenProvider가 뿌려주는 주파수 수신
-	const context = useContext(ScreenContext);
-	const menuData = context ? context.menuData : [];
-	const setMenuData = context ? context.setMenuData : null;
-
-	const [localMenuData, setLocalMenuData] = useState([]);
-
-	const fetchRoutes = async () => {
-		if (!menuUrl) return;
-		try {
-			const response = await fetch(`${menuUrl}?t=${Date.now()}`);
-			if (response.ok) {
-				const data = await response.json();
-
-				// 🎯 상위 Context가 존재하면 거기를 갱신시켜 외부 LeftMenu까지 연쇄 반응 트리거
-				if (setMenuData) {
-					setMenuData((prev) => {
-						if (JSON.stringify(prev) === JSON.stringify(data)) return prev;
-						console.log("🔥 [Nine-Library] 최상단 NineScreenProvider 데이터 무선 동기화");
-						return data;
-					});
-				} else {
-					setLocalMenuData((prev) => {
-						if (JSON.stringify(prev) === JSON.stringify(data)) return prev;
-						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);
-
-		return () => {
-			window.removeEventListener('popstate', fetchRoutes);
-			document.removeEventListener('click', fetchRoutes, true);
-			clearInterval(intervalId);
-		};
-	}, [menuUrl]);
-
-	const targetData = setMenuData ? menuData : localMenuData;
-	const dynamicRoutes = createDynamicRoutes(targetData, views, error404);
+export function NineHook({ children, menuData, views, error404, onCatch, fallback, styles, containerStyle }) {
+	// 🎯 꼼수 완전 제거: 오직 주입받은 menuData가 변경될 때만 리액트가 라우터를 동적 재구성
+	const dynamicRoutes = createDynamicRoutes(menuData, views, error404);
 
 	return React.createElement(
-		NineExceptionHook,
-		{ onCatch, fallback, styles, containerStyle },
+		ScreenProvider,
+		{ menuData },
 		React.createElement(
-			Suspense,
-			{ fallback: React.createElement('div', { style: { padding: '25px', color: '#666', fontFamily: 'monospace' } }, '>> Loading component matrix...') },
-			React.createElement(
-				Routes,
-				null,
-				dynamicRoutes.map((route) =>
-					React.createElement(Route, {
-						key: route.path,
-						path: route.path,
-						element: React.createElement(route.Component, { key: route.path })
-					})
+			NineExceptionHook,
+			{ onCatch, fallback, styles, containerStyle },
+
+			// LeftMenu 레이아웃 자식 출력 (부팅 딜레이 없이 즉시 렌더링)
+			children,
+
+			// 데이터가 존재할 때 정석대로 라우터 구역 활성화
+			menuData && menuData.length > 0 ? React.createElement(
+				Suspense,
+				{ fallback: React.createElement('div', { style: { padding: '25px', color: '#666', fontFamily: 'monospace' } }, '>> Loading component matrix...') },
+				React.createElement(
+					Routes,
+					null,
+					dynamicRoutes.map((route) =>
+						React.createElement(Route, {
+							key: route.path,
+							path: route.path,
+							element: React.createElement(route.Component, { key: route.path })
+						})
+					)
 				)
-			)
+			) : React.createElement('div', { style: { padding: '25px', color: '#444', fontFamily: 'monospace' } }, '>> Database route matrix empty.')
 		)
 	);
 }