[UI] @uiw/react-md-editor NextJS 오류 대처

uiwjs/react-md-editor#52

components/tree/sections/viewSection.tsx

@@ -4,6 +4,9 @@ import { useState } from 'react';
 import { Button, Box } from '@mui/material';
 import styles from '@/styles/tree.module.scss'
 import { Tree } from '@/src/models/tree.model';
+import "@uiw/react-md-editor/markdown-editor.css";
+import "@uiw/react-markdown-preview/markdown.css";
+import dynamic from "next/dynamic";
 
 interface Props {
   open: boolean;
@@ -34,11 +37,27 @@ const ViewSection = ({ open, drawerWidth, fileTabVaue, files }: Props) => {
     }),
   }));
 
+  const MDEditor = dynamic(
+    () => import("@uiw/react-md-editor").then((mod) => mod.default),
+    { ssr: false }
+  );
+  const EditerMarkdown = dynamic(
+    () =>
+      import("@uiw/react-md-editor").then((mod) => {
+        return mod.default.Markdown;
+      }),
+    { ssr: false }
+  );
+
   return (
     <Box sx={{ marginTop: styles.appHeaderHeightPX }} >
       <CssBaseline />
       <Main open={open}>
-        {files[fileTabVaue]?.treeContent || ''}
+        <MDEditor
+          value={files[fileTabVaue]?.treeContent || ''}
+          onChange={() => {}}
+        />
+        <EditerMarkdown source={files[fileTabVaue]?.treeContent || ''} style={{ whiteSpace: 'pre-wrap' }} />
       </Main>
     </Box>
   );

next.config.js

@@ -1,7 +1,10 @@
 /** @type {import('next').NextConfig} */
+
+const removeImports = require("next-remove-imports")();
+
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
 }
 
-module.exports = nextConfig
+module.exports = removeImports(nextConfig);