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

TaxBaik.Web/Components/Admin/Pages/Inquiries/InquiryCreate.razor

@@ -5,51 +5,41 @@
 @using TaxBaik.Web.Components.Admin.Forms
 @inject InquiryService InquiryService
 @inject NavigationManager Navigation
-@inject ISnackbar Snackbar
+@inject IJSRuntime JS
 
 <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 class="admin-eyebrow">Customer Relations</div>
+        <h1 class="admin-page-title">새 문의 등록</h1>
+        <p class="admin-page-subtitle">고객 문의를 등록합니다. (전화, 오프라인 등)</p>
     </div>
-    <MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Close" @onclick="GoBack">취소</MudButton>
+    <button type="button" class="site-button secondary" @onclick="GoBack">취소</button>
 </section>
 
-<MudPaper Class="pa-4 mt-4" Elevation="1">
+<div class="admin-surface mt-4">
     <InquiryForm ButtonText="등록" OnSubmit="HandleCreate" OnCancel="GoBack" />
-</MudPaper>
+</div>
 
 @code {
-    private void GoBack()
-    {
-        Navigation.NavigateTo("/taxbaik/admin/inquiries");
-    }
+    private void GoBack() => Navigation.NavigateTo("/taxbaik/admin/inquiries");
 
     private async Task HandleCreate(InquiryForm.InquiryFormModel model)
     {
         try
         {
-            await InquiryService.SubmitAsync(
-                model.Name,
-                model.Phone,
-                model.ServiceType,
-                model.Message,
-                model.Email,
-                ipAddress: "admin-registered");
-
-            Snackbar.Add("문의가 등록되었습니다.", Severity.Success);
+            await InquiryService.SubmitAsync(model.Name, model.Phone, model.ServiceType, model.Message, model.Email, ipAddress: "admin-registered");
+            await JS.InvokeVoidAsync("alert", "문의가 등록되었습니다.");
             Navigation.NavigateTo("/taxbaik/admin/inquiries");
         }
         catch (ValidationException ex)
         {
-            Snackbar.Add(ex.Message, Severity.Error);
+            await JS.InvokeVoidAsync("alert", ex.Message);
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"등록 실패: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"등록 실패: {ex.Message}");
         }
     }
 }

TaxBaik.Web/Components/Admin/Pages/Inquiries/InquiryDetail.razor

@@ -3,113 +3,75 @@
 @using TaxBaik.Web.Services
 @inject IInquiryBrowserClient InquiryClient
 @inject NavigationManager Navigation
-@inject ISnackbar Snackbar
+@inject IJSRuntime JS
 
 <PageTitle>문의 상세</PageTitle>
 
 <section class="admin-page-hero">
     <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">Inquiry Details</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">문의 상세</MudText>
-        <MudText Typo="Typo.body2" Class="admin-page-subtitle">문의 정보를 확인하고 처리 상태를 관리합니다.</MudText>
+        <div class="admin-eyebrow">Inquiry Details</div>
+        <h1 class="admin-page-title">문의 상세</h1>
+        <p class="admin-page-subtitle">문의 정보를 확인하고 처리 상태를 관리합니다.</p>
     </div>
 </section>
 
 @if (inquiry != null)
 {
-    <MudButton Variant="Variant.Outlined"
-               Color="Color.Primary"
-               StartIcon="@Icons.Material.Filled.ArrowBack"
-               @onclick="@(() => Navigation.NavigateTo("/taxbaik/admin/inquiries"))">
-        문의 목록으로
-    </MudButton>
+    <div class="admin-page-actions">
+        <button type="button" class="site-button secondary" @onclick='() => Navigation.NavigateTo("/taxbaik/admin/inquiries")'>문의 목록으로</button>
+    </div>
 
-    <MudGrid Class="mt-4">
-        <MudItem xs="12" md="8">
-            <MudPaper Class="pa-4" Elevation="1">
-                <MudText Typo="Typo.h6" Class="mb-3">문의 정보</MudText>
-                <MudGrid>
-                    <MudItem xs="12" sm="6">
-                        <MudText Typo="Typo.subtitle2" Color="Color.Secondary">이름</MudText>
-                        <MudText>@inquiry.Name</MudText>
-                    </MudItem>
-                    <MudItem xs="12" sm="6">
-                        <MudText Typo="Typo.subtitle2" Color="Color.Secondary">연락처</MudText>
-                        <MudText>@inquiry.Phone</MudText>
-                    </MudItem>
-                    <MudItem xs="12" sm="6">
-                        <MudText Typo="Typo.subtitle2" Color="Color.Secondary">이메일</MudText>
-                        <MudText>@(inquiry.Email ?? "-")</MudText>
-                    </MudItem>
-                    <MudItem xs="12" sm="6">
-                        <MudText Typo="Typo.subtitle2" Color="Color.Secondary">분야</MudText>
-                        <MudText>@inquiry.ServiceType</MudText>
-                    </MudItem>
-                    <MudItem xs="12">
-                        <MudText Typo="Typo.subtitle2" Color="Color.Secondary">문의 내용</MudText>
-                        <MudPaper Class="pa-3 mt-1" Outlined="true">
-                            <MudText Style="white-space: pre-wrap;">@inquiry.Message</MudText>
-                        </MudPaper>
-                    </MudItem>
-                    <MudItem xs="12">
-                        <MudText Typo="Typo.subtitle2" Color="Color.Secondary">접수일시</MudText>
-                        <MudText>@inquiry.CreatedAt.ToLocalTime().ToString("yyyy-MM-dd HH:mm")</MudText>
-                    </MudItem>
-                </MudGrid>
-            </MudPaper>
+    <div class="admin-detail-grid">
+        <section class="admin-surface">
+            <h3 class="admin-section-title">문의 정보</h3>
+            <div class="admin-kv-grid">
+                <div><span>이름</span><strong>@inquiry.Name</strong></div>
+                <div><span>연락처</span><strong>@inquiry.Phone</strong></div>
+                <div><span>이메일</span><strong>@(inquiry.Email ?? "-")</strong></div>
+                <div><span>분야</span><strong>@inquiry.ServiceType</strong></div>
+                <div class="span-2"><span>문의 내용</span><strong style="white-space: pre-wrap;">@inquiry.Message</strong></div>
+                <div><span>접수일시</span><strong>@inquiry.CreatedAt.ToLocalTime().ToString("yyyy-MM-dd HH:mm")</strong></div>
+            </div>
+        </section>
 
-            <MudPaper Class="pa-4 mt-4" Elevation="1">
-                <MudText Typo="Typo.h6" Class="mb-3">담당자 메모</MudText>
-                <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>
-        </MudItem>
+        <section class="admin-surface">
+            <h3 class="admin-section-title">담당자 메모</h3>
+            <textarea class="admin-input" rows="6" @bind="adminMemo"></textarea>
+            <div class="admin-dialog-actions mt-3">
+                <button type="button" class="site-button primary" @onclick="SaveMemo">메모 저장</button>
+            </div>
+        </section>
 
-        <MudItem xs="12" md="4">
-            <MudPaper Class="pa-4" Elevation="1">
-                <MudText Typo="Typo.h6" Class="mb-3">처리 상태</MudText>
-                <MudStack Spacing="2">
-                    @foreach (var (key, label) in InquiryStatusMapper.Labels)
-                    {
-                        <MudButton Variant="@(inquiry.Status == key ? Variant.Filled : Variant.Outlined)"
-                                   Color="@StatusColor(key)"
-                                   FullWidth="true"
-                                   OnClick="@(() => OnStatusChanged(key))">
-                            @label
-                        </MudButton>
-                    }
-                </MudStack>
-            </MudPaper>
+        <section class="admin-surface">
+            <h3 class="admin-section-title">처리 상태</h3>
+            <div class="admin-stack">
+                @foreach (var (key, label) in InquiryStatusMapper.Labels)
+                {
+                    <button type="button" class="@GetStatusButtonClass(key)" @onclick="@(() => OnStatusChanged(key))">@label</button>
+                }
+            </div>
+        </section>
 
-            @if (inquiry.ClientId == null)
-            {
-                <MudPaper Class="pa-4 mt-4" Elevation="1">
-                    <MudText Typo="Typo.h6" Class="mb-3">고객 카드 생성</MudText>
-                    <MudText Typo="Typo.body2" Class="mb-3">이 문의를 고객 카드로 등록합니다.</MudText>
-                    <MudButton Variant="Variant.Filled" Color="Color.Success" FullWidth="true"
-                               OnClick="ConvertToClient">
-                        고객으로 등록
-                    </MudButton>
-                </MudPaper>
-            }
-            else
-            {
-                <MudPaper Class="pa-4 mt-4" Elevation="1">
-                    <MudText Typo="Typo.h6" Class="mb-3">연결된 고객</MudText>
-                    <MudButton Variant="Variant.Outlined" Color="Color.Primary" FullWidth="true"
-                               Href="@($"/taxbaik/admin/clients/{inquiry.ClientId}")">
-                        고객 카드 보기
-                    </MudButton>
-                </MudPaper>
-            }
-        </MudItem>
-    </MudGrid>
+        @if (inquiry.ClientId == null)
+        {
+            <section class="admin-surface">
+                <h3 class="admin-section-title">고객 카드 생성</h3>
+                <p class="muted">이 문의를 고객 카드로 등록합니다.</p>
+                <button type="button" class="site-button primary" @onclick="ConvertToClient">고객으로 등록</button>
+            </section>
+        }
+        else
+        {
+            <section class="admin-surface">
+                <h3 class="admin-section-title">연결된 고객</h3>
+                <a class="site-button secondary" href="@($"/taxbaik/admin/clients/{inquiry.ClientId}")">고객 카드 보기</a>
+            </section>
+        }
+    </div>
 }
 else
 {
-    <MudText>문의를 찾을 수 없습니다.</MudText>
+    <div class="admin-surface">문의를 찾을 수 없습니다.</div>
 }
 
 @code {
@@ -134,16 +96,16 @@ else
             if (success)
             {
                 inquiry.Status = status;
-                Snackbar.Add("상태가 변경되었습니다.", Severity.Success);
+                await JS.InvokeVoidAsync("alert", "상태가 변경되었습니다.");
             }
             else
             {
-                Snackbar.Add("상태 변경에 실패했습니다.", Severity.Error);
+                await JS.InvokeVoidAsync("alert", "상태 변경에 실패했습니다.");
             }
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"오류: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"오류: {ex.Message}");
         }
     }
 
@@ -156,16 +118,16 @@ else
             if (success)
             {
                 inquiry.AdminMemo = adminMemo;
-                Snackbar.Add("메모가 저장되었습니다.", Severity.Success);
+                await JS.InvokeVoidAsync("alert", "메모가 저장되었습니다.");
             }
             else
             {
-                Snackbar.Add("메모 저장에 실패했습니다.", Severity.Error);
+                await JS.InvokeVoidAsync("alert", "메모 저장에 실패했습니다.");
             }
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"오류: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"오류: {ex.Message}");
         }
     }
 
@@ -184,26 +146,19 @@ else
             {
                 inquiry.ClientId = clientId;
                 inquiry.Status = "consulting";
-                Snackbar.Add("고객 카드가 생성되었습니다.", Severity.Success);
+                await JS.InvokeVoidAsync("alert", "고객 카드가 생성되었습니다.");
             }
             else
             {
-                Snackbar.Add("고객 카드 생성에 실패했습니다.", Severity.Error);
+                await JS.InvokeVoidAsync("alert", "고객 카드 생성에 실패했습니다.");
             }
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"오류: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"오류: {ex.Message}");
         }
     }
 
-    private Color StatusColor(string status) => status switch
-    {
-        "new"        => Color.Default,
-        "consulting" => Color.Info,
-        "contracted" => Color.Success,
-        "rejected"   => Color.Error,
-        "closed"     => Color.Dark,
-        _            => Color.Default
-    };
+    private string GetStatusButtonClass(string status)
+        => inquiry?.Status == status ? "site-button primary" : "site-button secondary";
 }

TaxBaik.Web/Components/Admin/Pages/Inquiries/InquiryEdit.razor

@@ -5,45 +5,39 @@
 @using TaxBaik.Web.Components.Admin.Forms
 @inject InquiryService InquiryService
 @inject NavigationManager Navigation
-@inject ISnackbar Snackbar
-@inject IDialogService DialogService
+@inject IJSRuntime JS
 
 <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 class="admin-eyebrow">Customer Relations</div>
+        <h1 class="admin-page-title">문의 수정</h1>
+        <p class="admin-page-subtitle">고객 문의 정보를 수정합니다.</p>
     </div>
-    <MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.Close" @onclick="GoBack">취소</MudButton>
+    <button type="button" class="site-button secondary" @onclick="GoBack">취소</button>
 </section>
 
 @if (isLoading)
 {
-    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="mt-4" />
+    <div class="admin-surface mt-4"><Skeleton Count="4" CssClass="taxbaik-skeleton-grid" /></div>
 }
 else if (inquiry == null)
 {
-    <MudAlert Severity="Severity.Error" Class="mt-4">문의를 찾을 수 없습니다.</MudAlert>
+    <div class="admin-surface mt-4">문의를 찾을 수 없습니다.</div>
 }
 else
 {
-    <MudPaper Class="pa-4 mt-4" Elevation="1">
+    <div class="admin-surface mt-4">
         <InquiryForm ButtonText="수정" InitialData="formModel" OnSubmit="HandleUpdate" OnCancel="GoBack" />
-
-        <MudDivider Class="my-4" />
-
-        <MudButton Variant="Variant.Outlined" Color="Color.Error" @onclick="DeleteInquiry" Class="mt-2">
-            문의 삭제
-        </MudButton>
-    </MudPaper>
+        <div class="mt-4">
+            <button type="button" class="site-button secondary danger" @onclick="DeleteInquiry">문의 삭제</button>
+        </div>
+    </div>
 }
 
 @code {
-    [Parameter]
-    public int Id { get; set; }
-
+    [Parameter] public int Id { get; set; }
     private Domain.Entities.Inquiry? inquiry;
     private InquiryForm.InquiryFormModel? formModel;
     private bool isLoading = true;
@@ -69,7 +63,7 @@ else
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"문의 로드 실패: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"문의 로드 실패: {ex.Message}");
         }
         finally
         {
@@ -77,16 +71,11 @@ else
         }
     }
 
-    private void GoBack()
-    {
-        Navigation.NavigateTo("/taxbaik/admin/inquiries");
-    }
+    private void GoBack() => Navigation.NavigateTo("/taxbaik/admin/inquiries");
 
     private async Task HandleUpdate(InquiryForm.InquiryFormModel model)
     {
-        if (inquiry == null)
-            return;
-
+        if (inquiry == null) return;
         try
         {
             inquiry.Name = model.Name;
@@ -97,47 +86,35 @@ else
             inquiry.AdminMemo = model.AdminMemo;
 
             if (inquiry.Status != model.Status)
-            {
                 await InquiryService.UpdateStatusAsync(inquiry.Id, model.Status);
-            }
 
             await InquiryService.UpdateAdminMemoAsync(inquiry.Id, model.AdminMemo);
-
-            Snackbar.Add("문의가 수정되었습니다.", Severity.Success);
+            await JS.InvokeVoidAsync("alert", "문의가 수정되었습니다.");
             Navigation.NavigateTo("/taxbaik/admin/inquiries");
         }
         catch (ValidationException ex)
         {
-            Snackbar.Add(ex.Message, Severity.Error);
+            await JS.InvokeVoidAsync("alert", ex.Message);
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"수정 실패: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"수정 실패: {ex.Message}");
         }
     }
 
     private async Task DeleteInquiry()
     {
-        if (inquiry == null)
-            return;
-
-        var result = await DialogService.ShowMessageBox(
-            "문의 삭제",
-            "정말 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.",
-            "삭제", "취소");
-
-        if (result != true)
-            return;
-
+        if (inquiry == null) return;
+        if (!await JS.InvokeAsync<bool>("confirm", "정말 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.")) return;
         try
         {
             await InquiryService.DeleteAsync(inquiry.Id);
-            Snackbar.Add("문의가 삭제되었습니다.", Severity.Success);
+            await JS.InvokeVoidAsync("alert", "문의가 삭제되었습니다.");
             Navigation.NavigateTo("/taxbaik/admin/inquiries");
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"삭제 실패: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"삭제 실패: {ex.Message}");
         }
     }
 }

TaxBaik.Web/Components/Admin/Pages/Inquiries/InquiryList.razor

@@ -7,47 +7,36 @@
 
 <section class="admin-page-hero">
     <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">Customer Requests</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">문의 관리</MudText>
-        <MudText Typo="Typo.body2" Class="admin-page-subtitle">상담 요청을 상태별로 확인하고 후속 조치를 기록합니다.</MudText>
+        <div class="admin-eyebrow">Customer Requests</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/inquiries/create">새 문의 등록</MudButton>
+    <button type="button" class="site-button primary" @onclick='() => Navigation.NavigateTo("/taxbaik/admin/inquiries/create")'>새 문의 등록</button>
 </section>
 
-<MudPaper Class="admin-surface" Elevation="0">
-@if (isLoading)
-{
-    <MudProgressCircular Indeterminate="true" Class="ma-4" />
-}
-else
-{
-    <MudTabs Rounded="true" Elevation="0" Class="admin-tabs">
-        <MudTabPanel Text="전체">
-            <InquiryTable Inquiries="allInquiries" Status="" />
-        </MudTabPanel>
-        <MudTabPanel Text="신규">
-            <InquiryTable Inquiries="allInquiries" Status="new" />
-        </MudTabPanel>
-        <MudTabPanel Text="상담중">
-            <InquiryTable Inquiries="allInquiries" Status="consulting" />
-        </MudTabPanel>
-        <MudTabPanel Text="계약완료">
-            <InquiryTable Inquiries="allInquiries" Status="contracted" />
-        </MudTabPanel>
-        <MudTabPanel Text="거절">
-            <InquiryTable Inquiries="allInquiries" Status="rejected" />
-        </MudTabPanel>
-        <MudTabPanel Text="종결">
-            <InquiryTable Inquiries="allInquiries" Status="closed" />
-        </MudTabPanel>
-    </MudTabs>
-}
-</MudPaper>
+<div class="admin-surface">
+    @if (isLoading)
+    {
+        <Skeleton Count="6" CssClass="taxbaik-skeleton-grid" />
+    }
+    else
+    {
+        <div class="admin-tabbar">
+            <button type="button" class="admin-tab active">전체</button>
+            <button type="button" class="admin-tab">신규</button>
+            <button type="button" class="admin-tab">상담중</button>
+            <button type="button" class="admin-tab">계약완료</button>
+            <button type="button" class="admin-tab">거절</button>
+            <button type="button" class="admin-tab">종결</button>
+        </div>
+        <InquiryTable Inquiries="allInquiries" Status="" />
+    }
+</div>
 
 @code {
     [CascadingParameter]
     private Task<AuthenticationState>? AuthStateTask { get; set; }
+    [Inject] private NavigationManager Navigation { get; set; } = default!;
 
     private bool isLoading = true;
     private IReadOnlyList<Domain.Entities.Inquiry> allInquiries = [];