diff --git a/apps/pyconkr-admin/src/components/elements/error_fallback.tsx b/apps/pyconkr-admin/src/components/elements/error_fallback.tsx
new file mode 100644
index 0000000..50b6dda
--- /dev/null
+++ 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
index 5c0cbc6..c7d0b03 100644
--- 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
index de63eba..ee1f208 100644
--- 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
index 7249f46..ca6db0f 100644
--- 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
index 5d69658..3fbfaa1 100644
--- 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
index a9bfd47..f17a7b8 100644
--- a/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx
+++ b/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx
@@ -1,4 +1,3 @@
-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";
@@ -6,6 +5,7 @@ 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
index 732f793..b892a1f 100644
--- 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
index c67d2d7..59b7c7d 100644
--- 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
index 16daa62..9331103 100644
--- 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
index 002bb81..67d5c36 100644
--- 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
index 7bc16c9..614eea4 100644
--- 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
index 7c245f6..9794dc8 100644
--- 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
index e8de795..b3b0321 100644
--- 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
index 0f71780..1fd2246 100644
--- 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>
diff --git a/apps/pyconkr/src/components/pages/presentation_detail.tsx b/apps/pyconkr/src/components/pages/presentation_detail.tsx
index 790ad4e..706109a 100644
--- a/apps/pyconkr/src/components/pages/presentation_detail.tsx
+++ b/apps/pyconkr/src/components/pages/presentation_detail.tsx
@@ -1,5 +1,6 @@
 import { Components } from "@frontend/common";
 import { useBackendClient, useSessionQuery } from "@frontend/common/src/hooks/useAPI";
+import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
 import { Box, Chip, CircularProgress, Divider, Stack, styled, Table, TableBody, TableCell, TableRow, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { DateTime } from "luxon";
@@ -100,6 +101,7 @@ const ProfileImageErrorFallback: React.FC = () => (
 );
 
 const PresentationSpeakerItem: React.FC<{ speaker: SimplifiedSpeakerSchema }> = ({ speaker }) => {
+  const { baseUrl, mdxComponents } = useCommonContext();
   return (
     <>
       <Stack direction="row" spacing={4} sx={{ px: 2, py: 1 }}>
@@ -109,7 +111,9 @@ const PresentationSpeakerItem: React.FC<{ speaker: SimplifiedSpeakerSchema }> =
         <Stack alignItems="flex-start" justifyContent="center" sx={{ flexGrow: 1 }}>
           <Typography variant="h4" fontWeight="700" fontSize="2rem" children={speaker.nickname} />
           {speaker.biography ? (
-            <BiographyBox children={<Components.MDXRenderer text={speaker.biography || ""} format="md" />} />
+            <BiographyBox
+              children={<Components.MDXRenderer text={speaker.biography || ""} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />}
+            />
           ) : (
             <>
               <br />
@@ -147,6 +151,7 @@ export const PresentationDetailPage: React.FC = ErrorBoundary.with(
   Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
     const { id } = useParams();
     const { language, setAppContext } = useAppContext();
+    const { baseUrl, mdxComponents } = useCommonContext();
     const backendClient = useBackendClient();
     const { data: presentation } = useSessionQuery(backendClient, id || "");
 
@@ -259,7 +264,12 @@ export const PresentationDetailPage: React.FC = ErrorBoundary.with(
           />
         )}
         <DescriptionBox>
-          <Components.MDXRenderer text={presentation.description || descriptionFallback} format="md" />
+          <Components.MDXRenderer
+            text={presentation.description || descriptionFallback}
+            format="md"
+            baseUrl={baseUrl}
+            mdxComponents={mdxComponents}
+          />
         </DescriptionBox>
         <Divider flexItem />
         {presentation.speakers && (
diff --git a/apps/pyconkr/src/components/pages/sponsor_detail.tsx b/apps/pyconkr/src/components/pages/sponsor_detail.tsx
index 064aa22..e81d528 100644
--- a/apps/pyconkr/src/components/pages/sponsor_detail.tsx
+++ b/apps/pyconkr/src/components/pages/sponsor_detail.tsx
@@ -1,4 +1,5 @@
 import { Components } from "@frontend/common";
+import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
 import { Box, Chip, CircularProgress, Divider, Stack, styled, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import * as React from "react";
@@ -54,6 +55,7 @@ export const SponsorDetailPage: React.FC = ErrorBoundary.with(
   Suspense.with({ fallback: <CenteredLoadingPage /> }, () => {
     const { id } = useParams();
     const { language, sponsorTiers, setAppContext } = useAppContext();
+    const { baseUrl, mdxComponents } = useCommonContext();
     const sponsors = sponsorTiers?.reduce((acc, tier) => [...acc, ...tier.sponsors], [] as SponsorTierSchema["sponsors"]);
     const sponsor = sponsors?.find((s) => s.id === id);
 
@@ -88,7 +90,7 @@ export const SponsorDetailPage: React.FC = ErrorBoundary.with(
         </Typography>
         <Divider flexItem />
         <DescriptionBox>
-          <Components.MDXRenderer text={sponsor.description || descriptionFallback} format="md" />
+          <Components.MDXRenderer text={sponsor.description || descriptionFallback} format="md" baseUrl={baseUrl} mdxComponents={mdxComponents} />
         </DescriptionBox>
       </PageLayout>
     );
diff --git a/apps/pyconkr/src/debug/page/mdi_test.tsx b/apps/pyconkr/src/debug/page/mdi_test.tsx
index 4c55d52..ad7e376 100644
--- a/apps/pyconkr/src/debug/page/mdi_test.tsx
+++ b/apps/pyconkr/src/debug/page/mdi_test.tsx
@@ -1,10 +1,12 @@
 import { Components } from "@frontend/common";
+import { useCommonContext } from "@frontend/common/src/hooks/useCommonContext";
 import { Box, Stack } from "@mui/material";
 import React from "react";
 
 const HalfWidthStyle: React.CSSProperties = { width: "50%", maxWidth: "50%" };
 
 export const MdiTestPage: React.FC = () => {
+  const { baseUrl, mdxComponents } = useCommonContext();
   const [state, setState] = React.useState<{ text: string; resetKey: number }>({
     text: "",
     resetKey: Math.random(),
@@ -28,7 +30,7 @@ export const MdiTestPage: React.FC = () => {
         <Components.MDXEditor defaultValue={state.text} onChange={setMDXInput} />
       </Box>
       <Box sx={HalfWidthStyle}>
-        <Components.MDXRenderer {...state} format="mdx" />
+        <Components.MDXRenderer {...state} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
       </Box>
     </Stack>
   );
diff --git a/packages/common/src/components/dnd_file_input.tsx b/packages/common/src/components/dnd_file_input.tsx
index d79817e..eb0ca60 100644
--- a/packages/common/src/components/dnd_file_input.tsx
+++ b/packages/common/src/components/dnd_file_input.tsx
@@ -3,8 +3,6 @@ import { Box, Button, Input, Stack, styled } from "@mui/material";
 import { enqueueSnackbar, OptionsObject } from "notistack";
 import * as React from "react";
 
-import { useCommonContext } from "../hooks/useCommonContext";
-
 const ignoreEvent = (e: React.BaseSyntheticEvent | Event) => {
   e.preventDefault();
   e.stopPropagation();
@@ -26,6 +24,7 @@ const FileDragBox = styled(Box)<{ isMouseHover?: boolean }>(({ theme, isMouseHov
 
 type DndFileInputProps = {
   onFileChange?: (file: File | null) => void;
+  language: "ko" | "en";
 };
 
 type DndFileInputState = {
@@ -33,10 +32,9 @@ type DndFileInputState = {
   openSetValueDialog?: boolean;
 };
 
-export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange }) => {
+export const DndFileInput: React.FC<DndFileInputProps> = ({ onFileChange, language }) => {
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const fileDragBoxRef = React.useRef<HTMLDivElement>(null);
-  const { language } = useCommonContext();
   const [state, setState] = React.useState<DndFileInputState>({});
   const [, forceRender] = React.useReducer((x) => x + 1, 0);
 
diff --git a/packages/common/src/components/error_handler.tsx b/packages/common/src/components/error_handler.tsx
index 643e41f..38ed5c7 100644
--- a/packages/common/src/components/error_handler.tsx
+++ b/packages/common/src/components/error_handler.tsx
@@ -2,8 +2,6 @@ import { Button, Typography } from "@mui/material";
 import { Suspense } from "@suspensive/react";
 import * as React from "react";
 
-import * as CommonContext from "../hooks";
-
 const DetailedErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
   console.error(error);
   const errorObject = Object.getOwnPropertyNames(error).reduce(
@@ -61,15 +59,10 @@ const SimplifiedErrorFallback: React.FC<{ reset: () => void }> = ({ reset }) =>
   );
 };
 
-export const ErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
-  const InnerErrorFallback: React.FC<{ error: Error; reset: () => void }> = ({ error, reset }) => {
-    const { debug } = CommonContext.Common.useCommonContext();
-    return debug ? <DetailedErrorFallback error={error} reset={reset} /> : <SimplifiedErrorFallback reset={reset} />;
-  };
-
+export const ErrorFallback: React.FC<{ error: Error; reset: () => void; debug?: boolean }> = ({ error, reset, debug }) => {
   return (
     <Suspense fallback={<>로딩 중...</>}>
-      <InnerErrorFallback error={error} reset={reset} />
+      {debug ? <DetailedErrorFallback error={error} reset={reset} /> : <SimplifiedErrorFallback reset={reset} />}
     </Suspense>
   );
 };
diff --git a/packages/common/src/components/mdx.tsx b/packages/common/src/components/mdx.tsx
index 0afd1d1..ae49bd9 100644
--- a/packages/common/src/components/mdx.tsx
+++ b/packages/common/src/components/mdx.tsx
@@ -9,7 +9,6 @@ import * as runtime from "react/jsx-runtime";
 import remarkGfm from "remark-gfm";
 import * as R from "remeda";
 
-import * as Hooks from "../hooks";
 import { ErrorFallback } from "./error_handler";
 import { LinkHandler } from "./link_handler";
 import { rtrim } from "../utils/string";
@@ -88,10 +87,11 @@ type MDXRendererPropType = {
   text: string;
   resetKey?: number;
   format?: "mdx" | "md";
+  baseUrl: string;
+  mdxComponents?: MDXComponents;
 };
 
-export const MDXRenderer: React.FC<MDXRendererPropType> = ({ text, resetKey, format }) => {
-  const { baseUrl, mdxComponents } = Hooks.Common.useCommonContext();
+export const MDXRenderer: React.FC<MDXRendererPropType> = ({ text, resetKey, format, baseUrl, mdxComponents }) => {
   const [state, setState] = React.useState<{
     component: React.ReactNode;
     resetKey: number;
diff --git a/packages/shop/src/components/features/product.tsx b/packages/shop/src/components/features/product.tsx
index f20cacc..cc41591 100644
--- a/packages/shop/src/components/features/product.tsx
+++ b/packages/shop/src/components/features/product.tsx
@@ -107,6 +107,7 @@ const ProductItem: React.FC<ProductItemPropType> = ({ disabled: rootDisabled, la
   const navigate = useNavigate();
   const [, forceRender] = React.useReducer((x) => x + 1, 0);
   const [helperText, setHelperText] = React.useState<string | undefined>(undefined);
+  const { baseUrl, mdxComponents } = Common.Hooks.Common.useCommonContext();
   const { handleSubmit, subscribe, control, getValues, register, formState } = useForm<Record<string, string>>({ mode: "all" });
   const shopAPIClient = ShopHooks.useShopClient();
   const addItemToCartMutation = ShopHooks.useAddItemToCartMutation(shopAPIClient);
@@ -262,7 +263,7 @@ const ProductItem: React.FC<ProductItemPropType> = ({ disabled: rootDisabled, la
 
   return (
     <>
-      <Common.Components.MDXRenderer text={product.description || ""} format="mdx" />
+      <Common.Components.MDXRenderer text={product.description || ""} format="mdx" baseUrl={baseUrl} mdxComponents={mdxComponents} />
       <br />
       <Divider />
       {R.isNullish(notPurchasableReason) ? (