fix: 어드민과 페이지의 스타일이 다르던 문제 수정

Author: MU-Software

apps/pyconkr-admin/src/components/pages/page/editor.tsx

@@ -1,6 +1,6 @@
 import * as Common from "@frontend/common";
 import { Add, Delete, OpenInNew } from "@mui/icons-material";
-import { Box, Button, ButtonProps, CircularProgress, Divider, Stack, Tab, Tabs } from "@mui/material";
+import { Box, Button, ButtonProps, CircularProgress, Divider, Stack, Tab, Tabs, ThemeProvider } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { commands } from "@uiw/react-md-editor";
 import * as React from "react";
@@ -10,6 +10,7 @@ import { useParams } from "react-router-dom";
 // but for whatever reason this stupid namespace won't import on Common.Schemas.BackendAdminAPI.PageSectionSchema.
 // TODO: FIXME: Remove this hack when the issue is resolved. This is dumb.
 import BackendAdminAPISchemas from "../../../../../../packages/common/src/schemas/backendAdminAPI";
+import { muiTheme } from "../../../styles/globalStyles";
 import { addErrorSnackbar } from "../../../utils/snackbar";
 import { AdminEditor } from "../../layouts/admin_editor";
 
@@ -61,7 +62,9 @@ const SectionTextEditor: React.FC<SectionTextEditorPropType> = ({
         </Button>
       </Stack>
       <Box sx={{ flexGrow: 1, width: "50%", backgroundColor: "#fff" }}>
-        <Common.Components.MDXRenderer text={defaultValue || ""} />
+        <ThemeProvider theme={muiTheme}>
+          <Common.Components.MDXRenderer text={defaultValue || ""} />
+        </ThemeProvider>
       </Box>
     </Stack>
   );

apps/pyconkr-admin/src/styles/globalStyles.ts

@@ -0,0 +1,108 @@
+import { css } from "@emotion/react";
+import { createTheme } from "@mui/material/styles";
+
+export const muiTheme = createTheme({
+  typography: {
+    fontFamily:
+      'Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif',
+  },
+  palette: {
+    primary: {
+      main: "#259299",
+      light: "#B6D8D7",
+      dark: "#126D7F",
+      nonFocus: "#7AB2B3",
+    },
+    secondary: {
+      main: "#259299",
+      light: "#B6D8D7",
+      dark: "#126D7F",
+    },
+    highlight: {
+      main: "#E17101",
+      light: "#EE8D74",
+      dark: "#C66900",
+      contrastText: "#FFFFFF",
+    },
+    text: {
+      primary: "#000000",
+      secondary: "#666666",
+      disabled: "#999999",
+    },
+    background: {
+      default: "#FFFFFF",
+      paper: "#FFFFFF",
+    },
+    common: {
+      black: "#000000",
+      white: "#FFFFFF",
+    },
+    error: {
+      main: "#d32f2f",
+      light: "#ef5350",
+      dark: "#c62828",
+    },
+    warning: {
+      main: "#ed6c02",
+      light: "#ff9800",
+      dark: "#e65100",
+    },
+    info: {
+      main: "#0288d1",
+      light: "#03a9f4",
+      dark: "#01579b",
+    },
+    success: {
+      main: "#2e7d32",
+      light: "#4caf50",
+      dark: "#1b5e20",
+    },
+  },
+});
+
+export const globalStyles = css`
+  @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
+
+  html,
+  body {
+    font-family:
+      "Pretendard",
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      "Helvetica Neue",
+      "Segoe UI",
+      "Apple SD Gothic Neo",
+      "Noto Sans KR",
+      "Malgun Gothic",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    overscroll-behavior: none;
+    word-break: keep-all;
+    overflow-wrap: break-all;
+
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+    user-drag: none;
+
+    font-variant-numeric: tabular-nums;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+`;