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

TaxBaik.Web/Components/Admin/Pages/ConsultingActivities.razor

@@ -2,150 +2,122 @@
 @using TaxBaik.Web.Services.AdminClients
 @inject IConsultingActivityBrowserClient ActivityClient
 @inject IClientBrowserClient ClientClient
-@inject ISnackbar Snackbar
-@inject IDialogService DialogService
+@inject IJSRuntime JS
 @attribute [Authorize]
 
 <PageTitle>상담 활동 관리</PageTitle>
-
 <section class="admin-page-hero">
     <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">CRM & 세무관리</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">상담 활동 관리</MudText>
-        <MudText Typo="Typo.body2" Class="admin-page-subtitle">고객별 상담 이력과 팔로업을 추적합니다.</MudText>
+        <div class="admin-eyebrow">CRM & 세무관리</div>
+        <h1 class="admin-page-title">상담 활동 관리</h1>
+        <p class="admin-page-subtitle">고객별 상담 이력과 팔로업을 추적합니다.</p>
     </div>
-    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OpenCreateDialog" StartIcon="@Icons.Material.Filled.Add">
-        새 활동 기록
-    </MudButton>
+    <button type="button" class="site-button primary" @onclick="OpenCreateDialog">새 활동 기록</button>
 </section>
 
-<MudPaper Class="admin-surface" Elevation="0">
+<div class="admin-surface">
     @if (activities is null)
     {
-        <MudProgressLinear Indeterminate="true" />
+        <Skeleton Count="6" CssClass="taxbaik-skeleton-grid" />
     }
     else if (activities.Count == 0)
     {
-        <MudAlert Severity="Severity.Info" Class="mt-4">
-            <MudIcon Icon="@Icons.Material.Filled.Timeline" Class="me-2" />
-            상담 활동이 없습니다.
-        </MudAlert>
+        <div class="muted">상담 활동이 없습니다.</div>
     }
     else
     {
-        <MudDataGrid T="ConsultingActivity"
-            Items="@activities"
-            Dense="true"
-            Hover="true"
-            Striped="true"
-            Virtualize="true"
-            RowsPerPage="30"
-            Class="admin-grid">
-            <Columns>
-                <PropertyColumn Property="x => x.Id" Title="ID" Sortable="true" />
-                <TemplateColumn Title="고객">
-                    <CellTemplate>
-                        @if (clientMap.TryGetValue(context.Item.ClientId, out var clientName))
-                        {
-                            <MudLink Href="@($"/taxbaik/admin/clients/{context.Item.ClientId}")" Color="Color.Primary">
-                                @clientName
-                            </MudLink>
-                        }
-                    </CellTemplate>
-                </TemplateColumn>
-                <PropertyColumn Property="x => x.ActivityType" Title="활동 유형" />
-                <PropertyColumn Property="x => x.ActivityDate" Title="활동일시" Format="g" />
-                <TemplateColumn Title="설명">
-                    <CellTemplate>
-                        @{
-                            var desc = context.Item.Description ?? "";
-                            if (desc.Length > 30) desc = desc.Substring(0, 30) + "...";
-                        }
-                        <span>@desc</span>
-                    </CellTemplate>
-                </TemplateColumn>
-                <TemplateColumn Title="다음 팔로업">
-                    <CellTemplate>
-                        @if (context.Item.NextFollowupDate.HasValue)
-                        {
-                            var daysLeft = (context.Item.NextFollowupDate.Value.Date - DateTime.Today).Days;
-                            <MudChip Size="Size.Small"
-                                Color="@(daysLeft < 0 ? Color.Error : daysLeft <= 3 ? Color.Warning : Color.Success)"
-                                Variant="Variant.Filled">
-                                @context.Item.NextFollowupDate.Value.ToString("yyyy-MM-dd")
-                            </MudChip>
-                        }
-                    </CellTemplate>
-                </TemplateColumn>
-                <TemplateColumn Title="작업" Sortable="false">
-                    <CellTemplate>
-                        <MudButtonGroup Size="Size.Small" Variant="Variant.Outlined">
-                            <MudIconButton Icon="@Icons.Material.Filled.Edit" OnClick="@(async () => await OpenEditDialog(context.Item))" />
-                            <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error"
-                                OnClick="@(async () => await DeleteActivity(context.Item.Id))" />
-                        </MudButtonGroup>
-                    </CellTemplate>
-                </TemplateColumn>
-            </Columns>
-        </MudDataGrid>
+        <div class="admin-table-wrap">
+            <table class="admin-table">
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>고객</th>
+                        <th>활동 유형</th>
+                        <th>활동일시</th>
+                        <th>설명</th>
+                        <th>다음 팔로업</th>
+                        <th>작업</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach (var item in activities)
+                    {
+                        <tr>
+                            <td>@item.Id</td>
+                            <td>@clientMap.GetValueOrDefault(item.ClientId, $"Client #{item.ClientId}")</td>
+                            <td>@item.ActivityType</td>
+                            <td>@item.ActivityDate.ToString("g")</td>
+                            <td>@Truncate(item.Description)</td>
+                            <td>@(item.NextFollowupDate?.ToString("yyyy-MM-dd") ?? "—")</td>
+                            <td>
+                                <div class="admin-row-actions">
+                                    <button type="button" class="admin-icon-button" @onclick="@(async () => await OpenEditDialog(item))">✎</button>
+                                    <button type="button" class="admin-icon-button danger" @onclick="@(async () => await DeleteActivity(item.Id))">✕</button>
+                                </div>
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
     }
-</MudPaper>
+</div>
 
-<MudDialog @bind-IsVisible="isDialogOpen" Options="new DialogOptions { MaxWidth = MaxWidth.Small, FullWidth = true }">
-    <TitleContent>
-        <MudText Typo="Typo.h6">@(editingActivity == null ? "새 활동 기록" : "활동 기록 수정")</MudText>
-    </TitleContent>
-    <DialogContent>
-        <MudForm @ref="form">
-            <MudSelect T="int" @bind-Value="activityForm.ClientId" Label="고객" Required="true" Variant="Variant.Outlined" FullWidth="true" Class="mb-4">
+<dialog class="admin-dialog" open="@isDialogOpen">
+    <form class="admin-dialog-card" @onsubmit="SaveActivity" @onsubmit:preventDefault="true">
+        <h3>@(editingActivity == null ? "새 활동 기록" : "활동 기록 수정")</h3>
+        <label>고객
+            <select class="admin-input" @bind="ClientIdText">
+                <option value="">선택하세요</option>
                 @foreach (var client in clients)
                 {
-                    <MudSelectItem Value="@client.Id">@GetClientDisplayName(client)</MudSelectItem>
+                    <option value="@client.Id.ToString()">@GetClientDisplayName(client)</option>
                 }
-            </MudSelect>
-            <MudSelect T="string" @bind-Value="activityForm.ActivityType" Label="활동 유형" Variant="Variant.Outlined" FullWidth="true" Class="mb-4" Required="true">
-                <MudSelectItem Value="@("방문 상담")">방문 상담</MudSelectItem>
-                <MudSelectItem Value="@("전화 상담")">전화 상담</MudSelectItem>
-                <MudSelectItem Value="@("세무조사 대응 미팅")">세무조사 대응 미팅</MudSelectItem>
-                <MudSelectItem Value="@("카카오톡 상담")">카카오톡 상담</MudSelectItem>
-                <MudSelectItem Value="@("이메일 자료 접수")">이메일 자료 접수</MudSelectItem>
-                <MudSelectItem Value="@("기타")">기타</MudSelectItem>
-            </MudSelect>
-            <MudDatePicker @bind-Date="activityForm.ActivityDate" Label="활동일" Variant="Variant.Outlined" FullWidth="true" Class="mb-4" Required="true" />
-            <MudTextField T="string" @bind-Value="activityForm.Description" Label="설명" Variant="Variant.Outlined" FullWidth="true" Lines="3" Class="mb-4" Required="true" />
-            <MudDatePicker @bind-Date="activityForm.NextFollowupDate" Label="다음 팔로업일" Variant="Variant.Outlined" FullWidth="true" Class="mb-4" />
-        </MudForm>
-    </DialogContent>
-    <DialogActions>
-        <MudButton OnClick="CloseDialog">취소</MudButton>
-        <MudButton Color="Color.Primary" OnClick="SaveActivity">저장</MudButton>
-    </DialogActions>
-</MudDialog>
+            </select>
+        </label>
+        <label>활동 유형
+            <select class="admin-input" @bind="activityForm.ActivityType">
+                <option value="">선택하세요</option>
+                <option value="방문 상담">방문 상담</option>
+                <option value="전화 상담">전화 상담</option>
+                <option value="세무조사 대응 미팅">세무조사 대응 미팅</option>
+                <option value="카카오톡 상담">카카오톡 상담</option>
+                <option value="이메일 자료 접수">이메일 자료 접수</option>
+                <option value="기타">기타</option>
+            </select>
+        </label>
+        <label>활동일 <input class="admin-input" type="text" placeholder="2026-06-29 14:00" @bind="ActivityDateText" /></label>
+        <label>설명 <textarea class="admin-input" rows="4" @bind="activityForm.Description"></textarea></label>
+        <label>다음 팔로업일 <input class="admin-input" type="text" placeholder="2026-07-10" @bind="NextFollowupText" /></label>
+        <div class="admin-dialog-actions">
+            <button type="button" class="site-button secondary" @onclick="CloseDialog">취소</button>
+            <button type="submit" class="site-button primary">저장</button>
+        </div>
+    </form>
+</dialog>
 
 @code {
-    [CascadingParameter]
-    private Task<AuthenticationState>? AuthStateTask { get; set; }
-
+    [CascadingParameter] private Task<AuthenticationState>? AuthStateTask { get; set; }
     private List<ConsultingActivity>? activities;
     private List<Client> clients = [];
     private Dictionary<int, string> clientMap = new();
-    private MudForm? form;
     private bool isDialogOpen;
     private ConsultingActivity? editingActivity;
     private ConsultingActivityForm activityForm = new();
 
+    private string ClientIdText { get => activityForm.ClientId > 0 ? activityForm.ClientId.ToString() : ""; set => activityForm.ClientId = int.TryParse(value, out var id) ? id : 0; }
+    private string ActivityDateText { get => activityForm.ActivityDate?.ToString("yyyy-MM-dd HH:mm") ?? ""; set => activityForm.ActivityDate = DateTime.TryParse(value, out var dt) ? dt : null; }
+    private string NextFollowupText { get => activityForm.NextFollowupDate?.ToString("yyyy-MM-dd") ?? ""; set => activityForm.NextFollowupDate = DateTime.TryParse(value, out var dt) ? dt : null; }
+
     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 LoadData();
-                    StateHasChanged();
-                }
+                await LoadData();
+                StateHasChanged();
             }
         }
     }
@@ -161,18 +133,14 @@
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"데이터 로드 실패: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"데이터 로드 실패: {ex.Message}");
         }
     }
 
     private void OpenCreateDialog()
     {
         editingActivity = null;
-        activityForm = new ConsultingActivityForm
-        {
-            ActivityDate = DateTime.Now,
-            ClientId = clients.FirstOrDefault()?.Id ?? 0
-        };
+        activityForm = new ConsultingActivityForm { ClientId = clients.FirstOrDefault()?.Id ?? 0, ActivityDate = DateTime.Now };
         isDialogOpen = true;
     }
 
@@ -188,103 +156,60 @@
             NextFollowupDate = activity.NextFollowupDate
         };
         isDialogOpen = true;
+        await Task.CompletedTask;
     }
 
     private async Task SaveActivity()
     {
-        if (form != null)
+        if (activityForm.ClientId <= 0 || string.IsNullOrWhiteSpace(activityForm.ActivityType) || string.IsNullOrWhiteSpace(activityForm.Description))
         {
-            await form.Validate();
-            if (!form.IsValid)
-            {
-                Snackbar.Add("필수 항목을 입력해주세요.", Severity.Warning);
-                return;
-            }
+            await JS.InvokeVoidAsync("alert", "필수 항목을 입력해주세요.");
+            return;
         }
 
         try
         {
             if (editingActivity == null)
             {
-                var actDate = activityForm.ActivityDate ?? DateTime.Now;
-                var newId = await ActivityClient.CreateAsync(
-                    activityForm.ClientId,
-                    activityForm.ActivityType,
-                    actDate,
-                    activityForm.Description,
-                    null,
-                    activityForm.NextFollowupDate);
-
+                var newId = await ActivityClient.CreateAsync(activityForm.ClientId, activityForm.ActivityType, activityForm.ActivityDate ?? DateTime.Now, activityForm.Description, null, activityForm.NextFollowupDate);
                 if (newId > 0)
                 {
-                    Snackbar.Add("활동이 기록되었습니다.", Severity.Success);
+                    await JS.InvokeVoidAsync("alert", "활동이 기록되었습니다.");
                     CloseDialog();
                     await LoadData();
                 }
             }
             else
             {
-                await ActivityClient.UpdateAsync(
-                    editingActivity.Id,
-                    null,
-                    activityForm.NextFollowupDate);
-
-                Snackbar.Add("활동이 업데이트되었습니다.", Severity.Success);
+                await ActivityClient.UpdateAsync(editingActivity.Id, null, activityForm.NextFollowupDate);
+                await JS.InvokeVoidAsync("alert", "활동이 업데이트되었습니다.");
                 CloseDialog();
                 await LoadData();
             }
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"저장 실패: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"저장 실패: {ex.Message}");
         }
     }
 
     private async Task DeleteActivity(int id)
     {
-        var parameters = new DialogParameters
-        {
-            { "Title", "삭제 확인" },
-            { "Message", "이 활동을 삭제하시겠습니까?" }
-        };
-
-        var dialog = await DialogService.ShowAsync<ConfirmDialog>("", parameters);
-        var result = await dialog.Result;
-
-        if (result?.Canceled ?? true)
-            return;
-
+        if (!await JS.InvokeAsync<bool>("confirm", "이 활동을 삭제하시겠습니까?")) return;
         try
         {
             await ActivityClient.DeleteAsync(id);
-            Snackbar.Add("활동이 삭제되었습니다.", Severity.Success);
+            await JS.InvokeVoidAsync("alert", "활동이 삭제되었습니다.");
             await LoadData();
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"삭제 실패: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"삭제 실패: {ex.Message}");
         }
     }
 
-    private void CloseDialog()
-    {
-        isDialogOpen = false;
-        editingActivity = null;
-        activityForm = new();
-    }
-
-    private static string GetClientDisplayName(Client client)
-        => !string.IsNullOrWhiteSpace(client.CompanyName)
-            ? client.CompanyName
-            : !string.IsNullOrWhiteSpace(client.Name)
-                ? client.Name
-                : $"Client #{client.Id}";
-    private class ConsultingActivityForm
-    {
-        public int ClientId { get; set; }
-        public string ActivityType { get; set; } = "";
-        public DateTime? ActivityDate { get; set; } = DateTime.Now;
-        public string Description { get; set; } = "";
-        public DateTime? NextFollowupDate { get; set; }
-    }
+    private void CloseDialog() { isDialogOpen = false; editingActivity = null; activityForm = new(); }
+    private static string Truncate(string? text) => string.IsNullOrWhiteSpace(text) ? "—" : text.Length > 30 ? text[..30] + "..." : text;
+    private static string GetClientDisplayName(Client client) => !string.IsNullOrWhiteSpace(client.CompanyName) ? client.CompanyName : !string.IsNullOrWhiteSpace(client.Name) ? client.Name : $"Client #{client.Id}";
+    private sealed class ConsultingActivityForm { public int ClientId { get; set; } public string ActivityType { get; set; } = ""; public DateTime? ActivityDate { get; set; } = DateTime.Now; public string Description { get; set; } = ""; public DateTime? NextFollowupDate { get; set; } }
 }