Tabler polish for client and blog editors

2026-07-09 13:44:26 +09:00
parent 8c0c30525d
commit 00521668be
5 changed files with 78 additions and 28 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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;