@mandujs/core 0.9.8 → 0.9.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mandujs/core",
-  "version": "0.9.8",
+  "version": "0.9.10",
   "description": "Mandu Framework Core - Spec, Generator, Guard, Runtime",
   "type": "module",
   "main": "./src/index.ts",

package/src/client/Link.tsx

@@ -171,6 +171,10 @@ export interface NavLinkProps extends Omit<LinkProps, "className" | "style"> {
   style?:
     | React.CSSProperties
     | ((props: { isActive: boolean }) => React.CSSProperties);
+  /** 활성 상태일 때 적용할 style (style과 병합됨) */
+  activeStyle?: React.CSSProperties;
+  /** 활성 상태일 때 추가할 className */
+  activeClassName?: string;
   /** 정확히 일치해야 활성화 (기본: false) */
   exact?: boolean;
 }
@@ -179,6 +183,8 @@ export function NavLink({
   href,
   className,
   style,
+  activeStyle,
+  activeClassName,
   exact = false,
   ...rest
 }: NavLinkProps): React.ReactElement {
@@ -190,12 +196,24 @@ export function NavLink({
         : window.location.pathname.startsWith(href)
       : false;
 
-  const resolvedClassName =
+  // className 처리
+  let resolvedClassName =
     typeof className === "function" ? className({ isActive }) : className;
 
-  const resolvedStyle =
+  if (isActive && activeClassName) {
+    resolvedClassName = resolvedClassName
+      ? `${resolvedClassName} ${activeClassName}`
+      : activeClassName;
+  }
+
+  // style 처리
+  let resolvedStyle =
     typeof style === "function" ? style({ isActive }) : style;
 
+  if (isActive && activeStyle) {
+    resolvedStyle = { ...resolvedStyle, ...activeStyle };
+  }
+
   return (
     <Link
       href={href}

package/src/client/router.ts

@@ -264,11 +264,24 @@ function handlePopState(event: PopStateEvent): void {
   const state = event.state;
 
   if (state?.routeId) {
-    // 이미 방문한 페이지 - 데이터 다시 fetch
+    // Mandu로 방문한 페이지 - 데이터 다시 fetch
     navigate(window.location.pathname + window.location.search, {
       replace: true,
       scroll: false,
     });
+  } else {
+    // 직접 URL 입력 등으로 방문한 페이지 - 상태만 업데이트
+    const route = (window as any).__MANDU_ROUTE__;
+    setGlobalRouterState({
+      currentRoute: route ? {
+        id: route.id,
+        pattern: route.pattern,
+        params: route.params || {},
+      } : null,
+      loaderData: getGlobalRouterState().loaderData,
+      navigation: { state: "idle" },
+    });
+    notifyListeners();
   }
 }