diff --git a/src/app/routes/trade.$ticker.tsx b/src/app/routes/trade.$ticker.tsx index 7aed917..701988b 100644 --- a/src/app/routes/trade.$ticker.tsx +++ b/src/app/routes/trade.$ticker.tsx @@ -83,7 +83,7 @@ export default function TradeRouteComponent({ )}
-
+
실시간 차트 diff --git a/src/features/tradeview/const/chart.const.ts b/src/features/tradeview/const/chart.const.ts index 98813a9..82feff3 100644 --- a/src/features/tradeview/const/chart.const.ts +++ b/src/features/tradeview/const/chart.const.ts @@ -7,3 +7,5 @@ export const INTERVALS = [ ]; export const INTERVAL_SELECTOR_HEIGHT = 26; + +export const MINUTE = 60; diff --git a/src/features/tradeview/ui/Orderbook/chart.tsx b/src/features/tradeview/ui/Orderbook/chart.tsx index 9bd424a..cb380ea 100644 --- a/src/features/tradeview/ui/Orderbook/chart.tsx +++ b/src/features/tradeview/ui/Orderbook/chart.tsx @@ -1,6 +1,7 @@ import * as am5 from '@amcharts/amcharts5'; import * as am5xy from '@amcharts/amcharts5/xy'; import { useEffect, useLayoutEffect, useRef } from 'react'; +import { formatCurrencyKR } from '~/shared/utils'; import type { OrderBookUnit } from '../../types/orderbook.type'; const THEME = { @@ -33,7 +34,7 @@ export default function OrderbookChart({ if (!chartRef.current || !yAxisRef.current || !seriesRef.current) return; const formattedData = data.map((item) => ({ - price: item.price.toString(), + price: formatCurrencyKR(+item.price), size: item.size, priceY: item.price, sizeX: item.size, @@ -41,10 +42,6 @@ export default function OrderbookChart({ yAxisRef.current.data.setAll(formattedData); seriesRef.current.data.setAll(formattedData); - - chartRef.current.series.each((series) => { - series.appear(1000); - }); }, [data]); useLayoutEffect(() => { @@ -69,7 +66,6 @@ export default function OrderbookChart({ am5.Rectangle.new(rootRef.current, { stroke: am5.color('#fff'), strokeOpacity: 0, - fill: THEME[type].barColor, fillOpacity: 0.05, }), ); @@ -116,7 +112,7 @@ export default function OrderbookChart({ sequencedInterpolation: true, tooltip: am5.Tooltip.new(rootRef.current, { pointerOrientation: 'horizontal', - labelText: '[bold]{priceY}원 {sizeX}개', + labelText: "[bold]{priceY.formatNumber('#,###.##')}원 {sizeX}개", }), paddingBottom: 0, paddingTop: 0, diff --git a/src/features/tradeview/ui/StockChart/Series.tsx b/src/features/tradeview/ui/StockChart/Series.tsx index 1e45e1a..b07ea74 100644 --- a/src/features/tradeview/ui/StockChart/Series.tsx +++ b/src/features/tradeview/ui/StockChart/Series.tsx @@ -15,7 +15,6 @@ import { useContext, useImperativeHandle, useLayoutEffect, - useMemo, useRef, } from 'react'; @@ -114,13 +113,6 @@ export default function Series({ useImperativeHandle(ref, () => seriesApiRef.current.getInstance(), []); - const context = useMemo( - () => ({ - series: seriesApiRef.current, - }), - [], - ); - return ( {children} diff --git a/src/features/tradeview/ui/StockChart/ToolTip.tsx b/src/features/tradeview/ui/StockChart/ToolTip.tsx index b878c6c..7ea64dc 100644 --- a/src/features/tradeview/ui/StockChart/ToolTip.tsx +++ b/src/features/tradeview/ui/StockChart/ToolTip.tsx @@ -1,6 +1,7 @@ import type { CandlestickData } from 'lightweight-charts'; import { useLayoutEffect, useRef } from 'react'; import { formatCurrencyKR } from '~/shared/utils'; +import { formatDateKr } from '../../utils'; import { useChartContainer } from './ChartContainer'; import { useChartRoot } from './ChartRoot'; import { useSeries } from './Series'; @@ -36,6 +37,8 @@ export default function ToolTip() { const { close, high, low, open, time } = param.seriesData.get( chartSeries, ) as CandlestickData; + const date = new Date((time as number) * 1000); + const koreanDate = new Date(date.setHours(date.getHours() - 9)); toolTipElementRef.current.style.display = 'block'; toolTipElementRef.current.innerHTML = `
@@ -50,7 +53,7 @@ export default function ToolTip() {
${formatCurrencyKR(close)}원
-
${new Date((time as number) * 1000).toLocaleString()}
+
${formatDateKr(koreanDate)}
`; diff --git a/src/features/tradeview/ui/StockChart/index.tsx b/src/features/tradeview/ui/StockChart/index.tsx index 7fa11b3..697fa2f 100644 --- a/src/features/tradeview/ui/StockChart/index.tsx +++ b/src/features/tradeview/ui/StockChart/index.tsx @@ -21,10 +21,14 @@ import Series from './Series'; import ToolTip from './ToolTip'; import api from '../../api/tradeview.endpoints'; -import { INTERVALS } from '../../const/chart.const'; +import { INTERVALS, MINUTE } from '../../const/chart.const'; import usePastTimeData from '../../hooks/usePastTimeData'; import useRealTimeData from '../../hooks/useRealTimeData'; -import { extractCandlestickData, timestampToISOString } from '../../utils'; +import { + extractCandlestickData, + priceFormatter, + timestampToISOString, +} from '../../utils'; import IntervalSelector from '../IntervalSelector'; type ChartProps = { @@ -39,6 +43,7 @@ export default function Chart({ ticker = 'BTC', count = 30 }: ChartProps) { const [isChartReady, setIsChartReady] = useState(false); const realTimeData = useRealTimeData(ticker); const pastTimeData = usePastTimeData(ticker, selectedInterval, count); + const prevRequestDate = useRef