@mandujs/core 0.9.3 → 0.9.4

package/src/client/Link.tsx

@@ -1,209 +1,209 @@
-/**
- * Mandu Link Component 🔗
- * Client-side 네비게이션을 위한 Link 컴포넌트
- */
-
-import React, {
-  type AnchorHTMLAttributes,
-  type MouseEvent,
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-} from "react";
-import { navigate, prefetch } from "./router";
-
-export interface LinkProps
-  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
-  /** 이동할 URL */
-  href: string;
-  /** history.replaceState 사용 여부 */
-  replace?: boolean;
-  /** 마우스 hover 시 prefetch 여부 */
-  prefetch?: boolean;
-  /** 스크롤 위치 복원 여부 (기본: true) */
-  scroll?: boolean;
-  /** 자식 요소 */
-  children?: ReactNode;
-}
-
-/**
- * Client-side 네비게이션 Link 컴포넌트
- *
- * @example
- * ```tsx
- * import { Link } from "@mandujs/core/client";
- *
- * // 기본 사용
- * <Link href="/about">About</Link>
- *
- * // Prefetch 활성화
- * <Link href="/users" prefetch>Users</Link>
- *
- * // Replace 모드 (뒤로가기 히스토리 없음)
- * <Link href="/login" replace>Login</Link>
- * ```
- */
-export function Link({
-  href,
-  replace = false,
-  prefetch: shouldPrefetch = false,
-  scroll = true,
-  children,
-  onClick,
-  onMouseEnter,
-  onFocus,
-  ...rest
-}: LinkProps): React.ReactElement {
-  const prefetchedRef = useRef(false);
-
-  // 클릭 핸들러
-  const handleClick = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      // 사용자 정의 onClick 먼저 실행
-      onClick?.(event);
-
-      // 기본 동작 방지 조건
-      if (
-        event.defaultPrevented ||
-        event.button !== 0 ||
-        event.metaKey ||
-        event.altKey ||
-        event.ctrlKey ||
-        event.shiftKey
-      ) {
-        return;
-      }
-
-      // 외부 링크 체크
-      try {
-        const url = new URL(href, window.location.origin);
-        if (url.origin !== window.location.origin) {
-          return; // 외부 링크는 기본 동작
-        }
-      } catch {
-        return;
-      }
-
-      // Client-side 네비게이션
-      event.preventDefault();
-      navigate(href, { replace, scroll });
-    },
-    [href, replace, scroll, onClick]
-  );
-
-  // Prefetch 실행
-  const doPrefetch = useCallback(() => {
-    if (!shouldPrefetch || prefetchedRef.current) return;
-
-    try {
-      const url = new URL(href, window.location.origin);
-      if (url.origin === window.location.origin) {
-        prefetch(href);
-        prefetchedRef.current = true;
-      }
-    } catch {
-      // 무시
-    }
-  }, [href, shouldPrefetch]);
-
-  // 마우스 hover 핸들러
-  const handleMouseEnter = useCallback(
-    (event: MouseEvent<HTMLAnchorElement>) => {
-      onMouseEnter?.(event);
-      doPrefetch();
-    },
-    [onMouseEnter, doPrefetch]
-  );
-
-  // 포커스 핸들러 (키보드 네비게이션)
-  const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLAnchorElement>) => {
-      onFocus?.(event);
-      doPrefetch();
-    },
-    [onFocus, doPrefetch]
-  );
-
-  // Viewport 진입 시 prefetch (IntersectionObserver)
-  useEffect(() => {
-    if (!shouldPrefetch || typeof IntersectionObserver === "undefined") {
-      return;
-    }
-
-    // ref가 없으면 무시 (SSR)
-    return;
-  }, [shouldPrefetch]);
-
-  return (
-    <a
-      href={href}
-      onClick={handleClick}
-      onMouseEnter={handleMouseEnter}
-      onFocus={handleFocus}
-      data-mandu-link=""
-      {...rest}
-    >
-      {children}
-    </a>
-  );
-}
-
-/**
- * NavLink - 현재 경로와 일치할 때 활성 스타일 적용
- *
- * @example
- * ```tsx
- * import { NavLink } from "@mandujs/core/client";
- *
- * <NavLink
- *   href="/about"
- *   className={({ isActive }) => isActive ? "active" : ""}
- * >
- *   About
- * </NavLink>
- * ```
- */
-export interface NavLinkProps extends Omit<LinkProps, "className" | "style"> {
-  /** 활성 상태에 따른 className */
-  className?: string | ((props: { isActive: boolean }) => string);
-  /** 활성 상태에 따른 style */
-  style?:
-    | React.CSSProperties
-    | ((props: { isActive: boolean }) => React.CSSProperties);
-  /** 정확히 일치해야 활성화 (기본: false) */
-  exact?: boolean;
-}
-
-export function NavLink({
-  href,
-  className,
-  style,
-  exact = false,
-  ...rest
-}: NavLinkProps): React.ReactElement {
-  // 현재 경로와 비교
-  const isActive =
-    typeof window !== "undefined"
-      ? exact
-        ? window.location.pathname === href
-        : window.location.pathname.startsWith(href)
-      : false;
-
-  const resolvedClassName =
-    typeof className === "function" ? className({ isActive }) : className;
-
-  const resolvedStyle =
-    typeof style === "function" ? style({ isActive }) : style;
-
-  return (
-    <Link
-      href={href}
-      className={resolvedClassName}
-      style={resolvedStyle}
-      {...rest}
-    />
-  );
-}
-
-export default Link;
+/**
+ * Mandu Link Component 🔗
+ * Client-side 네비게이션을 위한 Link 컴포넌트
+ */
+
+import React, {
+  type AnchorHTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import { navigate, prefetch } from "./router";
+
+export interface LinkProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  /** 이동할 URL */
+  href: string;
+  /** history.replaceState 사용 여부 */
+  replace?: boolean;
+  /** 마우스 hover 시 prefetch 여부 */
+  prefetch?: boolean;
+  /** 스크롤 위치 복원 여부 (기본: true) */
+  scroll?: boolean;
+  /** 자식 요소 */
+  children?: ReactNode;
+}
+
+/**
+ * Client-side 네비게이션 Link 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * import { Link } from "@mandujs/core/client";
+ *
+ * // 기본 사용
+ * <Link href="/about">About</Link>
+ *
+ * // Prefetch 활성화
+ * <Link href="/users" prefetch>Users</Link>
+ *
+ * // Replace 모드 (뒤로가기 히스토리 없음)
+ * <Link href="/login" replace>Login</Link>
+ * ```
+ */
+export function Link({
+  href,
+  replace = false,
+  prefetch: shouldPrefetch = false,
+  scroll = true,
+  children,
+  onClick,
+  onMouseEnter,
+  onFocus,
+  ...rest
+}: LinkProps): React.ReactElement {
+  const prefetchedRef = useRef(false);
+
+  // 클릭 핸들러
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      // 사용자 정의 onClick 먼저 실행
+      onClick?.(event);
+
+      // 기본 동작 방지 조건
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.shiftKey
+      ) {
+        return;
+      }
+
+      // 외부 링크 체크
+      try {
+        const url = new URL(href, window.location.origin);
+        if (url.origin !== window.location.origin) {
+          return; // 외부 링크는 기본 동작
+        }
+      } catch {
+        return;
+      }
+
+      // Client-side 네비게이션
+      event.preventDefault();
+      navigate(href, { replace, scroll });
+    },
+    [href, replace, scroll, onClick]
+  );
+
+  // Prefetch 실행
+  const doPrefetch = useCallback(() => {
+    if (!shouldPrefetch || prefetchedRef.current) return;
+
+    try {
+      const url = new URL(href, window.location.origin);
+      if (url.origin === window.location.origin) {
+        prefetch(href);
+        prefetchedRef.current = true;
+      }
+    } catch {
+      // 무시
+    }
+  }, [href, shouldPrefetch]);
+
+  // 마우스 hover 핸들러
+  const handleMouseEnter = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      onMouseEnter?.(event);
+      doPrefetch();
+    },
+    [onMouseEnter, doPrefetch]
+  );
+
+  // 포커스 핸들러 (키보드 네비게이션)
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLAnchorElement>) => {
+      onFocus?.(event);
+      doPrefetch();
+    },
+    [onFocus, doPrefetch]
+  );
+
+  // Viewport 진입 시 prefetch (IntersectionObserver)
+  useEffect(() => {
+    if (!shouldPrefetch || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+
+    // ref가 없으면 무시 (SSR)
+    return;
+  }, [shouldPrefetch]);
+
+  return (
+    <a
+      href={href}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onFocus={handleFocus}
+      data-mandu-link=""
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+/**
+ * NavLink - 현재 경로와 일치할 때 활성 스타일 적용
+ *
+ * @example
+ * ```tsx
+ * import { NavLink } from "@mandujs/core/client";
+ *
+ * <NavLink
+ *   href="/about"
+ *   className={({ isActive }) => isActive ? "active" : ""}
+ * >
+ *   About
+ * </NavLink>
+ * ```
+ */
+export interface NavLinkProps extends Omit<LinkProps, "className" | "style"> {
+  /** 활성 상태에 따른 className */
+  className?: string | ((props: { isActive: boolean }) => string);
+  /** 활성 상태에 따른 style */
+  style?:
+    | React.CSSProperties
+    | ((props: { isActive: boolean }) => React.CSSProperties);
+  /** 정확히 일치해야 활성화 (기본: false) */
+  exact?: boolean;
+}
+
+export function NavLink({
+  href,
+  className,
+  style,
+  exact = false,
+  ...rest
+}: NavLinkProps): React.ReactElement {
+  // 현재 경로와 비교
+  const isActive =
+    typeof window !== "undefined"
+      ? exact
+        ? window.location.pathname === href
+        : window.location.pathname.startsWith(href)
+      : false;
+
+  const resolvedClassName =
+    typeof className === "function" ? className({ isActive }) : className;
+
+  const resolvedStyle =
+    typeof style === "function" ? style({ isActive }) : style;
+
+  return (
+    <Link
+      href={href}
+      className={resolvedClassName}
+      style={resolvedStyle}
+      {...rest}
+    />
+  );
+}
+
+export default Link;