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

board_notice/templates/board_notice/create_notice.html

@@ -0,0 +1,72 @@
+{% extends "components/base.html" %}
+{% block title %}Create Notice{% endblock %}
+
+{% block main_area %}
+  <h1 class="pt-3">Create New Notice</h1>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        <form method="POST" id="post-form">
+          {% csrf_token %}
+          <div class="mb-3">
+            {{ form.title.label_tag }}
+            {{ form.title }}
+          </div>
+
+          <!-- 마크다운 에디터 -->
+          <h2>Contents</h2>
+
+          <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">Create Notice</button>
+            <a href="{% url 'board_notice:notice_list' %}" class="btn btn-secondary">Cancel</a>
+          </div>
+        </form>
+      </div>
+      <div class="col-md-6">
+        <div id="preview" class="border p-3 bg-light h-100 overflow-auto"></div>
+      </div>
+    </div>
+
+    <!-- 마크다운 파서 및 스크립트 -->
+    <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({
+        highlight: function (str, lang) {
+          if (lang && hljs.getLanguage(lang)) {
+            try {
+              return hljs
+                .highlight(str, {language: lang})
+                .value;
+            } catch (__) {}
+          }
+          return ''; // 기본 HTML 이스케이프 처리
+        }
+      });
+
+      // content 필드와 미리보기 연결
+      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 변환
+        preview.innerHTML = renderedContent;
+
+        // Highlight.js로 코드 블록 강조
+        document
+          .querySelectorAll("#preview pre code")
+          .forEach((block) => {
+            hljs.highlightElement(block);
+          });
+      });
+    </script>
+  </div>
+{% endblock %}