feat(ui): migrate web shell to mudblazor

2026-07-01 13:24:46 +09:00
parent fe8ff44d3f
commit 28e1a8775f
14 changed files with 285 additions and 589 deletions
@@ -1,264 +1,54 @@
@page "/login"
@attribute [AllowAnonymous]
+@layout AuthLayout
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
@inject HttpClient Http

 <PageTitle>로그인 - QuantEngine</PageTitle>

-<div class="auth-container">
-    <div class="auth-card">
-        <div class="brand-section">
-            <img src="images/quant_engine_logo.jpg" alt="QuantEngine Logo" class="brand-logo" />
-            <h1 class="brand-title">QuantEngine</h1>
-            <p class="brand-subtitle">은퇴자산포트폴리오 투자 관리 시스템</p>
-        </div>
+<MudContainer MaxWidth="MaxWidth.False" Class="login-shell">
+    <MudPaper Class="login-card pa-8" Elevation="10">
+        <MudStack AlignItems="AlignItems.Center" Spacing="2" Class="mb-6">
+            <MudAvatar Size="Size.Large" Color="Color.Primary">Q</MudAvatar>
+            <MudText Typo="Typo.h4">QuantEngine</MudText>
+            <MudText Typo="Typo.body2" Align="Align.Center">은퇴자산포트폴리오 투자 관리 시스템</MudText>
+        </MudStack>

-        <form @onsubmit="HandleLoginAsync" @onsubmit:preventDefault="true" class="auth-form">
-            <div class="form-group">
-                <label for="username">관리자 아이디</label>
-                <input type="text" id="username" class="form-control" @bind="Username" placeholder="아이디를 입력하세요" autocomplete="username" />
-            </div>
-
-            <div class="form-group">
-                <label for="password">비밀번호</label>
-                <input type="password" id="password" class="form-control" @bind="Password" placeholder="비밀번호를 입력하세요" autocomplete="current-password" />
-            </div>
+        <MudStack Spacing="2">
+            <MudTextField Label="관리자 아이디" @bind-Value="Username" Variant="Variant.Outlined" Immediate="true" AutoFocus="true" />
+            <MudTextField Label="비밀번호" @bind-Value="Password" Variant="Variant.Outlined" InputType="InputType.Password" Immediate="true" />

            @if (!string.IsNullOrEmpty(ErrorMessage))
            {
-                <div class="error-message">
-                    <svg class="error-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
-                    <span>@ErrorMessage</span>
-                </div>
+                <MudAlert Severity="Severity.Error">@ErrorMessage</MudAlert>
            }

-            <button type="submit" class="btn-submit" disabled="@IsSubmitting">
-                @if (IsSubmitting)
-                {
-                    <span class="spinner"></span>
-                    <span>인증 중...</span>
-                }
-                else
-                {
-                    <span>로그인</span>
-                }
-            </button>
-        </form>
-    </div>
-</div>
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" Disabled="@IsSubmitting" OnClick="HandleLoginAsync">
+                @(IsSubmitting ? "인증 중..." : "로그인")
+            </MudButton>
+        </MudStack>
+    </MudPaper>
+</MudContainer>

 <style>
-    .auth-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    .login-shell {
        min-height: 100vh;
-        width: 100vw;
-        background: linear-gradient(135deg, #090a15 0%, #12142d 100%);
-        font-family: 'Roboto', 'Inter', sans-serif;
-        color: #ffffff;
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 9999;
-        overflow: hidden;
-    }
-
-    /* Ambient background glow */
-    .auth-container::before {
-        content: "";
-        position: absolute;
-        width: 600px;
-        height: 600px;
-        background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, rgba(79, 172, 254, 0) 70%);
-        top: -10%;
-        left: -10%;
-        pointer-events: none;
-    }
-
-    .auth-container::after {
-        content: "";
-        position: absolute;
-        width: 600px;
-        height: 600px;
-        background: radial-gradient(circle, rgba(79, 172, 254, 0.08) 0%, rgba(0, 242, 254, 0) 70%);
-        bottom: -10%;
-        right: -10%;
-        pointer-events: none;
-    }
-
-    .auth-card {
-        background: rgba(255, 255, 255, 0.02);
-        backdrop-filter: blur(25px);
-        -webkit-backdrop-filter: blur(25px);
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        border-radius: 20px;
-        padding: 48px;
-        width: 440px;
-        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        z-index: 10;
-        animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
-    }
-
-    .brand-section {
-        text-align: center;
-        margin-bottom: 36px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .brand-logo {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        object-fit: cover;
-        border: 2px solid rgba(0, 242, 254, 0.3);
-        box-shadow: 0 0 20px rgba(0, 242, 254, 0.15);
-        margin-bottom: 16px;
-        transition: transform 0.3s ease;
-    }
-
-    .brand-logo:hover {
-        transform: rotate(5deg) scale(1.05);
-    }
-
-    .brand-title {
-        font-size: 26px;
-        font-weight: 700;
-        margin: 0;
-        background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        letter-spacing: 0.5px;
-    }
-
-    .brand-subtitle {
-        font-size: 13px;
-        color: rgba(255, 255, 255, 0.5);
-        margin: 6px 0 0 0;
-        font-weight: 300;
-    }
-
-    .auth-form {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-    }
-
-    .form-group {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .form-group label {
-        font-size: 13px;
-        font-weight: 500;
-        color: rgba(255, 255, 255, 0.8);
-        padding-left: 2px;
-    }
-
-    .form-control {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 10px;
-        padding: 14px 16px;
-        color: #ffffff;
-        font-size: 14px;
-        transition: all 0.3s ease;
-        outline: none;
-    }
-
-    .form-control:focus {
-        border-color: rgba(0, 242, 254, 0.6);
-        background: rgba(255, 255, 255, 0.08);
-        box-shadow: 0 0 12px rgba(0, 242, 254, 0.15);
-    }
-
-    .form-control::placeholder {
-        color: rgba(255, 255, 255, 0.25);
-    }
-
-    .error-message {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        background: rgba(239, 68, 68, 0.08);
-        border: 1px solid rgba(239, 68, 68, 0.2);
-        border-radius: 10px;
-        padding: 12px 16px;
-        color: #f87171;
-        font-size: 13px;
-    }
-
-    .error-icon {
-        width: 18px;
-        height: 18px;
-        flex-shrink: 0;
-    }
-
-    .btn-submit {
-        background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
-        border: none;
-        border-radius: 10px;
-        padding: 14px;
-        color: #0b0c15;
-        font-size: 15px;
-        font-weight: 700;
-        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
-        gap: 10px;
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 15px rgba(0, 242, 254, 0.2);
+        background:
+            radial-gradient(circle at top left, rgba(0, 242, 254, 0.08), transparent 30%),
+            radial-gradient(circle at bottom right, rgba(79, 172, 254, 0.1), transparent 35%),
+            linear-gradient(135deg, #090a15 0%, #12142d 100%);
    }

-    .btn-submit:hover:not(:disabled) {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(0, 242, 254, 0.35);
-    }
-
-    .btn-submit:active:not(:disabled) {
-        transform: translateY(0);
-    }
-
-    .btn-submit:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-        box-shadow: none;
-    }
-
-    .spinner {
-        width: 16px;
-        height: 16px;
-        border: 2px solid rgba(11, 12, 21, 0.25);
-        border-top-color: #0b0c15;
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
-    }
-
-    @@keyframes spin {
-        to { transform: rotate(360deg); }
-    }
-
-    @@keyframes fadeIn {
-        from {
-            opacity: 0;
-            transform: translateY(20px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
+    .login-card {
+        width: min(480px, calc(100vw - 32px));
+        border-radius: 20px;
+        background: rgba(255, 255, 255, 0.04);
+        backdrop-filter: blur(24px);
+        color: white;
    }
 </style>

@@ -291,7 +81,6 @@
        try
        {
            var response = await Http.PostAsJsonAsync("api/auth/login", new { Username, Password });
-
            if (response.IsSuccessStatusCode)
            {
                var auth = await response.Content.ReadFromJsonAsync<LoginResponse>();
@@ -303,9 +92,7 @@

                var customProvider = (CustomAuthenticationStateProvider)AuthStateProvider;
                await customProvider.MarkUserAsAuthenticatedAsync(auth.Username ?? Username, auth.AccessToken, auth.Role ?? "Admin");
-                
-                // Redirect back to home dashboard
-                NavigationManager.NavigateTo("");
+                NavigationManager.NavigateTo("/dashboard");
            }
            else
            {