ux: improve reconnection modal message and styling

- 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>
2026-06-28 16:03:47 +09:00
parent 09420dca0e
commit 0265d7ec8c
2 changed files with 57 additions and 2 deletions
@@ -20,8 +20,9 @@
 <body>
    <div id="components-reconnect-modal" class="admin-reconnect-modal">
        <div class="admin-reconnect-card">
-            <strong>관리자 세션을 다시 연결하고 있습니다.</strong>
-            <span>배포 또는 서버 재시작 중이면 잠시 후 자동으로 새로고침됩니다.</span>
+            <strong>연결 재설정 중...</strong>
+            <span>새로운 버전으로 업데이트되었습니다.</span>
+            <span style="font-size: 0.85rem; margin-top: 0.5rem; opacity: 0.8;">자동으로 페이지를 새로고침합니다. 잠시만 기다려주세요.</span>
        </div>
    </div>
    <div id="blazor-loading" class="blazor-loading-overlay show">
@@ -1445,3 +1445,57 @@ textarea:focus-visible {
@keyframes spin {
  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);
+  }
+}