fix: uiw/react-md-editor 라이브러리로 인해 빌드가 꺠지는 문제 해소

Author: MU-Software

package.json

@@ -67,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 {
@@ -39,8 +40,10 @@ export default {
     "@mui/material",
     "@suspensive/react",
     "@tanstack/react-query",
+    "@uiw/react-md-editor",
   ],
   plugins: [
+    css(),
     json(),
     typescript({ tsconfig: "./tsconfig.json" }),
     resolve(),

packages/common/src/components/mdx_editor.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Apps, Save } from "@mui/icons-material";
 import { Button, ButtonProps, MenuItem, Select, Stack, Typography } from "@mui/material";
 import MDEditor, { GroupOptions, RefMDEditor, commands } from '@uiw/react-md-editor';
-import * as CryptoJS from "crypto-js";
+// import * as CryptoJS from "crypto-js";
 import type { MDXComponents } from "mdx/types";
 
 import Hooks from "../hooks";
@@ -40,38 +40,38 @@ const TextEditorStyle: React.CSSProperties = {
 
 const getDefaultValueFromLocalStorage = (sectionId?: string): string => localStorage.getItem(LOCAL_STORAGE_KEY + (sectionId || "unknown")) ?? "";
 
-const calculateMD5FromFileBase64 = (fileBase64: string): string => CryptoJS.MD5(CryptoJS.enc.Base64.parse(fileBase64)).toString();
-
-const onFileInEvent: React.DragEventHandler<HTMLDivElement> = (event) => {
-  event.preventDefault();
-  event.stopPropagation();
-
-  if (!event.dataTransfer) { // Might be a drag event
-    alert('이 브라우저는 해당 동작을 지원하지 않습니다.');
-    return;
-  }
-
-  const images = Array.from(event.dataTransfer.files).filter(f => f.type.startsWith("image/"))
-  if (images.length === 0) {
-    alert('이미지 파일만 첨부할 수 있어요.');
-    return;
-  }
-
-  images.forEach(
-    (item) => {
-      let reader = new FileReader();
-      reader.onload = (e) => {
-        if (!e.target || typeof e.target.result !== "string") return;
-        console.log(`이미지 MD5 해시: ${calculateMD5FromFileBase64(e.target.result.split(',')[1])}`);
-      }
-      reader.onerror = (e) => {
-        console.error('Error reading file:', e);
-        alert('파일을 읽는 중 오류가 발생했습니다.');
-      };
-      reader.readAsDataURL(item);
-    }
-  );
-}
+// const calculateMD5FromFileBase64 = (fileBase64: string): string => CryptoJS.MD5(CryptoJS.enc.Base64.parse(fileBase64)).toString();
+
+// const onFileInEvent: React.DragEventHandler<HTMLDivElement> = (event) => {
+//   event.preventDefault();
+//   event.stopPropagation();
+
+//   if (!event.dataTransfer) { // Might be a drag event
+//     alert('이 브라우저는 해당 동작을 지원하지 않습니다.');
+//     return;
+//   }
+
+//   const images = Array.from(event.dataTransfer.files).filter(f => f.type.startsWith("image/"))
+//   if (images.length === 0) {
+//     alert('이미지 파일만 첨부할 수 있어요.');
+//     return;
+//   }
+
+//   images.forEach(
+//     (item) => {
+//       let reader = new FileReader();
+//       reader.onload = (e) => {
+//         if (!e.target || typeof e.target.result !== "string") return;
+//         console.log(`이미지 MD5 해시: ${calculateMD5FromFileBase64(e.target.result.split(',')[1])}`);
+//       }
+//       reader.onerror = (e) => {
+//         console.error('Error reading file:', e);
+//         alert('파일을 읽는 중 오류가 발생했습니다.');
+//       };
+//       reader.readAsDataURL(item);
+//     }
+//   );
+// }
 
 const getCustomComponentSelector: (registeredComponentList: CustomComponentInfoType[]) => GroupOptions["children"] = (registeredComponentList) => ({ close, getState, textApi }) => {
   const componentSelectorRef = React.useRef<HTMLSelectElement>(null);
@@ -163,7 +163,7 @@ export const MDXEditor: React.FC<MDXEditorProps> = ({ sectionId, defaultValue, i
       highlightEnable={true}
       ref={setRef}
       value={value}
-      onChange={(v, e, s) => setValue(v || "")}
+      onChange={(v) => setValue(v || "")}
       commands={[
         commands.group(
           [

packages/shop/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 {
@@ -39,9 +40,11 @@ export default {
     "@mui/material",
     "@suspensive/react",
     "@tanstack/react-query",
+    "@uiw/react-md-editor",
     "@frontend/common",
   ],
   plugins: [
+    css(),
     json(),
     typescript({ tsconfig: "./tsconfig.json" }),
     resolve(),