refactor admin UX and stabilize shell
TaxBaik CI/CD / build-and-deploy (push) Failing after 2m20s

This commit is contained in:
2026-07-09 00:03:33 +09:00
parent a2f94e2b5e
commit 89fa51efe2
91 changed files with 1633 additions and 1030 deletions
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TaxBaik Admin</title>
<base href="/taxbaik/admin/" />
<base href="/admin/" />
<link href="_framework/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="app.css" rel="stylesheet" />
<link href="TaxBaik.Web.Client.styles.css" rel="stylesheet" />
+430 -24
View File
@@ -195,6 +195,191 @@ html, body {
cursor: pointer;
}
.admin-row-clickable {
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.admin-row-clickable:hover {
background-color: rgba(31, 78, 121, 0.05);
}
.admin-native-select {
width: 100%;
min-height: 56px;
padding: 16px 14px;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-primary);
color: var(--text-primary);
font: inherit;
}
.admin-native-select:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.faq-col-order { width: 110px; }
.faq-col-category { width: 130px; }
.faq-col-status { width: 90px; }
.faq-col-actions { width: 160px; }
.admin-season-panel {
overflow: hidden;
}
.admin-season-table {
margin-top: 0;
}
.admin-season-date-picker {
width: 100%;
}
.admin-season-jump-button {
justify-content: flex-start;
}
.admin-season-hero {
background: linear-gradient(135deg, #1a365d 0%, #2a4365 100%);
border-radius: 12px;
padding: 2rem;
color: #fff;
margin-bottom: 1.5rem;
}
.admin-season-hero--inactive {
margin-top: 1.5rem;
margin-bottom: 0;
}
.admin-season-badge {
background: #f59e0b;
color: #1a202c;
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
}
.admin-season-hero-title {
font-size: 1.8rem;
font-weight: 800;
white-space: pre-line;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.admin-season-hero-subtext {
font-size: 0.95rem;
color: rgba(255,255,255,0.8);
margin-bottom: 1.5rem;
}
.admin-season-hero-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.admin-season-cta {
background: #e53e3e;
color: #fff;
display: inline-block;
padding: 10px 20px;
border-radius: 8px;
font-weight: 700;
font-size: 0.95rem;
}
.admin-season-secondary-cta {
background: transparent;
border: 2px solid rgba(255,255,255,0.5);
color: #fff;
padding: 10px 20px;
border-radius: 8px;
font-size: 0.95rem;
}
.admin-season-row.is-active {
background: rgba(66, 153, 225, 0.1);
}
.admin-nowrap {
white-space: nowrap;
}
.admin-code-sm {
font-size: 0.8rem;
}
.admin-muted-label {
color: #a0aec0;
font-size: 0.85rem;
}
.admin-faq-empty-icon {
font-size: 3rem;
opacity: 0.3;
}
.admin-faq-sort-button {
padding: 2px;
}
.admin-faq-question {
max-width: 480px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-pre-wrap {
white-space: pre-wrap;
}
.admin-login-page-shell {
min-height: 100vh;
}
.admin-faq-edit-panel {
max-width: 720px;
}
.admin-empty-state-icon {
font-size: 3rem;
opacity: 0.3;
}
.admin-consultation-item {
width: 100%;
}
.admin-dashboard-tile {
border: 1px solid var(--border-color);
min-height: 200px;
display: flex;
flex-direction: column;
}
.admin-dashboard-summary {
border: 1px solid var(--border-color);
}
.admin-table-id-column {
width: 80px;
}
.admin-table-message-column {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.font-weight-bold {
font-weight: var(--font-weight-bold) !important;
}
@@ -343,6 +528,80 @@ textarea:focus-visible {
border-left-color: var(--info-color);
}
.admin-login-shell {
min-height: calc(100vh - 72px);
padding: 48px 20px;
display: grid;
place-items: center;
gap: 20px;
background:
radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 30%),
radial-gradient(circle at bottom right, rgba(15, 23, 42, 0.08), transparent 24%),
linear-gradient(180deg, #F8FAFC 0%, #EEF4FF 100%);
}
.admin-login-hero {
width: min(640px, 100%);
text-align: left;
padding: 8px 4px 0;
}
.admin-login-kicker {
margin: 0 0 8px;
color: var(--primary-color);
font-size: 0.78rem;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.admin-login-hero h1 {
margin: 0 0 10px;
color: var(--text-primary);
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.1;
font-weight: var(--font-weight-bold);
}
.admin-login-hero p {
margin: 0;
color: var(--text-secondary);
font-size: 0.98rem;
}
.admin-login-card {
width: min(640px, 100%);
overflow: hidden;
}
.admin-login-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.admin-login-summary > div {
padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px solid rgba(148, 163, 184, 0.22);
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}
.admin-login-summary strong {
color: var(--text-primary);
font-size: 0.95rem;
}
.admin-login-form {
max-width: 100%;
}
.admin-login-footnote {
margin: 16px 0 0;
color: var(--text-tertiary);
font-size: 0.82rem;
}
/* Reconnect Modal */
.admin-reconnect-modal {
display: none;
@@ -510,6 +769,29 @@ textarea:focus-visible {
border-bottom: 1px solid var(--border-color-light);
}
.admin-drawer-context {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px 8px;
border-bottom: 1px solid var(--border-color-light);
background: linear-gradient(180deg, rgba(37, 99, 235, 0.04), rgba(255, 255, 255, 0));
}
.admin-drawer-context-label {
color: var(--text-tertiary);
font-size: 0.68rem;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.admin-drawer-context-value {
color: var(--text-primary);
font-size: 0.9rem;
font-weight: var(--font-weight-semibold);
}
.admin-brand-mark {
display: flex;
align-items: center;
@@ -762,6 +1044,38 @@ textarea:focus-visible {
background: var(--primary-color);
}
.admin-dashboard-status {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}
.admin-status-chip {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: 10px 12px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(148, 163, 184, 0.18);
}
.admin-status-chip .mud-typography--overline {
color: var(--text-tertiary);
line-height: 1.1;
}
.admin-status-chip .mud-typography--body2 {
color: var(--text-primary);
font-weight: var(--font-weight-medium);
}
/* ============================================================================
Dashboard Page Styles
============================================================================ */
@@ -772,8 +1086,11 @@ textarea:focus-visible {
align-items: center;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
padding: 14px 16px;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
box-shadow: var(--shadow-sm);
}
.admin-page-hero > div:first-child {
@@ -855,15 +1172,17 @@ textarea:focus-visible {
}
.admin-metric-card-value {
font-size: 1.45rem;
font-weight: var(--font-weight-bold);
line-height: 1;
font-size: 1.45rem;
font-weight: var(--font-weight-bold);
line-height: 1;
color: var(--admin-metric-value-color, var(--primary-color));
}
.admin-metric-card-icon {
font-size: 1.9rem;
opacity: 0.14;
line-height: 1;
font-size: 1.9rem;
opacity: 0.14;
line-height: 1;
color: var(--admin-metric-icon-color, var(--secondary-color));
}
.admin-metric-card-caption {
@@ -1500,13 +1819,18 @@ textarea:focus-visible {
}
.admin-drawer {
width: 100%;
position: fixed;
inset: 56px 12px auto 12px;
width: auto;
max-height: calc(100vh - 72px);
height: auto;
max-height: 60px;
flex-direction: row;
border-right: none;
border-bottom: 1px solid var(--border-color);
overflow-x: auto;
flex-direction: column;
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-2xl);
overflow-y: auto;
z-index: 20;
background: var(--bg-primary);
}
.admin-drawer-brand {
@@ -1525,10 +1849,10 @@ textarea:focus-visible {
.admin-nav {
display: flex;
flex-direction: row;
flex-direction: column;
padding: var(--space-2);
gap: var(--space-1);
overflow-x: auto;
overflow-y: auto;
}
.admin-nav .mud-nav-link {
@@ -1542,6 +1866,7 @@ textarea:focus-visible {
.admin-main {
flex: 1;
padding-top: 0;
}
.admin-content {
@@ -1554,7 +1879,11 @@ textarea:focus-visible {
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
padding: var(--space-3) var(--space-4);
}
.admin-dashboard-status {
flex-direction: column;
}
.admin-page-title {
@@ -1809,11 +2138,81 @@ textarea:focus-visible {
gap: 0.5rem;
}
.admin-topbar-status {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border-radius: var(--radius-full);
border: 1px solid rgba(37, 99, 235, 0.18);
background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(255, 255, 255, 0.96) 100%);
color: var(--primary-dark);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
white-space: nowrap;
}
.admin-topbar-action {
white-space: nowrap;
font-size: 0.9rem;
}
.admin-nav-group {
padding: 10px 12px 4px;
color: var(--text-tertiary);
font-size: 0.68rem;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.admin-nav-link {
display: flex;
align-items: center;
gap: 10px;
margin: 2px 8px;
padding: 10px 12px;
border-radius: var(--radius-md);
color: var(--text-primary);
text-decoration: none;
transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.admin-nav-link:hover {
background: var(--primary-light);
color: var(--primary-dark);
}
.admin-nav-link.active {
background: linear-gradient(90deg, rgba(37, 99, 235, 0.14) 0%, rgba(37, 99, 235, 0.08) 100%);
color: var(--primary-dark);
font-weight: var(--font-weight-semibold);
box-shadow: inset 3px 0 0 var(--primary-color), 0 1px 2px rgba(15, 23, 42, 0.05);
transform: translateX(1px);
}
.admin-nav-link-icon {
display: inline-flex;
width: 18px;
justify-content: center;
opacity: 0.9;
}
.admin-nav-link-label {
flex: 1;
}
.admin-nav-badge {
display: inline-flex;
align-items: center;
min-height: 18px;
padding: 0 6px;
border-radius: var(--radius-full);
background: var(--secondary-light);
color: var(--secondary-dark);
font-size: 0.65rem;
}
/* Enhanced Drawer Footer */
.admin-drawer-footer {
border-top: 1px solid var(--divider-color);
@@ -1833,10 +2232,10 @@ textarea:focus-visible {
/* Responsive Topbar */
@media (max-width: 600px) {
.admin-topbar-action {
padding: 4px 8px;
font-size: 0.8rem;
}
.admin-topbar-action {
padding: 4px 8px;
font-size: 0.8rem;
}
.admin-topbar-title {
min-width: 120px;
@@ -1882,12 +2281,19 @@ html, body {
/* 페이지 헤더 영역 */
.admin-page-hero {
padding: 12px 16px !important;
background-color: #F8FAFC !important;
border-bottom: 1px solid #E2E8F0 !important;
padding: 14px 16px !important;
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border: 1px solid #E2E8F0 !important;
border-radius: 12px !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
margin-bottom: 12px !important;
}
.admin-header-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.admin-page-title {
font-size: 16px !important;
font-weight: bold !important;
+37 -4
View File
@@ -28,12 +28,12 @@ window.taxbaikAdminSession = {
const body = JSON.stringify(payload);
if (navigator.sendBeacon) {
const blob = new Blob([body], { type: 'application/json' });
if (navigator.sendBeacon('/taxbaik/api/client-logs', blob)) {
if (navigator.sendBeacon(window.taxbaikAdminSession.getApiUrl('/client-logs'), blob)) {
return;
}
}
fetch('/taxbaik/api/client-logs', {
fetch(window.taxbaikAdminSession.getApiUrl('/client-logs'), {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body,
@@ -248,6 +248,39 @@ window.taxbaikAdminSession = {
return window.innerWidth || document.documentElement.clientWidth || 0;
},
getAppRootPath: function () {
try {
const base = new URL(document.baseURI);
let pathname = base.pathname || '/';
if (pathname.endsWith('/admin/')) {
pathname = pathname.slice(0, -'/admin/'.length) || '/';
} else if (pathname.endsWith('/portal/')) {
pathname = pathname.slice(0, -'/portal/'.length) || '/';
} else if (pathname.endsWith('/admin')) {
pathname = pathname.slice(0, -'/admin'.length) || '/';
} else if (pathname.endsWith('/portal')) {
pathname = pathname.slice(0, -'/portal'.length) || '/';
}
return pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
} catch {
return '';
}
},
getAdminUrl: function (path) {
const rootPath = window.taxbaikAdminSession.getAppRootPath();
const normalizedPath = String(path || '').startsWith('/') ? String(path || '') : `/${String(path || '')}`;
return `${window.location.origin}${rootPath}/admin${normalizedPath}`;
},
getApiUrl: function (path) {
const rootPath = window.taxbaikAdminSession.getAppRootPath();
const normalizedPath = String(path || '').startsWith('/') ? String(path || '') : `/${String(path || '')}`;
return `${window.location.origin}${rootPath}/api${normalizedPath}`;
},
clearAuthToken: function () {
try {
localStorage.removeItem('accessToken');
@@ -410,7 +443,7 @@ window.taxbaikAdminSession = {
}
window.taxbaikAdminSession.traceUiState('admin-login', 'submit started');
const loginUrl = new URL('/taxbaik/api/auth/login', window.location.origin).toString();
const loginUrl = window.taxbaikAdminSession.getApiUrl('/auth/login');
const response = await fetch(loginUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@@ -455,7 +488,7 @@ window.taxbaikAdminSession = {
// Blazor가 대시보드 페이지를 로드할 때 CustomAuthenticationStateProvider가
// 자동으로 localStorage에서 토큰을 복원합니다
setTimeout(() => {
window.location.href = '/taxbaik/admin/dashboard';
window.location.href = window.taxbaikAdminSession.getAdminUrl('/dashboard');
}, 200);
} catch (error) {
window.taxbaikAdminSession.traceUiState('admin-login', `submit failed: ${error?.message || 'login failed'}`);
+4 -4
View File
@@ -28,9 +28,9 @@ User-agent: Kakaobot
Allow: /
# Sitemap 위치
Sitemap: https://www.taxbaik.com/taxbaik/sitemap.xml
Sitemap: https://www.taxbaik.com/taxbaik/sitemap.xml
Sitemap: https://www.taxbaik.com/sitemap.xml
Sitemap: https://www.taxbaik.com/sitemap.xml
# RSS 피드
Sitemap: https://www.taxbaik.com/taxbaik/rss.xml
Sitemap: https://www.taxbaik.com/taxbaik/feed.xml
Sitemap: https://www.taxbaik.com/rss.xml
Sitemap: https://www.taxbaik.com/feed.xml