feat: markdown editor 적용

Author: DongEun02

app/(with-sidebar)/layout.tsx

@@ -1,5 +1,8 @@
 import Sidebar from '@/components/common/Sidebar';
 
+import '@uiw/react-md-editor/markdown-editor.css';
+import '@uiw/react-markdown-preview/markdown.css';
+
 export default function SidebarLayout({
   children,
 }: {

app/(with-sidebar)/write/page.tsx

@@ -0,0 +1,11 @@
+import Editor from '@/components/write/Editor';
+
+const Page = () => {
+  return (
+    <div className="bg-background flex min-h-screen flex-col">
+      <Editor />
+    </div>
+  );
+};
+
+export default Page;

components/common/Sidebar.tsx

@@ -16,7 +16,7 @@ const navItems = [
   { label: '홈', href: '/', icon: Home },
   { label: '개발 일지', href: '/logs', icon: ClipboardList },
   { label: '새 계획 만들기', href: '/plans/new', icon: CalendarPlus },
-  { label: '새 페이지 만들기', href: '/pages/new', icon: CopyPlus },
+  { label: '새 페이지 만들기', href: '/write', icon: CopyPlus },
 ];
 
 const Sidebar = () => {

components/write/Editor.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useState } from 'react';
+import type { MDEditorProps } from '@uiw/react-md-editor';
+
+const MDEditor = dynamic<MDEditorProps>(() => import('@uiw/react-md-editor'), {
+  ssr: false,
+});
+
+const Editor = () => {
+  const [value, setValue] = useState<string>('');
+
+  return (
+    <div
+      data-color-mode="light"
+      className="mx-auto mt-8 w-full max-w-5xl rounded-2xl px-4 [&_.w-md-editor]:border-0! [&_.w-md-editor]:bg-transparent! [&_.w-md-editor]:shadow-none [&_.w-md-editor-text]:bg-transparent! [&_.w-md-editor-toolbar]:bg-transparent! [&_.wmde-markdown]:bg-transparent!"
+    >
+      <MDEditor
+        value={value}
+        onChange={(v) => setValue(v ?? '')}
+        height={850}
+        preview="live"
+        textareaProps={{
+          placeholder: '내용을 입력하세요',
+          maxLength: 2000,
+        }}
+        commandsFilter={(cmd) => {
+          if (cmd?.name === 'fullscreen') return false;
+          return cmd;
+        }}
+      />
+    </div>
+  );
+};
+
+export default Editor;