로딩처리

frontend/src/App.css

@@ -937,6 +937,16 @@ html.theme-blue {
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
+.chart-indicator-reload-cover {
+  z-index: 900;
+  pointer-events: none;
+  background: var(--bg, #131722);
+}
+.chart-indicator-reload-cover .loading-spinner {
+  width: 52px;
+  height: 52px;
+  border-width: 4px;
+}
 @keyframes spin { to { transform: rotate(360deg); } }
 
 /* ══════════════════════════════════════════════════════════════════

frontend/src/components/TradingChart.tsx

@@ -9,14 +9,15 @@ import { DISPLAY_COUNT } from '../hooks/useUpbitData';
 const MIN_BARS_FOR_FULL_RELOAD = Math.min(50, Math.floor(DISPLAY_COUNT / 4));
 
 function createIndicatorReloadCover(containerEl: HTMLDivElement | null): HTMLDivElement | null {
-  if (!containerEl) return null;
+  if (!containerEl?.parentElement) return null;
   const cover = document.createElement('div');
-  cover.style.cssText = [
+  cover.className = 'chart-loading chart-indicator-reload-cover';
-    'position:absolute', 'inset:0', 'z-index:900',
+  const spinner = document.createElement('div');
-    'pointer-events:none', 'opacity:1',
+  spinner.className = 'loading-spinner';
-    'background:var(--bg,#131722)',
+  spinner.setAttribute('role', 'status');
-  ].join(';');
+  spinner.setAttribute('aria-label', '지표 로딩 중');
-  containerEl.parentElement?.appendChild(cover);
+  cover.appendChild(spinner);
+  containerEl.parentElement.appendChild(cover);
   return cover;
 }