From 00521668beaf724dd863bfb36e2dad293f085b3a Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Thu, 9 Jul 2026 13:44:26 +0900
Subject: [PATCH] Tabler polish for client and blog editors

---
 .../Pages/Admin/Clients/Create.cshtml         |  6 +--
 .../Pages/Admin/Clients/Detail.cshtml         |  8 ++--
 .../Pages/Admin/Clients/Edit.cshtml           | 20 ++++++---
 .../Pages/Shared/_BlogEditor.cshtml           | 31 +++++++-------
 src/TaxBaik.Web/wwwroot/css/admin.css         | 41 +++++++++++++++++++
 5 files changed, 78 insertions(+), 28 deletions(-)

diff --git a/src/TaxBaik.Web/Pages/Admin/Clients/Create.cshtml b/src/TaxBaik.Web/Pages/Admin/Clients/Create.cshtml
index 5b39dad..08492b1 100644
--- a/src/TaxBaik.Web/Pages/Admin/Clients/Create.cshtml
+++ b/src/TaxBaik.Web/Pages/Admin/Clients/Create.cshtml
@@ -4,10 +4,10 @@
     ViewData["Title"] = "고객 등록";
 }
 
-<section class="container admin-page-shell">
+<section class="admin-page-shell">
     <partial name="_AdminPageHeader" model='("고객 관리", "고객 등록", "FluentValidation과 Tabler 표준 폼으로 신규 고객을 등록합니다.", null, null)' />
 
-    <form method="post" class="card shadow-sm border-0">
+    <form method="post" class="card">
         <div class="card-body">
             <partial name="_ValidationSummary" />
             <div class="row g-3">
@@ -50,7 +50,7 @@
                 </div>
             </div>
         </div>
-        <div class="card-footer bg-white d-flex justify-content-end gap-2">
+        <div class="card-footer d-flex justify-content-end gap-2">
             <a class="btn btn-outline-secondary" href="/admin/clients">취소</a>
             <button class="btn btn-primary" type="submit">저장</button>
         </div>
diff --git a/src/TaxBaik.Web/Pages/Admin/Clients/Detail.cshtml b/src/TaxBaik.Web/Pages/Admin/Clients/Detail.cshtml
index f7aa3f8..21a834d 100644
--- a/src/TaxBaik.Web/Pages/Admin/Clients/Detail.cshtml
+++ b/src/TaxBaik.Web/Pages/Admin/Clients/Detail.cshtml
@@ -4,7 +4,7 @@
     ViewData["Title"] = "고객 상세";
 }
 
-<section class="container admin-page-shell">
+<section class="admin-page-shell">
     <partial name="_AdminPageHeader" model='("고객 관리", "고객 상세", "고객의 기본 정보와 수정 경로를 확인합니다.", null, null)' />
 
     @if (Model.Client is null)
@@ -15,9 +15,9 @@
     {
         <div class="row g-4">
             <div class="col-lg-8">
-                <div class="card shadow-sm border-0">
+                <div class="card">
                     <div class="card-body">
-                        <dl class="row mb-0">
+                        <dl class="row details-grid mb-0">
                             <dt class="col-sm-3">고객명</dt>
                             <dd class="col-sm-9">@Model.Client.Name</dd>
                             <dt class="col-sm-3">회사명</dt>
@@ -45,7 +45,7 @@
                 </div>
             </div>
             <div class="col-lg-4">
-                <div class="card shadow-sm border-0">
+                <div class="card">
                     <div class="card-body d-grid gap-2">
                         <a class="btn btn-primary" href="/admin/clients/@Model.Client.Id/edit">수정</a>
                         <a class="btn btn-outline-secondary" href="/admin/clients">목록</a>
diff --git a/src/TaxBaik.Web/Pages/Admin/Clients/Edit.cshtml b/src/TaxBaik.Web/Pages/Admin/Clients/Edit.cshtml
index 7368aaa..f2893f3 100644
--- a/src/TaxBaik.Web/Pages/Admin/Clients/Edit.cshtml
+++ b/src/TaxBaik.Web/Pages/Admin/Clients/Edit.cshtml
@@ -4,10 +4,10 @@
     ViewData["Title"] = "고객 수정";
 }
 
-<section class="container admin-page-shell">
+<section class="admin-page-shell">
     <partial name="_AdminPageHeader" model='("고객 관리", "고객 수정", "기존 고객 정보를 불러와 Tabler 표준 폼으로 수정합니다.", null, null)' />
 
-    <form method="post" class="card shadow-sm border-0">
+    <form method="post" class="card">
         <div class="card-body">
             <partial name="_ValidationSummary" />
             <div class="row g-3">
@@ -50,13 +50,21 @@
                 </div>
             </div>
         </div>
-        <div class="card-footer bg-white d-flex justify-content-end gap-2">
+        <div class="card-footer d-flex justify-content-end gap-2">
             <a class="btn btn-outline-secondary" href="/admin/clients/@Model.Id">취소</a>
             <button class="btn btn-primary" type="submit">저장</button>
         </div>
     </form>
 </section>
 
-<form method="post" asp-page-handler="Delete" class="mt-3" onsubmit="return confirm('정말 삭제하시겠습니까?');">
-    <button class="btn btn-outline-danger" type="submit">삭제</button>
-</form>
+<div class="card mt-3">
+    <div class="card-body d-flex justify-content-between align-items-center gap-3">
+        <div>
+            <div class="text-muted small text-uppercase">위험 작업</div>
+            <div class="fw-semibold">고객을 삭제합니다.</div>
+        </div>
+        <form method="post" asp-page-handler="Delete" onsubmit="return confirm('정말 삭제하시겠습니까?');">
+            <button class="btn btn-outline-danger" type="submit">삭제</button>
+        </form>
+    </div>
+</div>
diff --git a/src/TaxBaik.Web/Pages/Shared/_BlogEditor.cshtml b/src/TaxBaik.Web/Pages/Shared/_BlogEditor.cshtml
index 77ce23e..bb5fbd7 100644
--- a/src/TaxBaik.Web/Pages/Shared/_BlogEditor.cshtml
+++ b/src/TaxBaik.Web/Pages/Shared/_BlogEditor.cshtml
@@ -1,22 +1,23 @@
 @model TaxBaik.Web.Pages.Shared.BlogEditorModel
 
-<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">
-                <div class="row align-items-center">
-                    <div class="col">
-                        <div class="page-pretitle">콘텐츠</div>
-                        <h2 class="page-title">@(Model.IsEdit ? "블로그 수정" : "블로그 등록")</h2>
-                        <p class="text-muted mb-0">@(Model.IsEdit ? "기존 글을 불러와 즉시 편집하고 미리볼 수 있습니다." : "에디터와 미리보기를 함께 제공하는 작성 화면입니다.")</p>
-                    </div>
-                </div>
+<section class="admin-page-shell admin-editor-root blog-editor-shell" data-blog-editor-root>
+    <div class="page-header d-print-none mb-4">
+        <div class="row align-items-center">
+            <div class="col">
+                <div class="page-pretitle">콘텐츠</div>
+                <h2 class="page-title">@(Model.IsEdit ? "블로그 수정" : "블로그 등록")</h2>
+                <p class="text-muted mb-0">@(Model.IsEdit ? "기존 글을 불러와 즉시 편집하고 미리볼 수 있습니다." : "에디터와 미리보기를 함께 제공하는 작성 화면입니다.")</p>
+            </div>
+            <div class="col-auto ms-auto">
+                <span class="badge bg-blue-lt text-blue">실시간 미리보기</span>
             </div>
         </div>
+    </div>
+    <div class="row g-3">
         <div class="col-lg-8">
-            <form method="post" class="card admin-page-card">
+            <form method="post" class="card">
                 <div class="card-body">
-                    <div asp-validation-summary="All" class="alert alert-danger"></div>
+                    <partial name="_ValidationSummary" />
                     @if (Model.IsEdit)
                     {
                         <input type="hidden" name="Id" value="@ViewData["BlogEditorId"]" />
@@ -62,7 +63,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="card-footer bg-white d-flex flex-wrap justify-content-between gap-2">
+                <div class="card-footer d-flex flex-wrap justify-content-between gap-2">
                     <div class="d-flex flex-wrap gap-2">
                         @if (Model.IsEdit)
                         {
@@ -75,7 +76,7 @@
             </form>
         </div>
         <div class="col-lg-4">
-            <div class="card admin-page-card h-100">
+            <div class="card h-100">
                 <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>
diff --git a/src/TaxBaik.Web/wwwroot/css/admin.css b/src/TaxBaik.Web/wwwroot/css/admin.css
index babe057..2211cb1 100644
--- a/src/TaxBaik.Web/wwwroot/css/admin.css
+++ b/src/TaxBaik.Web/wwwroot/css/admin.css
@@ -415,6 +415,47 @@ html, body {
   min-height: calc(100vh - 140px);
 }
 
+.admin-page-shell {
+  display: grid;
+  gap: 1rem;
+}
+
+.details-grid dt {
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: 0.35rem;
+}
+
+.details-grid dd {
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.blog-editor-shell .card,
+.admin-page-shell .card {
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-sm);
+}
+
+.blog-editor-shell .card-header,
+.admin-page-shell .card-header {
+  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
+}
+
+.blog-editor-shell .card-footer,
+.admin-page-shell .card-footer {
+  background: #fff;
+}
+
+.blog-editor-shell .editor-toolbar .btn {
+  border-radius: var(--radius-full);
+}
+
+.blog-editor-shell .blog-preview-pane {
+  border-radius: var(--radius-lg);
+  background: #fff;
+}
+
 .breadcrumb-muted {
   --bs-breadcrumb-divider-color: var(--text-tertiary);
   margin-bottom: 0;