@nine-lab/nine-mu 0.1.388 → 0.1.390

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.388",
+  "version": "0.1.390",
   "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;
 };
@@ -198,15 +203,13 @@ class NineExceptionHook extends React.Component {
 }
 
 // ==========================================
-// 🎯 3. 최종 완결: 순수 라우터 및 에러 실드 역할만 수행
+// 🎯 3. 핵심: 외부 주입형 404 라우팅 기능 탑재
 // ==========================================
-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([]);
+// ==========================================
+// 🎯 3. 최종 완결: 자식 컴포넌트(children)를 수용하는 구조로 변경
+// ==========================================
+export function NineHook({ children, menuUrl, views, error404, onCatch, fallback, styles, containerStyle }) {
+	const [menuData, setMenuData] = useState([]);
 
 	const fetchRoutes = async () => {
 		if (!menuUrl) return;
@@ -214,20 +217,11 @@ export function NineHook({ menuUrl, views, error404, onCatch, fallback, styles,
 			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;
-					});
-				}
+				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);
@@ -247,24 +241,37 @@ export function NineHook({ menuUrl, views, error404, onCatch, fallback, styles,
 		};
 	}, [menuUrl]);
 
-	const targetData = setMenuData ? menuData : localMenuData;
-	const dynamicRoutes = createDynamicRoutes(targetData, views, error404);
+	// 🎯 [핵심 교정]: 최초 fetch가 완료되기 전(데이터가 없을 때)에는 렌더링을 잠시 멈춥니다.
+	if (!menuData || menuData.length === 0) {
+		return React.createElement(
+			'div',
+			{ style: { padding: '25px', color: '#666', fontFamily: 'monospace', background: '#121314', minHeight: '100vh' } },
+			'>> Initializing menu matrix telemetry...'
+		);
+	}
+
+	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...') },
+			NineExceptionHook,
+			{ onCatch, fallback, styles, containerStyle },
+			children,
 			React.createElement(
-				Routes,
-				null,
-				dynamicRoutes.map((route) =>
-					React.createElement(Route, {
-						key: route.path,
-						path: route.path,
-						element: React.createElement(route.Component, { key: route.path })
-					})
+				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 })
+						})
+					)
 				)
 			)
 		)