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

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")

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.");