공지사항관리 기능 분리 및 개선

blog/templates/blog/post_detail.html

@@ -8,8 +8,11 @@
     <h5 class="text-muted">{{ post.summary }}</h5>
   {% endif %}
   <!-- Author -->
-  <div class="text-muted fst-italic mb-2">{{ post.created_at }}  <br>
-    by. {{ post.author | upper }}</div>
+  <div class="text-muted fst-italic mb-2">{{ post.created_at }}
+    <br>
+    by.
+    {{ post.author | upper }}</div>
+  <!-- Rendered Markdown Content -->
   <div>
     {{ post.render_markdown|safe }}
   </div>
@@ -22,5 +25,43 @@
     <br/>
     <br/>
   {% endif %}
-  <a href="{% url 'blog:post_list' %}" class="btn btn-secondary mt-3">Back to List</a>
+
+  {% if request.user == post.author %}
+    <div class="d-flex mt-3">
+      <a href="{% url 'blog:post_list' %}" class="btn btn-secondary me-2">List</a>
+      <a href="{% url 'blog:update_post' post.pk %}" class="btn btn-warning me-2">Edit</a>
+      <form method="POST" action="{% url 'blog:delete_post' post.pk %}" class="d-inline" id="delete-form">
+        {% csrf_token %}
+        <button type="button" class="btn btn-danger" id="delete-button">Delete</button>
+      </form>
+    </div>
+  {% endif %}
+
+  <!-- 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);
+        });
+    });
+  </script>
+  <!-- Delete post -->
+  <script>
+    document
+      .getElementById("delete-button")
+      .addEventListener("click", function () {
+        const confirmed = confirm("Are you sure you want to delete this post?");
+        if (confirmed) {
+          document
+            .getElementById("delete-form")
+            .submit();
+        }
+      });
+  </script>
 {% endblock %}