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

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

@@ -5,85 +5,52 @@
 @using TaxBaik.Domain.Entities
 @inject IFaqBrowserClient FaqClient
 @inject NavigationManager Navigation
-@inject ISnackbar Snackbar
+@inject IJSRuntime JS
 
 <PageTitle>@(Id.HasValue ? "FAQ 수정" : "FAQ 등록")</PageTitle>
-
 <section class="admin-page-hero">
     <div>
-        <MudText Typo="Typo.caption" Class="admin-eyebrow">홈페이지</MudText>
-        <MudText Typo="Typo.h4" Class="admin-page-title">@(Id.HasValue ? "FAQ 수정" : "FAQ 등록")</MudText>
+        <div class="admin-eyebrow">홈페이지</div>
+        <h1 class="admin-page-title">@(Id.HasValue ? "FAQ 수정" : "FAQ 등록")</h1>
     </div>
-    <MudButton Variant="Variant.Outlined" Href="/taxbaik/admin/faqs"
-               StartIcon="@Icons.Material.Filled.ArrowBack">목록으로</MudButton>
+    <button type="button" class="site-button secondary" @onclick='() => Navigation.NavigateTo("/taxbaik/admin/faqs")'>목록으로</button>
 </section>
 
-<MudPaper Class="admin-surface" Elevation="0" Style="max-width:720px;">
+<div class="admin-surface" style="max-width:720px;">
     @if (isLoading)
     {
-        <MudProgressLinear Indeterminate="true" />
+        <Skeleton Count="4" CssClass="taxbaik-skeleton-grid" />
     }
     else
     {
-        <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>
+        <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>
     }
-</MudPaper>
+</div>
 
 @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()
     {
@@ -94,7 +61,7 @@
                 var existing = await FaqClient.GetByIdAsync(Id.Value);
                 if (existing is null)
                 {
-                    Snackbar.Add("FAQ를 찾을 수 없습니다.", Severity.Error);
+                    await JS.InvokeVoidAsync("alert", "FAQ를 찾을 수 없습니다.");
                     Navigation.NavigateTo("/taxbaik/admin/faqs");
                     return;
                 }
@@ -102,7 +69,7 @@
             }
             catch (Exception ex)
             {
-                Snackbar.Add($"오류: {ex.Message}", Severity.Error);
+                await JS.InvokeVoidAsync("alert", $"오류: {ex.Message}");
                 Navigation.NavigateTo("/taxbaik/admin/faqs");
                 return;
             }
@@ -112,33 +79,30 @@
 
     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);
-                if (result != null)
-                    Snackbar.Add("FAQ가 수정되었습니다.", Severity.Success);
-                else
-                    Snackbar.Add("수정 실패", Severity.Error);
+                await JS.InvokeVoidAsync("alert", result != null ? "FAQ가 수정되었습니다." : "수정 실패");
             }
             else
             {
                 var result = await FaqClient.CreateAsync(faq);
-                if (result != null)
-                    Snackbar.Add("FAQ가 등록되었습니다.", Severity.Success);
-                else
-                    Snackbar.Add("등록 실패", Severity.Error);
+                await JS.InvokeVoidAsync("alert", result != null ? "FAQ가 등록되었습니다." : "등록 실패");
             }
             Navigation.NavigateTo("/taxbaik/admin/faqs");
         }
         catch (Exception ex)
         {
-            Snackbar.Add($"저장 실패: {ex.Message}", Severity.Error);
+            await JS.InvokeVoidAsync("alert", $"저장 실패: {ex.Message}");
         }
         finally
         {