butler_ddochi/board_notice/templates/board_notice/notice_detail.html

{% extends "components/base.html" %}
{% block title %}Notice{% endblock %}

{% 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>

  <!-- Rendered Markdown Content -->
  <div id="post-content">
    {{ notice.render_markdown|safe }}
  </div>

  <hr>

  {% if request.user == notice.author %}
    <div class="d-flex mt-3">
      <a href="{% url 'board_notice:notice_list' %}" class="btn btn-secondary me-2">List</a>
      <a href="{% url 'board_notice:update_notice' notice.pk %}" class="btn btn-warning me-2">Edit</a>
      <form method="POST" action="{% url 'board_notice:delete_notice' notice.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>
    // 문서 로드 후 동작
    document.addEventListener("DOMContentLoaded", async () => {
      // 코드 블럭 하이라이트
      document.querySelectorAll("pre code").forEach((block) => {
        hljs.highlightElement(block);
      });

      await updateImagesWithPresignedUrls();
    });

    // 이미지 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();
      }
    });
  </script>
{% endblock %}