chore: 자주 사용될 ErrorFallback에 대해 별도의 컴포넌트로 분리

Author: MU-Software

packages/common/src/components/error_handler.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+import { Button, Typography } from "@mui/material";
+import { Suspense } from "@suspensive/react";
+
+import CommonContext from '../hooks/';
+
+const DetailedErrorFallback: React.FC<{ error: Error, reset: () => void }> = ({ error, reset }) => {
+  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>
+    <details open>
+      <summary>오류 상세</summary>
+      <pre style={{
+        whiteSpace: "pre-wrap",
+        backgroundColor: "#f5f5f5",
+        padding: "1em",
+        borderRadius: "4px",
+        userSelect: "text",
+      }}>
+        <code>{JSON.stringify(errorObject, null, 2)}</code>
+      </pre>
+    </details>
+    <br />
+    <Button variant="outlined" onClick={reset}>다시 시도</Button>
+  </>;
+};
+
+const SimplifiedErrorFallback: React.FC<{ reset: () => void }> = ({ reset }) => {
+  return <>
+    <Typography variant="body2" color="error">
+      문제가 발생했습니다, 잠시 후 다시 시도해주세요.<br />
+      만약 문제가 계속 발생한다면, 파이콘 한국 준비 위원회에게 알려주세요!<br />
+      <br />
+      An error occurred, please try again later.<br />
+      If the problem persists, please let the PyCon Korea organizing committee know!
+    </Typography>
+    <br />
+    <Button variant="outlined" onClick={reset}>다시 시도 | Retry</Button>
+  </>;
+}
+
+export const ErrorFallback: React.FC<{ error: Error, reset: () => void }> = ({ error, reset }) => {
+  const InnerErrorFallback: React.FC<{ error: Error, reset: () => void }> = ({ error, reset }) => {
+    const { debug } = CommonContext.useCommonContext();
+    return debug ? <DetailedErrorFallback error={error} reset={reset} /> : <SimplifiedErrorFallback reset={reset} />;
+  }
+
+  return <Suspense fallback={<>로딩 중...</>}><InnerErrorFallback error={error} reset={reset} /></Suspense>
+}

packages/common/src/components/index.ts

@@ -1,11 +1,13 @@
 import { CommonContextProvider as CommonContextProviderComponent } from './common_context';
+import { ErrorFallback as ErrorFallbackComponent } from './error_handler';
 import { MDXRenderer as MDXRendererComponent } from "./mdx";
 import { PythonKorea as PythonKoreaComponent } from './pythonkorea';
 
 namespace Components {
   export const CommonContextProvider = CommonContextProviderComponent;
   export const MDXRenderer = MDXRendererComponent;
   export const PythonKorea = PythonKoreaComponent;
+  export const ErrorFallback = ErrorFallbackComponent;
 }
 
 export default Components;

packages/common/src/components/mdx.tsx

@@ -3,12 +3,13 @@ import * as runtime from "react/jsx-runtime";
 import * as R from "remeda";
 
 import { evaluate, EvaluateOptions } from "@mdx-js/mdx";
-import { Button, CircularProgress, Typography } from "@mui/material";
+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 { useCommonContext } from '../hooks/useCommonContext';
+import Components from "../components";
+import Hooks from "../hooks";
 
 const MDXComponents: MuiMdxComponentsOptions = {
   overrides: {
@@ -26,41 +27,6 @@ const MDXComponents: MuiMdxComponentsOptions = {
   }
 }
 
-const SimplifiedMDXErrorFallback: React.FC<{ reset: () => void }> = ({ reset }) => {
-  return <>
-    <Typography variant="body2" color="error">
-      페이지를 그리던 중 문제가 발생했습니다, 잠시 후 다시 시도해주세요.<br />
-      만약 문제가 계속 발생한다면, 파이콘 한국 준비 위원회에게 알려주세요!<br />
-      <br />
-      Problem occurred while drawing the page, please try again later.<br />
-      If the problem persists, please let the PyCon Korea organizing committee know!
-    </Typography>
-    <br />
-    <Button variant="outlined" onClick={reset}>다시 시도 | Retry</Button>
-  </>;
-}
-
-const DetailedMDXErrorFallback: React.FC<{ error: Error, reset: () => void }> = ({ error, reset }) => {
-  const errorObject = Object.getOwnPropertyNames(error).reduce((acc, key) => ({ ...acc, [key]: (error as unknown as { [key: string]: unknown })[key] }), {});
-  return <>
-    <Typography variant="body2" color="error">MDX 변환 오류: {error.message}</Typography>
-    <details open>
-      <summary>오류 상세</summary>
-      <pre style={{
-        whiteSpace: "pre-wrap",
-        backgroundColor: "#f5f5f5",
-        padding: "1em",
-        borderRadius: "4px",
-        userSelect: "text",
-      }}>
-        <code>{JSON.stringify(errorObject, null, 2)}</code>
-      </pre>
-    </details>
-    <br />
-    <Button variant="outlined" onClick={reset}>다시 시도</Button>
-  </>;
-};
-
 const InnerMDXRenderer: React.FC<{ text: string, baseUrl: string }> = ({ text, baseUrl }) => {
   const options: EvaluateOptions = { ...runtime, baseUrl };
 
@@ -92,16 +58,15 @@ const lineFormatterForMDX = (line: string) => {
 export const MDXRenderer: React.FC<{ text: string }> = ({ text }) => {
   // 원래 MDX는 각 줄의 마지막에 공백 2개가 있어야 줄바꿈이 되고, 또 연속 줄바꿈은 무시되지만,
   // 편의성을 위해 렌더러 단에서 공백 2개를 추가하고 연속 줄바꿈을 <br />로 변환합니다.
-  const { baseUrl, debug } = useCommonContext();
+  const { baseUrl, debug } = Hooks.useCommonContext();
 
-  const ErrorHandler = debug ? DetailedMDXErrorFallback : SimplifiedMDXErrorFallback;
   const processedText = text
     .split("\n")
     .map(lineFormatterForMDX)
     .join("")
     .replaceAll("\n\n", "\n<br />\n");
 
-  return <ErrorBoundary fallback={ErrorHandler}>
+  return <ErrorBoundary fallback={Components.ErrorFallback}>
     <Suspense fallback={<CircularProgress />}>
       <InnerMDXRenderer text={processedText} baseUrl={baseUrl} />
     </Suspense>