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

TaxBaik.Web/Components/Admin/Pages/Faqs/FaqEdit.razor

@@ -5,52 +5,85 @@
 @using TaxBaik.Domain.Entities
 @inject IFaqBrowserClient FaqClient
 @inject NavigationManager Navigation
-@inject IJSRuntime JS
+@inject ISnackbar Snackbar
 
 <PageTitle>@(Id.HasValue ? "FAQ 수정" : "FAQ 등록")</PageTitle>
+
 <section class="admin-page-hero">
     <div>
-        <div class="admin-eyebrow">홈페이지</div>
-        <h1 class="admin-page-title">@(Id.HasValue ? "FAQ 수정" : "FAQ 등록")</h1>
+        <MudText Typo="Typo.caption" Class="admin-eyebrow">홈페이지</MudText>
+        <MudText Typo="Typo.h4" Class="admin-page-title">@(Id.HasValue ? "FAQ 수정" : "FAQ 등록")</MudText>
     </div>
-    <button type="button" class="site-button secondary" @onclick='() => Navigation.NavigateTo("/taxbaik/admin/faqs")'>목록으로</button>
+    <MudButton Variant="Variant.Outlined" Href="/taxbaik/admin/faqs"
+               StartIcon="@Icons.Material.Filled.ArrowBack">목록으로</MudButton>
 </section>
 
-<div class="admin-surface" style="max-width:720px;">
+<MudPaper Class="admin-surface" Elevation="0" Style="max-width:720px;">
     @if (isLoading)
     {
-        <Skeleton Count="4" CssClass="taxbaik-skeleton-grid" />
+        <MudProgressLinear Indeterminate="true" />
     }
     else
     {
-        <form class="admin-dialog-card" @onsubmit="SaveAsync" @onsubmit:preventDefault="true">
-            <label>질문 * <textarea class="admin-input" rows="3" @bind="faq.Question"></textarea></label>
-            <label>답변 * <textarea class="admin-input" rows="6" @bind="faq.Answer"></textarea></label>
-            <label>카테고리
-                <select class="admin-input" @bind="faq.Category">
-                    <option value="">선택하세요</option>
-                    @foreach (var cat in FaqService.Categories)
-                    {
-                        <option value="@cat">@cat</option>
-                    }
-                </select>
-            </label>
-            <label>정렬 순서 <input class="admin-input" type="number" min="0" max="9999" @bind="SortOrderText" /></label>
-            <label><input type="checkbox" @bind="faq.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/faqs")'>취소</button>
-            </div>
-        </form>
+        <MudForm @ref="form" @bind-IsValid="isValid">
+            <MudGrid Spacing="3">
+                <MudItem xs="12">
+                    <MudTextField @bind-Value="faq.Question"
+                                  Label="질문 *" Required="true"
+                                  RequiredError="질문을 입력하세요."
+                                  Counter="300" MaxLength="300"
+                                  Lines="2" AutoGrow="true"
+                                  Placeholder="예: 기장료가 얼마인지 미리 알 수 있나요?" />
+                </MudItem>
+                <MudItem xs="12">
+                    <MudTextField @bind-Value="faq.Answer"
+                                  Label="답변 *" Required="true"
+                                  RequiredError="답변을 입력하세요."
+                                  Lines="5" AutoGrow="true"
+                                  Placeholder="방문자에게 보여질 답변을 입력하세요." />
+                </MudItem>
+                <MudItem xs="12" md="6">
+                    <MudSelect @bind-Value="faq.Category" Label="카테고리" T="string" Clearable="true">
+                        @foreach (var cat in FaqService.Categories)
+                        {
+                            <MudSelectItem Value="@cat">@cat</MudSelectItem>
+                        }
+                    </MudSelect>
+                </MudItem>
+                <MudItem xs="12" md="3">
+                    <MudNumericField @bind-Value="faq.SortOrder"
+                                     Label="정렬 순서"
+                                     HelperText="작을수록 위에 노출"
+                                     Min="0" Max="9999" />
+                </MudItem>
+                <MudItem xs="12" md="3" Class="d-flex align-center">
+                    <MudSwitch T="bool" @bind-Value="faq.IsActive" Color="Color.Success"
+                               Label="@(faq.IsActive ? "노출 중" : "비활성")" />
+                </MudItem>
+
+                <MudItem xs="12" Class="d-flex gap-2 mt-2">
+                    <MudButton Variant="Variant.Filled" Color="Color.Primary"
+                               StartIcon="@Icons.Material.Filled.Save"
+                               OnClick="@SaveAsync" Disabled="@isSaving">
+                        @(isSaving ? "저장 중..." : "저장")
+                    </MudButton>
+                    <MudButton Variant="Variant.Outlined" Href="/taxbaik/admin/faqs">
+                        취소
+                    </MudButton>
+                </MudItem>
+            </MudGrid>
+        </MudForm>
     }
-</div>
+</MudPaper>
 
 @code {
     [Parameter] public int? Id { get; set; }
+
+    private MudForm form = null!;
     private Faq faq = new() { SortOrder = 10, IsActive = true };
+    private bool isValid;
     private bool isLoading = true;
     private bool isSaving;
-    private string SortOrderText { get => faq.SortOrder.ToString(); set => faq.SortOrder = int.TryParse(value, out var n) ? n : 0; }
 
     protected override async Task OnInitializedAsync()
     {
@@ -61,7 +94,7 @@
                 var existing = await FaqClient.GetByIdAsync(Id.Value);
                 if (existing is null)
                 {
-                    await JS.InvokeVoidAsync("alert", "FAQ를 찾을 수 없습니다.");
+                    Snackbar.Add("FAQ를 찾을 수 없습니다.", Severity.Error);
                     Navigation.NavigateTo("/taxbaik/admin/faqs");
                     return;
                 }
@@ -69,7 +102,7 @@
             }
             catch (Exception ex)
             {
-                await JS.InvokeVoidAsync("alert", $"오류: {ex.Message}");
+                Snackbar.Add($"오류: {ex.Message}", Severity.Error);
                 Navigation.NavigateTo("/taxbaik/admin/faqs");
                 return;
             }
@@ -79,30 +112,33 @@
 
     private async Task SaveAsync()
     {
+        await form.Validate();
+        if (!isValid) return;
+
         isSaving = true;
         try
         {
-            if (string.IsNullOrWhiteSpace(faq.Question) || string.IsNullOrWhiteSpace(faq.Answer))
-            {
-                await JS.InvokeVoidAsync("alert", "질문과 답변을 입력하세요.");
-                return;
-            }
-
             if (Id.HasValue)
             {
                 var result = await FaqClient.UpdateAsync(Id.Value, faq);
-                await JS.InvokeVoidAsync("alert", result != null ? "FAQ가 수정되었습니다." : "수정 실패");
+                if (result != null)
+                    Snackbar.Add("FAQ가 수정되었습니다.", Severity.Success);
+                else
+                    Snackbar.Add("수정 실패", Severity.Error);
             }
             else
             {
                 var result = await FaqClient.CreateAsync(faq);
-                await JS.InvokeVoidAsync("alert", result != null ? "FAQ가 등록되었습니다." : "등록 실패");
+                if (result != null)
+                    Snackbar.Add("FAQ가 등록되었습니다.", Severity.Success);
+                else
+                    Snackbar.Add("등록 실패", Severity.Error);
             }
             Navigation.NavigateTo("/taxbaik/admin/faqs");
         }
         catch (Exception ex)
         {
-            await JS.InvokeVoidAsync("alert", $"저장 실패: {ex.Message}");
+            Snackbar.Add($"저장 실패: {ex.Message}", Severity.Error);
         }
         finally
         {