init

blog/templates/blog/create_post copy.html

@@ -0,0 +1,39 @@
+{% extends "components/base.html" %}
+{% block title %}Create Post{% endblock %}
+
+{% block main_area %}
+  <h1>Create New Post</h1>
+  <div class="row">
+    <!-- 왼쪽: 마크다운 에디터 -->
+    <div class="col-md-6">
+      <form method="POST" id="post-form">
+        {% csrf_token %}
+        {{ form.as_p }}
+        <button type="submit" class="btn btn-primary mt-3">Save</button>
+      </form>
+    </div>
+
+    <!-- 오른쪽: 미리보기 -->
+    <div class="col-md-6">
+      <h2>Preview</h2>
+      <div id="preview" class="border p-3" style="background: #f8f9fa; min-height: 300px;"></div>
+    </div>
+  </div>
+
+  <!-- 마크다운 파서 및 스크립트 -->
+  <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
+  <script>
+    // 마크다운 파서 초기화
+    const md = window.markdownit();
+
+    // 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 변환
+    });
+  </script>
+{% endblock %}

blog/templates/blog/create_post.html

@@ -0,0 +1,58 @@
+{% extends "components/base.html" %}
+{% block title %}Create Post{% endblock %}
+
+{% block main_area %}
+  <h1 class="pt-3">Create New Post</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>
+          <div class="mb-3">
+            {{ form.summary.label_tag }}
+            {{ form.summary }}
+          </div>
+          <div class="mb-3">
+            {{ form.tags.label_tag }}
+            {{ form.tags }}
+          </div>
+
+          <!-- 마크다운 에디터 -->
+          <h2>contents</h2>
+
+          <div class="col-md-12">
+            {{ form.content }}
+          </div>
+          <!-- 버튼 -->
+          <div class="d-flex justify-content-end mt-4">
+            <button type="submit" class="btn btn-primary me-2">Create Post</button>
+            <a href="{% url 'blog:post_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>
+    <script>
+      // 마크다운 파서 초기화
+      const md = window.markdownit();
+
+      // 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 변환
+      });
+    </script>
+  {% endblock %}

blog/templates/blog/post_detail.html

@@ -0,0 +1,26 @@
+{% extends "components/base.html" %}
+{% block title %}Post{% endblock %}
+
+{% block main_area %}
+  <!-- Title -->
+  <h1 class="mt-4">{{ post.title }}</h1>
+  {% if post.summary %}
+    <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>
+    {{ post.render_markdown|safe }}
+  </div>
+  <hr>
+  {% if post.tags.exists %}
+    <i class="fa-solid fa-tags"></i>
+    {% for tag in post.tags.all %}
+      <span class="badge bg-primary">{{ tag }}</span>
+    {% endfor %}
+    <br/>
+    <br/>
+  {% endif %}
+  <a href="{% url 'blog:post_list' %}" class="btn btn-secondary mt-3">Back to List</a>
+{% endblock %}

blog/templates/blog/post_list.html

@@ -0,0 +1,19 @@
+{% extends "components/base.html" %}
+
+{% block title %}Post{% endblock %}
+
+{% block main_area %}
+  <h1 class="pt-3">Blog Posts</h1>
+  {% if request.user.is_authenticated %}
+    <a href="{% url 'blog:create_post' %}" class="btn btn-primary mb-3">Create New Post</a>
+  {% endif %}
+  <ul class="list-group">
+    {% for post in posts %}
+      <li class="list-group-item">
+        <h5>{{ post.title }}</h5>
+        <p>{{ post.summary }}</p>
+        <a href="{% url 'blog:post_detail' post.pk %}" class="btn btn-secondary">Read More</a>
+      </li>
+    {% endfor %}
+  </ul>
+{% endblock %}