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

2025-04-09 13:47:35 +09:00 · 2025-04-09 13:47:35 +09:00 · 06d6010c19
commit 06d6010c19
parent fd3ab674c3
6 changed files with 275 additions and 87 deletions
--- a/blog/templates/blog/post_detail.html
+++ b/blog/templates/blog/post_detail.html
@ -42,13 +42,14 @@
  <!-- Highlight.js Script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
  <script>
-    // Initialize Highlight.js
-    document.addEventListener("DOMContentLoaded", () => {
-      document
-        .querySelectorAll("pre code")
-        .forEach((block) => {
-          hljs.highlightElement(block);
-        });
+    // 문서 로드 후 동작
+    document.addEventListener("DOMContentLoaded", async () => {
+      // 코드 블럭 하이라이트
+      document.querySelectorAll("pre code").forEach((block) => {
+        hljs.highlightElement(block);
+      });
+
+      await updateImagesWithPresignedUrls();
    });

    // Function to update images with presigned URLs
@ -90,9 +91,6 @@
        });
    }

-    // Call the function when the page loads
-    document.addEventListener("DOMContentLoaded", updateImagesWithPresignedUrls);
-
    // Delete post
    document
      .getElementById("delete-button")
--- a/blog/templates/blog/update_post.html
+++ b/blog/templates/blog/update_post.html
@ -1,10 +1,9 @@
 {% extends "components/base.html" %}
-{% block title %}Update Post{% endblock %}
+{% block title %}post edit{% endblock %}

 {% block main_area %}
-  <h1 class="pt-3">Update Post</h1>
-  <div class="container mt-3">
-    <h5 class="text-danger">&#9671;마크다운 미리보기는 Contents 편집 내용 입력시 동작합니다.</h5>
+  <h1 class="pt-3">post edit</h1>
+  <div class="container">
    <div class="row mt-3">
      <div class="col-md-6">
        <form method="POST" id="post-form">
@ -27,9 +26,10 @@
          <div class="col-md-12">
            {{ form.contents }}
          </div>
+
          <!-- 버튼 -->
          <div class="d-flex justify-content-end mt-4">
-            <button type="submit" class="btn btn-primary me-2">Save Changes</button>
+            <button type="submit" class="btn btn-primary me-2">Save</button>
            <a href="{% url 'blog:post_list' %}" class="btn btn-secondary">Cancel</a>
          </div>
        </form>
@ -44,25 +44,20 @@
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script>
-      // 마크다운 파서 초기화
      const md = window.markdownit({
        highlight: function (str, lang) {
          if (lang && hljs.getLanguage(lang)) {
            try {
-              return hljs
-                .highlight(str, {language: lang})
-                .value;
+              return hljs.highlight(str, { language: lang }).value;
            } catch (__) {}
          }
-          return ''; // 기본 HTML 이스케이프 처리
+          return '';
        }
      });

-      // content 필드와 미리보기 연결
      const textarea = document.getElementById("markdown-editor");
      const preview = document.getElementById("preview");

-      // 미리보기 업데이트 함수
      async function updatePreview() {
        const markdownContent = textarea.value;
        const lines = markdownContent.split("\n");
@ -74,10 +69,8 @@
            try {
              const response = await fetch("/obs_minio/get_presigned_url/", {
                method: "POST",
-                headers: {
-                  "Content-Type": "application/json"
-                },
-                body: JSON.stringify({object_name: objectName})
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ object_name: objectName })
              });

              if (response.ok) {
@ -91,35 +84,35 @@
          }
        }

-        const renderedContent = md.render(lines.join("\n"));
-        preview.innerHTML = renderedContent;
+        preview.innerHTML = md.render(lines.join("\n"));

-        // Highlight.js로 코드 블록 강조
-        document
-          .querySelectorAll("#preview pre code")
-          .forEach((block) => {
-            hljs.highlightElement(block);
-          });
+        // 코드 블록 하이라이트 적용
+        document.querySelectorAll("#preview pre code").forEach((block) => {
+          hljs.highlightElement(block);
+        });
      }

-      // 실시간 미리보기 업데이트
+      // 페이지 로드되자마자 초기 미리보기 렌더링
+      document.addEventListener("DOMContentLoaded", function () {
+        updatePreview();
+      });
+
+      // 입력할 때마다 미리보기 업데이트
      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;
-            
+            if (!file) return;
+
            const formData = new FormData();
            formData.append("image", file);

            try {
-              // 이미지 업로드 API 호출
              const response = await fetch("/obs_minio/upload/", {
                method: "POST",
                body: formData
@ -127,17 +120,12 @@

              if (response.ok) {
                const data = await response.json();
-                const fullImageUrl = data.url; // 전체 URL
-                const objectName = fullImageUrl
-                  .split("/")
-                  .slice(-2)
-                  .join("/");
+                const fullImageUrl = data.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.");
--- a/board_notice/templates/board_notice/create_notice.html
+++ b/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>
--- a/board_notice/templates/board_notice/notice_detail.html
+++ b/board_notice/templates/board_notice/notice_detail.html
@ -4,15 +4,18 @@
 {% block main_area %}
  <!-- Title -->
  <h1 class="mt-4">{{ notice.title }}</h1>
+
  <!-- Author -->
-  <div class="text-muted fst-italic mb-2">{{ notice.created_at }}
-    <br>
-    by.
-    {{ notice.author | upper }}</div>
+  <div class="text-muted fst-italic mb-2">
+    {{ notice.created_at }}<br>
+    by. {{ notice.author | upper }}
+  </div>
+
  <!-- Rendered Markdown Content -->
-  <div>
+  <div id="post-content">
    {{ notice.render_markdown|safe }}
  </div>
+
  <hr>

  {% if request.user == notice.author %}
@ -28,29 +31,68 @@

  <!-- Highlight.js Styles -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
+  
  <!-- Highlight.js Script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+  
  <script>
-    // Initialize Highlight.js
-    document.addEventListener("DOMContentLoaded", () => {
-      document
-        .querySelectorAll("pre code")
-        .forEach((block) => {
-          hljs.highlightElement(block);
-        });
+    // 문서 로드 후 동작
+    document.addEventListener("DOMContentLoaded", async () => {
+      // 코드 블럭 하이라이트
+      document.querySelectorAll("pre code").forEach((block) => {
+        hljs.highlightElement(block);
+      });
+
+      await updateImagesWithPresignedUrls();
    });
-  </script>
-  <!-- Delete Notice -->
-  <script>
+
+    // 이미지 Presigned URL로 변환
+    async function updateImagesWithPresignedUrls() {
+      const contentDiv = document.getElementById("post-content");
+      const contentHtml = contentDiv.innerHTML;
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(contentHtml, "text/html");
+      const images = doc.querySelectorAll("img");
+
+      for (const img of images) {
+        const objectName = img.getAttribute("src");
+        try {
+          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();
+            img.setAttribute("src", data.presigned_url);
+          }
+        } catch (error) {
+          console.error("Error fetching presigned URL:", error);
+        }
+      }
+
+      // 변경된 HTML 다시 적용
+      contentDiv.innerHTML = doc.body.innerHTML;
+
+      // 다시 하이라이트 적용
+      document.querySelectorAll("pre code").forEach((block) => {
+        hljs.highlightElement(block);
+      });
+    }
+
+    // Delete 버튼 클릭 이벤트
    document
      .getElementById("delete-button")
      .addEventListener("click", function () {
-        const confirmed = confirm("Are you sure you want to delete this Notice?");
-        if (confirmed) {
-          document
-            .getElementById("delete-form")
-            .submit();
-        }
-      });
+      const confirmed = confirm("Are you sure you want to delete this Notice?");
+      if (confirmed) {
+        document
+          .getElementById("delete-form")
+          .submit();
+      }
+    });
  </script>
-{% endblock %}
+{% endblock %}
--- a/board_notice/templates/board_notice/update_notice.html
+++ b/board_notice/templates/board_notice/update_notice.html
@ -1,10 +1,10 @@
 {% extends "components/base.html" %}
-{% block title %}Update Post{% endblock %}
+{% block title %}notice edit{% endblock %}

 {% block main_area %}
-  <h1 class="pt-3">Update Post</h1>
+  <h1 class="pt-3">notice edit</h1>
  <div class="container">
-    <div class="row">
+    <div class="row mt-3">
      <div class="col-md-6">
        <form method="POST" id="post-form">
          {% csrf_token %}
@ -26,10 +26,11 @@
          <div class="col-md-12">
            {{ form.contents }}
          </div>
+
          <!-- 버튼 -->
          <div class="d-flex justify-content-end mt-4">
-            <button type="submit" class="btn btn-primary me-2">Save Changes</button>
-            <a href="{% url 'blog:post_list' %}" class="btn btn-secondary">Cancel</a>
+            <button type="submit" class="btn btn-primary me-2">Save</button>
+            <a href="{% url 'board_notice:notice_list' %}" class="btn btn-secondary">Cancel</a>
          </div>
        </form>
      </div>
@ -40,18 +41,101 @@

    <!-- 마크다운 파서 및 스크립트 -->
    <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script>
-      // 마크다운 파서 초기화
-      const md = window.markdownit();
+      const md = window.markdownit({
+        highlight: function (str, lang) {
+          if (lang && hljs.getLanguage(lang)) {
+            try {
+              return hljs.highlight(str, { language: lang }).value;
+            } catch (__) {}
+          }
+          return '';
+        }
+      });

-      // content 필드와 미리보기 연결
      const textarea = document.getElementById("markdown-editor");
      const preview = document.getElementById("preview");

-      // 실시간 미리보기 업데이트
-      textarea.addEventListener("input", function () {
-        const markdownContent = textarea.value; // textarea 내용 가져오기
-        preview.innerHTML = 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 {
+              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})`;
+              }
+            } catch (error) {
+              console.error("Error fetching presigned URL:", error);
+            }
+          }
+        }
+
+        preview.innerHTML = md.render(lines.join("\n"));
+
+        // 코드 블록 하이라이트 적용
+        document.querySelectorAll("#preview pre code").forEach((block) => {
+          hljs.highlightElement(block);
+        });
+      }
+
+      // 페이지 로드되자마자 초기 미리보기 렌더링
+      document.addEventListener("DOMContentLoaded", function () {
+        updatePreview();
+      });
+
+      // 입력할 때마다 미리보기 업데이트
+      textarea.addEventListener("input", updatePreview);
+
+      // 이미지 붙여넣기
+      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 {
+              const response = await fetch("/obs_minio/upload/", {
+                method: "POST",
+                body: formData
+              });
+
+              if (response.ok) {
+                const data = await response.json();
+                const fullImageUrl = data.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>
--- a/2
+++ b/2
@ -1 +1 @@
-dev_0.0.34
+dev_0.0.35