Move admin page styling to shared css

2026-07-09 12:14:55 +09:00
parent 6ec4ef4c9a
commit 37e631582d
16 changed files with 70 additions and 43 deletions
@@ -4,20 +4,13 @@
    ViewData["Title"] = "블로그 등록";
 }

-<section class="container-fluid py-4" data-blog-editor-root>
+<section class="container-fluid admin-page-shell admin-editor-root" data-blog-editor-root>
    <div class="row g-3">
        <div class="col-12">
-            <div class="page-header">
-                <div class="row align-items-center">
-                    <div class="col">
-                        <div class="page-pretitle">Content</div>
-                        <h2 class="page-title">블로그 등록</h2>
-                    </div>
-                </div>
-            </div>
+            <partial name="_AdminPageHeader" model='("콘텐츠", "블로그 등록", "에디터와 미리보기를 함께 제공하는 작성 화면입니다.", null, null)' />
        </div>
        <div class="col-lg-8">
-            <form method="post" class="card">
+            <form method="post" class="card admin-page-card">
                <div class="card-body">
                    <div asp-validation-summary="All" class="alert alert-danger"></div>
                    <input type="hidden" asp-for="Input.Content" data-blog-editor-value />
@@ -28,14 +21,14 @@
                    </div>
                    <div class="mb-3">
                        <label class="form-label">본문</label>
-                        <div class="d-flex flex-wrap gap-2 mb-2">
+                        <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>
-                        <div class="form-control" data-blog-editor contenteditable="true" style="min-height: 320px; overflow:auto;"></div>
+                        <div class="form-control admin-editor-content" data-blog-editor contenteditable="true"></div>
                        <div class="form-hint text-muted small mt-2">HTML 태그는 그대로 저장되고 홈페이지에서 렌더링됩니다.</div>
                    </div>
                    <div class="row g-3">
@@ -61,17 +54,17 @@
                        </div>
                    </div>
                </div>
-                <div class="card-footer d-flex justify-content-between">
+                <div class="card-footer bg-white d-flex justify-content-between">
                    <a class="btn btn-outline-secondary" href="/admin/blog">취소</a>
                    <button class="btn btn-primary" type="submit">저장</button>
                </div>
            </form>
        </div>
        <div class="col-lg-4">
-            <div class="card">
+            <div class="card admin-page-card h-100">
                <div class="card-header"><h3 class="card-title">미리보기</h3></div>
                <div class="card-body">
-                    <article class="markdown-body" data-blog-preview></article>
+                    <article class="markdown-body admin-editor-preview" data-blog-preview></article>
                </div>
            </div>
        </div>
@@ -4,20 +4,13 @@
    ViewData["Title"] = "블로그 수정";
 }

-<section class="container-fluid py-4" data-blog-editor-root>
+<section class="container-fluid admin-page-shell admin-editor-root" data-blog-editor-root>
    <div class="row g-3">
        <div class="col-12">
-            <div class="page-header">
-                <div class="row align-items-center">
-                    <div class="col">
-                        <div class="page-pretitle">Content</div>
-                        <h2 class="page-title">블로그 수정</h2>
-                    </div>
-                </div>
-            </div>
+            <partial name="_AdminPageHeader" model='("콘텐츠", "블로그 수정", "기존 글을 불러와 즉시 편집하고 미리볼 수 있습니다.", null, null)' />
        </div>
        <div class="col-lg-8">
-            <form method="post" class="card">
+            <form method="post" class="card admin-page-card">
                <div class="card-body">
                    <div asp-validation-summary="All" class="alert alert-danger"></div>
                    <input type="hidden" asp-for="Id" />
@@ -28,14 +21,14 @@
                    </div>
                    <div class="mb-3">
                        <label class="form-label">본문</label>
-                        <div class="d-flex flex-wrap gap-2 mb-2">
+                        <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>
-                        <div class="form-control" data-blog-editor contenteditable="true" style="min-height: 320px; overflow:auto;">@Html.Raw(Model.Input.Content)</div>
+                        <div class="form-control admin-editor-content" data-blog-editor contenteditable="true">@Html.Raw(Model.Input.Content)</div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-4">
@@ -60,7 +53,7 @@
                        </div>
                    </div>
                </div>
-                <div class="card-footer d-flex justify-content-between">
+                <div class="card-footer bg-white d-flex justify-content-between">
                    <button class="btn btn-outline-danger" type="submit" formaction="?handler=Delete" formmethod="post" onclick="return confirm('삭제하시겠습니까?');">삭제</button>
                    <div class="d-flex gap-2">
                        <a class="btn btn-outline-secondary" href="/admin/blog">취소</a>
@@ -70,10 +63,10 @@
            </form>
        </div>
        <div class="col-lg-4">
-            <div class="card">
+            <div class="card admin-page-card h-100">
                <div class="card-header"><h3 class="card-title">미리보기</h3></div>
                <div class="card-body">
-                    <article class="markdown-body" data-blog-preview>@Html.Raw(Model.Input.Content)</article>
+                    <article class="markdown-body admin-editor-preview" data-blog-preview>@Html.Raw(Model.Input.Content)</article>
                </div>
            </div>
        </div>
@@ -1,7 +1,7 @@
@page
@model TaxBaik.Web.Pages.Admin.ClientLogs.IndexModel
@{ ViewData["Title"] = "클라이언트 로그"; }
-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("운영 로그", "클라이언트 로그", "고객별 작업 이력을 확인합니다.", null, null)' />
    <partial name="_ComingSoon" model="클라이언트 로그" />
 </section>
@@ -4,7 +4,7 @@
    ViewData["Title"] = "고객 등록";
 }

-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("고객 관리", "고객 등록", "FluentValidation과 Tabler 표준 폼으로 신규 고객을 등록합니다.", null, null)' />

    <form method="post" class="card shadow-sm border-0">
@@ -4,7 +4,7 @@
    ViewData["Title"] = "고객 상세";
 }

-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("고객 관리", "고객 상세", "고객의 기본 정보와 수정 경로를 확인합니다.", null, null)' />

    @if (Model.Client is null)
@@ -4,7 +4,7 @@
    ViewData["Title"] = "고객 수정";
 }

-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("고객 관리", "고객 수정", "기존 고객 정보를 불러와 Tabler 표준 폼으로 수정합니다.", null, null)' />

    <form method="post" class="card shadow-sm border-0">
@@ -4,7 +4,7 @@
    ViewData["Title"] = "고객 관리";
 }

-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("고객 관리", "고객 목록", "검색, 상태 필터, 페이지네이션 기준의 고객 목록입니다.", null, null)' />

    <form method="get" class="card shadow-sm border-0 mb-4">
@@ -1,4 +1,7 @@
@page
@model TaxBaik.Web.Pages.Admin.CommonCodes.IndexModel
@{ ViewData["Title"] = "공통코드"; }
-<section class="container py-5"><h1 class="h2 fw-bold">공통코드 관리</h1></section>
+<section class="container admin-page-shell">
+    <partial name="_AdminPageHeader" model='("운영 설정", "공통 코드", "코드성 데이터를 표준화해 관리합니다.", null, null)' />
+    <partial name="_ComingSoon" model="공통 코드" />
+</section>
@@ -1,7 +1,7 @@
@page
@model TaxBaik.Web.Pages.Admin.ConsultingActivities.IndexModel
@{ ViewData["Title"] = "상담 활동"; }
-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("세무 운영", "상담 활동", "상담 히스토리와 후속 조치를 관리합니다.", null, null)' />
    <partial name="_ComingSoon" model="상담 활동" />
 </section>
@@ -1,7 +1,7 @@
@page
@model TaxBaik.Web.Pages.Admin.Contracts.IndexModel
@{ ViewData["Title"] = "계약"; }
-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("세무 운영", "계약 관리", "계약 상태와 만료일을 추적합니다.", null, null)' />
    <partial name="_ComingSoon" model="계약 관리" />
 </section>
@@ -1,7 +1,7 @@
@page
@model TaxBaik.Web.Pages.Admin.RevenueTrackings.IndexModel
@{ ViewData["Title"] = "매출 추적"; }
-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("세무 운영", "매출 추적", "월별 매출 추이를 확인하는 분석 화면입니다.", null, null)' />
    <partial name="_ComingSoon" model="매출 추적" />
 </section>
@@ -1,7 +1,7 @@
@page
@model TaxBaik.Web.Pages.Admin.SeasonSimulator.IndexModel
@{ ViewData["Title"] = "시즌 시뮬레이터"; }
-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("운영 도구", "시즌 시뮬레이터", "정책 변경 시 영향을 미리 확인하는 도구입니다.", null, null)' />
    <partial name="_ComingSoon" model="시즌 시뮬레이터" />
 </section>
@@ -1,7 +1,7 @@
@page
@model TaxBaik.Web.Pages.Admin.Settings.IndexModel
@{ ViewData["Title"] = "설정"; }
-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("환경 설정", "설정", "시스템 기본값과 관리자 운영 정책을 정리합니다.", null, null)' />
    <partial name="_ComingSoon" model="설정 기능" />
 </section>
@@ -1,4 +1,7 @@
@page
@model TaxBaik.Web.Pages.Admin.TaxFilingSchedules.IndexModel
@{ ViewData["Title"] = "신고 일정"; }
-<section class="container py-5"><h1 class="h2 fw-bold">신고 일정 관리</h1></section>
+<section class="container admin-page-shell">
+    <partial name="_AdminPageHeader" model='("세무 운영", "세금 신고 일정", "세무 신고 마감 일정과 상태를 관리합니다.", null, null)' />
+    <partial name="_ComingSoon" model="세금 신고 일정" />
+</section>
@@ -1,7 +1,7 @@
@page
@model TaxBaik.Web.Pages.Admin.TaxFilings.IndexModel
@{ ViewData["Title"] = "세금 신고"; }
-<section class="container py-4 py-lg-5">
+<section class="container admin-page-shell">
    <partial name="_AdminPageHeader" model='("세무 운영", "세금 신고", "신고 상태를 한 화면에서 관리합니다.", null, null)' />
    <partial name="_ComingSoon" model="세금 신고 관리" />
 </section>
@@ -1439,6 +1439,41 @@ textarea:focus-visible {
  color: var(--text-secondary);
 }

+.admin-page-shell {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.admin-page-card {
+  border: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.admin-page-card-body {
+  background: #fff;
+}
+
+.admin-coming-soon-card {
+  text-align: center;
+}
+
+.admin-coming-soon-card .card-body {
+  padding: 3rem 1.5rem;
+}
+
+.admin-editor-root .admin-editor-toolbar {
+  margin-bottom: 0.75rem;
+}
+
+.admin-editor-content {
+  min-height: 320px;
+  overflow: auto;
+}
+
+.admin-editor-preview {
+  min-height: 320px;
+}
+
 /* ============================================================================
   Responsive Design - Mobile First
   ============================================================================ */