diff --git a/TaxBaik.Web/Pages/Blog/Post.cshtml b/TaxBaik.Web/Pages/Blog/Post.cshtml
index c27ea5a..9f2c9ec 100644
--- a/TaxBaik.Web/Pages/Blog/Post.cshtml
+++ b/TaxBaik.Web/Pages/Blog/Post.cshtml
@@ -39,8 +39,8 @@
- @Html.Raw(Model.Post.Content)
+
+ @Html.Raw(Model.HtmlContent)
diff --git a/TaxBaik.Web/Pages/Blog/Post.cshtml.cs b/TaxBaik.Web/Pages/Blog/Post.cshtml.cs
index 8c8935c..ddcb64a 100644
--- a/TaxBaik.Web/Pages/Blog/Post.cshtml.cs
+++ b/TaxBaik.Web/Pages/Blog/Post.cshtml.cs
@@ -1,6 +1,7 @@
using Microsoft.AspNetCore.Mvc.RazorPages;
using TaxBaik.Application.Services;
using TaxBaik.Domain.Entities;
+using Markdig;
namespace TaxBaik.Web.Pages.Blog;
@@ -9,6 +10,7 @@ public class BlogPostModel : PageModel
private readonly BlogService _blogService;
public BlogPost? Post { get; set; }
+ public string? HtmlContent { get; set; }
public BlogPostModel(BlogService blogService)
{
@@ -20,6 +22,7 @@ public class BlogPostModel : PageModel
Post = await _blogService.GetBySlugAsync(slug);
if (Post != null)
{
+ HtmlContent = Markdown.ToHtml(Post.Content ?? "");
_ = _blogService.IncrementViewCountAsync(Post.Id);
}
}
diff --git a/TaxBaik.Web/TaxBaik.Web.csproj b/TaxBaik.Web/TaxBaik.Web.csproj
index 0af16c5..0e29d42 100644
--- a/TaxBaik.Web/TaxBaik.Web.csproj
+++ b/TaxBaik.Web/TaxBaik.Web.csproj
@@ -23,6 +23,7 @@
+
diff --git a/TaxBaik.Web/wwwroot/css/site.css b/TaxBaik.Web/wwwroot/css/site.css
index 8e7ed5b..1c131e3 100644
--- a/TaxBaik.Web/wwwroot/css/site.css
+++ b/TaxBaik.Web/wwwroot/css/site.css
@@ -836,3 +836,141 @@ img {
box-shadow: 0 0 0 6px rgba(46, 92, 78, 0.3);
transform: scale(1.1);
}
+
+/* ===== 마크다운 스타일 ===== */
+.markdown-body {
+ font-size: 1rem;
+ line-height: 1.8;
+ color: var(--color-text);
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+ font-weight: 700;
+ margin-top: 1.5rem;
+ margin-bottom: 1rem;
+ color: var(--color-text);
+}
+
+.markdown-body h1 {
+ font-size: 1.8rem;
+ border-bottom: 2px solid var(--color-primary);
+ padding-bottom: 0.5rem;
+}
+
+.markdown-body h2 {
+ font-size: 1.5rem;
+ border-bottom: 1px solid var(--color-border);
+ padding-bottom: 0.3rem;
+}
+
+.markdown-body h3 {
+ font-size: 1.25rem;
+}
+
+.markdown-body h4 {
+ font-size: 1.1rem;
+}
+
+.markdown-body p {
+ margin-bottom: 1rem;
+}
+
+.markdown-body strong {
+ font-weight: 700;
+ color: var(--color-primary-dark);
+}
+
+.markdown-body em {
+ font-style: italic;
+ color: var(--color-text-light);
+}
+
+.markdown-body code {
+ background: var(--color-bg-alt);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-sm);
+ padding: 0.15rem 0.4rem;
+ font-family: 'Courier New', monospace;
+ font-size: 0.9rem;
+ color: #d63384;
+}
+
+.markdown-body pre {
+ background: var(--color-text);
+ color: #f8f8f8;
+ padding: 1rem;
+ border-radius: var(--radius-lg);
+ overflow-x: auto;
+ margin-bottom: 1rem;
+ line-height: 1.4;
+}
+
+.markdown-body pre code {
+ background: none;
+ border: none;
+ padding: 0;
+ color: inherit;
+ font-size: 0.9rem;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+ margin-bottom: 1rem;
+ margin-left: 2rem;
+}
+
+.markdown-body li {
+ margin-bottom: 0.5rem;
+}
+
+.markdown-body blockquote {
+ border-left: 4px solid var(--color-primary);
+ padding-left: 1rem;
+ margin: 1rem 0;
+ color: var(--color-text-light);
+ font-style: italic;
+}
+
+.markdown-body table {
+ border-collapse: collapse;
+ width: 100%;
+ margin-bottom: 1rem;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+ border: 1px solid var(--color-border);
+ padding: 0.75rem;
+ text-align: left;
+}
+
+.markdown-body table th {
+ background: var(--color-bg-alt);
+ font-weight: 700;
+}
+
+.markdown-body table tr:nth-child(even) {
+ background: var(--color-bg);
+}
+
+.markdown-body a {
+ color: var(--color-primary-dark);
+ text-decoration: none;
+ border-bottom: 1px solid var(--color-primary);
+ transition: color var(--transition-fast);
+}
+
+.markdown-body a:hover {
+ color: var(--color-primary);
+}
+
+.markdown-body hr {
+ border: none;
+ border-top: 1px solid var(--color-border);
+ margin: 2rem 0;
+}