알림목록 화면오류 수정

frontend/src/components/TradingChart.tsx

@@ -358,6 +358,13 @@ const TradingChart: React.FC<TradingChartProps> = ({
       required = mgr.resetPaneHeights(wrapperH);
     }
 
+    if (paneLayoutClamp) {
+      try {
+        const w = wrapper.clientWidth;
+        if (w > 0 && wrapperH > 0) mgr.resize(w, wrapperH);
+      } catch { /* ok */ }
+    }
+
     if (!paneLayoutClamp && required > wrapperH + 4) {
       container.style.height = `${required}px`;
     } else {
@@ -730,7 +737,10 @@ const TradingChart: React.FC<TradingChartProps> = ({
   useEffect(() => {
     if (!containerRef.current) return;
 
-    const mgr = new ChartManager(containerRef.current, theme);
+    const mgr = new ChartManager(containerRef.current, theme, {
+      compactPaneLayout: paneLayoutClamp,
+      autoSize: !paneLayoutClamp,
+    });
     managerRef.current = mgr;
     setChartMgr(mgr);
     if (!volumeVisibleRef.current) {

frontend/src/components/tradeNotification/TradeNotificationListRow.tsx

@@ -141,11 +141,11 @@ const TradeNotificationListRow: React.FC<Props> = ({
 
   const chartExpanded = isListLayout && expandedChartKey != null;
   const chartActive = isListLayout && chartsEnabled && panelActive;
-  const signalActive = isListLayout && panelActive && !chartExpanded;
+  const signalCardEnabled = isListLayout && panelActive && !chartExpanded;
   const ticker = tickers?.get(item.market);
   const expandedIndicator = indicatorCards.find(c => c.id === expandedChartKey);
 
-  const signalSnapshotEnabled = isListLayout && panelActive && item.strategyId != null;
+  const signalSnapshotEnabled = signalCardEnabled && item.strategyId != null;
   const { snapshot, loading: signalLoading } = useTradeNotificationSignalSnapshot(
     item.market,
     item.strategyId,
@@ -356,28 +356,26 @@ const TradeNotificationListRow: React.FC<Props> = ({
           </TradeNotificationHScrollPane>
         ) : (
           <>
-            {signalActive && (
-              <TradeNotificationHScrollPane
-                className="tnl-row-gallery-signal"
-                label="신호 일치율"
-              >
-                <TradeNotificationSignalCard
-                  market={item.market}
-                  strategyId={item.strategyId}
-                  strategy={strategy}
-                  strategies={strategies}
-                  strategyLabel={strategyLabel}
-                  meta={strategyLabel}
-                  candleType={item.candleType}
-                  theme={theme}
-                  ticker={ticker}
-                  enabled={signalActive}
-                  snapshot={snapshot}
-                  signalLoading={signalLoading}
-                  onExpandCharts={() => setExpandedChartKey('candle')}
-                />
-              </TradeNotificationHScrollPane>
-            )}
+            <TradeNotificationHScrollPane
+              className="tnl-row-gallery-signal"
+              label="신호 일치율"
+            >
+              <TradeNotificationSignalCard
+                market={item.market}
+                strategyId={item.strategyId}
+                strategy={strategy}
+                strategies={strategies}
+                strategyLabel={strategyLabel}
+                meta={strategyLabel}
+                candleType={item.candleType}
+                theme={theme}
+                ticker={ticker}
+                enabled={signalCardEnabled}
+                snapshot={snapshot}
+                signalLoading={signalLoading}
+                onExpandCharts={() => setExpandedChartKey('candle')}
+              />
+            </TradeNotificationHScrollPane>
 
             <div className="tnl-row-gallery-candle" aria-label="캔들 차트">
               <TradeSignalChartCard

frontend/src/components/tradeNotification/TradeSignalMiniChart.tsx

@@ -50,6 +50,17 @@ const TradeSignalMiniChart: React.FC<Props> = ({
   const marketRef = useRef(market);
   marketRef.current = market;
 
+  const syncChartLayout = useCallback(() => {
+    const wrap = canvasWrapRef.current;
+    const mgr = managerRef.current;
+    if (!wrap || !mgr?.hasMainSeries()) return;
+    const chartWrap = wrap.querySelector<HTMLElement>('.tv-chart-wrap');
+    const w = chartWrap?.clientWidth ?? wrap.clientWidth;
+    const h = chartWrap?.clientHeight ?? wrap.clientHeight;
+    if (w <= 0 || h <= 0) return;
+    mgr.syncLayout(w, h);
+  }, []);
+
   const handleCandlesReady = useCallback(() => {
     chartLiveReadyRef.current = true;
     const pending = pendingBarRef.current;
@@ -57,12 +68,8 @@ const TradeSignalMiniChart: React.FC<Props> = ({
     if (!pending || !mgr || barsMarketRef.current !== marketRef.current) return;
     pendingBarRef.current = null;
     mgr.updateBar(pending);
-    const wrap = canvasWrapRef.current;
-    if (wrap && wrap.clientWidth > 0 && wrap.clientHeight > 0) {
-      mgr.resetPaneHeights(wrap.clientHeight);
-      mgr.resize(wrap.clientWidth, wrap.clientHeight);
-    }
-  }, []);
+    syncChartLayout();
+  }, [syncChartLayout]);
 
   const applyRealtimeBar = useCallback((bar: OHLCVBar, append: boolean) => {
     if (barsMarketRef.current !== marketRef.current) return;
@@ -107,17 +114,6 @@ const TradeSignalMiniChart: React.FC<Props> = ({
   barsMarketRef.current = barsMarket;
   const barsReady = bars.length >= 2 && barsMarket === market;
 
-  const syncChartLayout = useCallback(() => {
-    const wrap = canvasWrapRef.current;
-    const mgr = managerRef.current;
-    if (!wrap || !mgr?.hasMainSeries()) return;
-    const w = wrap.clientWidth;
-    const h = wrap.clientHeight;
-    if (w <= 0 || h <= 0) return;
-    mgr.resetPaneHeights(h);
-    mgr.resize(w, h);
-  }, []);
-
   useLayoutEffect(() => {
     chartLiveReadyRef.current = false;
     pendingBarRef.current = null;
@@ -132,14 +128,8 @@ const TradeSignalMiniChart: React.FC<Props> = ({
     const timers = [200, 600, 1200].map(delay =>
       setTimeout(() => {
         if (!canvasWrapRef.current) return;
-        const h = canvasWrapRef.current.clientHeight;
-        if (h <= 0) return;
-        const w = canvasWrapRef.current.clientWidth;
         if (managerRef.current?.hasMainSeries()) {
-          if (w > 0) {
-            managerRef.current.resetPaneHeights(h);
-            managerRef.current.resize(w, h);
-          }
+          syncChartLayout();
         } else if (!chartReloadTriggeredRef.current && delay >= 600 && barsReady) {
           chartReloadTriggeredRef.current = true;
           setChartReloadTick(t => t + 1);