알림목록 수정

frontend/src/components/tradeNotification/TradeNotificationListRow.tsx

@@ -142,6 +142,12 @@ const TradeNotificationListRow: React.FC<Props> = ({
     }));
   }, [strategy, getParams, getVisualConfig, isListLayout]);
 
+  /** 통합 차트용: 전략의 모든 보조지표를 하나의 차트에 넘긴다 */
+  const allIndicatorConfigs = useMemo(
+    () => indicatorCards.flatMap(c => c.config),
+    [indicatorCards],
+  );
+
   const chartExpanded = isListLayout && expandedChartKey != null;
   const chartActive = isListLayout && chartsEnabled && panelActive;
   const signalCardEnabled = isListLayout && panelActive && !chartExpanded;
@@ -218,6 +224,12 @@ const TradeNotificationListRow: React.FC<Props> = ({
               </div>
             </div>
 
+            {/* 전략명 태그 — 헤더 바로 아래에 표시 */}
+            <div className="tnl-summary-strategy-tag" title={strategyLabel} aria-label={`전략: ${strategyLabel}`}>
+              <span className="tnl-summary-strategy-tag-ic" aria-hidden>⚡</span>
+              <span className="tnl-summary-strategy-tag-name">{strategyLabel}</span>
+            </div>
+
             <div className="tnl-summary-quote" aria-label="시그널 가격">
               <div className="tnl-summary-quote-left">
                 <span
@@ -342,43 +354,22 @@ const TradeNotificationListRow: React.FC<Props> = ({
         </TradeNotificationHScrollPane>
 
         {chartExpanded ? (
-          <TradeNotificationHScrollPane
-            className="tnl-row-gallery-indicators tnl-row-gallery-indicators--expanded"
-            label="차트 전체보기"
-          >
-            <div className="tnl-charts-expanded-inner">
-              {expandedChartKey === 'candle' && (
-                <TradeSignalChartCard
-                  label="캔들"
-                  meta={candleKo}
-                  market={item.market}
-                  timeframe={chartTf}
-                  theme={theme}
-                  indicators={[]}
-                  enabled={chartActive}
-                  expanded
-                  onExpand={() => setExpandedChartKey('candle')}
-                  onRestore={() => setExpandedChartKey(null)}
-                  onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
-                />
-              )}
-              {expandedIndicator && (
-                <TradeSignalChartCard
-                  label={expandedIndicator.label}
-                  meta={candleKo}
-                  market={item.market}
-                  timeframe={chartTf}
-                  theme={theme}
-                  indicators={expandedIndicator.config}
-                  enabled={chartActive}
-                  expanded
-                  onExpand={() => setExpandedChartKey(expandedIndicator.id)}
-                  onRestore={() => setExpandedChartKey(null)}
-                  onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
-                />
-              )}
-            </div>
-          </TradeNotificationHScrollPane>
+          /* 전체보기 — 통합 차트 (캔들 + 보조지표) 를 넓게 표시 */
+          <div className="tnl-row-gallery-combined-chart tnl-row-gallery-combined-chart--expanded">
+            <TradeSignalChartCard
+              label="캔들"
+              meta={candleKo}
+              market={item.market}
+              timeframe={chartTf}
+              theme={theme}
+              indicators={allIndicatorConfigs}
+              enabled={chartActive}
+              expanded
+              onExpand={() => setExpandedChartKey('candle')}
+              onRestore={() => setExpandedChartKey(null)}
+              onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
+            />
+          </div>
         ) : (
           <>
             <TradeNotificationHScrollPane
@@ -402,55 +393,30 @@ const TradeNotificationListRow: React.FC<Props> = ({
               />
             </TradeNotificationHScrollPane>
 
-            <div className="tnl-row-gallery-candle" aria-label="캔들 차트">
+            {/* 통합 차트 — 캔들(상단) + 전략 보조지표(하단)
+                key에 indicator ids를 포함하여 전략 로드 후 차트를 완전히 재마운트 */}
+            <div
+              className="tnl-row-gallery-combined-chart"
+              aria-label="캔들 및 보조지표 차트"
+            >
               <TradeSignalChartCard
+                key={`combined-${item.market}-${chartTf}-${allIndicatorConfigs.map(c => c.id).join(',')}`}
                 label="캔들"
                 meta={candleKo}
                 market={item.market}
                 timeframe={chartTf}
                 theme={theme}
-                indicators={[]}
+                indicators={allIndicatorConfigs}
                 enabled={chartActive}
                 expanded={false}
                 onExpand={() => setExpandedChartKey('candle')}
                 onRestore={() => setExpandedChartKey(null)}
                 onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
               />
+              {indicatorPlaceholder && (
+                <div className="tnl-combined-chart-placeholder">전략 지표 로딩 중…</div>
+              )}
             </div>
-
-            <TradeNotificationHScrollPane
-              className={[
-                'tnl-row-gallery-indicators',
-                indicatorScrollNeeded ? 'tnl-row-gallery-indicators--scroll' : '',
-              ].filter(Boolean).join(' ')}
-              label="보조지표"
-              clipPeekLabels={indicatorScrollNeeded}
-            >
-              <div className="tnl-charts-track tnl-charts-track--indicators-only">
-                {indicatorCards.map(card => (
-                  <TradeSignalChartCard
-                    key={card.id}
-                    label={card.label}
-                    meta={candleKo}
-                    market={item.market}
-                    timeframe={chartTf}
-                    theme={theme}
-                    indicators={card.config}
-                    enabled={chartActive}
-                    expanded={false}
-                    onExpand={() => setExpandedChartKey(card.id)}
-                    onRestore={() => setExpandedChartKey(null)}
-                    onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
-                  />
-                ))}
-
-                {indicatorPlaceholder && (
-                  <section className="tnl-chart-card tnl-chart-card--placeholder">
-                    <p className="tnl-muted">전략 지표 로딩 중…</p>
-                  </section>
-                )}
-              </div>
-            </TradeNotificationHScrollPane>
           </>
         )}
       </div>