From 94e45013491d5e6c81a1ca024a874ee8ed18e0f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9A=A8=EC=9B=90?= <ymj07168@gmail.com>
Date: Thu, 24 Oct 2024 16:52:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20editor=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EditorPage/MdEditor.jsx | 105 +++++++++++++++++++++++++
 1 file changed, 105 insertions(+)

diff --git a/src/components/EditorPage/MdEditor.jsx b/src/components/EditorPage/MdEditor.jsx
index e69de29..22e0117 100644
--- a/src/components/EditorPage/MdEditor.jsx
+++ b/src/components/EditorPage/MdEditor.jsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import PostTitle from "./PostTitle";
+import EditerFooter from "./EditorFooter";
+import Dropdown from "./Dropdown";
+import MDEditor from "@uiw/react-md-editor/nohighlight";
+import "@uiw/react-md-editor/markdown-editor.css";
+import "@uiw/react-markdown-preview/markdown.css";
+import "../../styles/Editor.css";
+import { getAlgorithms } from "../../api/detail";
+
+function MdEditor() {
+  const [postData, setPostData] = useState({
+    language: "언어",
+    site: "사이트",
+    algorithmId: 1,
+    title: "제목",
+    tag: "태그",
+    link: "링크",
+    codeContent: "코드",
+    content: "내용",
+  });
+  const [algorithmOptions, setAlgorithmOptions] = useState([]);
+  const algorithmNames = algorithmOptions.map((item) => item.korClassification);
+
+  const handleDrop = async (event) => {
+    event.preventDefault();
+    const files = event.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const imageUrl = e.target.result;
+        setPostData((prev) => `${prev}\n![image](${imageUrl})`);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  useEffect(() => {
+    getAlgorithms().then((res) => setAlgorithmOptions(res.data.algorithmList));
+  }, []);
+
+  return (
+    <div
+      className="flex h-screen"
+      data-color-mode="light"
+      onDrop={handleDrop}
+      onDragOver={(e) => e.preventDefault()}
+    >
+      <div className="flex flex-col w-full h-full sm:w-1/2">
+        <PostTitle
+          title={postData?.title}
+          onChange={(e) => setPostData({ ...postData, title: e.target.value })}
+        />
+        <div className="flex px-1 m-3 space-x-2">
+          <Dropdown
+            name="site"
+            value={postData?.site}
+            options={["백준", "Programmers", "SWEA", "민코딩"]}
+            placeholder="SITE"
+            onChange={(e) => setPostData({ ...postData, site: e.target.value })}
+          />
+          <Dropdown
+            name="language"
+            value={postData?.language}
+            options={["C", "Java", "Python"]}
+            placeholder="언어"
+            onChange={(e) =>
+              setPostData({ ...postData, language: e.target.value })
+            }
+          />
+          <Dropdown
+            name="algorithm"
+            value={algorithmNames[postData.algorithmId - 1]}
+            options={algorithmNames}
+            placeholder="알고리즘"
+            onChange={(e) =>
+              setPostData({ ...postData, algorithmId: Number(e.target.value) })
+            }
+          />
+        </div>
+        <MDEditor
+          height="100%"
+          value={postData?.content}
+          onChange={(value) => setPostData({ ...postData, content: value })}
+          preview="edit"
+          textareaProps={{
+            placeholder: "내용을 입력하세요.",
+          }}
+        />
+        <EditerFooter />
+      </div>
+      <div className="flex-col hidden w-1/2 h-full p-3 overflow-auto sm:flex bg-sky-50">
+        <div className="preview-content">
+          <MDEditor.Markdown
+            source={`# ${postData.title}\n${postData.content}`}
+            style={{ whiteSpace: "pre-wrap" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MdEditor;