매매 시그널 알림 수정

frontend/src/components/tradeNotification/TradeNotificationSignalSummary.tsx

@@ -80,7 +80,7 @@ const TradeNotificationSignalSummary: React.FC<Props> = ({
       headVariant={embedded ? 'inline-quote' : 'default'}
       theme={theme}
       ticker={ticker}
-      chartLiveReceiveHighlight
+      chartLiveReceiveHighlight={!embedded}
       readOnlyStrategyLabel={strategyLabel}
     />
   );

frontend/src/components/tradeNotification/TradeSignalMiniChart.tsx

@@ -58,7 +58,10 @@ const TradeSignalMiniChart: React.FC<Props> = ({
     pendingBarRef.current = null;
     mgr.updateBar(pending);
     const wrap = canvasWrapRef.current;
-    if (wrap && wrap.clientHeight > 0) mgr.resetPaneHeights(wrap.clientHeight);
+    if (wrap && wrap.clientWidth > 0 && wrap.clientHeight > 0) {
+      mgr.resetPaneHeights(wrap.clientHeight);
+      mgr.resize(wrap.clientWidth, wrap.clientHeight);
+    }
   }, []);
 
   const applyRealtimeBar = useCallback((bar: OHLCVBar, append: boolean) => {
@@ -104,11 +107,15 @@ const TradeSignalMiniChart: React.FC<Props> = ({
   barsMarketRef.current = barsMarket;
   const barsReady = bars.length >= 2 && barsMarket === market;
 
-  const applyPaneHeights = useCallback(() => {
+  const syncChartLayout = useCallback(() => {
     const wrap = canvasWrapRef.current;
     const mgr = managerRef.current;
-    if (!wrap || wrap.clientHeight <= 0 || !mgr?.hasMainSeries()) return;
-    mgr.resetPaneHeights(wrap.clientHeight);
+    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(() => {
@@ -127,8 +134,12 @@ const TradeSignalMiniChart: React.FC<Props> = ({
         if (!canvasWrapRef.current) return;
         const h = canvasWrapRef.current.clientHeight;
         if (h <= 0) return;
+        const w = canvasWrapRef.current.clientWidth;
         if (managerRef.current?.hasMainSeries()) {
-          managerRef.current.resetPaneHeights(h);
+          if (w > 0) {
+            managerRef.current.resetPaneHeights(h);
+            managerRef.current.resize(w, h);
+          }
         } else if (!chartReloadTriggeredRef.current && delay >= 600 && barsReady) {
           chartReloadTriggeredRef.current = true;
           setChartReloadTick(t => t + 1);
@@ -136,13 +147,13 @@ const TradeSignalMiniChart: React.FC<Props> = ({
       }, delay),
     );
 
-    const ro = new ResizeObserver(() => applyPaneHeights());
+    const ro = new ResizeObserver(() => syncChartLayout());
     ro.observe(wrap);
     return () => {
       timers.forEach(clearTimeout);
       ro.disconnect();
     };
-  }, [market, timeframe, enabled, barsReady, applyPaneHeights, fillHeight]);
+  }, [market, timeframe, enabled, barsReady, syncChartLayout, fillHeight]);
 
   useEffect(() => {
     if (!enabled || !barsReady) return;
@@ -154,9 +165,9 @@ const TradeSignalMiniChart: React.FC<Props> = ({
 
   useEffect(() => {
     if (!enabled) return;
-    const t = setTimeout(() => applyPaneHeights(), 80);
+    const t = setTimeout(() => syncChartLayout(), 80);
     return () => clearTimeout(t);
-  }, [fillHeight, enabled, applyPaneHeights]);
+  }, [fillHeight, enabled, syncChartLayout]);
 
   useEffect(() => {
     if (!enabled || !useUpbit) return;