chore: LinkHandler 분리

Author: MU-Software

packages/common/src/components/link_handler.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+const EXTERNAL_PROTOCOLS = ["http://", "https://", "mailto:", "tel:"];
+
+export const LinkHandler: React.FC<React.PropsWithChildren<{ href: string }>> = ({ href, ...props }) => {
+  // If the href starts with "http" or "https", it's an external link
+  if (EXTERNAL_PROTOCOLS.some((protocol) => href.startsWith(protocol)))
+    return <a href={href} target="_blank" rel="noopener noreferrer" {...props} />;
+
+  return <Link to={href} {...props} />;
+};

packages/common/src/components/mdx.tsx

@@ -15,12 +15,12 @@ import type { MDXComponents } from "mdx/types";
 import muiComponents from "mui-mdx-components";
 import * as React from "react";
 import * as runtime from "react/jsx-runtime";
-import { Link } from "react-router-dom";
 import remarkGfm from "remark-gfm";
 import * as R from "remeda";
 
 import Hooks from "../hooks";
 import { ErrorFallback } from "./error_handler";
+import { LinkHandler } from "./link_handler";
 import { rtrim } from "../utils/string";
 import { StyledDivider } from "./mdx_components/styled_divider";
 import { SubContentContainer } from "./mdx_components/sub_content_container";
@@ -47,16 +47,6 @@ const REGISTERED_KEYWORDS = [
   "}",
 ];
 
-const EXTERNAL_PROTOCOLS = ["http://", "https://", "mailto:", "tel:"];
-
-const LinkHandler: React.FC<{ href: string }> = ({ href, ...props }) => {
-  // If the href starts with "http" or "https", it's an external link
-  if (EXTERNAL_PROTOCOLS.some((protocol) => href.startsWith(protocol)))
-    return <a href={href} target="_blank" rel="noopener noreferrer" {...props} />;
-
-  return <Link to={href} {...props} />;
-};
-
 const CustomMDXComponents: MDXComponents = {
   h1: (props) => <h1 style={{ margin: 0 }} {...props} />,
   h2: (props) => <h2 style={{ margin: 0 }} {...props} />,