fix: MDX렌더링이 실패한 후, 외부에서 재시도를 하지 못하던 문제 수정

Author: MU-Software

apps/pyconkr/src/debug/page/mdi_test.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 
 import { Box, Button, Card, CardContent, TextField, Typography } from "@mui/material";
+import type { MDXComponents } from "mdx/types.js";
 
 import * as Common from "@frontend/common";
+import * as Shop from "@frontend/shop";
 
 const LOCAL_STEORAGE_KEY = "mdi_test_input";
 const MDX_TEST_STRING = `\
@@ -74,6 +76,16 @@ HTML 태그 중 일부를 사용할 수 있어요!
 */ }
 `
 
+const PyConMDXComponents: MDXComponents = {
+  Shop__Common__PriceDisplay: Shop.Components.Common.PriceDisplay,
+  Shop__Common__SignInGuard: Shop.Components.Common.SignInGuard,
+  Shop__Common__ContextProvider: Shop.Components.Common.ShopContextProvider,
+  Shop__Feature__CartStatus: Shop.Components.Features.CartStatus,
+  Shop__Feature__ProductList: Shop.Components.Features.ProductList,
+  Shop__Feature__OrderList: Shop.Components.Features.OrderList,
+  Shop__Feature__UserInfo: Shop.Components.Features.UserInfo,
+}
+
 const getMdxInputFromLocalStorage: () => string = () => {
   const input = localStorage.getItem(LOCAL_STEORAGE_KEY);
   return input ? input : "";
@@ -86,20 +98,25 @@ const setMdxInputToLocalStorage: (input: string) => string = (input) => {
 
 export const MdiTestPage: React.FC = () => {
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
-  const [mdxInput, setMdxInput] = React.useState(getMdxInputFromLocalStorage());
+  const [state, setState] = React.useState<{ text: string, resetKey: string }>({
+    text: getMdxInputFromLocalStorage(),
+    resetKey: window.crypto.randomUUID()
+  });
+
+  const setMDXInput = (text: string) => setState({ text: setMdxInputToLocalStorage(text), resetKey: window.crypto.randomUUID() });
 
   return (
     <Box sx={{ p: 3 }}>
       <Typography variant="h5" gutterBottom>MDX 에디터</Typography>
-      <TextField inputRef={inputRef} defaultValue={mdxInput} multiline fullWidth minRows={4} sx={{ my: 2 }} />
-      <Button variant="contained" onClick={() => inputRef.current && setMdxInput(setMdxInputToLocalStorage(inputRef.current.value))}>변환</Button>
+      <TextField inputRef={inputRef} defaultValue={state.text} multiline fullWidth minRows={4} sx={{ my: 2 }} />
+      <Button variant="contained" onClick={() => inputRef.current && setMDXInput(inputRef.current.value)}>변환</Button>
       &nbsp;
-      <Button variant="contained" onClick={() => setMdxInput(MDX_TEST_STRING)}>테스트용 Help Text 로딩</Button>
+      <Button variant="contained" onClick={() => setMDXInput(MDX_TEST_STRING)}>테스트용 Help Text 로딩</Button>
       <br />
       <br />
       <Card>
         <CardContent>
-          <Common.Components.MDXRenderer text={mdxInput} />
+          <Common.Components.MDXRenderer {...state} components={PyConMDXComponents} />
         </CardContent>
       </Card>
     </Box>

package.json

@@ -46,6 +46,7 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@tanstack/react-query-devtools": "^5.76.1",
+    "@types/mdx": "^2.0.13",
     "@types/node": "^22.15.18",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.5",

packages/common/src/components/error_handler.tsx

@@ -6,6 +6,7 @@ import { Suspense } from "@suspensive/react";
 import CommonContext from '../hooks/';
 
 const DetailedErrorFallback: React.FC<{ error: Error, reset: () => void }> = ({ error, reset }) => {
+  console.error(error);
   const errorObject = Object.getOwnPropertyNames(error).reduce((acc, key) => ({ ...acc, [key]: (error as unknown as { [key: string]: unknown })[key] }), {});
   return <>
     <Typography variant="body2" color="error">error.message = {error.message}</Typography>

packages/common/src/components/mdx.tsx

@@ -2,45 +2,28 @@ import * as React from "react";
 import * as runtime from "react/jsx-runtime";
 import * as R from "remeda";
 
-import { evaluate, EvaluateOptions } from "@mdx-js/mdx";
+import { evaluate } from "@mdx-js/mdx";
+import * as provider from "@mdx-js/react";
 import { CircularProgress } from "@mui/material";
-import { ErrorBoundary, Suspense } from "@suspensive/react";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import components, { MuiMdxComponentsOptions } from 'mui-mdx-components';
+import { ErrorBoundary } from "@suspensive/react";
+import type { MDXComponents } from "mdx/types";
+import muiComponents from 'mui-mdx-components';
 
-import Components from "../components";
 import Hooks from "../hooks";
+import { ErrorFallback } from "./error_handler";
 
-const MDXComponents: MuiMdxComponentsOptions = {
-  overrides: {
-    'h1': (props) => <h1 {...props} />,
-    'h2': (props) => <h2 {...props} />,
-    'h3': (props) => <h3 {...props} />,
-    'h4': (props) => <h4 {...props} />,
-    'h5': (props) => <h5 {...props} />,
-    'h6': (props) => <h6 {...props} />,
-    'strong': (props) => <strong {...props} />,
-    'em': (props) => <em {...props} />,
-    'ul': (props) => <ul {...props} />,
-    'ol': (props) => <ol {...props} />,
-    'li': (props) => <li {...props} />,
-  }
-}
-
-const InnerMDXRenderer: React.FC<{ text: string, baseUrl: string }> = ({ text, baseUrl }) => {
-  const options: EvaluateOptions = { ...runtime, baseUrl };
-
-  const { data } = useSuspenseQuery({
-    queryKey: ["mdx", text],
-    queryFn: async () => {
-      const { default: RenderResult } = await evaluate(text, options);
-      return <div className="markdown-body">
-        <RenderResult components={components(MDXComponents)} />
-      </div>
-    },
-  });
-
-  return <>{data}</>;
+const CustomMDXComponents: MDXComponents = {
+  'h1': (props) => <h1 {...props} />,
+  'h2': (props) => <h2 {...props} />,
+  'h3': (props) => <h3 {...props} />,
+  'h4': (props) => <h4 {...props} />,
+  'h5': (props) => <h5 {...props} />,
+  'h6': (props) => <h6 {...props} />,
+  'strong': (props) => <strong {...props} />,
+  'em': (props) => <em {...props} />,
+  'ul': (props) => <ul {...props} />,
+  'ol': (props) => <ol {...props} />,
+  'li': (props) => <li {...props} />,
 }
 
 const lineFormatterForMDX = (line: string) => {
@@ -55,20 +38,31 @@ const lineFormatterForMDX = (line: string) => {
   return `${trimmedLine}  \n`;
 }
 
-export const MDXRenderer: React.FC<{ text: string }> = ({ text }) => {
-  // 원래 MDX는 각 줄의 마지막에 공백 2개가 있어야 줄바꿈이 되고, 또 연속 줄바꿈은 무시되지만,
-  // 편의성을 위해 렌더러 단에서 공백 2개를 추가하고 연속 줄바꿈을 <br />로 변환합니다.
+export const MDXRenderer: React.FC<{ text: string; components?: MDXComponents, resetKey?: string }> = ({ text, components, resetKey }) => {
   const { baseUrl } = Hooks.Common.useCommonContext();
+  const [state, setState] = React.useState<{ component: React.ReactNode, resetKey: string }>({
+    component: <CircularProgress />,
+    resetKey: window.crypto.randomUUID(),
+  })
+
+  const setRenderResult = (component: React.ReactNode) => setState((prev) => ({ ...prev, component: component }));
+  const setRandomResetKey = () => setState((prev) => ({ ...prev, resetKey: window.crypto.randomUUID() }))
 
-  const processedText = text
-    .split("\n")
-    .map(lineFormatterForMDX)
-    .join("")
-    .replaceAll("\n\n", "\n<br />\n");
+  React.useEffect(() => {
+    (
+      async () => {
+        try {
+          // 원래 MDX는 각 줄의 마지막에 공백 2개가 있어야 줄바꿈이 되고, 또 연속 줄바꿈은 무시되지만,
+          // 편의성을 위해 렌더러 단에서 공백 2개를 추가하고 연속 줄바꿈을 <br />로 변환합니다.
+          const processedText = text.split("\n").map(lineFormatterForMDX).join("").replaceAll("\n\n", "\n<br />\n");
+          const { default: RenderResult } = await evaluate(processedText, { ...runtime, ...provider, baseUrl });
+          setRenderResult(<RenderResult components={muiComponents({ overrides: { ...CustomMDXComponents, ...components } })} />);
+        } catch (error) {
+          setRenderResult(<ErrorFallback error={error as Error} reset={setRandomResetKey} />);
+        }
+      }
+    )();
+  }, [text, resetKey, state.resetKey]);
 
-  return <ErrorBoundary fallback={Components.ErrorFallback}>
-    <Suspense fallback={<CircularProgress />}>
-      <InnerMDXRenderer text={processedText} baseUrl={baseUrl} />
-    </Suspense>
-  </ErrorBoundary>
+  return <ErrorBoundary fallback={ErrorFallback} resetKeys={[text, resetKey, state.resetKey]}>{state.component}</ErrorBoundary>
 };