feat: 텍스트의 링크를 링크 컴포넌트로 바꿔주는 기능 추가 및 적용

Author: MU-Software

packages/common/src/components/auto_text_linking.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { LinkHandler } from "./link_handler";
+
+const urlRegex = /(mailto:[\w.-]+@[\w.-]+\.[a-zA-Z]{2,})|(https?:\/\/[^\s]+)/gi;
+
+export const AutoTextLinking: React.FC<{ children: string }> = ({ children }) => {
+  const convertedChildren = children
+    .split(urlRegex)
+    .filter((text) => text !== undefined)
+    .map((text) => (text.match(urlRegex) ? <LinkHandler href={text} children={text} /> : text));
+  return <span children={convertedChildren} />;
+};

packages/common/src/components/index.ts

@@ -1,3 +1,4 @@
+import { AutoTextLinking as AutoTextLinkingComponent } from "./auto_text_linking";
 import { CenteredPage as CenteredPageComponent } from "./centered_page";
 import { CommonContextProvider as CommonContextProviderComponent } from "./common_context";
 import { DndFileInput as DndFileInputComponent } from "./dnd_file_input";
@@ -44,6 +45,7 @@ namespace Components {
   export const ErrorFallback = ErrorFallbackComponent;
   export const FallbackImage = FallbackImageComponent;
   export const LinkHandler = LinkHandlerComponent;
+  export const AutoTextLinking = AutoTextLinkingComponent;
   export const DndFileInput = DndFileInputComponent;
   export const Fieldset = FieldsetComponent;
 

packages/shop/src/components/features/patron_list.tsx

@@ -1,3 +1,4 @@
+import * as Common from "@frontend/common";
 import { CircularProgress, Stack, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import * as React from "react";
@@ -12,7 +13,9 @@ const InnerPatronList: React.FC<{ year: number }> = ErrorBoundary.with(
     return data.map((patron) => (
       <Stack key={patron.name} spacing={1} sx={{ my: 2 }}>
         <Typography variant="h5" sx={(theme) => ({ fontWeight: 400, color: theme.palette.primary.dark })} children={patron.name} />
-        <Typography variant="subtitle1" children={patron.contribution_message || "Weave with Python!"} />
+        <Typography variant="subtitle1" sx={(theme) => ({ a: { color: theme.palette.primary.main }, whiteSpace: "pre-wrap" })}>
+          <Common.Components.AutoTextLinking children={patron.contribution_message.replace("\\n", "\n") || "Weave with Python!"} />
+        </Typography>
       </Stack>
     ));
   })