상세분석 레포르 알림목록, 분석레포트 화면에 기능적용

frontend/src/components/analysisReport/AnalysisReportPage.tsx

@@ -146,26 +146,26 @@ export function AnalysisReportPage({ theme = 'dark' }: Props) {
   if (loading) {
     return (
       <div className={`arp-page se-page se-page--${theme}`}>
-        <header className="arp-header">
+        <header className="btd-header">
-          <h1 className="arp-header-title">분석레포트</h1>
+          <h1 className="btd-header-title">분석레포트</h1>
         </header>
-        <div className="arp-loading">데이터 로딩…</div>
+        <div className="btd-loading">데이터 로딩…</div>
       </div>
     );
   }
 
   return (
     <div className={`arp-page se-page se-page--${theme}`}>
-      <header className="arp-header">
+      <header className="btd-header">
-        <div className="arp-header-brand">
+        <div className="btd-header-brand">
-          <h1 className="arp-header-title">분석레포트</h1>
+          <h1 className="btd-header-title">분석레포트</h1>
-          <span className="arp-header-sub">TradingReport UI Design · 10 Variations</span>
+          <span className="btd-header-sub">Golden Analysis Command Center</span>
         </div>
-        <div className="arp-header-actions">
+        <div className="btd-header-actions">
-          <button type="button" className="arp-btn" onClick={() => void fetchAll()}>새로고침</button>
+          <button type="button" className="btd-btn btd-btn--ghost" onClick={() => void fetchAll()}>새로고침</button>
           <button
             type="button"
-            className="arp-btn arp-btn--gold"
+            className="btd-btn btd-btn--gold"
             disabled={!reportModel}
             onClick={() => setReportOpen(true)}
           >
@@ -221,6 +221,21 @@ export function AnalysisReportPage({ theme = 'dark' }: Props) {
                 <span className="arp-type-tab-name">{t.tabLabel.replace(/^\d+\s*/, '')}</span>
               </button>
             ))}
+            <div className="arp-type-tabs-end">
+              <button
+                type="button"
+                className="arp-tab-report-btn"
+                disabled={!reportModel}
+                title="상세분석 레포트"
+                onClick={() => setReportOpen(true)}
+              >
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="3" y="3" width="18" height="18" rx="2"/>
+                  <line x1="3" y1="9" x2="21" y2="9"/>
+                  <line x1="9" y1="21" x2="9" y2="9"/>
+                </svg>
+              </button>
+            </div>
           </div>
           <div className="arp-viewport">
             <AnalysisReportViews

frontend/src/styles/analysisReportPage.css

@@ -38,7 +38,7 @@
   z-index: 10;
   transition: background 0.2s;
 }
-.arp-splitter:hover { background: var(--se-accent-cyan, #00e5ff); }
+.arp-splitter:hover { background: var(--se-gold, #ffd700); }
 
 /* ── 메인 영역 ── */
 .arp-main {
@@ -76,12 +76,45 @@
   white-space: nowrap;
   transition: color 0.15s, border-color 0.15s;
 }
-.arp-type-tab:hover { color: #00e5ff; }
+.arp-type-tab:hover { color: var(--se-gold, #ffd700); }
 .arp-type-tab[aria-selected="true"] {
   color: #ffd700;
   border-bottom-color: #ffd700;
 }
 
+/* 탭바 우측 고정 영역 */
+.arp-type-tabs-end {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  flex-shrink: 0;
+  position: sticky;
+  right: 0;
+  background: var(--se-surface, #0d1e35);
+}
+
+.arp-tab-report-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--se-border, #1e3050);
+  border-radius: 5px;
+  background: transparent;
+  color: var(--se-text-muted, #6a7f96);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  flex-shrink: 0;
+}
+.arp-tab-report-btn:hover:not(:disabled) {
+  background: rgba(255, 215, 0, 0.12);
+  color: var(--se-gold, #ffd700);
+  border-color: rgba(255, 215, 0, 0.35);
+}
+.arp-tab-report-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+
 /* ── 뷰포트 ── */
 .arp-viewport {
   flex: 1;
@@ -116,9 +149,9 @@
   font-weight: 600;
   padding: 2px 7px;
   border-radius: 3px;
-  background: rgba(0, 229, 255, 0.12);
+  background: rgba(255, 215, 0, 0.12);
-  color: #00e5ff;
+  color: var(--se-gold, #ffd700);
-  border: 1px solid rgba(0, 229, 255, 0.25);
+  border: 1px solid rgba(255, 215, 0, 0.25);
   white-space: nowrap;
 }
 .qcc-badge--muted {
@@ -156,7 +189,7 @@
   overflow: hidden;
 }
 .qcc-panel--gold { border-color: rgba(255, 215, 0, 0.25); background: rgba(255, 215, 0, 0.05); }
-.qcc-panel--cyan { border-color: rgba(0, 229, 255, 0.25); background: rgba(0, 229, 255, 0.04); }
+.qcc-panel--cyan { border-color: rgba(255, 215, 0, 0.2); background: rgba(255, 215, 0, 0.04); }
 .qcc-panel--neutral { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
 .qcc-panel-title {
   font-size: 12px;
@@ -273,7 +306,7 @@
 .qcc-hero--down .qcc-hero-value { color: #ff1744; }
 .qcc-hero--mdd .qcc-hero-value  { color: #ff1744; }
 .qcc-hero-sub  { font-size: 10px; color: var(--se-text-muted); flex-shrink: 0; }
-.qcc-hero-sub-line { height: 2px; background: rgba(0,229,255,0.5); margin: 6px 0; flex-shrink: 0; }
+.qcc-hero-sub-line { height: 2px; background: rgba(255,215,0,0.35); margin: 6px 0; flex-shrink: 0; }
 
 /* Growth panel */
 .qcc-growth-panel { flex: 1; min-height: 0; }
@@ -434,7 +467,7 @@
   min-height: 0;
   overflow: auto;
   border-radius: 6px;
-  border: 1px solid rgba(0,229,255,0.15);
+  border: 1px solid rgba(255,255,255,0.1);
 }
 .qcc-temporal-table {
   width: 100%;
@@ -442,7 +475,7 @@
   font-size: 12px;
 }
 .qcc-temporal-table th {
-  background: rgba(0,229,255,0.08);
+  background: rgba(255,255,255,0.05);
   color: var(--se-text-muted);
   font-weight: 600;
   padding: 7px 8px;
@@ -450,7 +483,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  border-bottom: 1px solid rgba(0,229,255,0.15);
+  border-bottom: 1px solid rgba(255,255,255,0.1);
 }
 .qcc-temporal-table td {
   padding: 8px;
@@ -489,7 +522,7 @@
   min-height: 0;
   overflow: auto;
   border-radius: 6px;
-  border: 1px solid rgba(0,229,255,0.15);
+  border: 1px solid rgba(255,255,255,0.1);
 }
 .qcc-logs-table {
   width: 100%;
@@ -498,7 +531,7 @@
   font-family: 'Consolas', 'Courier New', monospace;
 }
 .qcc-logs-table th {
-  background: rgba(0,229,255,0.08);
+  background: rgba(255,255,255,0.05);
   color: var(--se-text-muted);
   font-weight: 600;
   padding: 8px 10px;
@@ -506,7 +539,7 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  border-bottom: 1px solid rgba(0,229,255,0.15);
+  border-bottom: 1px solid rgba(255,255,255,0.1);
   white-space: nowrap;
 }
 .qcc-logs-table td {
@@ -518,7 +551,7 @@
 .qcc-row--down { background: rgba(255,23,68,0.04); }
 .qcc-row--up:hover   { background: rgba(0,230,118,0.09); }
 .qcc-row--down:hover { background: rgba(255,23,68,0.09); }
-.qcc-sym { font-weight: 700; color: #00e5ff; }
+.qcc-sym { font-weight: 700; color: var(--se-gold, #ffd700); }
 .qcc-side { color: var(--se-text-muted); font-size: 11px; }
 .qcc-num { text-align: right; color: #e0e8f0; }
 .qcc-dur { color: var(--se-text-muted); }
@@ -563,7 +596,7 @@
   border-radius: 3px;
   flex-shrink: 0;
 }
-.qcc-alloc-sym { flex: 1; font-weight: 700; color: #00e5ff; }
+.qcc-alloc-sym { flex: 1; font-weight: 700; color: var(--se-gold, #ffd700); }
 .qcc-alloc-pct { min-width: 52px; text-align: right; color: var(--se-text-secondary); }
 .qcc-alloc-krw { min-width: 110px; text-align: right; color: var(--se-text-muted); font-size: 11px; }
 .qcc-donut-svg { width: min(100%, 300px); height: auto; }

frontend/src/styles/backtestDashboard.css

@@ -852,6 +852,15 @@
 
 .btd-btn--ghost { background: transparent; }
 .btd-btn--danger { border-color: color-mix(in srgb, var(--se-sell) 45%, transparent); color: var(--se-sell); }
+.btd-btn--gold {
+  background: var(--se-btn-gold-bg, rgba(255,215,0,0.15));
+  border-color: var(--se-btn-gold-border, rgba(255,215,0,0.45));
+  color: var(--se-gold, #ffd700);
+}
+.btd-btn--gold:hover:not(:disabled) {
+  background: rgba(255,215,0,0.25);
+  border-color: rgba(255,215,0,0.65);
+}
 .btd-btn:disabled { opacity: 0.35; cursor: not-allowed; }
 
 .btd-loading {