kjh2064/taxbaik
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

홈과 관리자 로그인 화면 테마 및 제목 정리

Browse Source
This commit is contained in:
김재현
2026-06-29 23:50:32 +09:00
parent 4647b049b8
commit b13eed7b7e
4 changed files with 118 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TaxBaik.Web/Components/Admin/Pages/Login.razor
+11 -10
View File
@@ -12,7 +12,7 @@
<PageTitle>로그인</PageTitle>
<div class="admin-login-page">
<div class="admin-login-card">
<div class="admin-login-card admin-surface">
<div class="admin-login-brand">
<span class="admin-brand-mark">T</span>
<div>
@@ -22,14 +22,15 @@
</div>
<form class="admin-login-form" @onsubmit="HandleLogin" @onsubmit:preventDefault>
<FluentTextInput Label="사용자명"
Placeholder="사용자명"
@bind-CurrentValue="model.Username" />
<label class="admin-field">
<span class="admin-field-label">사용자명</span>
<input class="admin-input" type="text" placeholder="사용자명" @bind="model.Username" autocomplete="username" />
</label>
<FluentTextInput Label="비밀번호"
Placeholder="비밀번호"
Type="InputType.Password"
@bind-CurrentValue="model.Password" />
<label class="admin-field">
<span class="admin-field-label">비밀번호</span>
<input class="admin-input" type="password" placeholder="비밀번호" @bind="model.Password" autocomplete="current-password" />
</label>
<label class="admin-login-remember">
<input type="checkbox" @bind="model.RememberMe" />
@@ -38,10 +39,10 @@
@if (!string.IsNullOrEmpty(errorMessage))
{
<div class="admin-inline-alert error">@errorMessage</div>
<div class="admin-inline-alert error" role="alert">@errorMessage</div>
}
<button type="submit" class="admin-login-submit" disabled="@isLoading">
<button type="submit" class="site-button primary admin-login-submit" disabled="@isLoading">
@if (isLoading)
{
<span>로그인 중...</span>
TaxBaik.Web/Components/Site/Home.razor
+1
View File
@@ -1,3 +1,4 @@
@page "/"
@using TaxBaik.Application.Seasonal
@using TaxBaik.Application.Services
@inject SeasonalMarketingService SeasonalMarketingService
TaxBaik.Web/wwwroot/css/admin.css
+100 -115
View File
@@ -221,126 +221,111 @@ textarea:focus-visible {
Login Page Styles
============================================================================ */
.admin-login-page.mud-container {
.admin-login-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(circle at top left, rgba(200, 157, 110, 0.18), transparent 36%),
radial-gradient(circle at bottom right, rgba(46, 92, 78, 0.12), transparent 32%),
linear-gradient(180deg, #f9f7f3 0%, #f3ede2 100%);
}
html.admin-login-route body {
background:
radial-gradient(circle at top left, rgba(200, 157, 110, 0.18), transparent 36%),
radial-gradient(circle at bottom right, rgba(46, 92, 78, 0.12), transparent 32%),
linear-gradient(180deg, #f9f7f3 0%, #f3ede2 100%);
}
.admin-login-card {
width: min(440px, 100%);
padding: 28px;
display: flex;
flex-direction: column;
gap: 20px;
border-radius: 20px;
}
.admin-login-brand {
display: flex;
align-items: center;
gap: 14px;
}
.admin-brand-mark {
width: 48px;
height: 48px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: #fff;
font-size: 1.1rem;
font-weight: 800;
flex: 0 0 auto;
}
.admin-brand-title {
font-size: 1.15rem;
font-weight: 800;
color: var(--color-text);
line-height: 1.2;
}
.admin-brand-subtitle {
margin-top: 2px;
color: var(--color-text-light);
font-size: 0.92rem;
}
.admin-login-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.admin-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-field-label {
font-size: 0.92rem;
font-weight: 700;
color: var(--color-text);
}
.admin-login-remember {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
color: var(--color-text-light);
}
.admin-inline-alert {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(198, 40, 40, 0.2);
background: rgba(198, 40, 40, 0.08);
color: var(--color-danger);
font-size: 0.95rem;
}
.admin-login-submit {
width: 100%;
margin: 0 auto;
margin-top: 6px;
}
.admin-login-page.mud-container-maxwidth-small {
max-width: 480px !important;
}
.admin-login-page .mud-paper {
background-color: var(--bg-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-8);
}
.admin-login-page .mud-paper.elevation-3 {
box-shadow: var(--shadow-lg);
}
.admin-login-page .mud-typography {
color: var(--text-primary);
line-height: var(--line-height-normal);
}
.admin-login-page .mud-typography--h4 {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
color: var(--primary-color);
margin-bottom: var(--space-4);
}
.admin-login-page .mud-typography--body1 {
font-size: var(--font-size-base);
}
.admin-login-page input[type="text"],
.admin-login-page input[type="password"] {
width: 100%;
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--font-size-base);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
background-color: var(--bg-primary);
color: var(--text-primary);
min-height: 44px;
}
.admin-login-page input[type="text"]:focus,
.admin-login-page input[type="password"]:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-light);
}
.admin-login-page label {
display: block;
margin-bottom: var(--space-2);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.admin-login-page button {
width: 100%;
padding: var(--space-3) var(--space-6);
margin-top: var(--space-4);
background-color: var(--primary-color);
color: var(--primary-contrast);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
min-height: 44px;
}
.admin-login-page button:hover {
background-color: var(--primary-dark);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.admin-login-page button:active {
transform: translateY(0);
}
.admin-login-page button:disabled {
background-color: var(--text-disabled);
.admin-login-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.admin-login-page .mud-alert {
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
border-radius: var(--radius-md);
border-left: 4px solid transparent;
}
.admin-login-page .mud-alert--error {
background-color: var(--error-light);
color: var(--error-dark);
border-left-color: var(--error-color);
}
.admin-login-page .mud-alert--success {
background-color: var(--success-light);
color: var(--success-dark);
border-left-color: var(--success-color);
}
.admin-login-page .mud-alert--info {
background-color: var(--info-light);
color: var(--info-dark);
border-left-color: var(--info-color);
box-shadow: none;
}
/* Reconnect Modal */
TaxBaik.Web/wwwroot/js/admin-session.js
+6 -1
View File
@@ -1,8 +1,13 @@
window.taxbaikAdminSession = {
syncRouteClass: function () {
const isLogin = window.location.pathname.toLowerCase().endsWith('/admin/login');
document.documentElement.classList.toggle(
'admin-login-route',
window.location.pathname.toLowerCase().endsWith('/admin/login'));
isLogin);
if (isLogin) {
document.title = '백원숙 세무회계 - 관리자 로그인';
}
},
getViewportWidth: function () {