pythonkr · y00eunji · Apr 11, 2026
diff --git a/apps/pyconkr-admin/src/components/elements/error_fallback.tsx b/apps/pyconkr-admin/src/components/elements/error_fallback.tsx
@@ -0,0 +1,8 @@
+import { Components } from "@frontend/common";
+import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
+import * as React from "react";
+
+export const ErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
+  const { debug } = useCommonContext();
+  return <Components.ErrorFallback error={error} reset={reset} debug={debug} />;
+};
diff --git a/apps/pyconkr-admin/src/components/layouts/admin_editor.tsx b/apps/pyconkr-admin/src/components/layouts/admin_editor.tsx
@@ -8,6 +8,7 @@ import {
   useSchemaQuery,
   useUpdateMutation,
 } from "@frontend/common/src/hooks/useAdminAPI";
+import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
 import {
   filterPropertiesByLanguageInJsonSchema,
   filterReadOnlyPropertiesInJsonSchema,
@@ -50,6 +51,7 @@ import * as R from "remeda";
 
 import { addErrorSnackbar, addSnackbar } from "../../utils/snackbar";
 import { BackendAdminSignInGuard } from "../elements/admin_signin_guard";
+import { ErrorFallback } from "../elements/error_fallback";
 
 type EditorFormDataEventType = IChangeEvent<Record<string, string>, RJSFSchema, { [k in string]: unknown }>;
 type onSubmitType = (data: Record<string, string>, event: React.FormEvent<unknown>) => void;
@@ -146,7 +148,7 @@ const fieldPropsToSelectedProps = (props: FieldProps): OutlinedSelectProps & { d
 };
 
 const M2MSelect: Field = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, (props) => {
     const selectable = (props.schema.items as JSONSchema7).oneOf as DescriptedEnum[];
     const selectableListObj: DescriptedEnumObject = selectable.reduce((a, i) => ({ ...a, [i.const]: i }), {} as DescriptedEnumObject);
@@ -181,7 +183,8 @@ const MDRendererContainer = styled(Box)(({ theme }) => ({
   },
 }));
 
-const MDEditorField: Field = ErrorBoundary.with({ fallback: Components.ErrorFallback }, ({ disabled, formData, name, onChange: rawOnChange }) => {
+const MDEditorField: Field = ErrorBoundary.with({ fallback: ErrorFallback }, ({ disabled, formData, name, onChange: rawOnChange }) => {
+  const { baseUrl, mdxComponents } = useCommonContext();
   const [valueState, setValueState] = React.useState<string | undefined>(formData?.toString() || "");
   const onChange = (value?: string) => {
     setValueState(value);
@@ -195,7 +198,7 @@ const MDEditorField: Field = ErrorBoundary.with({ fallback: Components.ErrorFall
           <Components.MarkdownEditor disabled={disabled} name={name} value={valueState} onChange={onChange} extraCommands={[]} />
         </Box>
         <MDRendererContainer>
-          <Components.MDXRenderer text={valueState || ""} format="md" />
+          <Components.MDXRenderer text={valueState || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </MDRendererContainer>
       </Stack>
     </MUIStyledFieldset>
@@ -262,7 +265,7 @@ type InnerAdminEditorStateType = {
 };
 
 const InnerAdminEditor: React.FC<AppResourceIdType & AdminEditorPropsType> = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+  { fallback: ErrorFallback },
   Suspense.with(
     { fallback: <CircularProgress /> },
     ({

diff --git a/apps/pyconkr-admin/src/components/layouts/admin_list.tsx b/apps/pyconkr-admin/src/components/layouts/admin_list.tsx
@@ -1,4 +1,3 @@
-import { Components } from "@frontend/common";
 import { useBackendAdminClient, useChoicesQuery, useListQuery, useOpenApiSchemaQuery } from "@frontend/common/src/hooks/useAdminAPI";
 import { extractQueryParameters } from "@frontend/common/src/utils";
 import { Add } from "@mui/icons-material";
@@ -9,6 +8,7 @@ import { Link, useNavigate, useSearchParams } from "react-router-dom";
 
 import { AdminListFilter } from "../elements/admin_list_filter";
 import { BackendAdminSignInGuard } from "../elements/admin_signin_guard";
+import { ErrorFallback } from "../elements/error_fallback";
 
 type AdminListProps = {
   app: string;
@@ -26,7 +26,7 @@ type ListRowType = {
 };
 
 const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, ({ app, resource, hideCreatedAt, hideUpdatedAt, hideCreateNew }) => {
     const navigate = useNavigate();
 

diff --git a/apps/pyconkr-admin/src/components/pages/account/account.tsx b/apps/pyconkr-admin/src/components/pages/account/account.tsx
@@ -1,12 +1,13 @@
-import { Components } from "@frontend/common";
 import { useBackendAdminClient, useSignedInUserQuery } from "@frontend/common/src/hooks/useAdminAPI";
 import { CircularProgress } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import * as React from "react";
 import { Navigate } from "react-router-dom";
 
+import { ErrorFallback } from "../../elements/error_fallback";
+
 export const AccountRedirectPage: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const backendAdminAPIClient = useBackendAdminClient();
     const { data } = useSignedInUserQuery(backendAdminAPIClient);

diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx
@@ -1,5 +1,6 @@
 import { Components } from "@frontend/common";
 import { useBackendAdminClient, usePublicFileQuery } from "@frontend/common/src/hooks/useAdminAPI";
+import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
 import {
   Accordion,
   AccordionDetails,
@@ -78,10 +79,11 @@ export const PreviewTextField: React.FC<PreviewFieldProps> = ({ originalDataset,
 };
 
 export const PreviewMarkdownField: React.FC<SharedPreviewFieldProps> = ({ originalDataset, previewDataset, name, label }) => {
+  const { baseUrl, mdxComponents } = useCommonContext();
   return originalDataset[name] === previewDataset[name] ? (
     <Components.Fieldset legend={label} style={{ width: "100%" }}>
       <MarkdownContainerBox>
-        <Components.MDXRenderer format="md" text={(previewDataset[name] as string) || "(값 없음)"} />
+        <Components.MDXRenderer format="md" text={(previewDataset[name] as string) || "(값 없음)"} baseUrl={baseUrl} mdxComponents={mdxComponents} />
       </MarkdownContainerBox>
     </Components.Fieldset>
   ) : (
@@ -91,7 +93,12 @@ export const PreviewMarkdownField: React.FC<SharedPreviewFieldProps> = ({ origin
           <Stack sx={{ width: "100%" }} direction="column" alignItems="flex-start" justifyContent="space-between">
             <Components.Fieldset legend={label} style={{ width: "100%", backgroundColor: "rgba(255, 255, 0, 0.1)" }}>
               <MarkdownContainerBox>
-                <Components.MDXRenderer format="md" text={(previewDataset[name] as string) || "(값 없음)"} />
+                <Components.MDXRenderer
+                  format="md"
+                  text={(previewDataset[name] as string) || "(값 없음)"}
+                  baseUrl={baseUrl}
+                  mdxComponents={mdxComponents}
+                />
               </MarkdownContainerBox>
             </Components.Fieldset>
             <Typography variant="caption">기존 값을 보려면 여기를 클릭해주세요.</Typography>
@@ -100,7 +107,12 @@ export const PreviewMarkdownField: React.FC<SharedPreviewFieldProps> = ({ origin
         <AccordionDetails>
           <Components.Fieldset legend={label} style={{ backgroundColor: "rgba(0, 64, 64, 0.1)" }}>
             <MarkdownContainerBox>
-              <Components.MDXRenderer format="md" text={(originalDataset[name] as string) || "(값 없음)"} />
+              <Components.MDXRenderer
+                format="md"
+                text={(originalDataset[name] as string) || "(값 없음)"}
+                baseUrl={baseUrl}
+                mdxComponents={mdxComponents}
+              />
             </MarkdownContainerBox>
           </Components.Fieldset>
         </AccordionDetails>

diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx
@@ -1,11 +1,11 @@
-import { Components } from "@frontend/common";
 import { useBackendAdminClient, useListQuery } from "@frontend/common/src/hooks/useAdminAPI";
 import { CircularProgress, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import * as React from "react";
 import { Link } from "react-router-dom";
 
 import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
+import { ErrorFallback } from "../../elements/error_fallback";
 
 type ListRowType = {
   id: string;
@@ -16,7 +16,7 @@ type ListRowType = {
 };
 
 const InnerAdminModificationAuditList: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const backendAdminClient = useBackendAdminClient();
     const listQuery = useListQuery<ListRowType>(backendAdminClient, "modification-audit", "modification-audit");

diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/pages.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/pages.tsx
@@ -1,4 +1,3 @@
-import { Components } from "@frontend/common";
 import { useBackendAdminClient, useModificationAuditPreviewQuery } from "@frontend/common/src/hooks/useAdminAPI";
 import { Box, Button, CircularProgress, Divider, Stack, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
@@ -8,6 +7,7 @@ import { Navigate, useParams } from "react-router-dom";
 import { ModificationAuditProperties } from "./components";
 import { ApproveSubmitConfirmDialog, RejectSubmitConfirmDialog } from "./dialogs";
 import { SubModificationAuditPage } from "./sub_pages";
+import { ErrorFallback } from "../../elements/error_fallback";
 import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
 
 type EditorStateType = { actionStatus?: "approve" | "reject" };
@@ -67,7 +67,7 @@ const InnerAdminModificationAuditEditor: React.FC = () => {
 export const AdminModificationAuditEditor: React.FC = () => {
   return (
     <BackendAdminSignInGuard>
-      <ErrorBoundary fallback={Components.ErrorFallback}>
+      <ErrorBoundary fallback={ErrorFallback}>
         <Suspense fallback={<CircularProgress />}>
           <InnerAdminModificationAuditEditor />
         </Suspense>

diff --git a/apps/pyconkr-admin/src/components/pages/page/editor.tsx b/apps/pyconkr-admin/src/components/pages/page/editor.tsx
@@ -11,6 +11,7 @@ import { useParams } from "react-router-dom";
 import { PageSectionSchema } from "../../../../../../packages/common/src/schemas/backendAdminAPI";
 import { muiTheme } from "../../../styles/globalStyles";
 import { addErrorSnackbar } from "../../../utils/snackbar";
+import { ErrorFallback } from "../../elements/error_fallback";
 import { AdminEditor } from "../../layouts/admin_editor";
 
 type SectionType = PageSectionSchema;
@@ -33,6 +34,7 @@ type SectionEditorPropType = CommonSectionEditorPropType & {
 };
 
 const SectionTextEditor: React.FC<SectionTextEditorPropType> = ({ disabled, defaultValue, onInsertNewSection, onChange, onDelete }) => {
+  const { baseUrl, mdxComponents } = useCommonContext();
   const deleteActionButton = commands.group([], {
     name: "delete",
     groupName: "delete",
@@ -51,7 +53,7 @@ const SectionTextEditor: React.FC<SectionTextEditorPropType> = ({ disabled, defa
       </Stack>
       <Box sx={{ flexGrow: 1, width: "50%", backgroundColor: "#fff" }}>
         <ThemeProvider theme={muiTheme}>
-          <Components.MDXRenderer text={defaultValue || ""} format="mdx" />
+          <Components.MDXRenderer text={defaultValue || ""} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </ThemeProvider>
       </Box>
     </Stack>
@@ -80,7 +82,7 @@ type AdminCMSPageEditorStateType = {
 };
 
 export const AdminCMSPageEditor: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const { id } = useParams<{ id?: string }>();
     const { frontendDomain } = useCommonContext();

diff --git a/apps/pyconkr-admin/src/components/pages/presentation/editor.tsx b/apps/pyconkr-admin/src/components/pages/presentation/editor.tsx
@@ -1,5 +1,13 @@
 import { Components } from "@frontend/common";
-import { useBackendAdminClient, useCreateMutation, useListQuery, useRemovePreparedMutation, useSchemaQuery, useUpdatePreparedMutation } from "@frontend/common/src/hooks/useAdminAPI";
+import {
+  useBackendAdminClient,
+  useCreateMutation,
+  useListQuery,
+  useRemovePreparedMutation,
+  useSchemaQuery,
+  useUpdatePreparedMutation,
+} from "@frontend/common/src/hooks/useAdminAPI";
+import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
 import { Autocomplete, Box, Button, Card, CardContent, CircularProgress, Stack, styled, Tab, Tabs, TextField, Typography } from "@mui/material";
 import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
@@ -10,6 +18,7 @@ import { enqueueSnackbar, OptionsObject } from "notistack";
 import * as React from "react";
 import { useParams } from "react-router-dom";
 
+import { ErrorFallback } from "../../elements/error_fallback";
 import { AdminEditor } from "../../layouts/admin_editor";
 
 const DUMMY_UUID = "00000000-0000-4000-8000-000000000000";
@@ -87,6 +96,7 @@ type AutoCompleteType = {
 };
 
 const PresentationSpeakerForm: React.FC<PresentationSpeakerFormPropType> = ({ disabled, schema, speaker, onChange, onRemove }) => {
+  const { baseUrl, mdxComponents } = useCommonContext();
   const [formState, setFormState] = React.useState<PresentationSpeakerFormStateType>({ tab: "ko" });
   const setLanguage = (_: React.SyntheticEvent, tab: "ko" | "en") => setFormState((ps) => ({ ...ps, tab }));
 
@@ -147,7 +157,7 @@ const PresentationSpeakerForm: React.FC<PresentationSpeakerFormPropType> = ({ di
                     <Components.MarkdownEditor disabled={disabled} value={speaker[bioField]} name={bioField} onChange={onSpeakerBioChange} />
                   </Box>
                   <MDXRendererContainer>
-                    <Components.MDXRenderer text={speaker[bioField]} format="md" />
+                    <Components.MDXRenderer text={speaker[bioField]} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
                   </MDXRendererContainer>
                 </Stack>
               </MUIStyledFieldset>
@@ -264,7 +274,7 @@ type PresentationEditorStateType = {
 };
 
 export const AdminPresentationEditor: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const { id } = useParams<{ id?: string }>();
 

diff --git a/apps/pyconkr-admin/src/components/pages/sitemap/list.tsx b/apps/pyconkr-admin/src/components/pages/sitemap/list.tsx
@@ -1,4 +1,3 @@
-import { Components } from "@frontend/common";
 import { useBackendAdminClient, useListQuery, useRemovePreparedMutation, useUpdatePreparedMutation } from "@frontend/common/src/hooks/useAdminAPI";
 import { buildFlatSiteMap, buildNestedSiteMap } from "@frontend/common/src/utils";
 import { Add, Delete, Edit, Save } from "@mui/icons-material";
@@ -23,6 +22,7 @@ import { GroupOptions, ReactSortable, SortableEvent, SortableOptions } from "rea
 
 import { FlattenedSiteMapSchema, NestedSiteMapSchema } from "../../../../../../packages/common/src/schemas/backendAdminAPI";
 import { BackendAdminSignInGuard } from "../../elements/admin_signin_guard";
+import { ErrorFallback } from "../../elements/error_fallback";
 import { AdminEditor } from "../../layouts/admin_editor";
 
 type FlatSiteMap = FlattenedSiteMapSchema;
@@ -95,7 +95,7 @@ type InnerSiteMapStateType = {
 const ModifyDetectionFields: (keyof FlatSiteMap)[] = ["order", "parent_sitemap"];
 
 const InnerSiteMapList: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const backendAdminAPIClient = useBackendAdminClient();
     const { data } = useListQuery<FlatSiteMap>(backendAdminAPIClient, "cms", "sitemap");

diff --git a/apps/pyconkr-admin/src/components/pages/user/editor.tsx b/apps/pyconkr-admin/src/components/pages/user/editor.tsx
@@ -1,4 +1,3 @@
-import { Components } from "@frontend/common";
 import { useBackendAdminClient, useResetUserPasswordMutation } from "@frontend/common/src/hooks/useAdminAPI";
 import { KeyOff } from "@mui/icons-material";
 import { Button, ButtonProps, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
@@ -8,6 +7,7 @@ import { useNavigate, useParams } from "react-router-dom";
 
 import { PasswordResultDialog } from "./password_result_dialog";
 import { addErrorSnackbar } from "../../../utils/snackbar";
+import { ErrorFallback } from "../../elements/error_fallback";
 import { AdminEditor } from "../../layouts/admin_editor";
 
 type PageStateType = {
@@ -18,7 +18,7 @@ type PageStateType = {
 };
 
 export const AdminUserExtEditor: React.FC = ErrorBoundary.with(
-  { fallback: Components.ErrorFallback },
+  { fallback: ErrorFallback },
   Suspense.with({ fallback: <CircularProgress /> }, () => {
     const { id } = useParams<{ id?: string }>();
     const navigate = useNavigate();

diff --git a/apps/pyconkr-participant-portal/src/components/dialogs/public_file_upload.tsx b/apps/pyconkr-participant-portal/src/components/dialogs/public_file_upload.tsx
@@ -108,7 +108,7 @@ export const PublicFileUploadDialog: React.FC<PublicFileUploadDialogProps> = ({
       <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
         <DialogTitle children={titleStr} />
         <DialogContent>
-          <Components.DndFileInput onFileChange={setFile} />
+          <Components.DndFileInput onFileChange={setFile} language={language} />
         </DialogContent>
         <DialogActions>
           <Button variant="contained" loading={loading} children={cancelStr} color="error" onClick={onClose} />

diff --git a/apps/pyconkr-participant-portal/src/components/elements/multilang_field.tsx b/apps/pyconkr-participant-portal/src/components/elements/multilang_field.tsx
@@ -1,4 +1,5 @@
 import { Components } from "@frontend/common";
+import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
 import { Box, SelectProps, Stack, styled, Tab, Tabs, TextField, TextFieldProps, Typography, useMediaQuery } from "@mui/material";
 import * as React from "react";
 
@@ -143,6 +144,7 @@ export const MultiLanguageMarkdownField: React.FC<MultiLanguageMarkdownFieldProp
   ...props
 }) => {
   const { language } = useAppContext();
+  const { baseUrl, mdxComponents } = useCommonContext();
   const [fieldState, setFieldState] = React.useState<MultiLanguageFieldState>({ selectedFieldLanguage: language });
   const setFieldLanguage = (_: React.SyntheticEvent, selectedFieldLanguage: "ko" | "en") => setFieldState((ps) => ({ ...ps, selectedFieldLanguage }));
   const koreanStr = language === "ko" ? "한국어" : "Korean";
@@ -177,7 +179,7 @@ export const MultiLanguageMarkdownField: React.FC<MultiLanguageMarkdownFieldProp
               </Box>
             )}
             <MDRendererContainer fullWidth={disabled}>
-              <Components.MDXRenderer text={inputValue || ""} format="md" />
+              <Components.MDXRenderer text={inputValue || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
             </MDRendererContainer>
           </Stack>
         </FieldContainer>

diff --git a/apps/pyconkr/src/components/pages/dynamic_route.tsx b/apps/pyconkr/src/components/pages/dynamic_route.tsx
@@ -1,5 +1,6 @@
 import { Components } from "@frontend/common";
 import { useBackendClient, usePageQuery } from "@frontend/common/src/hooks/useAPI";
+import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
 import { parseCss } from "@frontend/common/src/utils";
 import { BackendAPIClientError } from "@frontend/common/src/apis";
 import { CircularProgress, Stack, Theme } from "@mui/material";
@@ -104,6 +105,7 @@ const WaitedCenteredLoadingPage: React.FC = Suspense.with({ fallback: <CenteredL
 
 const InnerPageRenderer: React.FC<{ id: string }> = Suspense.with({ fallback: <CenteredLoadingPage /> }, ({ id }) => {
   const { setAppContext } = useAppContext();
+  const { baseUrl, mdxComponents } = useCommonContext();
   const backendClient = useBackendClient();
   const { data } = usePageQuery(backendClient, id);
 
@@ -120,7 +122,7 @@ const InnerPageRenderer: React.FC<{ id: string }> = Suspense.with({ fallback: <C
     <Stack sx={initialPageStyle(parseCss(data.css))}>
       {data.sections.map((s) => (
         <Stack sx={initialSectionStyle(parseCss(s.css))} key={s.id}>
-          <Components.MDXRenderer text={s.body} format="mdx" />
+          <Components.MDXRenderer text={s.body} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </Stack>
       ))}
     </Stack>