From 1f628b49a8e378a99966f299e40e8b4ea9b5fde0 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Wed, 1 Jul 2026 13:17:38 +0900
Subject: [PATCH] fix: admin login submit without blazor hydration

---
 TaxBaik.Web/Components/Admin/App.razor        |  2 +-
 .../Components/Admin/Pages/Login.razor        | 67 +++++++++++++++++--
 2 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/TaxBaik.Web/Components/Admin/App.razor b/TaxBaik.Web/Components/Admin/App.razor
index 2749041..6eebc39 100644
--- a/TaxBaik.Web/Components/Admin/App.razor
+++ b/TaxBaik.Web/Components/Admin/App.razor
@@ -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>
diff --git a/TaxBaik.Web/Components/Admin/Pages/Login.razor b/TaxBaik.Web/Components/Admin/Pages/Login.razor
index 261a84a..3441ff2 100644
--- a/TaxBaik.Web/Components/Admin/Pages/Login.razor
+++ b/TaxBaik.Web/Components/Admin/Pages/Login.razor
@@ -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 = "";