feat/#14-mdeditor 이미지 업로드 구현 완료

team-pofo · Dec 16, 2024 · d67c3d7 · d67c3d7
1 parent 295dffb
commit d67c3d7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 28 deletions.
diff --git a/src/components/Newpost/ImageUpload/ImageUpload.tsx b/src/components/Newpost/ImageUpload/ImageUpload.tsx
@@ -11,8 +11,8 @@ export default function UploadBox() {
   const [showModal, setShowModal] = useState(false);
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
 
-  const handleDragStart = () => setActive(true);
-  const handleDragEnd = (event: React.DragEvent<HTMLLabelElement>) => {
+  const handleDragEnter = () => setActive(true);
+  const handleDragLeave = (event: React.DragEvent<HTMLLabelElement>) => {
     // 드래그가 완전히 벗어난 경우에만 setActive(false)를 호출
     if (!event.currentTarget.contains(event.relatedTarget as Node)) {
       setActive(false);
@@ -113,9 +113,9 @@ export default function UploadBox() {
         </Style.ImagePreview>
       ))}
       <Style.ImageUpload
-        onDragEnter={handleDragStart}
+        onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
-        onDragLeave={handleDragEnd}
+        onDragLeave={handleDragLeave}
         onDrop={handleDrop}
         isActive={isActive}
       >

diff --git a/src/components/Newpost/MDEditor/styles.ts b/src/components/Newpost/MDEditor/styles.ts
@@ -1,7 +1,5 @@
 import styled from "@emotion/styled";
 
-const lightgrey = "#d7e2eb";
-
 interface DragProps {
   isActive: boolean;
 }
@@ -10,6 +8,4 @@ export const ImageDragDiv = styled.div<DragProps>`
   align-items: center;
 
   border-radius: 5px;
-  background-color: ${({ isActive }) => (isActive ? lightgrey : "white")};
-  opacity: ${({ isActive }) => (isActive ? "0.3" : "1.0")};
 `;
diff --git a/src/components/Newpost/styles.ts b/src/components/Newpost/styles.ts
@@ -5,7 +5,7 @@ const lightgrey = "#d7e2eb";
 const grey = "#b2c0cc";
 
 export const NewpostContainer = styled.div`
-  max-width: 800px;
+  max-width: 1200px;
   min-height: 100svh;
   align-items: center;
   padding: 20px 20px 20px 20px;

diff --git a/src/components/newpost/MDEditor/mdeditor.tsx b/src/components/newpost/MDEditor/mdeditor.tsx
@@ -3,7 +3,7 @@ import "@uiw/react-markdown-preview/markdown.css";
 import Spinners from "@/components/Common/Spinners";
 import { uploadImage } from "@/pages/api/NewPost/mdeditor-image-upload";
 import dynamic from "next/dynamic";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import * as Style from "./styles";
 
 const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
@@ -22,13 +22,9 @@ function MdEditor() {
       setIsActive(false);
     }
   };
-  const handleDragOver = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    []
-  );
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -47,8 +43,9 @@ function MdEditor() {
             if (imageUrl) {
               setValue(
                 (prev) =>
-                  prev +
-                  `\n![image](https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_3.jpg)\n`
+                  prev.substring(0, cursorPosition) +
+                  `\n![image](https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_3.jpg)\n` +
+                  prev.substring(cursorPosition)
               );
             }
             setLoading(false);
@@ -133,18 +130,12 @@ function MdEditor() {
           onPaste={handlePaste}
           textareaProps={{
             onFocus: handleFocus,
-            onSelect: handleSelect, // 텍스트 선택 시 커서 위치 추적
-            onMouseUp: handleMouseUp, // 마우스 클릭 시 커서 위치 추적
-            onKeyUp: handleKeyUp, // 방향키로 커서 이동 시 커서 위치 추적
+            onSelect: handleSelect,
+            onMouseUp: handleMouseUp,
+            onKeyUp: handleKeyUp,
             disabled: loading,
           }}
-          style={{
-            pointerEvents: loading ? "none" : "auto",
-            opacity: loading ? 0.3 : 1,
-            backgroundColor: "#ffffff",
-          }}
         />
-
         {loading && (
           <div
             style={{