From 98bb05a0843a0f83d8153de50c4d7fd719b608dc Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Thu, 9 Jul 2026 13:11:46 +0900
Subject: [PATCH] Standardize blog editor and content styles

---
 src/TaxBaik.Web/Pages/Blog/Post.cshtml        | 39 ++++++-----
 .../Pages/Shared/_BlogEditor.cshtml           | 46 ++++++-------
 src/TaxBaik.Web/wwwroot/css/admin.css         | 25 ++++++--
 src/TaxBaik.Web/wwwroot/css/site.css          | 64 +++++++++++++++++++
 4 files changed, 124 insertions(+), 50 deletions(-)

diff --git a/src/TaxBaik.Web/Pages/Blog/Post.cshtml b/src/TaxBaik.Web/Pages/Blog/Post.cshtml
index 9e8efc2..148e2d6 100644
--- a/src/TaxBaik.Web/Pages/Blog/Post.cshtml
+++ b/src/TaxBaik.Web/Pages/Blog/Post.cshtml
@@ -11,7 +11,7 @@
 
 @if (Model.Post != null)
 {
-    <article class="container section" style="max-width: 720px;">
+    <article class="content-shell content-article py-4 py-lg-5">
         <nav aria-label="breadcrumb" class="mb-4">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a href="/">홈</a></li>
@@ -20,43 +20,38 @@
             </ol>
         </nav>
 
-        <div class="mb-4">
+        <div class="mb-4 d-flex flex-wrap gap-2">
             <a href="/blog" class="btn btn-outline-primary btn-sm">← 블로그 목록으로 돌아가기</a>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-copy-url>📋 링크복사</button>
         </div>
 
         @if (!string.IsNullOrEmpty(Model.Post.ThumbnailUrl))
         {
             <img src="@Model.Post.ThumbnailUrl" alt="@Model.Post.Title"
-                loading="lazy" class="img-fluid rounded mb-4" style="max-height: 400px; object-fit: cover; width: 100%;" />
+                loading="lazy" class="img-fluid rounded-4 mb-4 w-100" style="max-height: 400px; object-fit: cover;" />
         }
 
         <h1 class="fw-bold mb-3">@Model.Post.Title</h1>
         <div class="text-muted small mb-4 d-flex flex-wrap gap-3">
             <span>📅 @Model.Post.CreatedAt.ToString("yyyy년 MM월 dd일")</span>
             <span>👁️ @Model.Post.ViewCount 조회</span>
-            <span class="badge bg-primary">@Model.Post.CategoryName</span>
+            <span class="badge bg-primary-lt text-primary">@Model.Post.CategoryName</span>
         </div>
 
         <hr class="my-4" />
 
-        <div class="article-body lh-lg markdown-body">
+        <div class="article-body lh-lg content-prose">
             @Html.Raw(Model.HtmlContent)
         </div>
 
         <hr class="my-4" />
 
         <!-- CTA -->
-        <section class="bg-primary-light p-4 rounded mb-5">
+        <section class="content-card p-4 mb-5">
             <h5 class="fw-bold mb-2 text-primary">상담이 필요하신가요?</h5>
             <p class="mb-3 text-muted">이 글과 관련된 상담이 필요하면 언제든 연락주세요.</p>
             <a href="/contact" class="btn btn-primary">📞 상담 신청하기</a>
         </section>
-
-        <!-- Share -->
-        <section class="text-center mb-5">
-            <p class="small text-muted mb-3">이 글을 공유하세요:</p>
-            <button class="btn btn-sm btn-outline-primary" onclick="copyUrl()" title="링크 복사">📋 링크복사</button>
-        </section>
     </article>
 }
 else
@@ -67,13 +62,15 @@ else
     </section>
 }
 
-<script>
-function copyUrl() {
-    navigator.clipboard.writeText(window.location.href).then(() => {
-        const btn = event.target;
-        const originalText = btn.textContent;
-        btn.textContent = '✅ 복사됨';
-        setTimeout(() => btn.textContent = originalText, 2000);
-    });
+@section Scripts {
+    <script>
+        document.querySelectorAll('[data-copy-url]').forEach((button) => {
+            button.addEventListener('click', async () => {
+                await navigator.clipboard.writeText(window.location.href);
+                const originalText = button.textContent;
+                button.textContent = '✅ 복사됨';
+                setTimeout(() => button.textContent = originalText, 2000);
+            });
+        });
+    </script>
 }
-</script>
diff --git a/src/TaxBaik.Web/Pages/Shared/_BlogEditor.cshtml b/src/TaxBaik.Web/Pages/Shared/_BlogEditor.cshtml
index cf11e95..77ce23e 100644
--- a/src/TaxBaik.Web/Pages/Shared/_BlogEditor.cshtml
+++ b/src/TaxBaik.Web/Pages/Shared/_BlogEditor.cshtml
@@ -1,6 +1,6 @@
 @model TaxBaik.Web.Pages.Shared.BlogEditorModel
 
-<section class="container-xl admin-page-shell admin-editor-root" data-blog-editor-root>
+<section class="container-xl admin-page-shell admin-editor-root blog-editor-shell" data-blog-editor-root>
     <div class="row g-3">
         <div class="col-12">
             <div class="page-header d-print-none mb-4">
@@ -27,19 +27,19 @@
                         <input class="form-control" id="Input_Title" name="Input.Title" value="@Model.Title" />
                         <span class="text-danger small" data-valmsg-for="Input.Title" data-valmsg-replace="true"></span>
                     </div>
-                    <div class="mb-3">
+                    <div class="mb-3 editor-block">
                         <label class="form-label">본문</label>
-                        <div class="d-flex flex-wrap gap-2 admin-editor-toolbar">
-                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="bold">Bold</button>
-                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="italic">Italic</button>
-                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="insertUnorderedList">UL</button>
-                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="formatBlock" data-blog-value="h2">H2</button>
-                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="formatBlock" data-blog-value="blockquote">Quote</button>
+                        <div class="editor-toolbar" role="toolbar" aria-label="블로그 편집 도구">
+                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="bold">굵게</button>
+                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="italic">기울임</button>
+                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="insertUnorderedList">목록</button>
+                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="formatBlock" data-blog-value="h2">제목 2</button>
+                            <button type="button" class="btn btn-sm btn-outline-secondary" data-blog-command="formatBlock" data-blog-value="blockquote">인용</button>
                         </div>
-                        <div class="form-control admin-editor-content" data-blog-editor contenteditable="true">@Html.Raw(Model.Content)</div>
-                        <div class="form-hint text-muted small mt-2">HTML 태그는 그대로 저장되고 홈페이지에서 렌더링됩니다.</div>
+                        <div class="editor-surface" data-blog-editor contenteditable="true" aria-label="블로그 본문 편집기">@Html.Raw(Model.Content)</div>
+                        <div class="form-hint text-muted small mt-2">편집 결과는 HTML로 저장되고, 홈페이지에서도 같은 스타일 규칙으로 렌더링됩니다.</div>
                     </div>
-                    <div class="row g-3">
+                    <div class="row g-3 blog-meta-grid">
                         <div class="col-md-4">
                             <label class="form-label" for="Input_CategoryId">카테고리</label>
                             <input class="form-control" id="Input_CategoryId" name="Input.CategoryId" value="@Model.CategoryId" />
@@ -62,30 +62,26 @@
                         </div>
                     </div>
                 </div>
-                <div class="card-footer bg-white d-flex justify-content-between">
-                    @if (Model.IsEdit)
-                    {
-                        <button class="btn btn-outline-danger" type="submit" formaction="@Model.DeleteAction" formmethod="post" onclick="return confirm('삭제하시겠습니까?');">삭제</button>
-                    }
-                    else
-                    {
-                        <a class="btn btn-outline-secondary" href="/admin/blog">취소</a>
-                    }
-                    <div class="d-flex gap-2">
+                <div class="card-footer bg-white d-flex flex-wrap justify-content-between gap-2">
+                    <div class="d-flex flex-wrap gap-2">
                         @if (Model.IsEdit)
                         {
-                            <a class="btn btn-outline-secondary" href="/admin/blog">취소</a>
+                            <button class="btn btn-outline-danger" type="submit" formaction="@Model.DeleteAction" formmethod="post" onclick="return confirm('삭제하시겠습니까?');">삭제</button>
                         }
-                        <button class="btn btn-primary" type="submit">저장</button>
+                        <a class="btn btn-outline-secondary" href="/admin/blog">취소</a>
                     </div>
+                    <button class="btn btn-primary" type="submit">저장</button>
                 </div>
             </form>
         </div>
         <div class="col-lg-4">
             <div class="card admin-page-card h-100">
-                <div class="card-header"><h3 class="card-title">미리보기</h3></div>
+                <div class="card-header d-flex align-items-center justify-content-between gap-2">
+                    <h3 class="card-title mb-0">실시간 미리보기</h3>
+                    <span class="badge bg-secondary-lt text-secondary">공통 스타일</span>
+                </div>
                 <div class="card-body">
-                    <article class="markdown-body admin-editor-preview" data-blog-preview>@Html.Raw(Model.Content)</article>
+                    <article class="content-prose blog-preview-pane" data-blog-preview>@Html.Raw(Model.Content)</article>
                 </div>
             </div>
         </div>
diff --git a/src/TaxBaik.Web/wwwroot/css/admin.css b/src/TaxBaik.Web/wwwroot/css/admin.css
index fdc4b9e..8b706fe 100644
--- a/src/TaxBaik.Web/wwwroot/css/admin.css
+++ b/src/TaxBaik.Web/wwwroot/css/admin.css
@@ -1461,17 +1461,34 @@ textarea:focus-visible {
   padding: 3rem 1.5rem;
 }
 
-.admin-editor-root .admin-editor-toolbar {
+.blog-editor-shell .editor-block {
+  margin-bottom: 1.25rem;
+}
+
+.blog-editor-shell .editor-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
-.admin-editor-content {
+.blog-editor-shell .editor-surface,
+.blog-editor-shell .blog-preview-pane {
   min-height: 320px;
   overflow: auto;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--bg-primary);
+  padding: 1rem 1.1rem;
 }
 
-.admin-editor-preview {
-  min-height: 320px;
+.blog-editor-shell .editor-surface:focus {
+  outline: 2px solid rgba(31, 78, 121, 0.18);
+  border-color: var(--primary-color);
+}
+
+.blog-editor-shell .blog-meta-grid {
+  margin-top: 0.25rem;
 }
 
 /* ============================================================================
diff --git a/src/TaxBaik.Web/wwwroot/css/site.css b/src/TaxBaik.Web/wwwroot/css/site.css
index da5831b..bc53c51 100644
--- a/src/TaxBaik.Web/wwwroot/css/site.css
+++ b/src/TaxBaik.Web/wwwroot/css/site.css
@@ -58,6 +58,70 @@ body {
     letter-spacing: 0.3px;
 }
 
+/* ===== 공통 콘텐츠 렌더링 ===== */
+.content-shell {
+    max-width: 1120px;
+    margin-inline: auto;
+    padding-inline: var(--spacing-lg);
+}
+
+.content-article {
+    max-width: 840px;
+}
+
+.content-card {
+    background: #fff;
+    border: 1px solid rgba(217, 211, 196, 0.7);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-sm);
+}
+
+.content-prose {
+    color: var(--color-text);
+    line-height: 1.9;
+    word-break: keep-all;
+}
+
+.content-prose > :first-child {
+    margin-top: 0;
+}
+
+.content-prose > :last-child {
+    margin-bottom: 0;
+}
+
+.content-prose h2,
+.content-prose h3,
+.content-prose h4 {
+    margin-top: 1.75rem;
+    margin-bottom: 1rem;
+}
+
+.content-prose p,
+.content-prose ul,
+.content-prose ol,
+.content-prose blockquote {
+    margin-bottom: 1rem;
+}
+
+.content-prose img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-lg);
+}
+
+.content-prose blockquote {
+    padding: 1rem 1.25rem;
+    border-left: 4px solid var(--color-primary);
+    background: rgba(200, 157, 110, 0.08);
+    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+    color: var(--color-text-light);
+}
+
+.content-prose table {
+    width: 100%;
+}
+
 /* ===== 타이포그래피 ===== */
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;