markdown 수정 페이지 호출 방식 변경

board_notice/templates/board_notice/create_notice.html

@@ -54,10 +54,38 @@
       const textarea = document.getElementById("markdown-editor");
       const preview = document.getElementById("preview");
 
-      // 실시간 미리보기 업데이트
-      textarea.addEventListener("input", function () {
-        const markdownContent = textarea.value; // textarea 내용 가져오기
-        const renderedContent = md.render(markdownContent); // 마크다운 -> HTML 변환
+      // 미리보기 업데이트 함수
+      async function updatePreview() {
+        const markdownContent = textarea.value;
+        const lines = markdownContent.split("\n");
+
+        for (let i = 0; i < lines.length; i++) {
+          const match = lines[i].match(/!\[Image\]\((.+)\)/);
+          if (match) {
+            const objectName = match[1];
+            try {
+              // Presigned URL 가져오기
+              const response = await fetch("/obs_minio/get_presigned_url/", {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json"
+                },
+                body: JSON.stringify({object_name: objectName})
+              });
+
+              if (response.ok) {
+                const data = await response.json();
+                const presignedUrl = data.presigned_url;
+                lines[i] = `![Image](${presignedUrl})`; // Presigned URL로 업데이트
+              }
+            } catch (error) {
+              console.error("Error fetching presigned URL:", error);
+            }
+          }
+        }
+
+        // 마크다운 렌더링 및 미리보기 업데이트
+        const renderedContent = md.render(lines.join("\n"));
         preview.innerHTML = renderedContent;
 
         // Highlight.js로 코드 블록 강조
@@ -66,6 +94,54 @@
           .forEach((block) => {
             hljs.highlightElement(block);
           });
+      }
+
+      // 실시간 미리보기 업데이트
+      textarea.addEventListener("input", updatePreview);
+
+      // Ctrl+V로 이미지 붙여넣기 처리
+      textarea.addEventListener("paste", async function (event) {
+        const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+
+        for (const item of items) {
+          if (item.type.startsWith("image/")) {
+            const file = item.getAsFile();
+            if (!file) 
+              return;
+            
+            const formData = new FormData();
+            formData.append("image", file);
+
+            try {
+              // 이미지 업로드 API 호출
+              const response = await fetch("/obs_minio/upload/", {
+                method: "POST",
+                body: formData
+              });
+
+              if (response.ok) {
+                const data = await response.json();
+                const fullImageUrl = data.url; // 전체 URL
+                const objectName = fullImageUrl
+                  .split("/")
+                  .slice(-2)
+                  .join("/");
+
+                // 마크다운 에디터에 이미지 삽입
+                const markdownImage = `![Image](${objectName})\n`;
+                textarea.value += markdownImage;
+
+                // 미리보기 업데이트
+                updatePreview();
+              } else {
+                alert("Image upload failed. Please try again.");
+              }
+            } catch (error) {
+              console.error("Error uploading image:", error);
+              alert("An error occurred during image upload.");
+            }
+          }
+        }
       });
     </script>
   </div>