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

ux: improve reconnection modal message and styling
TaxBaik CI/CD / build-and-deploy (push) Successful in 48s
Details

Browse Source 
- Simplified message: '연결 재설정 중...' with clearer context
- Added polished CSS styling with animation
- Better visual hierarchy and user guidance
- Improves experience when Blazor circuit disconnects during deployment

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-06-28 16:03:47 +09:00
parent 09420dca0e
commit 0265d7ec8c
2 changed files with 57 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TaxBaik.Web/Components/Admin/App.razor
+3 -2
View File
@@ -20,8 +20,9 @@
<body> <body>
<div id="components-reconnect-modal" class="admin-reconnect-modal"> <div id="components-reconnect-modal" class="admin-reconnect-modal">
<div class="admin-reconnect-card"> <div class="admin-reconnect-card">
<strong>관리자 세션을 다시 연결하고 있습니다.</strong> <strong>연결 재설정 중...</strong>
<span>배포 또는 서버 재시작 중이면 잠시 후 자동으로 새로고침됩니다.</span> <span>새로운 버전으로 업데이트되었습니다.</span>
<span style="font-size: 0.85rem; margin-top: 0.5rem; opacity: 0.8;">자동으로 페이지를 새로고침합니다. 잠시만 기다려주세요.</span>
</div> </div>
</div> </div>
<div id="blazor-loading" class="blazor-loading-overlay show"> <div id="blazor-loading" class="blazor-loading-overlay show">
TaxBaik.Web/wwwroot/css/admin.css
+54
View File
@@ -1445,3 +1445,57 @@ textarea:focus-visible {
@keyframes spin { @keyframes spin {
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
/* Reconnection Modal */
.admin-reconnect-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
align-items: center;
justify-content: center;
}
.admin-reconnect-modal.components-reconnect-modal {
display: flex;
}
.admin-reconnect-card {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
text-align: center;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 1rem;
animation: slideIn 0.3s ease-out;
}
.admin-reconnect-card strong {
font-size: 1.25rem;
color: var(--text-primary);
display: block;
}
.admin-reconnect-card span {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.4;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}