From 055193f2bf6992fcc74de919d0d78cbdc4f2efaf Mon Sep 17 00:00:00 2001
From: BHyeonKim <rlaqhguse@gmail.com>
Date: Tue, 24 Jun 2025 19:22:51 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20chart=20=EB=AC=B4=ED=95=9C=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A4=91=EB=B3=B5=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=ED=8C=A8=EC=B9=AD=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

issues: #33
---
 src/features/tradeview/ui/StockChart/index.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/features/tradeview/ui/StockChart/index.tsx b/src/features/tradeview/ui/StockChart/index.tsx
index 7fa11b3..9370225 100644
--- a/src/features/tradeview/ui/StockChart/index.tsx
+++ b/src/features/tradeview/ui/StockChart/index.tsx
@@ -39,6 +39,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<Time | null>(null);
 
 	const chartOption: DeepPartial<TimeChartOptions> = useMemo(() => {
 		return {
@@ -89,6 +90,12 @@ export default function Chart({ ticker = 'BTC', count = 30 }: ChartProps) {
 			if (logicalRange.from < -0.5) {
 				const firstData = seriesRef.current?.dataByIndex(0) as CandlestickData;
 				if (!firstData || !firstData.time) return;
+				if (
+					prevRequestDate.current &&
+					prevRequestDate.current <= firstData.time
+				)
+					return;
+				prevRequestDate.current = firstData.time;
 
 				const firstDate = timestampToISOString(firstData.time as number);
 

From caf57e90ad2c333d6ae271941a613d333fee435e Mon Sep 17 00:00:00 2001
From: BHyeonKim <rlaqhguse@gmail.com>
Date: Tue, 24 Jun 2025 20:36:14 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20?=
 =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EB=B0=8F=20=ED=98=B8=EA=B0=80=EC=B0=BD=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/routes/trade.$ticker.tsx                 |  2 +-
 src/features/tradeview/const/chart.const.ts      |  2 ++
 src/features/tradeview/ui/Orderbook/chart.tsx    | 10 +++-------
 src/features/tradeview/ui/StockChart/Series.tsx  |  8 --------
 src/features/tradeview/ui/StockChart/ToolTip.tsx |  5 ++++-
 src/features/tradeview/ui/StockChart/index.tsx   | 13 +++++++++----
 src/features/tradeview/utils/index.ts            | 16 ++++++++++++++++
 7 files changed, 35 insertions(+), 21 deletions(-)

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({
 					<CoinPriceWithName name={coinInfo?.name} ticker={coinInfo?.ticker} />
 				)}
 				<div className="scrollbar-hide relative flex h-[calc(100dvh-116px)] flex-col gap-4 overflow-y-scroll p-4 md:grid md:grid-cols-2 md:grid-rows-5 xl:grid-cols-3 xl:grid-rows-2 2xl:grid-cols-4 2xl:grid-rows-2">
-					<div className="h-auto md:col-span-full md:row-span-2 md:row-start-1 xl:col-span-full xl:row-span-1 xl:row-start-1 2xl:col-span-2 2xl:col-start-2 2xl:row-start-1">
+					<div className="h-auto min-h-75 md:col-span-full md:row-span-2 md:row-start-1 xl:col-span-full xl:row-span-1 xl:row-start-1 2xl:col-span-2 2xl:col-start-2 2xl:row-start-1">
 						<Container>
 							<ContainerTitle>실시간 차트</ContainerTitle>
 							<Suspense fallback="차트데이터를 가져오고 있습니다.">
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<T extends SeriesType>({
 
 	useImperativeHandle(ref, () => seriesApiRef.current.getInstance(), []);
 
-	const context = useMemo(
-		() => ({
-			series: seriesApiRef.current,
-		}),
-		[],
-	);
-
 	return (
 		<SeriesContext.Provider value={seriesApiRef.current}>
 			{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 = `<div style="border: 1px solid #d1d5db; background-color: white; padding: 0.5rem; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); color: #1f2937; z-index: 40;">
@@ -50,7 +53,7 @@ export default function ToolTip() {
 				<div style="font-weight: 500;">${formatCurrencyKR(close)}원</div>
 			</div>
 			<div style="border-top: 1px solid #e5e7eb; padding-top: 0.25rem; margin-top: 0.25rem;">
-				<div style="color: #6b7280; font-size: 0.75rem; line-height: 1rem;">${new Date((time as number) * 1000).toLocaleString()}</div>
+				<div style="color: #6b7280; font-size: 0.75rem; line-height: 1rem;">${formatDateKr(koreanDate)}</div>
 			</div>
 		</div>`;
 
diff --git a/src/features/tradeview/ui/StockChart/index.tsx b/src/features/tradeview/ui/StockChart/index.tsx
index 9370225..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 = {
@@ -47,6 +51,7 @@ export default function Chart({ ticker = 'BTC', count = 30 }: ChartProps) {
 			localization: {
 				locale: 'kr',
 				dateFormat: 'yyyy-MM-dd',
+				priceFormatter: priceFormatter(),
 			},
 			rightPriceScale: {
 				borderVisible: false,
@@ -144,12 +149,12 @@ export default function Chart({ ticker = 'BTC', count = 30 }: ChartProps) {
 
 		const timeDiff = +realTimeData.time - +latestTime.time;
 
-		if (timeDiff < 60 * selectedInterval) {
+		if (timeDiff < MINUTE * selectedInterval) {
 			seriesRef.current?.update({ ...realTimeData, time: latestTime.time });
 		} else {
 			seriesRef.current?.update({
 				...realTimeData,
-				time: (+latestTime.time + 60 * selectedInterval) as Time,
+				time: (+latestTime.time + MINUTE * selectedInterval) as Time,
 			});
 		}
 	}, [realTimeData, selectedInterval]);
diff --git a/src/features/tradeview/utils/index.ts b/src/features/tradeview/utils/index.ts
index d034c8d..5a35b0a 100644
--- a/src/features/tradeview/utils/index.ts
+++ b/src/features/tradeview/utils/index.ts
@@ -29,3 +29,19 @@ export function timestampToISOString(timestamp: number) {
 	const date = new Date(timestamp * 1000);
 	return date.toISOString().slice(0, -1);
 }
+
+export function priceFormatter() {
+	const currentLocale = window.navigator.languages[0];
+
+	return Intl.NumberFormat(currentLocale, {
+		style: 'currency',
+		currency: 'KRW',
+	}).format;
+}
+
+export function formatDateKr(date: Date) {
+	return Intl.DateTimeFormat('ko-KR', {
+		dateStyle: 'full',
+		timeStyle: 'short',
+	}).format(date);
+}