Harden admin telemetry and deployment safeguards

2026-07-02 16:10:15 +09:00
parent b1601b0305
commit d780fecf8c
53 changed files with 1590 additions and 656 deletions
@@ -27,10 +27,9 @@
                  AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="flex-grow-1" Immediate="true" Clearable="true" />
 </div>

-<MudPaper Class="admin-surface" Elevation="0">
+<AdminDataPanel Loading="@(announcements is null)" SkeletonContent="@AnnouncementSkeleton">
    @if (announcements is null)
    {
-        <MudProgressLinear Indeterminate="true" />
    }
    else if (!FilteredAnnouncements.Any())
    {
@@ -98,7 +97,7 @@
            검색 결과 @(FilteredAnnouncements.Count())개 · 총 @(announcements.Count)개
        </MudText>
    }
-</MudPaper>
+</AdminDataPanel>

@code {
    [CascadingParameter]
@@ -107,6 +106,14 @@
    private List<Announcement>? announcements;
    private string searchQuery = "";

+    private RenderFragment AnnouncementSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 5);
+        builder.AddAttribute(2, "Columns", 4);
+        builder.CloseComponent();
+    };
+
    private IEnumerable<Announcement> FilteredAnnouncements => announcements?
        .Where(a => string.IsNullOrEmpty(searchQuery) || 
                    a.Title.Contains(searchQuery, StringComparison.OrdinalIgnoreCase))
@@ -9,18 +9,15 @@

 <PageTitle>새 포스트 작성</PageTitle>

-<section class="admin-page-hero">
-    <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">Content</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">새 포스트 작성</MudText>
-        <MudText Typo="Typo.body2" Class="admin-page-subtitle">새로운 블로그 포스트를 작성합니다.</MudText>
-    </div>
-    <MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Close" @onclick="GoBack">취소</MudButton>
-</section>
-
-<MudPaper Class="pa-4 mt-4" Elevation="1">
-    <BlogForm Model="model" Categories="categories" SubmitText="저장" OnSubmit="SavePost" OnCancel="GoBack" />
-</MudPaper>
+<AdminCrudPageShell Title="새 포스트 작성"
+                    Eyebrow="Content"
+                    Subtitle="새로운 블로그 포스트를 작성합니다."
+                    Loading="@false"
+                    OnCancel="@GoBack">
+    <MudPaper Class="pa-4 mt-4" Elevation="1">
+        <BlogForm Model="model" Categories="categories" SubmitText="저장" OnSubmit="SavePost" OnCancel="GoBack" />
+    </MudPaper>
+</AdminCrudPageShell>

@code {
    private IReadOnlyList<Domain.Entities.Category> categories = [];
@@ -10,20 +10,13 @@

 <PageTitle>포스트 수정</PageTitle>

-<section class="admin-page-hero">
-    <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">Content</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">포스트 수정</MudText>
-        <MudText Typo="Typo.body2" Class="admin-page-subtitle">블로그 포스트를 수정합니다.</MudText>
-    </div>
-    <MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Close" @onclick="GoBack">취소</MudButton>
-</section>
-
-@if (isLoading)
-{
-    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="mt-4" />
-}
-else if (post == null)
+<AdminCrudPageShell Title="포스트 수정"
+                    Eyebrow="Content"
+                    Subtitle="블로그 포스트를 수정합니다."
+                    Loading="@isLoading"
+                    SkeletonContent="@EditorSkeleton"
+                    OnCancel="@GoBack">
+    @if (post == null)
 {
    <MudAlert Severity="Severity.Error" Class="mt-4">포스트를 찾을 수 없습니다.</MudAlert>
 }
@@ -36,6 +29,7 @@ else
        </div>
    </MudPaper>
 }
+</AdminCrudPageShell>

@code {
    [Parameter]
@@ -46,6 +40,14 @@ else
    private BlogForm.BlogFormModel model = new();
    private bool isLoading = true;

+    private RenderFragment EditorSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 5);
+        builder.AddAttribute(2, "Columns", 3);
+        builder.CloseComponent();
+    };
+
    protected override async Task OnInitializedAsync()
    {
        try
@@ -2,39 +2,43 @@
@using TaxBaik.Domain.Entities

 <MudForm @ref="form">
-    <MudTextField @bind-Value="Model.Title" Label="제목 *"
-        Variant="Variant.Outlined" Class="mb-4" Required="true" RequiredError="제목을 입력하세요." Counter="100" MaxLength="100" />
+    <AdminFormSection Title="기본 정보" Description="제목과 카테고리, 발행 여부를 먼저 설정합니다." CssClass="mb-4">
+        <MudTextField @bind-Value="Model.Title" Label="제목 *"
+            Variant="Variant.Outlined" Class="mb-4" Required="true" RequiredError="제목을 입력하세요." Counter="100" MaxLength="100" />

-    <MudSelect T="int?" @bind-Value="Model.CategoryId" Label="카테고리"
-        Variant="Variant.Outlined" Class="mb-4">
-        @foreach (var category in Categories)
-        {
-            <MudSelectItem T="int?" Value="@((int?)category.Id)">@category.Name</MudSelectItem>
-        }
-    </MudSelect>
+        <MudSelect T="int?" @bind-Value="Model.CategoryId" Label="카테고리"
+            Variant="Variant.Outlined" Class="mb-4">
+            @foreach (var category in Categories)
+            {
+                <MudSelectItem T="int?" Value="@((int?)category.Id)">@category.Name</MudSelectItem>
+            }
+        </MudSelect>

-    <MudTextField @bind-Value="Model.Content" Label="본문 내용 *"
-        Variant="Variant.Outlined" Lines="16" Required="true" RequiredError="본문 내용을 입력하세요."
-        Class="mb-4" />
+        <MudCheckBox @bind-Checked="Model.IsPublished" Label="즉시 발행" Class="mb-4" />
+    </AdminFormSection>

-    <MudTextField @bind-Value="Model.Tags" Label="태그 (쉼표로 구분)"
-        Variant="Variant.Outlined" Class="mb-4" />
+    <AdminFormSection Title="본문" Description="SEO와 실제 노출 본문을 함께 관리합니다." CssClass="mb-4">
+        <MudTextField @bind-Value="Model.Content" Label="본문 내용 *"
+            Variant="Variant.Outlined" Lines="16" Required="true" RequiredError="본문 내용을 입력하세요."
+            Class="mb-4" />

-    <MudTextField @bind-Value="Model.SeoTitle" Label="SEO 제목"
-        Variant="Variant.Outlined" Class="mb-4" />
+        <MudTextField @bind-Value="Model.Tags" Label="태그 (쉼표로 구분)"
+            Variant="Variant.Outlined" Class="mb-4" />

-    <MudTextField @bind-Value="Model.SeoDescription" Label="SEO 설명"
-        Variant="Variant.Outlined" Lines="3" Class="mb-4" />
+        <MudTextField @bind-Value="Model.SeoTitle" Label="SEO 제목"
+            Variant="Variant.Outlined" Class="mb-4" />

-    <MudCheckBox @bind-Checked="Model.IsPublished" Label="즉시 발행" Class="mb-4" />
+        <MudTextField @bind-Value="Model.SeoDescription" Label="SEO 설명"
+            Variant="Variant.Outlined" Lines="3" Class="mb-4" />
+    </AdminFormSection>

-    <div class="d-flex gap-2">
-        <MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="HandleSubmit">@SubmitText</MudButton>
-        @if (OnCancel.HasDelegate)
-        {
-            <MudButton Variant="Variant.Outlined" @onclick="OnCancel">취소</MudButton>
-        }
-    </div>
+    <AdminFormActions SubmitText="@SubmitText"
+                      LoadingText="저장 중..."
+                      CancelText="취소"
+                      SubmitIcon="@Icons.Material.Filled.Save"
+                      OnSubmit="@HandleSubmit"
+                      OnCancel="@OnCancel"
+                      IsSubmitting="false" />
 </MudForm>

@code {
@@ -25,47 +25,47 @@
                  AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="flex-grow-1" Immediate="true" Clearable="true" />
 </div>

-<MudPaper Class="admin-surface mb-4" Elevation="0">
-    <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
+<AdminDataPanel Loading="@isLoading">
+    <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mb-3">
        <MudText Typo="Typo.subtitle1">@($"검색 결과 {FilteredPosts.Count()}개 / 전체 포스트 {totalPosts}개")</MudText>
        <MudText Typo="Typo.body2">페이지 @currentPage / @totalPages</MudText>
    </MudStack>
-</MudPaper>

-<MudDataGrid Items="@FilteredPosts" Striped="true" Hoverable="true" Loading="@isLoading" Class="admin-grid">
-    <Columns>
-        <PropertyColumn Property="x => x.Title" Title="제목" />
-        <PropertyColumn Property="x => x.IsPublished" Title="발행">
-            <CellTemplate Context="cell">
-                <MudCheckBox T="bool" Value="@cell.Item.IsPublished"
-                    ValueChanged="@(async (bool value) => await TogglePublish(cell.Item, value))" />
-            </CellTemplate>
-        </PropertyColumn>
-        <PropertyColumn Property="x => x.ViewCount" Title="조회수" />
-        <PropertyColumn Property="x => x.CreatedAt" Title="작성일" Format="yyyy-MM-dd" />
-        <TemplateColumn>
-            <CellTemplate Context="cell">
-                <MudButton Variant="Variant.Outlined" Size="Size.Small" Color="Color.Primary"
-                    Href="@($"/taxbaik/admin/blog/{cell.Item.Id}/edit")">수정하기</MudButton>
-                @if (showArchived)
-                {
-                    <MudButton Variant="Variant.Text" Size="Size.Small" Color="Color.Success"
-                        @onclick="@(async () => await RestorePost(cell.Item.Id))">복원</MudButton>
-                }
-                else
-                {
-                    <MudButton Variant="Variant.Text" Size="Size.Small" Color="Color.Error"
-                        @onclick="@(async () => await DeletePost(cell.Item.Id))">삭제</MudButton>
-                }
-            </CellTemplate>
-        </TemplateColumn>
-    </Columns>
-</MudDataGrid>
+    <MudDataGrid Items="@FilteredPosts" Striped="true" Hoverable="true" Class="admin-grid">
+        <Columns>
+            <PropertyColumn Property="x => x.Title" Title="제목" />
+            <PropertyColumn Property="x => x.IsPublished" Title="발행">
+                <CellTemplate Context="cell">
+                    <MudCheckBox T="bool" Value="@cell.Item.IsPublished"
+                        ValueChanged="@(async (bool value) => await TogglePublish(cell.Item, value))" />
+                </CellTemplate>
+            </PropertyColumn>
+            <PropertyColumn Property="x => x.ViewCount" Title="조회수" />
+            <PropertyColumn Property="x => x.CreatedAt" Title="작성일" Format="yyyy-MM-dd" />
+            <TemplateColumn>
+                <CellTemplate Context="cell">
+                    <MudButton Variant="Variant.Outlined" Size="Size.Small" Color="Color.Primary"
+                        Href="@($"/taxbaik/admin/blog/{cell.Item.Id}/edit")">수정하기</MudButton>
+                    @if (showArchived)
+                    {
+                        <MudButton Variant="Variant.Text" Size="Size.Small" Color="Color.Success"
+                            @onclick="@(async () => await RestorePost(cell.Item.Id))">복원</MudButton>
+                    }
+                    else
+                    {
+                        <MudButton Variant="Variant.Text" Size="Size.Small" Color="Color.Error"
+                            @onclick="@(async () => await DeletePost(cell.Item.Id))">삭제</MudButton>
+                    }
+                </CellTemplate>
+            </TemplateColumn>
+        </Columns>
+    </MudDataGrid>

-<MudStack Row="true" Justify="Justify.Center" Class="mt-4" Spacing="2">
-    <MudButton Variant="Variant.Outlined" Disabled="@(currentPage <= 1 || isLoading)" @onclick="PreviousPage">이전</MudButton>
-    <MudButton Variant="Variant.Outlined" Disabled="@(currentPage >= totalPages || isLoading)" @onclick="NextPage">다음</MudButton>
-</MudStack>
+    <MudStack Row="true" Justify="Justify.Center" Class="mt-4" Spacing="2">
+        <MudButton Variant="Variant.Outlined" Disabled="@(currentPage <= 1 || isLoading)" @onclick="PreviousPage">이전</MudButton>
+        <MudButton Variant="Variant.Outlined" Disabled="@(currentPage >= totalPages || isLoading)" @onclick="NextPage">다음</MudButton>
+    </MudStack>
+</AdminDataPanel>

@code {
    [CascadingParameter]
@@ -20,10 +20,9 @@
               StartIcon="@Icons.Material.Filled.ArrowBack">목록으로</MudButton>
 </section>

-<MudPaper Class="admin-surface" Elevation="0" Style="max-width:720px;">
+<AdminEditorPanel Loading="@isLoading" SkeletonContent="@ClientEditSkeleton">
    @if (isLoading)
    {
-        <MudProgressLinear Indeterminate="true" />
    }
    else
    {
@@ -92,7 +91,7 @@
            </MudGrid>
        </MudForm>
    }
-</MudPaper>
+</AdminEditorPanel>

@code {
    [Parameter] public int? Id { get; set; }
@@ -102,6 +101,14 @@
    private bool isValid;
    private bool isLoading = true;
    private bool isSaving;
+
+    private RenderFragment ClientEditSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 6);
+        builder.AddAttribute(2, "Columns", 3);
+        builder.CloseComponent();
+    };
    protected override async Task OnInitializedAsync()
    {
        if (Id.HasValue)
@@ -39,10 +39,9 @@
    </MudGrid>
 </MudPaper>

-<MudPaper Class="admin-surface" Elevation="0">
+<AdminDataPanel Loading="@(clients is null)" SkeletonContent="@ClientListSkeleton">
    @if (clients is null)
    {
-        <MudProgressLinear Indeterminate="true" />
    }
    else if (!clients.Any())
    {
@@ -116,7 +115,7 @@
        }
        <MudText Typo="Typo.caption" Class="pa-2 text-muted">총 @(totalCount)명</MudText>
    }
-</MudPaper>
+</AdminDataPanel>

@code {
    [CascadingParameter]
@@ -130,6 +129,14 @@
    private int totalPages;
    private const int PageSize = 20;

+    private RenderFragment ClientListSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 5);
+        builder.AddAttribute(2, "Columns", 5);
+        builder.CloseComponent();
+    };
+
    protected override async Task OnInitializedAsync()
    {
        if (AuthStateTask != null)
@@ -7,73 +7,26 @@

 <PageTitle>공통관리</PageTitle>

-<section class="admin-page-hero">
-    <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">System</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">공통관리</MudText>
-        <MudText Typo="Typo.body2" Class="admin-page-subtitle">공통코드 그룹과 항목을 일관된 기준으로 관리합니다.</MudText>
-    </div>
-</section>
+<AdminPageHeader Title="공통관리" Eyebrow="System" Subtitle="공통코드 그룹과 항목을 일관된 기준으로 관리합니다." />

 <MudGrid Spacing="2">
    <MudItem XS="12" MD="4">
-        <MudPaper Class="admin-surface pa-4" Elevation="0">
-            <MudText Typo="Typo.h6" Class="mb-3">그룹</MudText>
-            <MudSelect T="string" Value="@selectedGroup" ValueChanged="OnGroupChanged" Label="코드 그룹" Variant="Variant.Outlined" FullWidth="true">
-                @foreach (var group in groups)
-                {
-                    <MudSelectItem Value="@group">@group</MudSelectItem>
-                }
-            </MudSelect>
-            <MudButton Class="mt-3" Variant="Variant.Filled" Color="Color.Primary" OnClick="PrepareCreate">새 코드 추가</MudButton>
-        </MudPaper>
+        <CommonCodeGroupPanel Groups="groups"
+                             SelectedGroup="selectedGroup"
+                             SelectedGroupChanged="OnGroupChanged"
+                             OnCreateRequested="PrepareCreate" />
    </MudItem>

    <MudItem XS="12" MD="8">
-        <MudPaper Class="admin-surface pa-4" Elevation="0">
-            @if (isLoading)
-            {
-                <MudProgressLinear Indeterminate="true" />
-            }
-            else
-            {
-                <MudTable Items="@codes" Dense="true" Hover="true">
-                    <HeaderContent>
-                        <MudTh>그룹</MudTh>
-                        <MudTh>값</MudTh>
-                        <MudTh>이름</MudTh>
-                        <MudTh>순서</MudTh>
-                        <MudTh>상태</MudTh>
-                        <MudTh>작업</MudTh>
-                    </HeaderContent>
-                    <RowTemplate>
-                        <MudTd>@context.CodeGroup</MudTd>
-                        <MudTd>@context.CodeValue</MudTd>
-                        <MudTd>@context.CodeName</MudTd>
-                        <MudTd>@context.SortOrder</MudTd>
-                        <MudTd>@(context.IsActive ? "활성" : "비활성")</MudTd>
-                        <MudTd>
-                            <MudButton Size="Size.Small" Variant="Variant.Text" OnClick="@(() => EditCode(context))">수정</MudButton>
-                            <MudButton Size="Size.Small" Variant="Variant.Text" Color="Color.Error" OnClick="@(() => DeleteCode(context))">삭제</MudButton>
-                        </MudTd>
-                    </RowTemplate>
-                </MudTable>
-
-                <MudDivider Class="my-4" />
-
-                <MudForm @ref="form">
-                    <MudTextField @bind-Value="editModel.CodeGroup" Label="그룹" Variant="Variant.Outlined" FullWidth="true" Required="true" Disabled="@(!isCreateMode)" Class="mb-3" />
-                    <MudTextField @bind-Value="editModel.CodeValue" Label="값" Variant="Variant.Outlined" FullWidth="true" Required="true" Disabled="@(!isCreateMode)" Class="mb-3" />
-                    <MudTextField @bind-Value="editModel.CodeName" Label="이름" Variant="Variant.Outlined" FullWidth="true" Required="true" Class="mb-3" />
-                    <MudNumericField T="int" @bind-Value="editModel.SortOrder" Label="순서" Variant="Variant.Outlined" FullWidth="true" Class="mb-3" />
-                    <MudSwitch @bind-Checked="editModel.IsActive" Color="Color.Primary">활성</MudSwitch>
-                    <div class="d-flex gap-2 mt-4">
-                        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveCode">저장</MudButton>
-                        <MudButton Variant="Variant.Outlined" OnClick="PrepareCreate">초기화</MudButton>
-                    </div>
-                </MudForm>
-            }
-        </MudPaper>
+        <CommonCodeListPanel Loading="@isLoading"
+                             Codes="codes"
+                             EditModel="editModel"
+                             IsCreateMode="isCreateMode"
+                             Form="form"
+                             EditRequested="EditCode"
+                             DeleteRequested="DeleteCode"
+                             SaveRequested="SaveCode"
+                             ResetRequested="PrepareCreate" />
    </MudItem>
 </MudGrid>

@@ -82,7 +35,6 @@
    private List<CommonCode> codes = [];
    private string selectedGroup = "";
    private bool isLoading = true;
-    private MudForm? form;
    private CommonCode editModel = new();
    private bool isCreateMode = true;

@@ -135,16 +87,6 @@

    private async Task SaveCode()
    {
-        if (form != null)
-        {
-            await form.Validate();
-            if (!form.IsValid)
-            {
-                Snackbar.Add("필수 항목을 입력하세요.", Severity.Warning);
-                return;
-            }
-        }
-
        if (editModel.CodeValue.Contains(' '))
        {
            Snackbar.Add("code_value에는 공백을 넣을 수 없습니다.", Severity.Error);
@@ -17,26 +17,24 @@
    <MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Close" @onclick="GoBack">취소</MudButton>
 </section>

-@if (isLoading)
-{
-    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="mt-4" />
-}
-else if (formModel == null)
-{
-    <MudAlert Severity="Severity.Error" Class="mt-4">고객사를 찾을 수 없습니다.</MudAlert>
-}
-else
-{
-    <MudPaper Class="pa-4 mt-4" Elevation="1">
-        <CompanyForm ButtonText="수정" InitialData="formModel" OnSubmit="HandleUpdate" OnCancel="GoBack" />
+<AdminEditorPanel Loading="@isLoading" SkeletonContent="@CompanySkeleton">
+    @if (formModel == null)
+    {
+        <MudAlert Severity="Severity.Error" Class="mt-4">고객사를 찾을 수 없습니다.</MudAlert>
+    }
+    else
+    {
+        <MudPaper Class="pa-4 mt-4" Elevation="1">
+            <CompanyForm ButtonText="수정" InitialData="formModel" OnSubmit="HandleUpdate" OnCancel="GoBack" />

-        <MudDivider Class="my-4" />
+            <MudDivider Class="my-4" />

-        <MudButton Variant="Variant.Outlined" Color="Color.Error" @onclick="DeleteCompany" Class="mt-2">
-            고객사 삭제
-        </MudButton>
-    </MudPaper>
-}
+            <MudButton Variant="Variant.Outlined" Color="Color.Error" @onclick="DeleteCompany" Class="mt-2">
+                고객사 삭제
+            </MudButton>
+        </MudPaper>
+    }
+</AdminEditorPanel>

@code {
    [Parameter]
@@ -45,6 +43,14 @@ else
    private CompanyForm.CompanyFormModel? formModel;
    private bool isLoading = true;

+    private RenderFragment CompanySkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 6);
+        builder.AddAttribute(2, "Columns", 3);
+        builder.CloseComponent();
+    };
+
    protected override async Task OnInitializedAsync()
    {
        try
@@ -20,10 +20,9 @@
    </MudButton>
 </section>

-<MudPaper Class="admin-surface" Elevation="0">
+<AdminDataPanel Loading="@(activities is null)" SkeletonContent="@ActivitySkeleton">
    @if (activities is null)
    {
-        <MudProgressLinear Indeterminate="true" />
    }
    else if (activities.Count == 0)
    {
@@ -90,7 +89,7 @@
            </Columns>
        </MudDataGrid>
    }
-</MudPaper>
+</AdminDataPanel>

 <MudDialog @bind-IsVisible="isDialogOpen" Options="new DialogOptions { MaxWidth = MaxWidth.Small, FullWidth = true }">
    <TitleContent>
@@ -128,6 +127,14 @@
    private ConsultingActivity? editingActivity;
    private ConsultingActivityForm activityForm = new();

+    private RenderFragment ActivitySkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 5);
+        builder.AddAttribute(2, "Columns", 4);
+        builder.CloseComponent();
+    };
+
    protected override async Task OnInitializedAsync()
    {
        if (AuthStateTask != null)
@@ -27,9 +27,9 @@
    </MudButton>
 </section>

+<AdminEditorPanel Loading="@(contracts is null)" SkeletonContent="@ContractSkeleton">
@if (contracts is null)
 {
-    <MudProgressLinear Indeterminate="true" />
 }
 else
 {
@@ -142,6 +142,7 @@ else
        </MudItem>
    </MudGrid>
 }
+</AdminEditorPanel>

@code {
    [CascadingParameter]
@@ -156,6 +157,14 @@ else
    private Contract? selectedContract;
    private ContractForm contractForm = new();

+    private RenderFragment ContractSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 6);
+        builder.AddAttribute(2, "Columns", 4);
+        builder.CloseComponent();
+    };
+
    protected override async Task OnInitializedAsync()
    {
        if (AuthStateTask != null)
@@ -22,151 +22,109 @@
 {
    <MudAlert Severity="Severity.Error" Class="mb-4">@errorMessage</MudAlert>
 }
-@if (isLoading)
-{
-    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="mb-4" />
-}

-<!-- Metrics Grid -->
-<div class="admin-metric-grid">
-    <div class="admin-metric-card accent-blue cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/inquiries"))'>
-        <div class="admin-metric-card-body">
-            <span class="admin-metric-card-label">이번달 문의</span>
-            <div class="admin-metric-card-value-row">
-                <span class="admin-metric-card-value" style="color: var(--primary-dark);">@summary.ThisMonthInquiries</span>
-                <span class="admin-metric-card-icon" style="color: var(--primary-color);">💬</span>
-            </div>
-            <span class="admin-metric-card-caption">월간 상담 유입 (클릭 시 이동)</span>
-        </div>
+<AdminDataPanel Loading="@isLoading" SkeletonContent="@DashboardSkeleton">
+    <div class="admin-metric-grid">
+        <AdminMetricCard Label="이번달 문의" Value="@summary.ThisMonthInquiries" Caption="월간 상담 유입 (클릭 시 이동)" Accent="accent-blue" Icon="💬" ValueColor="var(--primary-dark)" IconColor="var(--primary-color)" OnClick="@GoInquiries" />
+        <AdminMetricCard Label="신규 문의" Value="@summary.NewInquiries" Caption="처리 대기 (클릭 시 이동)" Accent="accent-amber" Icon="⚠️" ValueColor="var(--tertiary-dark)" IconColor="var(--tertiary-color)" OnClick="@GoNewInquiries" />
+        <AdminMetricCard Label="전체 포스트" Value="@summary.TotalPosts" Caption="콘텐츠 자산 (클릭 시 이동)" Accent="accent-slate" Icon="📄" ValueColor="#455a64" IconColor="#607d8b" OnClick="@GoBlog" />
+        <AdminMetricCard Label="발행된 포스트" Value="@summary.PublishedPosts" Caption="검색 노출 대상 (클릭 시 이동)" Accent="accent-green" Icon="🌐" ValueColor="var(--secondary-dark)" IconColor="var(--secondary-color)" OnClick="@GoBlog" />
    </div>

-    <div class="admin-metric-card accent-amber cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/inquiries?status=new"))'>
-        <div class="admin-metric-card-body">
-            <span class="admin-metric-card-label">신규 문의</span>
-            <div class="admin-metric-card-value-row">
-                <span class="admin-metric-card-value" style="color: var(--tertiary-dark);">@summary.NewInquiries</span>
-                <span class="admin-metric-card-icon" style="color: var(--tertiary-color);">⚠️</span>
+    @if (upcomingFilings.Count > 0)
+    {
+        <MudPaper Class="admin-surface mt-4" Elevation="0">
+            <div class="admin-section-header">
+                <div>
+                    <MudText Typo="Typo.h6">이번 달 마감 임박 신고</MudText>
+                    <MudText Typo="Typo.body2">30일 이내 신고 예정 건 (고객명 클릭 시 상세 카드로 연결)</MudText>
+                </div>
+                <MudButton Variant="Variant.Outlined" Color="Color.Primary" Href="/taxbaik/admin/tax-filings">전체 일정 보기</MudButton>
            </div>
-            <span class="admin-metric-card-caption">처리 대기 (클릭 시 이동)</span>
-        </div>
-    </div>
+            <MudSimpleTable Striped="true" Dense="true" Class="admin-table">
+                <thead>
+                    <tr>
+                        <th>고객</th>
+                        <th>신고 유형</th>
+                        <th>기한</th>
+                        <th>D-day</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach (var f in upcomingFilings)
+                    {
+                        var dday = BusinessDayCalculator.GetDday(DateOnly.FromDateTime(f.DueDate));
+                        var effectiveDueDate = BusinessDayCalculator.GetEffectiveDueDate(DateOnly.FromDateTime(f.DueDate));
+                        <tr>
+                            <td>
+                                <MudLink Href="@($"/taxbaik/admin/clients/{f.ClientId}")" Underline="Underline.Hover" Color="Color.Primary" Class="font-weight-bold">
+                                    @f.ClientName
+                                </MudLink>
+                            </td>
+                            <td>@f.FilingType</td>
+                            <td>@effectiveDueDate.ToDateTime(TimeOnly.MinValue).ToString("yyyy-MM-dd")</td>
+                            <td>
+                                @if (dday < 0)
+                                {
+                                    <MudChip T="string" Size="Size.Small" Color="Color.Dark">기한 초과 (@(-dday)일)</MudChip>
+                                }
+                                else if (dday <= 7)
+                                {
+                                    <MudChip T="string" Size="Size.Small" Color="Color.Error">D-@dday</MudChip>
+                                }
+                                else
+                                {
+                                    <span>D-@dday</span>
+                                }
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </MudSimpleTable>
+        </MudPaper>
+    }

-    <div class="admin-metric-card accent-slate cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/blog"))'>
-        <div class="admin-metric-card-body">
-            <span class="admin-metric-card-label">전체 포스트</span>
-            <div class="admin-metric-card-value-row">
-                <span class="admin-metric-card-value" style="color: #455a64;">@summary.TotalPosts</span>
-                <span class="admin-metric-card-icon" style="color: #607d8b;">📄</span>
-            </div>
-            <span class="admin-metric-card-caption">콘텐츠 자산 (클릭 시 이동)</span>
-        </div>
-    </div>
-
-    <div class="admin-metric-card accent-green cursor-pointer" @onclick='(() => Nav.NavigateTo("/taxbaik/admin/blog"))'>
-        <div class="admin-metric-card-body">
-            <span class="admin-metric-card-label">발행된 포스트</span>
-            <div class="admin-metric-card-value-row">
-                <span class="admin-metric-card-value" style="color: var(--secondary-dark);">@summary.PublishedPosts</span>
-                <span class="admin-metric-card-icon" style="color: var(--secondary-color);">🌐</span>
-            </div>
-            <span class="admin-metric-card-caption">검색 노출 대상 (클릭 시 이동)</span>
-        </div>
-    </div>
-</div>
-
-@if (upcomingFilings.Count > 0)
-{
    <MudPaper Class="admin-surface mt-4" Elevation="0">
        <div class="admin-section-header">
            <div>
-                <MudText Typo="Typo.h6">이번 달 마감 임박 신고</MudText>
-                <MudText Typo="Typo.body2">30일 이내 신고 예정 건 (고객명 클릭 시 상세 카드로 연결)</MudText>
+                <MudText Typo="Typo.h6">최근 문의</MudText>
+                <MudText Typo="Typo.body2">최근 유입된 상담 요청을 빠르게 확인합니다. (이름 클릭 시 상세 관리 화면으로 연계)</MudText>
            </div>
-            <MudButton Variant="Variant.Outlined" Color="Color.Primary" Href="/taxbaik/admin/tax-filings">전체 일정 보기</MudButton>
+            <MudButton Variant="Variant.Outlined" Color="Color.Primary" Href="/taxbaik/admin/inquiries">문의 전체 보기</MudButton>
        </div>
        <MudSimpleTable Striped="true" Dense="true" Class="admin-table">
            <thead>
                <tr>
-                    <th>고객</th>
-                    <th>신고 유형</th>
-                    <th>기한</th>
-                    <th>D-day</th>
+                    <th>이름</th>
+                    <th>전화</th>
+                    <th>분야</th>
+                    <th>상태</th>
+                    <th>날짜</th>
                </tr>
            </thead>
            <tbody>
-                @foreach (var f in upcomingFilings)
+                @foreach (var inquiry in summary.RecentInquiries)
                {
-                    var dday = BusinessDayCalculator.GetDday(DateOnly.FromDateTime(f.DueDate));
-                    var effectiveDueDate = BusinessDayCalculator.GetEffectiveDueDate(DateOnly.FromDateTime(f.DueDate));
                    <tr>
                        <td>
-                            <MudLink Href="@($"/taxbaik/admin/clients/{f.ClientId}")" Underline="Underline.Hover" Color="Color.Primary" Class="font-weight-bold">
-                                @f.ClientName
+                            <MudLink Href="@($"/taxbaik/admin/inquiries?id={inquiry.Id}")" Underline="Underline.Hover" Color="Color.Primary" Class="font-weight-bold">
+                                @inquiry.Name
                            </MudLink>
                        </td>
-                        <td>@f.FilingType</td>
-                        <td>@effectiveDueDate.ToDateTime(TimeOnly.MinValue).ToString("yyyy-MM-dd")</td>
+                        <td>@inquiry.Phone</td>
+                        <td>@inquiry.ServiceType</td>
                        <td>
-                            @if (dday < 0)
-                            {
-                                <MudChip T="string" Size="Size.Small" Color="Color.Dark">기한 초과 (@(-dday)일)</MudChip>
-                            }
-                            else if (dday <= 7)
-                            {
-                                <MudChip T="string" Size="Size.Small" Color="Color.Error">D-@dday</MudChip>
-                            }
-                            else
-                            {
-                                <span>D-@dday</span>
-                            }
+                            <MudChip T="string" Size="Size.Small" Color="@StatusColor(inquiry.Status)">
+                                @GetStatusLabel(inquiry.Status)
+                            </MudChip>
                        </td>
+                        <td>@inquiry.CreatedAt.ToString("yyyy-MM-dd")</td>
                    </tr>
                }
            </tbody>
        </MudSimpleTable>
    </MudPaper>
-}
-
-<MudPaper Class="admin-surface mt-4" Elevation="0">
-    <div class="admin-section-header">
-        <div>
-            <MudText Typo="Typo.h6">최근 문의</MudText>
-            <MudText Typo="Typo.body2">최근 유입된 상담 요청을 빠르게 확인합니다. (이름 클릭 시 상세 관리 화면으로 연계)</MudText>
-        </div>
-        <MudButton Variant="Variant.Outlined" Color="Color.Primary" Href="/taxbaik/admin/inquiries">문의 전체 보기</MudButton>
-    </div>
-    <MudSimpleTable Striped="true" Dense="true" Class="admin-table">
-        <thead>
-            <tr>
-                <th>이름</th>
-                <th>전화</th>
-                <th>분야</th>
-                <th>상태</th>
-                <th>날짜</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var inquiry in summary.RecentInquiries)
-            {
-                <tr>
-                    <td>
-                        <MudLink Href="@($"/taxbaik/admin/inquiries?id={inquiry.Id}")" Underline="Underline.Hover" Color="Color.Primary" Class="font-weight-bold">
-                            @inquiry.Name
-                        </MudLink>
-                    </td>
-                    <td>@inquiry.Phone</td>
-                    <td>@inquiry.ServiceType</td>
-                    <td>
-                        <MudChip T="string" Size="Size.Small" Color="@StatusColor(inquiry.Status)">
-                            @GetStatusLabel(inquiry.Status)
-                        </MudChip>
-                    </td>
-                    <td>@inquiry.CreatedAt.ToString("yyyy-MM-dd")</td>
-                </tr>
-            }
-        </tbody>
-    </MudSimpleTable>
-</MudPaper>
+</AdminDataPanel>

@code {
    [CascadingParameter]
@@ -177,6 +135,29 @@
    private string? errorMessage;
    private bool isLoading = true;

+    private RenderFragment DashboardSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 6);
+        builder.AddAttribute(2, "Columns", 4);
+        builder.CloseComponent();
+    };
+
+    private void GoInquiries()
+    {
+        Nav.NavigateTo("/taxbaik/admin/inquiries");
+    }
+
+    private void GoNewInquiries()
+    {
+        Nav.NavigateTo("/taxbaik/admin/inquiries?status=new");
+    }
+
+    private void GoBlog()
+    {
+        Nav.NavigateTo("/taxbaik/admin/blog");
+    }
+
    protected override async Task OnInitializedAsync()
    {
        if (AuthStateTask != null)
@@ -210,11 +191,11 @@

    private static Color StatusColor(string status) => status switch
    {
-        "new"        => Color.Warning,
+        "new" => Color.Warning,
        "consulting" => Color.Info,
        "contracted" => Color.Success,
-        "rejected"   => Color.Error,
-        "closed"     => Color.Dark,
-        _            => Color.Default
+        "rejected" => Color.Error,
+        "closed" => Color.Dark,
+        _ => Color.Default
    };
 }
@@ -18,13 +18,8 @@
               StartIcon="@Icons.Material.Filled.ArrowBack">목록으로</MudButton>
 </section>

-<MudPaper Class="admin-surface" Elevation="0" Style="max-width:720px;">
-    @if (isLoading)
-    {
-        <MudProgressLinear Indeterminate="true" />
-    }
-    else
-    {
+<AdminEditorPanel Loading="@isLoading" SkeletonContent="@FaqSkeleton">
+    <MudPaper Class="admin-surface" Elevation="0" Style="max-width:720px;">
        <MudForm @ref="form" @bind-IsValid="isValid">
            <MudGrid Spacing="3">
                <MudItem xs="12">
@@ -68,8 +63,8 @@
                </MudItem>
            </MudGrid>
        </MudForm>
-    }
-</MudPaper>
+    </MudPaper>
+</AdminEditorPanel>

@code {
    [Parameter] public int? Id { get; set; }
@@ -80,6 +75,14 @@
    private bool isLoading = true;
    private bool isSaving;

+    private RenderFragment FaqSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 5);
+        builder.AddAttribute(2, "Columns", 3);
+        builder.CloseComponent();
+    };
+
    protected override async Task OnInitializedAsync()
    {
        if (Id.HasValue)
@@ -27,10 +27,9 @@
                  AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="flex-grow-1" Immediate="true" Clearable="true" />
 </div>

-<MudPaper Class="admin-surface" Elevation="0">
+<AdminDataPanel Loading="@(faqs is null)" SkeletonContent="@FaqListSkeleton">
    @if (faqs is null)
    {
-        <MudProgressLinear Indeterminate="true" />
    }
    else if (!FilteredFaqs.Any())
    {
@@ -101,7 +100,7 @@
            검색 결과 @(FilteredFaqs.Count())개 · 총 @(faqs.Count)개 · 노출 중 @(faqs.Count(f => f.IsActive))개
        </MudText>
    }
-</MudPaper>
+</AdminDataPanel>

@code {
    [CascadingParameter]
@@ -110,6 +109,14 @@
    private List<Faq>? faqs;
    private string searchQuery = "";

+    private RenderFragment FaqListSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 5);
+        builder.AddAttribute(2, "Columns", 4);
+        builder.CloseComponent();
+    };
+
    private IEnumerable<Faq> FilteredFaqs => faqs?
        .Where(f => string.IsNullOrEmpty(searchQuery) || 
                    f.Question.Contains(searchQuery, StringComparison.OrdinalIgnoreCase) || 
@@ -8,18 +8,15 @@

 <PageTitle>문의 등록</PageTitle>

-<section class="admin-page-hero">
-    <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">Customer Relations</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">새 문의 등록</MudText>
-        <MudText Typo="Typo.body2" Class="admin-page-subtitle">고객 문의를 등록합니다. (전화, 오프라인 등)</MudText>
-    </div>
-    <MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Close" @onclick="GoBack">취소</MudButton>
-</section>
-
-<MudPaper Class="pa-4 mt-4" Elevation="1">
-    <InquiryForm ButtonText="등록" OnSubmit="HandleCreate" OnCancel="GoBack" />
-</MudPaper>
+<AdminCrudPageShell Title="새 문의 등록"
+                    Eyebrow="Customer Relations"
+                    Subtitle="고객 문의를 등록합니다. (전화, 오프라인 등)"
+                    Loading="@false"
+                    OnCancel="@GoBack">
+    <MudPaper Class="pa-4 mt-4" Elevation="1">
+        <InquiryForm ButtonText="등록" OnSubmit="HandleCreate" OnCancel="GoBack" />
+    </MudPaper>
+</AdminCrudPageShell>

@code {
    private void GoBack()
@@ -26,8 +26,7 @@

    <MudGrid Class="mt-4">
        <MudItem xs="12" md="8">
-            <MudPaper Class="pa-4" Elevation="1">
-                <MudText Typo="Typo.h6" Class="mb-3">문의 정보</MudText>
+            <AdminDetailSection Title="문의 정보">
                <MudGrid>
                    <MudItem xs="12" sm="6">
                        <MudText Typo="Typo.subtitle2" Color="Color.Secondary">이름</MudText>
@@ -56,20 +55,18 @@
                        <MudText>@inquiry.CreatedAt.ToLocalTime().ToString("yyyy-MM-dd HH:mm")</MudText>
                    </MudItem>
                </MudGrid>
-            </MudPaper>
+            </AdminDetailSection>

-            <MudPaper Class="pa-4 mt-4" Elevation="1">
-                <MudText Typo="Typo.h6" Class="mb-3">담당자 메모</MudText>
+            <AdminDetailSection Title="담당자 메모" CssClass="pa-4 mt-4">
                <MudTextField T="string" @bind-Value="adminMemo" Label="내부 메모 (고객에게 미노출)"
                              Lines="4" Variant="Variant.Outlined" />
                <MudButton Class="mt-2" Variant="Variant.Filled" Color="Color.Primary"
                           OnClick="SaveMemo">메모 저장</MudButton>
-            </MudPaper>
+            </AdminDetailSection>
        </MudItem>

        <MudItem xs="12" md="4">
-            <MudPaper Class="pa-4" Elevation="1">
-                <MudText Typo="Typo.h6" Class="mb-3">처리 상태</MudText>
+            <AdminDetailSection Title="처리 상태">
                <MudStack Spacing="2">
                    @foreach (var (key, label) in InquiryStatusMapper.Labels)
                    {
@@ -81,28 +78,26 @@
                        </MudButton>
                    }
                </MudStack>
-            </MudPaper>
+            </AdminDetailSection>

            @if (inquiry.ClientId == null)
            {
-                <MudPaper Class="pa-4 mt-4" Elevation="1">
-                    <MudText Typo="Typo.h6" Class="mb-3">고객 카드 생성</MudText>
+                <AdminDetailSection Title="고객 카드 생성" CssClass="pa-4 mt-4">
                    <MudText Typo="Typo.body2" Class="mb-3">이 문의를 고객 카드로 등록합니다.</MudText>
                    <MudButton Variant="Variant.Filled" Color="Color.Success" FullWidth="true"
                               OnClick="ConvertToClient">
                        고객으로 등록
                    </MudButton>
-                </MudPaper>
+                </AdminDetailSection>
            }
            else
            {
-                <MudPaper Class="pa-4 mt-4" Elevation="1">
-                    <MudText Typo="Typo.h6" Class="mb-3">연결된 고객</MudText>
+                <AdminDetailSection Title="연결된 고객" CssClass="pa-4 mt-4">
                    <MudButton Variant="Variant.Outlined" Color="Color.Primary" FullWidth="true"
                               Href="@($"/taxbaik/admin/clients/{inquiry.ClientId}")">
                        고객 카드 보기
                    </MudButton>
-                </MudPaper>
+                </AdminDetailSection>
            }
        </MudItem>
    </MudGrid>
@@ -9,20 +9,13 @@

 <PageTitle>문의 수정</PageTitle>

-<section class="admin-page-hero">
-    <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">Customer Relations</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">문의 수정</MudText>
-        <MudText Typo="Typo.body2" Class="admin-page-subtitle">고객 문의 정보를 수정합니다.</MudText>
-    </div>
-    <MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Close" @onclick="GoBack">취소</MudButton>
-</section>
-
-@if (isLoading)
-{
-    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="mt-4" />
-}
-else if (inquiry == null)
+<AdminCrudPageShell Title="문의 수정"
+                    Eyebrow="Customer Relations"
+                    Subtitle="고객 문의 정보를 수정합니다."
+                    Loading="@isLoading"
+                    SkeletonContent="@EditorSkeleton"
+                    OnCancel="@GoBack">
+    @if (inquiry == null)
 {
    <MudAlert Severity="Severity.Error" Class="mt-4">문의를 찾을 수 없습니다.</MudAlert>
 }
@@ -38,6 +31,7 @@ else
        </MudButton>
    </MudPaper>
 }
+</AdminCrudPageShell>

@code {
    [Parameter]
@@ -47,6 +41,14 @@ else
    private InquiryForm.InquiryFormModel? formModel;
    private bool isLoading = true;

+    private RenderFragment EditorSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 5);
+        builder.AddAttribute(2, "Columns", 3);
+        builder.CloseComponent();
+    };
+
    protected override async Task OnInitializedAsync()
    {
        try
@@ -12,13 +12,7 @@
    </ChildContent>
 </AdminPageHeader>

-<MudPaper Class="admin-surface" Elevation="0">
-@if (isLoading)
-{
-    <MudProgressCircular Indeterminate="true" Class="ma-4" />
-}
-else
-{
+<AdminDataPanel Loading="@isLoading">
    <MudTabs Rounded="true" Elevation="0" Class="admin-tabs">
        <MudTabPanel Text="전체">
            <InquiryTable Inquiries="allInquiries" Status="" />
@@ -39,8 +33,7 @@ else
            <InquiryTable Inquiries="allInquiries" Status="closed" />
        </MudTabPanel>
    </MudTabs>
-}
-</MudPaper>
+</AdminDataPanel>

@code {
    [CascadingParameter]
@@ -2,77 +2,5 @@
@layout TaxBaik.Web.Components.Admin.Layout.BlankLayout
@attribute [AllowAnonymous]
@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
-@inject IApiClient ApiClient
-@inject ILocalStorageService LocalStorageService
-@inject IJSRuntime Js
-
 <PageTitle>로그인</PageTitle>
-
-<MudContainer MaxWidth="MaxWidth.Small" Class="admin-login-page d-flex align-center justify-center" Style="min-height: 100vh;">
-    <MudPaper Class="pa-8" Elevation="3" Style="width: 100%; max-width: 400px;">
-        <MudText Typo="Typo.h4" Class="mb-6 text-center">관리자 로그인</MudText>
-
-        <form id="admin-login-form">
-            <input class="mud-input mud-input-outlined mud-input-root mud-input-root-adorned-start mb-4"
-                   style="width: 100%; min-height: 56px; padding: 16px 14px;"
-                   placeholder="사용자명"
-                   autocomplete="username"
-                   name="username"
-                   value="@model.Username" />
-
-            <input type="password"
-                   class="mud-input mud-input-outlined mud-input-root mud-input-root-adorned-start mb-4"
-                   style="width: 100%; min-height: 56px; padding: 16px 14px;"
-                   placeholder="비밀번호"
-                   autocomplete="current-password"
-                   name="password" />
-
-            <div class="mb-4">
-                <input class="mud-checkbox" type="checkbox" name="rememberMe" />
-                <label style="margin-left: 8px; cursor: pointer;">아이디 저장</label>
-            </div>
-
-            <div class="mud-alert mud-alert-filled-error mb-4 login-error-message" style="display:none;">로그인 중 오류가 발생했습니다.</div>
-
-            <button type="submit"
-                    class="mud-button-root mud-button mud-button-filled mud-button-filled-primary mud-elevation-0"
-                    style="width: 100%; min-height: 52px; border: 0; border-radius: 4px; color: white;">
-                <span>로그인</span>
-            </button>
-        </form>
-    </MudPaper>
-</MudContainer>
-
-@code {
-    private readonly LoginModel model = new();
-    private const string RememberedUsernameKey = "admin-remembered-username";
-
-    protected override async Task OnInitializedAsync()
-    {
-        try
-        {
-            var remembered = await LocalStorageService.GetItemAsStringAsync(RememberedUsernameKey);
-            if (!string.IsNullOrEmpty(remembered))
-            {
-                model.Username = remembered;
-            }
-        }
-        catch
-        {
-            // LocalStorage may be unavailable during prerender.
-        }
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-            await Js.InvokeVoidAsync("taxbaikAdminSession.syncRouteClass");
-    }
-
-    private class LoginModel
-    {
-        public string Username { get; set; } = "";
-        public string Password { get; set; } = "";
-        public bool RememberMe { get; set; }
-    }
-}
+<AdminLoginForm />
@@ -20,10 +20,9 @@
    </MudButton>
 </section>

-<MudPaper Class="admin-surface" Elevation="0">
+<AdminDataPanel Loading="@(revenues is null)" SkeletonContent="@RevenueSkeleton">
    @if (revenues is null)
    {
-        <MudProgressLinear Indeterminate="true" />
    }
    else if (revenues.Count == 0)
    {
@@ -85,7 +84,7 @@
            </Columns>
        </MudDataGrid>
    }
-</MudPaper>
+</AdminDataPanel>

 <!-- Create Dialog -->
 <MudDialog @bind-IsVisible="isDialogOpen" Options="new DialogOptions { MaxWidth = MaxWidth.Small, FullWidth = true }">
@@ -124,6 +123,14 @@
    private bool isDialogOpen;
    private RevenueForm revenueForm = new();

+    private RenderFragment RevenueSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 5);
+        builder.AddAttribute(2, "Columns", 5);
+        builder.CloseComponent();
+    };
+
    protected override async Task OnInitializedAsync()
    {
        if (AuthStateTask != null)
@@ -21,9 +21,9 @@
    </MudButton>
 </section>

+<AdminDataPanel Loading="@(schedules is null)" SkeletonContent="@ScheduleSkeleton">
@if (schedules is null)
 {
-    <MudProgressLinear Indeterminate="true" />
 }
 else
 {
@@ -165,6 +165,7 @@ else
        </MudItem>
    </MudGrid>
 }
+</AdminDataPanel>

@code {
    [CascadingParameter]
@@ -177,6 +178,14 @@ else
    private bool isEditMode;
    private TaxFilingSchedule? selectedSchedule;
    private TaxFilingScheduleForm scheduleForm = new();
+
+    private RenderFragment ScheduleSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 6);
+        builder.AddAttribute(2, "Columns", 4);
+        builder.CloseComponent();
+    };
 
    protected override async Task OnInitializedAsync()
    {
@@ -20,9 +20,9 @@
    </MudButton>
 </section>

+<AdminDataPanel Loading="@(profiles == null)" SkeletonContent="@ProfileSkeleton">
@if (profiles == null)
 {
-    <MudProgressCircular Indeterminate="true" Class="mt-4" />
 }
 else
 {
@@ -117,6 +117,7 @@ else
        </MudItem>
    </MudGrid>
 }
+</AdminDataPanel>

@code {
    [CascadingParameter]
@@ -131,6 +132,14 @@ else
    private TaxProfile? selectedProfile;
    private TaxProfileForm profileForm = new();

+    private RenderFragment ProfileSkeleton => builder =>
+    {
+        builder.OpenComponent<AdminSkeletonRows>(0);
+        builder.AddAttribute(1, "Rows", 6);
+        builder.AddAttribute(2, "Columns", 4);
+        builder.CloseComponent();
+    };
+
    protected override async Task OnInitializedAsync()
    {
        if (AuthStateTask != null)