Harden admin telemetry and deployment safeguards

TaxBaik.Web/wwwroot/css/admin.css

@@ -12,21 +12,21 @@
 
 :root {
   /* Color System */
-  --primary-color: #1976D2;
-  --primary-light: #E3F2FD;
-  --primary-lighter: #BBDEFB;
-  --primary-dark: #1565C0;
-  --primary-darker: #0D47A1;
+  --primary-color: #1F4E79;
+  --primary-light: #E8F0F7;
+  --primary-lighter: #D6E3F0;
+  --primary-dark: #163A5C;
+  --primary-darker: #102D47;
   --primary-contrast: #FFFFFF;
 
-  --secondary-color: #2D9F7E;
-  --secondary-light: #E8F7F3;
-  --secondary-dark: #1D7A64;
+  --secondary-color: #2B6F6A;
+  --secondary-light: #E6F2F1;
+  --secondary-dark: #1F5854;
   --secondary-contrast: #FFFFFF;
 
-  --tertiary-color: #FF8A50;
-  --tertiary-light: #FFEBEE;
-  --tertiary-dark: #E65100;
+  --tertiary-color: #A96A3B;
+  --tertiary-light: #F4E9DF;
+  --tertiary-dark: #7E4D28;
   --tertiary-contrast: #FFFFFF;
 
   --success-color: #16A34A;
@@ -53,14 +53,14 @@
   --text-inverse: #FFFFFF;
 
   --bg-primary: #FFFFFF;
-  --bg-secondary: #F8F9FB;
-  --bg-tertiary: #F1F5F9;
+  --bg-secondary: #F4F7FA;
+  --bg-tertiary: #E9EEF4;
   --bg-overlay: rgba(15, 23, 42, 0.08);
   --bg-overlay-strong: rgba(15, 23, 42, 0.12);
 
-  --border-color: #E2E8F0;
-  --border-color-light: #F1F5F9;
-  --border-color-strong: #CBD5E1;
+  --border-color: #D6DFE8;
+  --border-color-light: #E6EDF3;
+  --border-color-strong: #B7C4D1;
 
   /* Spacing Scale */
   --space-0: 0;
@@ -445,9 +445,9 @@ textarea:focus-visible {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 0px 12px;
-  height: 38px !important;
-  background-color: var(--bg-primary);
+  padding: 0 14px;
+  min-height: 44px !important;
+  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFE 100%);
   border-bottom: 1px solid var(--border-color);
   z-index: var(--z-dropdown);
   box-shadow: none !important;
@@ -460,17 +460,23 @@ textarea:focus-visible {
 .admin-topbar-title {
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 1px;
 }
 
 .admin-topbar-title span {
   color: var(--text-primary);
 }
 
-.admin-topbar-title .mud-typography--h6 {
-  font-size: 0.85rem;
-  line-height: 1.15;
-  font-weight: var(--font-weight-semibold);
+.admin-brand-text {
+  font-size: 0.82rem !important;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.admin-brand-subtitle {
+  font-size: 0.86rem !important;
+  font-weight: 600 !important;
+  color: #1F2937 !important;
 }
 
 .admin-topbar-action {
@@ -486,7 +492,7 @@ textarea:focus-visible {
 }
 
 .admin-drawer {
-  width: 208px;
+  width: 228px;
   background-color: var(--bg-primary);
   border-right: 1px solid var(--border-color);
   display: flex;
@@ -667,8 +673,8 @@ textarea:focus-visible {
 
 /* Metric Card - Enterprise Grade */
 .admin-metric-card {
-  padding: 10px;
-  border-radius: var(--radius-md);
+  padding: 12px;
+  border-radius: var(--radius-lg);
   background-color: var(--bg-primary);
   border: 1px solid var(--border-color);
   transition: all var(--transition-base);
@@ -750,8 +756,8 @@ textarea:focus-visible {
 
 /* Card Accent Colors */
 .accent-blue {
-  background: linear-gradient(135deg, var(--primary-light) 0%, #E3F2FD 100%);
-  border-color: #BBDEFB;
+  background: linear-gradient(135deg, var(--primary-light) 0%, #F7FAFC 100%);
+  border-color: #C9D8E6;
   color: var(--primary-dark);
 }
 
@@ -761,7 +767,7 @@ textarea:focus-visible {
 }
 
 .accent-amber {
-  background: linear-gradient(135deg, #FFEBEE 0%, #FFE0B2 100%);
+  background: linear-gradient(135deg, #F7EFE8 0%, #F1E3D7 100%);
   border-color: var(--tertiary-color);
   color: var(--tertiary-dark);
 }
@@ -783,7 +789,7 @@ textarea:focus-visible {
 }
 
 .accent-green {
-  background: linear-gradient(135deg, #DCFCE7 0%, #C8E6C9 100%);
+  background: linear-gradient(135deg, #E7F2EE 0%, #D7E8E3 100%);
   border-color: var(--success-color);
   color: var(--success-dark);
 }
@@ -910,6 +916,32 @@ textarea:focus-visible {
   animation: loading 1.5s infinite;
 }
 
+.admin-skeleton-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px 0;
+}
+
+.admin-skeleton-row {
+  display: grid;
+  grid-template-columns: 1.4fr 0.8fr 0.6fr;
+  gap: 12px;
+  align-items: center;
+}
+
+.admin-skeleton-block {
+  height: 14px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--bg-overlay) 0%, var(--bg-overlay-strong) 50%, var(--bg-overlay) 100%);
+  background-size: 200% 100%;
+  animation: loading 1.4s infinite;
+}
+
+.admin-skeleton-block.w-40 { width: 40%; }
+.admin-skeleton-block.w-25 { width: 25%; }
+.admin-skeleton-block.w-20 { width: 20%; }
+
 @keyframes loading {
   0% {
     background-position: 200% 0;

TaxBaik.Web/wwwroot/js/admin-session.js

@@ -1,4 +1,191 @@
 window.taxbaikAdminSession = {
+    clientLogState: {
+        enabled: true,
+        windowStart: 0,
+        sentCount: 0,
+        suppressedCount: 0,
+        fingerprints: {},
+        eventCounts: {},
+        screen: '',
+        feature: '',
+        action: '',
+        step: '',
+        entity: '',
+        entityId: '',
+        dataKey: ''
+    },
+
+    initErrorLogging: function () {
+        if (window._taxbaikClientLogInitialized) return;
+        window._taxbaikClientLogInitialized = true;
+
+        const postLog = function (payload) {
+            try {
+                if (!window.taxbaikAdminSession.shouldSendClientLog(payload)) {
+                    return;
+                }
+
+                const body = JSON.stringify(payload);
+                if (navigator.sendBeacon) {
+                    const blob = new Blob([body], { type: 'application/json' });
+                    if (navigator.sendBeacon('/taxbaik/api/client-logs', blob)) {
+                        return;
+                    }
+                }
+
+                fetch('/taxbaik/api/client-logs', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body,
+                    keepalive: true
+                }).catch(function () { });
+            } catch {
+                // Logging must never break the UI.
+            }
+        };
+
+        window.taxbaikAdminSession.postClientLog = postLog;
+
+        window.addEventListener('error', function (event) {
+            postLog({
+                level: 'error',
+                source: 'window.error',
+                message: event.message || 'unknown error',
+                url: event.filename || window.location.href,
+                route: window.location.pathname + window.location.search,
+                screen: window.taxbaikAdminSession.clientLogState.screen || '',
+                feature: window.taxbaikAdminSession.clientLogState.feature || '',
+                action: window.taxbaikAdminSession.clientLogState.action || '',
+                step: window.taxbaikAdminSession.clientLogState.step || '',
+                entity: window.taxbaikAdminSession.clientLogState.entity || '',
+                entityId: window.taxbaikAdminSession.clientLogState.entityId || '',
+                dataKey: window.taxbaikAdminSession.clientLogState.dataKey || '',
+                buildVersion: window.taxbaikAdminBuildVersion || '',
+                component: window.taxbaikAdminComponent || '',
+                viewportWidth: window.taxbaikAdminSession.getViewportWidth(),
+                userAgent: navigator.userAgent || '',
+                stack: event.error?.stack || ''
+            });
+        });
+
+        window.addEventListener('unhandledrejection', function (event) {
+            const reason = event.reason;
+            postLog({
+                level: 'error',
+                source: 'window.unhandledrejection',
+                message: reason?.message || String(reason || 'unknown rejection'),
+                url: window.location.href,
+                route: window.location.pathname + window.location.search,
+                screen: window.taxbaikAdminSession.clientLogState.screen || '',
+                feature: window.taxbaikAdminSession.clientLogState.feature || '',
+                action: window.taxbaikAdminSession.clientLogState.action || '',
+                step: window.taxbaikAdminSession.clientLogState.step || '',
+                entity: window.taxbaikAdminSession.clientLogState.entity || '',
+                entityId: window.taxbaikAdminSession.clientLogState.entityId || '',
+                dataKey: window.taxbaikAdminSession.clientLogState.dataKey || '',
+                buildVersion: window.taxbaikAdminBuildVersion || '',
+                component: window.taxbaikAdminComponent || '',
+                viewportWidth: window.taxbaikAdminSession.getViewportWidth(),
+                userAgent: navigator.userAgent || '',
+                stack: reason?.stack || ''
+            });
+        });
+    },
+
+    setContext: function (screen, feature, action, step, entity, entityId, dataKey) {
+        const state = window.taxbaikAdminSession.clientLogState;
+        state.screen = screen || '';
+        state.feature = feature || '';
+        state.action = action || '';
+        state.step = step || '';
+        state.entity = entity || '';
+        state.entityId = entityId || '';
+        state.dataKey = dataKey || '';
+    },
+
+    shouldSendClientLog: function (payload) {
+        try {
+            const state = window.taxbaikAdminSession.clientLogState;
+            if (!state.enabled) return false;
+
+            const now = Date.now();
+            if (!state.windowStart || now - state.windowStart >= 60000) {
+                state.windowStart = now;
+                state.sentCount = 0;
+                state.suppressedCount = 0;
+                state.fingerprints = {};
+            }
+
+            const fingerprint = [
+                payload?.source || '',
+                payload?.message || '',
+                payload?.route || '',
+                payload?.component || '',
+                payload?.screen || '',
+                payload?.feature || '',
+                payload?.action || '',
+                payload?.entity || '',
+                payload?.entityId || ''
+            ].join('|').slice(0, 256);
+
+            state.fingerprints[fingerprint] = (state.fingerprints[fingerprint] || 0) + 1;
+
+            if (state.sentCount >= 8) {
+                state.suppressedCount += 1;
+                return false;
+            }
+
+            if (state.fingerprints[fingerprint] > 2) {
+                state.suppressedCount += 1;
+                return false;
+            }
+
+            state.sentCount += 1;
+            return true;
+        } catch {
+            return false;
+        }
+    },
+
+    traceUiState: function (source, details) {
+        try {
+            const payload = {
+                level: 'info',
+                source: source || 'ui-state',
+                message: details || '',
+                url: window.location.href,
+                route: window.location.pathname + window.location.search,
+                screen: window.taxbaikAdminSession.clientLogState.screen || '',
+                feature: window.taxbaikAdminSession.clientLogState.feature || '',
+                action: window.taxbaikAdminSession.clientLogState.action || '',
+                step: window.taxbaikAdminSession.clientLogState.step || '',
+                entity: window.taxbaikAdminSession.clientLogState.entity || '',
+                entityId: window.taxbaikAdminSession.clientLogState.entityId || '',
+                dataKey: window.taxbaikAdminSession.clientLogState.dataKey || '',
+                buildVersion: window.taxbaikAdminBuildVersion || '',
+                component: window.taxbaikAdminComponent || '',
+                viewportWidth: window.taxbaikAdminSession.getViewportWidth(),
+                userAgent: navigator.userAgent || '',
+                stack: ''
+            };
+
+            const state = window.taxbaikAdminSession.clientLogState;
+            const key = `${payload.source}|${payload.route}|${payload.message}`.slice(0, 256);
+            state.eventCounts[key] = (state.eventCounts[key] || 0) + 1;
+            if (state.eventCounts[key] > 1) {
+                return;
+            }
+
+            window.taxbaikAdminSession.postClientLog(payload);
+        } catch {
+            // diagnostics must never break UI.
+        }
+    },
+
+    postClientLog: function () {
+        // Replaced during initialization.
+    },
+
     syncRouteClass: function () {
         document.documentElement.classList.toggle(
             'admin-login-route',
@@ -23,6 +210,7 @@ window.taxbaikAdminSession = {
     showLoading: function () {
         // Route transitions are handled by Blazor; avoid full-screen overlays
         // that block drawer interaction and make the app feel frozen.
+        window.taxbaikAdminSession.traceUiState('admin-loading', 'showLoading requested');
         window.taxbaikAdminSession.hideLoading();
     },
 
@@ -41,11 +229,14 @@ window.taxbaikAdminSession = {
             window._taxbaikLoadingObserver.disconnect();
             window._taxbaikLoadingObserver = null;
         }
+
+        window.taxbaikAdminSession.traceUiState('admin-loading', 'hideLoading completed');
     },
 
     watchReconnect: function () {
         window.taxbaikAdminSession.syncRouteClass();
         window.addEventListener('popstate', window.taxbaikAdminSession.syncRouteClass);
+        window.addEventListener('hashchange', window.taxbaikAdminSession.syncRouteClass);
 
         if (document.documentElement.classList.contains('admin-login-route')) {
             window.taxbaikAdminSession.hideLoading();
@@ -74,6 +265,7 @@ window.taxbaikAdminSession = {
         if (!form || form.dataset.bound === '1') return;
 
         form.dataset.bound = '1';
+        window.taxbaikAdminSession.traceUiState('admin-login', 'bindLoginForm attached');
         form.addEventListener('submit', async function (event) {
             event.preventDefault();
 
@@ -87,6 +279,11 @@ window.taxbaikAdminSession = {
             if (submitButton) submitButton.disabled = true;
 
             try {
+                if (!username || !password) {
+                    throw new Error('username/password missing');
+                }
+
+                window.taxbaikAdminSession.traceUiState('admin-login', 'submit started');
                 const response = await fetch('/taxbaik/api/auth/login', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -102,9 +299,11 @@ window.taxbaikAdminSession = {
                     throw new Error('invalid response');
                 }
 
+                window.taxbaikAdminSession.traceUiState('admin-login', 'submit success');
+                const expiryTicks = 621355968000000000 + ((Date.now() + (data.expiresIn || 3600) * 1000) * 10000);
                 localStorage.setItem('accessToken', data.accessToken);
                 localStorage.setItem('refreshToken', data.refreshToken);
-                localStorage.setItem('tokenExpiry', String(Date.now() + (data.expiresIn || 3600) * 1000));
+                localStorage.setItem('tokenExpiry', String(expiryTicks));
 
                 if (rememberMe) {
                     localStorage.setItem('admin-remembered-username', username);
@@ -113,11 +312,24 @@ window.taxbaikAdminSession = {
                 }
 
                 window.location.href = '/taxbaik/admin/dashboard';
-            } catch {
-                const error = document.createElement('div');
-                error.className = 'mud-alert mud-alert-filled-error login-error-message mb-4';
-                error.textContent = '로그인 중 오류가 발생했습니다.';
-                form.parentElement.insertBefore(error, form);
+            } catch (error) {
+                window.taxbaikAdminSession.traceUiState('admin-login', `submit failed: ${error?.message || 'login failed'}`);
+                postLog({
+                    level: 'error',
+                    source: 'admin-login-form',
+                    message: error?.message || 'login failed',
+                    url: window.location.href,
+                    route: window.location.pathname + window.location.search,
+                    buildVersion: window.taxbaikAdminBuildVersion || '',
+                    component: 'AdminLoginForm',
+                    viewportWidth: window.taxbaikAdminSession.getViewportWidth(),
+                    userAgent: navigator.userAgent || '',
+                    stack: error?.stack || ''
+                });
+                const errorMessage = document.createElement('div');
+                errorMessage.className = 'mud-alert mud-alert-filled-error login-error-message mb-4';
+                errorMessage.textContent = '로그인 중 오류가 발생했습니다.';
+                form.parentElement.insertBefore(errorMessage, form);
             } finally {
                 if (submitButton) submitButton.disabled = false;
             }