@nine-lab/nine-mu 0.1.373 → 0.1.375

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.373",
+  "version": "0.1.375",
   "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 } from 'react';
+import React, { createContext, useState, useContext, lazy } from 'react';
 
 // ==========================================
 // 1. 내부 기능 A: ScreenContext 및 구조
@@ -22,6 +22,52 @@ const ScreenProvider = ({ children }) => {
 	);
 };
 
+const createDynamicRoutes = (menuData, projectViews) => {
+	// 기본 404 및 홈 설정
+	const lazyLoad = (viewPath) => {
+		const importer = projectViews[viewPath];
+		// 404 파일은 라이브러리 내부에 두거나 주입받음
+		//if (!importer) return lazy(() => import('./Error404.jsx').catch(() => ({ default: () => React.createElement('div', null, '404 Not Found') })));
+		return lazy(() => importer());
+	};
+
+	const dynamicRoutes = [
+		{ path: "/", Component: lazyLoad("./views/admin/Home.jsx") },
+		{ path: "/admin", Component: lazyLoad("./views/admin/Home.jsx") },
+	];
+
+	if (menuData && Array.isArray(menuData)) {
+		menuData.forEach((menu) => {
+			if (menu.level === 2 && menu.path) {
+				const cleanPath = menu.path.replace(/^\/+|\/+$/g, "");
+				const pathParts = cleanPath.split("/");
+				const len = pathParts.length;
+
+				let combinedName = "";
+				const startIdx = Math.max(0, len - 2);
+				for (let i = startIdx; i < len; i++) {
+					const words = pathParts[i].toLowerCase().split(/[-_]/).filter(Boolean);
+					combinedName += words.map(w => w.charAt(0).toUpperCase() + w.slice(1)).join("");
+				}
+				const pascalName = combinedName || "GeneratedComponent";
+				const sanitizedParts = pathParts.map(part => part.replace(/-/g, "_"));
+				const fullFolderPath = sanitizedParts.join("/");
+
+				// 사용자 프로젝트 루트 기준 상대 경로 매핑
+				const componentPath = `./views/${fullFolderPath}/${pascalName}.jsx`;
+
+				dynamicRoutes.push({
+					path: menu.path,
+					Component: lazyLoad(componentPath)
+				});
+			}
+		});
+	}
+
+	//dynamicRoutes.push({ path: "*", Component: lazyLoad("./frame/Error404.jsx") });
+	return dynamicRoutes;
+};
+
 // ==========================================
 // 2. 내부 기능 B: 에러 바운더리 및 CSS 스타일
 // ==========================================
@@ -142,16 +188,32 @@ class NineExceptionHook extends React.Component {
 	}
 }
 
-export function NineHook({ children, onCatch, fallback, styles, containerStyle }) {
-	// 사용자는 무조건 이거 하나만 쓰면 끝!
-	// 내부적으로 상태(ScreenProvider)를 먼저 주입하고, 그 안에서 에러(NineExceptionHook)가 자식들을 감싸안아 보호합니다.
+export function NineHook({ menuData, views, onCatch, fallback, styles, containerStyle }) {
+	// 내부에서 자동으로 라우트 배열 생성
+	const dynamicRoutes = createDynamicRoutes(menuData, views);
+
 	return React.createElement(
 		ScreenProvider,
 		null,
 		React.createElement(
 			NineExceptionHook,
 			{ onCatch, fallback, styles, containerStyle },
-			children
+			// 💡 Suspense 로딩도 라이브러리가 책임지고 터미널 감성으로 처리
+			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 })
+						})
+					)
+				)
+			)
 		)
 	);
 }