refactor: admin ui를 fluent v5와 html 기반으로 전환

TaxBaik.Web/Components/Admin/Pages/Announcements/AnnouncementEdit.razor

@@ -5,101 +5,47 @@
 @using TaxBaik.Web.Services
 @inject IAnnouncementBrowserClient AnnouncementClient
 @inject NavigationManager Navigation
-@inject ISnackbar Snackbar
+@inject IJSRuntime JS
 
 <PageTitle>@(Id.HasValue ? "공지 수정" : "공지 등록")</PageTitle>
 
 <section class="admin-page-hero">
     <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">Homepage</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">@(Id.HasValue ? "공지 수정" : "공지 등록")</MudText>
+        <div class="admin-eyebrow">Homepage</div>
+        <h1 class="admin-page-title">@(Id.HasValue ? "공지 수정" : "공지 등록")</h1>
     </div>
 </section>
 
-<MudPaper Class="admin-surface" Elevation="0">
-    <MudForm @ref="form">
-        <MudGrid>
-            <MudItem xs="12">
-                <MudTextField @bind-Value="model.Title"
-                              Label="제목"
-                              Variant="Variant.Outlined"
-                              Required="true"
-                              RequiredError="제목을 입력하세요."
-                              HelperText="홈페이지 상단 공지 바에 표시되는 텍스트입니다." />
-            </MudItem>
-
-            <MudItem xs="12">
-                <MudTextField @bind-Value="model.Content"
-                              Label="상세 내용 (선택)"
-                              Variant="Variant.Outlined"
-                              Lines="3"
-                              HelperText="부가 설명이 있을 경우 입력합니다. 없으면 제목만 표시됩니다." />
-            </MudItem>
-
-            <MudItem xs="12" sm="6">
-                <MudSelect @bind-Value="model.DisplayType"
-                           Label="유형"
-                           Variant="Variant.Outlined">
-                    <MudSelectItem Value="@("info")">일반 (파란색)</MudSelectItem>
-                    <MudSelectItem Value="@("banner")">배너 (주황색) — 중요 이벤트</MudSelectItem>
-                    <MudSelectItem Value="@("urgent")">긴급 (빨간색) — 마감 임박</MudSelectItem>
-                </MudSelect>
-            </MudItem>
-
-            <MudItem xs="12" sm="6">
-                <MudNumericField @bind-Value="model.SortOrder"
-                                 Label="노출 순서"
-                                 Variant="Variant.Outlined"
-                                 HelperText="숫자가 클수록 먼저 표시됩니다." />
-            </MudItem>
-
-            <MudItem xs="12" sm="6">
-                <MudDatePicker @bind-Date="startsAtDate"
-                               Label="게시 시작일 (비우면 즉시)"
-                               Variant="Variant.Outlined"
-                               DateFormat="yyyy-MM-dd"
-                               Clearable="true" />
-            </MudItem>
-
-            <MudItem xs="12" sm="6">
-                <MudDatePicker @bind-Date="endsAtDate"
-                               Label="게시 종료일 (비우면 무기한)"
-                               Variant="Variant.Outlined"
-                               DateFormat="yyyy-MM-dd"
-                               Clearable="true" />
-            </MudItem>
-
-            <MudItem xs="12">
-                <MudSwitch @bind-Checked="model.IsActive"
-                           Label="@(model.IsActive ? "활성화 (홈페이지에 노출)" : "비활성화 (홈페이지 미노출)")"
-                           Color="Color.Primary" />
-            </MudItem>
-        </MudGrid>
-
-        <div class="d-flex gap-2 mt-4">
-            <MudButton Variant="Variant.Filled" Color="Color.Primary"
-                       StartIcon="@Icons.Material.Filled.Save"
-                       Disabled="isSaving"
-                       @onclick="SaveAsync">
-                @(isSaving ? "저장 중..." : "저장")
-            </MudButton>
-            <MudButton Variant="Variant.Outlined"
-                       @onclick="@(() => Navigation.NavigateTo("/taxbaik/admin/announcements"))">
-                취소
-            </MudButton>
+<div class="admin-surface" style="max-width:720px;">
+    <form class="admin-dialog-card" @onsubmit="SaveAsync" @onsubmit:preventDefault="true">
+        <label>제목 * <input class="admin-input" @bind="model.Title" /></label>
+        <label>상세 내용 (선택) <textarea class="admin-input" rows="3" @bind="model.Content"></textarea></label>
+        <label>유형
+            <select class="admin-input" @bind="model.DisplayType">
+                <option value="info">일반 (파란색)</option>
+                <option value="banner">배너 (주황색)</option>
+                <option value="urgent">긴급 (빨간색)</option>
+            </select>
+        </label>
+        <label>노출 순서 <input class="admin-input" type="number" @bind="model.SortOrder" /></label>
+        <label>게시 시작일 <input class="admin-input" type="text" placeholder="yyyy-MM-dd" @bind="StartsAtText" /></label>
+        <label>게시 종료일 <input class="admin-input" type="text" placeholder="yyyy-MM-dd" @bind="EndsAtText" /></label>
+        <label><input type="checkbox" @bind="model.IsActive" /> @(model.IsActive ? "활성화" : "비활성화")</label>
+        <div class="admin-dialog-actions">
+            <button type="submit" class="site-button primary" disabled="@isSaving">저장</button>
+            <button type="button" class="site-button secondary" @onclick='() => Navigation.NavigateTo("/taxbaik/admin/announcements")'>취소</button>
         </div>
-    </MudForm>
-</MudPaper>
+    </form>
+</div>
 
 @code {
     [Parameter] public int? Id { get; set; }
-
-    private MudForm? form;
     private bool isSaving;
     private DateTime? startsAtDate;
     private DateTime? endsAtDate;
-
     private AnnouncementDto model = new();
+    private string StartsAtText { get => startsAtDate?.ToString("yyyy-MM-dd") ?? ""; set => startsAtDate = DateTime.TryParse(value, out var dt) ? dt : null; }
+    private string EndsAtText { get => endsAtDate?.ToString("yyyy-MM-dd") ?? ""; set => endsAtDate = DateTime.TryParse(value, out var dt) ? dt : null; }
 
     protected override async Task OnInitializedAsync()
     {
@@ -115,15 +61,15 @@
                 }
                 model = new AnnouncementDto
                 {
-                    Id          = entity.Id,
-                    Title       = entity.Title,
-                    Content     = entity.Content,
+                    Id = entity.Id,
+                    Title = entity.Title,
+                    Content = entity.Content,
                     DisplayType = entity.DisplayType,
-                    IsActive    = entity.IsActive,
-                    SortOrder   = entity.SortOrder
+                    IsActive = entity.IsActive,
+                    SortOrder = entity.SortOrder
                 };
                 startsAtDate = entity.StartsAt?.ToLocalTime();
-                endsAtDate   = entity.EndsAt?.ToLocalTime();
+                endsAtDate = entity.EndsAt?.ToLocalTime();
             }
             catch
             {
@@ -134,41 +80,18 @@
 
     private async Task SaveAsync()
     {
-        if (form is null) return;
-        await form.Validate();
-        if (!form.IsValid) return;
-
         isSaving = true;
         try
         {
-            model.StartsAt = startsAtDate.HasValue
-                ? DateTime.SpecifyKind(startsAtDate.Value.Date, DateTimeKind.Local).ToUniversalTime()
-                : null;
-            model.EndsAt = endsAtDate.HasValue
-                ? DateTime.SpecifyKind(endsAtDate.Value.Date.AddDays(1).AddSeconds(-1), DateTimeKind.Local).ToUniversalTime()
-                : null;
-
-            if (Id.HasValue)
-            {
-                var result = await AnnouncementClient.UpdateAsync(Id.Value, model);
-                if (result != null)
-                    Snackbar.Add("공지사항이 저장되었습니다.", Severity.Success);
-                else
-                    Snackbar.Add("저장 실패", Severity.Error);
-            }
-            else
-            {
-                var result = await AnnouncementClient.CreateAsync(model);
-                if (result != null)
-                    Snackbar.Add("공지사항이 저장되었습니다.", Severity.Success);
-                else
-                    Snackbar.Add("저장 실패", Severity.Error);
-            }
+            model.StartsAt = startsAtDate.HasValue ? DateTime.SpecifyKind(startsAtDate.Value.Date, DateTimeKind.Local).ToUniversalTime() : null;
+            model.EndsAt = endsAtDate.HasValue ? DateTime.SpecifyKind(endsAtDate.Value.Date.AddDays(1).AddSeconds(-1), DateTimeKind.Local).ToUniversalTime() : null;
+            var result = Id.HasValue ? await AnnouncementClient.UpdateAsync(Id.Value, model) : await AnnouncementClient.CreateAsync(model);
+            await JS.InvokeVoidAsync("alert", result != null ? "공지사항이 저장되었습니다." : "저장 실패");
             Navigation.NavigateTo("/taxbaik/admin/announcements");
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"저장 실패: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"저장 실패: {ex.Message}");
         }
         finally
         {

TaxBaik.Web/Components/Admin/Pages/Announcements/AnnouncementList.razor

@@ -4,90 +4,77 @@
 @using TaxBaik.Domain.Entities
 @inject IAnnouncementBrowserClient AnnouncementClient
 @inject NavigationManager Navigation
-@inject IDialogService DialogService
-@inject ISnackbar Snackbar
+@inject IJSRuntime JS
 
 <PageTitle>공지사항 관리</PageTitle>
 
 <section class="admin-page-hero">
     <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">Homepage</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">공지사항 관리</MudText>
-        <MudText Typo="Typo.body2" Class="admin-page-subtitle">홈페이지 상단에 노출되는 공지사항을 등록하고 관리합니다.</MudText>
+        <div class="admin-eyebrow">Homepage</div>
+        <h1 class="admin-page-title">공지사항 관리</h1>
+        <p class="admin-page-subtitle">홈페이지 상단에 노출되는 공지사항을 등록하고 관리합니다.</p>
     </div>
-    <MudButton Variant="Variant.Filled" Color="Color.Primary"
-               StartIcon="@Icons.Material.Filled.Add"
-               Href="/taxbaik/admin/announcements/create">
-        공지 등록
-    </MudButton>
+    <a class="site-button primary" href="/taxbaik/admin/announcements/create">공지 등록</a>
 </section>
 
-<MudPaper Class="admin-surface" Elevation="0">
+<div class="admin-surface">
     @if (announcements is null)
     {
-        <MudProgressLinear Indeterminate="true" />
+        <Skeleton Count="5" CssClass="taxbaik-skeleton-grid" />
     }
     else if (!announcements.Any())
     {
-        <MudText Class="pa-4 text-muted">등록된 공지사항이 없습니다.</MudText>
+        <div class="muted">등록된 공지사항이 없습니다.</div>
     }
     else
     {
-        <MudSimpleTable Striped="true" Dense="true" Class="admin-table">
-            <thead>
-                <tr>
-                    <th>제목</th>
-                    <th>유형</th>
-                    <th>상태</th>
-                    <th>게시 기간</th>
-                    <th>순서</th>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var item in announcements)
-                {
+        <div class="admin-table-wrap">
+            <table class="admin-table">
+                <thead>
                     <tr>
-                        <td>@item.Title</td>
-                        <td>
-                            <MudChip Size="Size.Small" Color="@GetTypeColor(item.DisplayType)">
-                                @GetTypeLabel(item.DisplayType)
-                            </MudChip>
-                        </td>
-                        <td>
-                            @if (IsCurrentlyActive(item))
-                            {
-                                <MudChip Size="Size.Small" Color="Color.Success">노출 중</MudChip>
-                            }
-                            else if (!item.IsActive)
-                            {
-                                <MudChip Size="Size.Small" Color="Color.Default">비활성</MudChip>
-                            }
-                            else
-                            {
-                                <MudChip Size="Size.Small" Color="Color.Warning">기간 외</MudChip>
-                            }
-                        </td>
-                        <td class="small">
-                            @FormatPeriod(item)
-                        </td>
-                        <td>@item.SortOrder</td>
-                        <td>
-                            <MudButtonGroup Size="Size.Small" Variant="Variant.Outlined">
-                                <MudButton @onclick="@(() => Navigation.NavigateTo($"/taxbaik/admin/announcements/{item.Id}/edit"))">
-                                    수정
-                                </MudButton>
-                                <MudButton Color="Color.Error" @onclick="@(() => DeleteAsync(item))">
-                                    삭제
-                                </MudButton>
-                            </MudButtonGroup>
-                        </td>
+                        <th>제목</th>
+                        <th>유형</th>
+                        <th>상태</th>
+                        <th>게시 기간</th>
+                        <th>순서</th>
+                        <th></th>
                     </tr>
-                }
-            </tbody>
-        </MudSimpleTable>
+                </thead>
+                <tbody>
+                    @foreach (var item in announcements)
+                    {
+                        <tr>
+                            <td>@item.Title</td>
+                            <td><span class="status-pill info">@GetTypeLabel(item.DisplayType)</span></td>
+                            <td>
+                                @if (IsCurrentlyActive(item))
+                                {
+                                    <span class="status-pill success">노출 중</span>
+                                }
+                                else if (!item.IsActive)
+                                {
+                                    <span class="status-pill default">비활성</span>
+                                }
+                                else
+                                {
+                                    <span class="status-pill warning">기간 외</span>
+                                }
+                            </td>
+                            <td class="small">@FormatPeriod(item)</td>
+                            <td>@item.SortOrder</td>
+                            <td>
+                                <div class="admin-actions">
+                                    <button type="button" class="admin-icon-button" @onclick="@(() => Navigation.NavigateTo($"/taxbaik/admin/announcements/{item.Id}/edit"))">✎</button>
+                                    <button type="button" class="admin-icon-button danger" @onclick="@(() => DeleteAsync(item))">✕</button>
+                                </div>
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
     }
-</MudPaper>
+</div>
 
 @code {
     [CascadingParameter]
@@ -97,16 +84,13 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender)
+        if (firstRender && AuthStateTask != null)
         {
-            if (AuthStateTask != null)
+            var authState = await AuthStateTask;
+            if (authState.User.Identity?.IsAuthenticated == true)
             {
-                var authState = await AuthStateTask;
-                if (authState.User.Identity?.IsAuthenticated == true)
-                {
-                    await LoadAsync();
-                    StateHasChanged();
-                }
+                await LoadAsync();
+                StateHasChanged();
             }
         }
     }
@@ -119,36 +103,32 @@
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"오류: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"오류: {ex.Message}");
             announcements = [];
         }
     }
 
     private async Task DeleteAsync(Announcement item)
     {
-        var confirmed = await DialogService.ShowMessageBox(
-            "공지 삭제",
-            $"'{item.Title}' 공지를 삭제하시겠습니까?",
-            yesText: "삭제", cancelText: "취소");
-
-        if (confirmed != true) return;
+        var confirmed = await JS.InvokeAsync<bool>("confirm", $"'{item.Title}' 공지를 삭제하시겠습니까?");
+        if (!confirmed) return;
 
         try
         {
             var success = await AnnouncementClient.DeleteAsync(item.Id);
             if (success)
             {
-                Snackbar.Add("공지사항이 삭제되었습니다.", Severity.Success);
+                await JS.InvokeVoidAsync("alert", "공지사항이 삭제되었습니다.");
                 await LoadAsync();
             }
             else
             {
-                Snackbar.Add("삭제 실패", Severity.Error);
+                await JS.InvokeVoidAsync("alert", "삭제 실패");
             }
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"오류: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"오류: {ex.Message}");
         }
     }
 
@@ -157,28 +137,21 @@
         if (!a.IsActive) return false;
         var now = DateTime.UtcNow;
         if (a.StartsAt.HasValue && a.StartsAt > now) return false;
-        if (a.EndsAt.HasValue   && a.EndsAt   < now) return false;
+        if (a.EndsAt.HasValue && a.EndsAt < now) return false;
         return true;
     }
 
     private static string FormatPeriod(Announcement a)
     {
         var start = a.StartsAt?.ToLocalTime().ToString("MM/dd") ?? "즉시";
-        var end   = a.EndsAt?.ToLocalTime().ToString("MM/dd")   ?? "무기한";
+        var end = a.EndsAt?.ToLocalTime().ToString("MM/dd") ?? "무기한";
         return $"{start} ~ {end}";
     }
 
-    private static Color GetTypeColor(string type) => type switch
-    {
-        "urgent" => Color.Error,
-        "banner" => Color.Warning,
-        _        => Color.Info
-    };
-
     private static string GetTypeLabel(string type) => type switch
     {
         "urgent" => "긴급",
         "banner" => "배너",
-        _        => "일반"
+        _ => "일반"
     };
 }