refactor: 차트 사이즈 수정

issues: #33

Author: BHyeonKim

src/features/tradeview/const/chart.const.ts

@@ -1,7 +1,9 @@
-export const Intervals = [
+export const INTERVALS = [
 	{ interval: 1, text: '1분' },
 	{ interval: 3, text: '3분' },
 	{ interval: 5, text: '5분' },
 	{ interval: 15, text: '15분' },
 	{ interval: 30, text: '30분' },
 ];
+
+export const INTERVAL_SELECTOR_HEIGHT = 26;

src/features/tradeview/ui/StockChart/ChartContainer.tsx

@@ -17,6 +17,7 @@ import {
 	useRef,
 } from 'react';
 
+import { INTERVAL_SELECTOR_HEIGHT } from '../../const/chart.const';
 import { useChartRoot } from './ChartRoot';
 
 type ChartContainerProps = PropsWithChildren<{
@@ -57,7 +58,7 @@ export default function ChartContainer({
 					...chartOption,
 					layout,
 					width: root.clientWidth,
-					height: root.clientHeight,
+					height: root.clientHeight - INTERVAL_SELECTOR_HEIGHT,
 				});
 				this._instance.timeScale().fitContent();
 			}
@@ -76,10 +77,11 @@ export default function ChartContainer({
 		const chart = chartApi.getInstance();
 
 		const handleResize = () => {
+			if (!root) return;
 			chart.applyOptions({
 				...chartOption,
-				width: root?.clientWidth,
-				height: root?.clientHeight,
+				width: root.clientWidth,
+				height: root.clientHeight - INTERVAL_SELECTOR_HEIGHT,
 			});
 		};
 

src/features/tradeview/ui/StockChart/index.tsx

@@ -21,7 +21,7 @@ import Series from './Series';
 import ToolTip from './ToolTip';
 
 import api from '../../api/tradeview.endpoints';
-import { Intervals } from '../../const/chart.const';
+import { INTERVALS } from '../../const/chart.const';
 import usePastTimeData from '../../hooks/usePastTimeData';
 import useRealTimeData from '../../hooks/useRealTimeData';
 import { extractCandlestickData, timestampToISOString } from '../../utils';
@@ -148,7 +148,7 @@ export default function Chart({ ticker = 'BTC', count = 30 }: ChartProps) {
 	return (
 		<ChartRoot>
 			<IntervalSelector
-				intervals={Intervals}
+				intervals={INTERVALS}
 				onSelectInterval={handleSelectInterval}
 				selectedInterval={selectedInterval}
 			/>