알림팝업 전체닫기 오류 수정

frontend/src/components/paper/PaperMiniChart.tsx

@@ -1,44 +1,84 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createChart, CandlestickSeries, type IChartApi, type ISeriesApi, type Time, ColorType } from 'lightweight-charts';
-import type { Timeframe } from '../../types';
+import type { Theme, Timeframe } from '../../types';
 import { fetchUpbitCandles } from '../../utils/upbitApi';
 
 const TF_OPTIONS: Timeframe[] = ['1m', '5m', '15m', '1h', '4h', '1D'];
 
 interface Props {
   market: string;
+  theme?: Theme;
   wsLabel?: string;
 }
 
-const PaperMiniChart: React.FC<Props> = ({ market, wsLabel = 'WebSocket <100ms' }) => {
+function readChartTheme(container: HTMLElement | null) {
+  const root = container?.closest('.app') ?? document.documentElement;
+  const s = getComputedStyle(root);
+  const v = (name: string, fallback: string) => s.getPropertyValue(name).trim() || fallback;
+  return {
+    bgColor: v('--bg3', '#1f2335'),
+    textColor: v('--text', '#c0caf5'),
+    gridColor: v('--sep', 'rgba(122, 162, 247, 0.15)'),
+    borderColor: v('--border', 'rgba(122, 162, 247, 0.15)'),
+    upColor: v('--up', '#ff6b6b'),
+    downColor: v('--down', '#4dabf7'),
+  };
+}
+
+const PaperMiniChart: React.FC<Props> = ({ market, theme = 'dark', wsLabel = 'WebSocket <100ms' }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const chartRef = useRef<IChartApi | null>(null);
   const seriesRef = useRef<ISeriesApi<'Candlestick'> | null>(null);
   const [timeframe, setTimeframe] = useState<Timeframe>('1h');
   const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    if (!containerRef.current) return undefined;
-    const chart = createChart(containerRef.current, {
+  const applyTheme = useCallback((chart: IChartApi, series: ISeriesApi<'Candlestick'>) => {
+    const t = readChartTheme(containerRef.current);
+    chart.applyOptions({
       layout: {
-        background: { type: ColorType.Solid, color: '#121520' },
-        textColor: '#9aa5ce',
+        background: { type: ColorType.Solid, color: t.bgColor },
+        textColor: t.textColor,
       },
       grid: {
-        vertLines: { color: 'rgba(122,162,247,0.06)' },
-        horzLines: { color: 'rgba(122,162,247,0.06)' },
+        vertLines: { color: t.gridColor },
+        horzLines: { color: t.gridColor },
       },
-      rightPriceScale: { borderColor: 'rgba(122,162,247,0.12)' },
-      timeScale: { borderColor: 'rgba(122,162,247,0.12)' },
+      rightPriceScale: { borderColor: t.borderColor },
+      timeScale: { borderColor: t.borderColor },
+    });
+    series.applyOptions({
+      upColor: t.upColor,
+      downColor: t.downColor,
+      borderUpColor: t.upColor,
+      borderDownColor: t.downColor,
+      wickUpColor: t.upColor,
+      wickDownColor: t.downColor,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!containerRef.current) return undefined;
+    const t = readChartTheme(containerRef.current);
+    const chart = createChart(containerRef.current, {
+      layout: {
+        background: { type: ColorType.Solid, color: t.bgColor },
+        textColor: t.textColor,
+      },
+      grid: {
+        vertLines: { color: t.gridColor },
+        horzLines: { color: t.gridColor },
+      },
+      rightPriceScale: { borderColor: t.borderColor },
+      timeScale: { borderColor: t.borderColor },
       crosshair: { mode: 1 },
     });
     const series = chart.addSeries(CandlestickSeries, {
-      upColor: '#22c55e',
-      downColor: '#ef4444',
-      borderUpColor: '#22c55e',
-      borderDownColor: '#ef4444',
-      wickUpColor: '#22c55e',
-      wickDownColor: '#ef4444',
+      upColor: t.upColor,
+      downColor: t.downColor,
+      borderUpColor: t.upColor,
+      borderDownColor: t.downColor,
+      wickUpColor: t.upColor,
+      wickDownColor: t.downColor,
     });
     chartRef.current = chart;
     seriesRef.current = series;
@@ -61,6 +101,12 @@ const PaperMiniChart: React.FC<Props> = ({ market, wsLabel = 'WebSocket <100ms'
     };
   }, []);
 
+  useEffect(() => {
+    if (chartRef.current && seriesRef.current) {
+      applyTheme(chartRef.current, seriesRef.current);
+    }
+  }, [theme, applyTheme]);
+
   useEffect(() => {
     let cancelled = false;
     setLoading(true);