fix: admin login submit without blazor hydration

2026-07-01 13:17:38 +09:00
parent a4a2499c7d
commit 1f628b49a8
2 changed files with 64 additions and 5 deletions
@@ -34,7 +34,7 @@
        </div>
    </div>
    <MudThemeProvider @bind-IsDarkMode="isDarkMode" Theme="mudTheme" />
-    <Routes />
+    <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="js/admin-session.js"></script>
    <script src="_framework/blazor.web.js"></script>
@@ -15,22 +15,24 @@
    <MudPaper Class="pa-8" Elevation="3" Style="width: 100%; max-width: 400px;">
        <MudText Typo="Typo.h4" Class="mb-6 text-center">관리자 로그인</MudText>

-        <form @onsubmit="HandleLogin" @onsubmit:preventDefault>
+        <form id="admin-login-form">
            <InputText class="mud-input mud-input-outlined mud-input-root mud-input-root-adorned-start mb-4"
                       style="width: 100%; min-height: 56px; padding: 16px 14px;"
                       placeholder="사용자명"
                       autocomplete="username"
-                       @bind-Value="model.Username" />
+                       @bind-Value="model.Username"
+                       name="username" />

            <InputText type="password"
                       class="mud-input mud-input-outlined mud-input-root mud-input-root-adorned-start mb-4"
                       style="width: 100%; min-height: 56px; padding: 16px 14px;"
                       placeholder="비밀번호"
                       autocomplete="current-password"
-                       @bind-Value="model.Password" />
+                       @bind-Value="model.Password"
+                       name="password" />

            <div class="mb-4">
-                <InputCheckbox class="mud-checkbox" @bind-Value="model.RememberMe" />
+                <InputCheckbox class="mud-checkbox" @bind-Value="model.RememberMe" name="rememberMe" />
                <label style="margin-left: 8px; cursor: pointer;">아이디 저장</label>
            </div>

@@ -57,6 +59,63 @@
    </MudPaper>
 </MudContainer>

+<script>
+    (function () {
+        const form = document.getElementById('admin-login-form');
+        if (!form || form.dataset.bound === '1') return;
+        form.dataset.bound = '1';
+        form.addEventListener('submit', async function (event) {
+            event.preventDefault();
+
+            const username = form.querySelector('input[placeholder="사용자명"]')?.value?.trim() || '';
+            const password = form.querySelector('input[placeholder="비밀번호"]')?.value || '';
+            const rememberMe = form.querySelector('input[type="checkbox"]')?.checked || false;
+            const errorBox = form.parentElement.querySelector('.mud-alert');
+            const submitButton = form.querySelector('button[type="submit"]');
+
+            if (submitButton) submitButton.disabled = true;
+            if (errorBox) errorBox.remove();
+
+            try {
+                const response = await fetch('/taxbaik/api/auth/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password })
+                });
+
+                if (!response.ok) {
+                    throw new Error('login failed');
+                }
+
+                const data = await response.json();
+                if (!data?.accessToken || !data?.refreshToken) {
+                    throw new Error('invalid response');
+                }
+
+                localStorage.setItem('accessToken', data.accessToken);
+                localStorage.setItem('refreshToken', data.refreshToken);
+                localStorage.setItem('tokenExpiry', String(Date.now() + (data.expiresIn || 3600) * 1000));
+                if (rememberMe) {
+                    localStorage.setItem('admin-remembered-username', username);
+                } else {
+                    localStorage.removeItem('admin-remembered-username');
+                }
+
+                window.location.href = '/taxbaik/admin/dashboard';
+            } catch {
+                const existing = form.parentElement.querySelector('.login-error-message');
+                if (existing) existing.remove();
+                const div = document.createElement('div');
+                div.className = 'mud-alert mud-alert-filled-error login-error-message mb-4';
+                div.textContent = '로그인 중 오류가 발생했습니다.';
+                form.parentElement.insertBefore(div, form);
+            } finally {
+                if (submitButton) submitButton.disabled = false;
+            }
+        });
+    })();
+</script>
+
@code {
    private bool isLoading = false;
    private string errorMessage = "";