revert: rollback Fluent UI and Blazor homepage to last successful state (3be3794)

TaxBaik.Web/Components/Admin/Pages/Clients/ClientDetail.razor

@@ -4,123 +4,185 @@
 @inject ClientService ClientService
 @inject ConsultationService ConsultationService
 @inject NavigationManager Navigation
-@inject IJSRuntime JS
+@inject ISnackbar Snackbar
 
 <PageTitle>고객 상세</PageTitle>
+
 <section class="admin-page-hero">
     <div>
-        <div class="admin-eyebrow">Client Details</div>
-        <h1 class="admin-page-title">고객 상세</h1>
-        <p class="admin-page-subtitle">고객 정보와 상담 이력을 관리합니다.</p>
+        <MudText Typo="Typo.caption" Class="admin-eyebrow">Client Details</MudText>
+        <MudText Typo="Typo.h4" Class="admin-page-title">고객 상세</MudText>
+        <MudText Typo="Typo.body2" Class="admin-page-subtitle">고객 정보와 상담 이력을 관리합니다.</MudText>
     </div>
 </section>
 
 @if (client == null)
 {
-    <div class="admin-surface mt-4">고객을 찾을 수 없습니다.</div>
+    <MudText>고객을 찾을 수 없습니다.</MudText>
+    return;
 }
-else
-{
-    <div class="admin-page-actions">
-        <button type="button" class="site-button secondary" @onclick='() => Navigation.NavigateTo("/taxbaik/admin/clients")'>목록으로</button>
-        <a class="site-button secondary" href="@($"/taxbaik/admin/clients/{ClientId}/edit")">수정</a>
-    </div>
 
-    <div class="admin-detail-grid">
-        <section class="admin-surface">
-            <h3 class="admin-section-title">고객 정보</h3>
-            <div class="admin-kv-grid">
-                <div><span>이름</span><strong>@client.Name</strong></div>
-                <div><span>상호</span><strong>@(client.CompanyName ?? "-")</strong></div>
-                <div><span>연락처</span><strong>@(client.Phone ?? "-")</strong></div>
-                <div><span>이메일</span><strong>@(client.Email ?? "-")</strong></div>
-                <div><span>서비스</span><strong>@(client.ServiceType ?? "-")</strong></div>
-                <div><span>사업자 유형</span><strong>@(client.TaxType ?? "-")</strong></div>
-                <div><span>유입 경로</span><strong>@(client.Source ?? "-")</strong></div>
-                <div><span>등록일</span><strong>@client.CreatedAt.ToLocalTime().ToString("yyyy-MM-dd")</strong></div>
+<MudStack Row="true" AlignItems="AlignItems.Center" Class="mb-4" Spacing="2">
+    <MudButton Variant="Variant.Outlined" Color="Color.Primary"
+               StartIcon="@Icons.Material.Filled.ArrowBack"
+               @onclick="@(() => Navigation.NavigateTo("/taxbaik/admin/clients"))">
+        목록으로
+    </MudButton>
+    <MudButton Variant="Variant.Outlined" Color="Color.Warning"
+               StartIcon="@Icons.Material.Filled.Edit"
+               Href="@($"/taxbaik/admin/clients/{ClientId}/edit")">
+        수정
+    </MudButton>
+</MudStack>
+
+<MudGrid>
+    <MudItem xs="12" md="5">
+        <MudPaper Class="pa-4" Elevation="1">
+            <MudText Typo="Typo.h6" Class="mb-3">고객 정보</MudText>
+            <MudGrid Spacing="2">
+                <MudItem xs="6">
+                    <MudText Typo="Typo.subtitle2" Color="Color.Secondary">이름</MudText>
+                    <MudText>@client.Name</MudText>
+                </MudItem>
+                <MudItem xs="6">
+                    <MudText Typo="Typo.subtitle2" Color="Color.Secondary">상호</MudText>
+                    <MudText>@(client.CompanyName ?? "-")</MudText>
+                </MudItem>
+                <MudItem xs="6">
+                    <MudText Typo="Typo.subtitle2" Color="Color.Secondary">연락처</MudText>
+                    <MudText>@(client.Phone ?? "-")</MudText>
+                </MudItem>
+                <MudItem xs="6">
+                    <MudText Typo="Typo.subtitle2" Color="Color.Secondary">이메일</MudText>
+                    <MudText>@(client.Email ?? "-")</MudText>
+                </MudItem>
+                <MudItem xs="6">
+                    <MudText Typo="Typo.subtitle2" Color="Color.Secondary">서비스</MudText>
+                    <MudText>@(client.ServiceType ?? "-")</MudText>
+                </MudItem>
+                <MudItem xs="6">
+                    <MudText Typo="Typo.subtitle2" Color="Color.Secondary">사업자 유형</MudText>
+                    <MudText>@(client.TaxType ?? "-")</MudText>
+                </MudItem>
+                <MudItem xs="6">
+                    <MudText Typo="Typo.subtitle2" Color="Color.Secondary">유입 경로</MudText>
+                    <MudText>@(client.Source ?? "-")</MudText>
+                </MudItem>
+                <MudItem xs="6">
+                    <MudText Typo="Typo.subtitle2" Color="Color.Secondary">등록일</MudText>
+                    <MudText>@client.CreatedAt.ToLocalTime().ToString("yyyy-MM-dd")</MudText>
+                </MudItem>
                 @if (!string.IsNullOrWhiteSpace(client.Memo))
                 {
-                    <div class="span-2"><span>메모</span><strong style="white-space: pre-wrap;">@client.Memo</strong></div>
+                    <MudItem xs="12">
+                        <MudText Typo="Typo.subtitle2" Color="Color.Secondary">메모</MudText>
+                        <MudText Style="white-space: pre-wrap;">@client.Memo</MudText>
+                    </MudItem>
                 }
-            </div>
-        </section>
+            </MudGrid>
+        </MudPaper>
+    </MudItem>
 
-        <section class="admin-surface">
-            <div class="admin-section-header compact">
-                <div>
-                    <h3 class="admin-section-title">상담 이력</h3>
-                </div>
-                <button type="button" class="site-button primary" @onclick="OpenAddConsultation">+ 상담 추가</button>
-            </div>
+    <MudItem xs="12" md="7">
+        <MudPaper Class="pa-4" Elevation="1">
+            <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mb-3">
+                <MudText Typo="Typo.h6">상담 이력</MudText>
+                <MudButton Variant="Variant.Filled" Color="Color.Primary"
+                           Size="Size.Small"
+                           OnClick="OpenAddConsultation">
+                    + 상담 추가
+                </MudButton>
+            </MudStack>
 
             @if (showAddForm)
             {
-                <form class="admin-dialog-card mb-4" @onsubmit="AddConsultation" @onsubmit:preventDefault="true">
-                    <label>상담일 <input class="admin-input" type="text" placeholder="2026-06-29" @bind="ConsultationDateText" /></label>
-                    <label>서비스 분야
-                        <select class="admin-input" @bind="newServiceType">
-                            <option value="">선택하세요</option>
-                            @foreach (var t in ClientService.ServiceTypes)
-                            {
-                                <option value="@t">@t</option>
-                            }
-                        </select>
-                    </label>
-                    <label>상담 내용 * <textarea class="admin-input" rows="3" @bind="newSummary"></textarea></label>
-                    <label>결과
-                        <select class="admin-input" @bind="newResult">
-                            <option value="">-</option>
-                            @foreach (var r in ConsultationService.Results)
-                            {
-                                <option value="@r">@r</option>
-                            }
-                        </select>
-                    </label>
-                    <label>수임료 (원) <input class="admin-input" type="text" placeholder="100000" @bind="FeeText" /></label>
-                    <div class="admin-dialog-actions">
-                        <button type="submit" class="site-button primary">저장</button>
-                        <button type="button" class="site-button secondary" @onclick='() => showAddForm = false'>취소</button>
-                    </div>
-                </form>
+                <MudPaper Class="pa-3 mb-3" Outlined="true">
+                    <MudGrid Spacing="2">
+                        <MudItem xs="12" sm="6">
+                            <MudDatePicker @bind-Date="newDate" Label="상담일" DateFormat="yyyy-MM-dd" />
+                        </MudItem>
+                        <MudItem xs="12" sm="6">
+                            <MudSelect T="string" @bind-Value="newServiceType" Label="서비스 분야">
+                                @foreach (var t in ClientService.ServiceTypes)
+                                {
+                                    <MudSelectItem Value="@t">@t</MudSelectItem>
+                                }
+                            </MudSelect>
+                        </MudItem>
+                        <MudItem xs="12">
+                            <MudTextField T="string" @bind-Value="newSummary" Label="상담 내용 *"
+                                          Lines="3" Variant="Variant.Outlined" Required="true" />
+                        </MudItem>
+                        <MudItem xs="12" sm="6">
+                            <MudSelect T="string" @bind-Value="newResult" Label="결과">
+                                <MudSelectItem Value="@("")">-</MudSelectItem>
+                                @foreach (var r in ConsultationService.Results)
+                                {
+                                    <MudSelectItem Value="@r">@r</MudSelectItem>
+                                }
+                            </MudSelect>
+                        </MudItem>
+                        <MudItem xs="12" sm="6">
+                            <MudNumericField T="decimal?" @bind-Value="newFee" Label="수임료 (원)"
+                                            Format="N0" />
+                        </MudItem>
+                    </MudGrid>
+                    <MudStack Row="true" Class="mt-2" Spacing="2">
+                        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="AddConsultation">저장</MudButton>
+                        <MudButton Variant="Variant.Outlined" OnClick="@(() => showAddForm = false)">취소</MudButton>
+                    </MudStack>
+                </MudPaper>
             }
 
             @if (consultations.Count == 0)
             {
-                <p class="muted">상담 이력이 없습니다.</p>
+                <MudText Color="Color.Secondary">상담 이력이 없습니다.</MudText>
             }
             else
             {
-                <div class="admin-activity-list">
+                <MudList T="string" Dense="true">
                     @foreach (var c in consultations)
                     {
-                        <article class="admin-activity-card">
-                            <div class="admin-activity-head">
-                                <div>
-                                    <span class="muted">@c.ConsultationDate.ToString("yyyy-MM-dd") @(string.IsNullOrEmpty(c.ServiceType) ? "" : $"· {c.ServiceType}")</span>
-                                </div>
-                                <button type="button" class="admin-icon-button danger" @onclick="@(() => DeleteConsultation(c.Id))">✕</button>
-                            </div>
-                            <p style="white-space: pre-wrap;">@c.Summary</p>
-                            @if (!string.IsNullOrEmpty(c.Result))
-                            {
-                                <span class="status-pill info">@c.Result</span>
-                            }
-                            @if (c.Fee.HasValue)
-                            {
-                                <div class="muted">수임료: @c.Fee.Value.ToString("N0")원</div>
-                            }
-                        </article>
+                        <MudListItem>
+                            <MudPaper Class="pa-3" Outlined="true" Style="width:100%">
+                                <MudStack Row="true" AlignItems="AlignItems.Start" Justify="Justify.SpaceBetween">
+                                    <div>
+                                        <MudText Typo="Typo.caption" Color="Color.Secondary">
+                                            @c.ConsultationDate.ToString("yyyy-MM-dd")
+                                            @if (!string.IsNullOrEmpty(c.ServiceType)) { <text> · @c.ServiceType</text> }
+                                        </MudText>
+                                        <MudText Style="white-space: pre-wrap;" Class="mt-1">@c.Summary</MudText>
+                                        @if (!string.IsNullOrEmpty(c.Result))
+                                        {
+                                            <MudChip T="string" Size="Size.Small" Color="Color.Info" Class="mt-1">@c.Result</MudChip>
+                                        }
+                                        @if (c.Fee.HasValue)
+                                        {
+                                            <MudText Typo="Typo.caption" Color="Color.Secondary" Class="mt-1">
+                                                수임료: @c.Fee.Value.ToString("N0")원
+                                            </MudText>
+                                        }
+                                    </div>
+                                    <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                                   Size="Size.Small" Color="Color.Error"
+                                                   OnClick="@(() => DeleteConsultation(c.Id))" />
+                                </MudStack>
+                            </MudPaper>
+                        </MudListItem>
                     }
-                </div>
+                </MudList>
             }
-        </section>
-    </div>
-}
+        </MudPaper>
+    </MudItem>
+</MudGrid>
 
 @code {
-    [Parameter] public int ClientId { get; set; }
+    [Parameter]
+    public int ClientId { get; set; }
+
     private Domain.Entities.Client? client;
     private List<Domain.Entities.Consultation> consultations = [];
+
     private bool showAddForm;
     private DateTime? newDate = DateTime.Today;
     private string newServiceType = "";
@@ -128,10 +190,10 @@ else
     private string newResult = "";
     private decimal? newFee;
 
-    private string ConsultationDateText { get => newDate?.ToString("yyyy-MM-dd") ?? ""; set => newDate = DateTime.TryParse(value, out var dt) ? dt : null; }
-    private string FeeText { get => newFee?.ToString() ?? ""; set => newFee = decimal.TryParse(value, out var d) ? d : null; }
-
-    protected override async Task OnInitializedAsync() => await LoadAll();
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadAll();
+    }
 
     private async Task LoadAll()
     {
@@ -153,12 +215,6 @@ else
     {
         try
         {
-            if (string.IsNullOrWhiteSpace(newSummary))
-            {
-                await JS.InvokeVoidAsync("alert", "상담 내용을 입력하세요.");
-                return;
-            }
-
             var c = new Domain.Entities.Consultation
             {
                 ClientId = ClientId,
@@ -168,23 +224,21 @@ else
                 Result = string.IsNullOrWhiteSpace(newResult) ? null : newResult,
                 Fee = newFee
             };
-
             await ConsultationService.CreateAsync(c);
             showAddForm = false;
             consultations = (await ConsultationService.GetByClientIdAsync(ClientId)).ToList();
-            await JS.InvokeVoidAsync("alert", "상담이 추가되었습니다.");
+            Snackbar.Add("상담이 추가되었습니다.", Severity.Success);
         }
         catch (ValidationException ex)
         {
-            await JS.InvokeVoidAsync("alert", ex.Message);
+            Snackbar.Add(ex.Message, Severity.Error);
         }
     }
 
     private async Task DeleteConsultation(int id)
     {
-        if (!await JS.InvokeAsync<bool>("confirm", "이 상담을 삭제하시겠습니까?")) return;
         await ConsultationService.DeleteAsync(id);
         consultations = (await ConsultationService.GetByClientIdAsync(ClientId)).ToList();
-        await JS.InvokeVoidAsync("alert", "삭제되었습니다.");
+        Snackbar.Add("삭제되었습니다.", Severity.Info);
     }
 }