Merge branch 'master' of https://github.com/hyundai-autoever-first-pr…

…oject-team3/Blog-FE

src/components/EditorPage/Dropdown.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ReactSVG } from 'react-svg';
+import Arrowdown from '../../assets/Arrow down.svg';
+
+const Dropdown = ({ options, placeholder }) => {
+  return (
+    <div className="relative w-full">
+      <select className="w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-1 focus:ring-orange-200">
+        <option value="" disabled selected hidden>
+          {placeholder}
+        </option>
+        {options.map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      <div className="absolute inset-y-0 flex items-center px-2 pointer-events-none right-1">
+        <ReactSVG
+          src={Arrowdown}
+          beforeInjection={(svg) => {
+            svg.classList.add('text-gray-700');
+            svg.setAttribute('style', 'fill: currentColor');
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Dropdown;

src/components/EditorPage/MdEditor.jsx

@@ -1,6 +1,7 @@
 import React, { 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';
@@ -9,15 +10,48 @@ import '../../styles/Editor.css';
 function MdEditor() {
   const [value, setValue] = useState("");
   const [title, setTitle] = useState("");
+  const [algorithm, setAlgorithm] = useState("");
+
+  const algorithmOptions = [
+    "이진 탐색",
+    "다익스트라",
+    "너비 우선 탐색",
+    "깊이 우선 탐색",
+    "동적 계획법",
+    "그리디",
+    "브루트포스",
+    "구현",
+    "그래프 탐색",
+    "최단 경로"
+  ];
 
   const handleEditorChange = (newValue) => {
     setValue(newValue);
   };
 
+  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;
+        setValue((prevValue) => `${prevValue}\n![image](${imageUrl})`);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
   return (
-    <div className="flex h-screen" data-color-mode="light">
+    <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={title} setTitle={setTitle} />
+        <div className="flex px-1 m-3 space-x-2">
+          <Dropdown options={['백준', '프로그래머스', '민코딩']} placeholder="SITE" />
+          <Dropdown options={['C', 'JAVA', 'PYTHON']} placeholder="언어" />
+          <Dropdown options={algorithmOptions} placeholder="알고리즘 유형" onChange={setAlgorithm} />
+        </div>
         <MDEditor
           height="100%"
           value={value}
@@ -41,4 +75,5 @@ function MdEditor() {
   );
 }
 
-export default MdEditor;
+export default MdEditor;
+

src/styles/Editor.css

@@ -3,6 +3,13 @@
 .w-md-editor-toolbar button[data-name="preview"] {
   display: none;
 }
+
+@media (max-width: 640px) {
+  .w-md-editor-toolbar button[data-name="fullscreen"] {
+    display: none;
+  }
+}
+
 .preview-content pre {
   background-color: #004 !important; 
   color: #fff !important;