Merge pull request #16 from pythonkr/feature/admin-editor

feat: `MDXEditor` 추가

Author: MU-Software

apps/pyconkr/src/components/layout/index.tsx

@@ -56,10 +56,17 @@ const LayoutContainer = styled.div`
 const MainContent = styled.main`
   flex: 1;
 
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  > * {
+    flex-grow: 1;
+  }
 `;
 
 export default function MainLayout() {

apps/pyconkr/src/components/pages/test.tsx

@@ -1,30 +1,36 @@
 import * as React from "react";
 
-import { Box, Button } from "@mui/material";
+import { Button, Stack } from "@mui/material";
 
 import { BackendTestPage } from '../../debug/page/backend_test';
 import { MdiTestPage } from "../../debug/page/mdi_test";
 import { ShopTestPage } from "../../debug/page/shop_test";
 
+const LOCAL_STORAGE_KEY = "selectedTab";
 type SelectedTabType = "shop" | "mdi" | "backend";
 
+const getTabFromLocalStorage = (): SelectedTabType => localStorage.getItem(LOCAL_STORAGE_KEY) as SelectedTabType || "shop";
+
+const setTabToLocalStorage = (tab: SelectedTabType) => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, tab);
+  return tab;
+};
+
+const TabList: { [key in SelectedTabType]: React.ReactNode } = {
+  shop: <ShopTestPage />,
+  mdi: <MdiTestPage />,
+  backend: <BackendTestPage />,
+};
+
 export const Test: React.FC = () => {
-  const [selectedTab, setSelectedTab] = React.useState<SelectedTabType>("mdi");
-
-  return (
-    <Box>
-      <Button variant="contained" onClick={() => setSelectedTab("shop")}>
-        Shop Test
-      </Button>
-      <Button variant="contained" onClick={() => setSelectedTab("mdi")}>
-        MDI Test
-      </Button>
-      <Button variant="contained" onClick={() => setSelectedTab("backend")}>
-        Backend Test
-      </Button>
-      {selectedTab === "shop" && <ShopTestPage />}
-      {selectedTab === "mdi" && <MdiTestPage />}
-      {selectedTab === "backend" && <BackendTestPage />}
-    </Box>
-  );
+  const [selectedTab, setSelectedTab] = React.useState<SelectedTabType>(getTabFromLocalStorage());
+  const selectTab = (tab: SelectedTabType) => setSelectedTab(setTabToLocalStorage(tab));
+  const TabButton: React.FC<{ tab: SelectedTabType }> = ({ tab }) => <Button variant={selectedTab === tab ? "contained" : "outlined"} onClick={() => selectTab(tab)}>{tab} Test</Button>;
+
+  return <Stack>
+    <Stack direction="row" spacing={2} sx={{ width: "100%", justifyContent: "center" }}>
+      {Object.keys(TabList).map((tab) => <TabButton key={tab} tab={tab as SelectedTabType} />)}
+    </Stack>
+    {TabList[selectedTab]}
+  </Stack>;
 };

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

@@ -1,43 +1,24 @@
 import React from "react";
 
-import { Box, Button, Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 
-import { MDX_HELP_TEXT } from "@apps/pyconkr/consts/mdx_help_text";
 import * as Common from "@frontend/common";
 
-const LOCAL_STEORAGE_KEY = "mdi_test_input";
-
-const getMdxInputFromLocalStorage: () => string = () => {
-  const input = localStorage.getItem(LOCAL_STEORAGE_KEY);
-  return input ? input : "";
-}
-
-const setMdxInputToLocalStorage: (input: string) => string = (input) => {
-  localStorage.setItem(LOCAL_STEORAGE_KEY, input);
-  return input;
-}
+const HalfWidthStyle: React.CSSProperties = { width: "50%", maxWidth: "50%" };
 
 export const MdiTestPage: React.FC = () => {
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
-  const [state, setState] = React.useState<{ text: string, resetKey: number }>({
-    text: getMdxInputFromLocalStorage(),
-    resetKey: Math.random()
-  });
-
-  const setMDXInput = (text: string) => setState({ text: setMdxInputToLocalStorage(text), resetKey: Math.random() });
+  const [state, setState] = React.useState<{ text: string, resetKey: number }>({ text: "", resetKey: Math.random() });
+  const setMDXInput = (text: string) => setState({ text, resetKey: Math.random() });
+  const onLoad = (text: string) => {
+    setState((prev) => ({ ...prev, text }));
+    if (inputRef.current) inputRef.current.value = text;
+  }
 
   return (
-    <Stack direction="row" spacing={2} sx={{ width: "100%", flexGrow: 1, p: 2 }}>
-      <Stack direction="column" spacing={2} sx={{ width: "50%", maxWidth: "50%" }}>
-        <textarea ref={inputRef} defaultValue={state.text} style={{ flexGrow: 1 }} />
-        <Stack direction="column" spacing={2} sx={{ mb: 2 }}>
-          <Button variant="contained" sx={{ flexGrow: 1 }} onClick={() => inputRef.current && setMDXInput(inputRef.current.value)}>변환</Button>
-          <Button variant="contained" sx={{ flexGrow: 1 }} onClick={() => setMDXInput(MDX_HELP_TEXT)}>Help Text 로딩</Button>
-        </Stack>
-      </Stack>
-      <Box sx={{ width: "50%", maxWidth: "50%", overflowY: "scroll" }}>
-        <Common.Components.MDXRenderer {...state} />
-      </Box>
+    <Stack direction="row" spacing={2} sx={{ width: "100%", height: "100%", minHeight: "100%", maxHeight: "100%", flexGrow: 1, py: 2 }}>
+      <Box sx={HalfWidthStyle}><Common.Components.MDXEditor inputRef={inputRef} defaultValue={state.text} onLoad={onLoad} onSave={setMDXInput} ctrlSMode="save" /></Box>
+      <Box sx={HalfWidthStyle}><Common.Components.MDXRenderer {...state} /></Box>
     </Stack>
   );
 };

package.json

@@ -29,8 +29,10 @@
     "@mui/material": "^7.1.0",
     "@suspensive/react": "^3.2.0",
     "@tanstack/react-query": "^5.76.1",
+    "@uiw/react-md-editor": "^4.0.7",
     "astring": "^1.9.0",
     "axios": "^1.9.0",
+    "crypto-js": "^4.2.0",
     "globals": "^15.15.0",
     "mui-mdx-components": "^0.5.0",
     "notistack": "^3.0.2",
@@ -46,6 +48,7 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@tanstack/react-query-devtools": "^5.76.1",
+    "@types/crypto-js": "^4.2.2",
     "@types/mdx": "^2.0.13",
     "@types/node": "^22.15.18",
     "@types/react": "^19.1.4",
@@ -64,6 +67,7 @@
     "iamport-typings": "^1.4.0",
     "prettier": "^3.5.3",
     "rollup": "^4.40.2",
+    "rollup-plugin-import-css": "^3.5.8",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.32.1",

packages/common/rollup.config.js

@@ -1,6 +1,7 @@
 import commonjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
 import resolve, { nodeResolve } from "@rollup/plugin-node-resolve";
+import css from "rollup-plugin-import-css";
 import typescript from "rollup-plugin-typescript2";
 
 export default {
@@ -41,6 +42,7 @@ export default {
     "@tanstack/react-query",
   ],
   plugins: [
+    css(),
     json(),
     typescript({ tsconfig: "./tsconfig.json" }),
     resolve(),

packages/common/src/components/index.ts

@@ -6,13 +6,15 @@ import {
 } from './dynamic_route';
 import { ErrorFallback as ErrorFallbackComponent } from './error_handler';
 import { MDXRenderer as MDXRendererComponent } from "./mdx";
+import { MDXEditor as MDXEditorComponent } from './mdx_editor';
 import { PythonKorea as PythonKoreaComponent } from './pythonkorea';
 
 namespace Components {
   export const CommonContextProvider = CommonContextProviderComponent;
   export const RouteRenderer = RouteRendererComponent;
   export const PageRenderer = PageRendererComponent;
   export const PageIdParamRenderer = PageIdParamRendererComponent;
+  export const MDXEditor = MDXEditorComponent;
   export const MDXRenderer = MDXRendererComponent;
   export const PythonKorea = PythonKoreaComponent;
   export const ErrorFallback = ErrorFallbackComponent;