refactor: Period 키워드 => Interval로 변경

issues: #33

Author: BHyeonKim

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

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

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

@@ -0,0 +1,29 @@
+import type { MouseEvent } from 'react';
+import Button from '../Button';
+
+type IntervalSelectorProps = {
+	intervals: { interval: number; text: string }[];
+	selectedInterval: number;
+	onSelectInterval: (e: MouseEvent<HTMLButtonElement>) => void;
+};
+
+export default function IntervalSelector({
+	intervals,
+	onSelectInterval,
+	selectedInterval,
+}: IntervalSelectorProps) {
+	return (
+		<div className="flex gap-1">
+			{intervals.map((interval) => (
+				<Button
+					key={interval.interval}
+					onClick={onSelectInterval}
+					value={interval.interval}
+					selected={interval.interval === selectedInterval}
+				>
+					{interval.text}
+				</Button>
+			))}
+		</div>
+	);
+}

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

@@ -21,29 +21,24 @@ import Series from './Series';
 import ToolTip from './ToolTip';
 
 import api from '../../api/tradeview.endpoints';
-import { Periods } 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';
-import PeriodSelector from '../PeriodSelector';
+import IntervalSelector from '../IntervalSelector';
 
 type ChartProps = {
 	ticker?: string;
-	interval?: number;
 	count?: number;
 };
 
-export default function Chart({
-	ticker = 'BTC',
-	interval = 1,
-	count = 10,
-}: ChartProps) {
-	const [selectedPeriod, setSelectedPeriod] = useState(1);
+export default function Chart({ ticker = 'BTC', count = 30 }: ChartProps) {
+	const [selectedInterval, setSelectedInterval] = useState(1);
 	const chartRef = useRef<IChartApi>(null);
 	const seriesRef = useRef<ISeriesApi<'Candlestick'>>(null);
 	const [isChartReady, setIsChartReady] = useState(false);
 	const realTimeData = useRealTimeData(ticker);
-	const pastTimeData = usePastTimeData(ticker, interval, count);
+	const pastTimeData = usePastTimeData(ticker, selectedInterval, count);
 
 	const chartOption: DeepPartial<TimeChartOptions> = useMemo(() => {
 		return {
@@ -99,7 +94,7 @@ export default function Chart({
 
 				const response = await api.getPastData(
 					ticker,
-					interval,
+					selectedInterval,
 					count,
 					firstDate,
 				);
@@ -123,7 +118,7 @@ export default function Chart({
 				?.timeScale()
 				.unsubscribeVisibleLogicalRangeChange(handleVisibleRangeChange);
 		};
-	}, [isChartReady, count, interval, ticker]);
+	}, [isChartReady, count, selectedInterval, ticker]);
 
 	useLayoutEffect(() => {
 		if (!realTimeData || !realTimeData.time) return;
@@ -136,26 +131,26 @@ export default function Chart({
 
 		const timeDiff = +realTimeData.time - +latestTime.time;
 
-		if (timeDiff < 60 * interval) {
+		if (timeDiff < 60 * selectedInterval) {
 			seriesRef.current?.update({ ...realTimeData, time: latestTime.time });
 		} else {
 			seriesRef.current?.update({
 				...realTimeData,
-				time: (+latestTime.time + 60 * interval) as Time,
+				time: (+latestTime.time + 60 * selectedInterval) as Time,
 			});
 		}
-	}, [realTimeData, interval]);
+	}, [realTimeData, selectedInterval]);
 
-	const handleSelectPeriod = (e: MouseEvent<HTMLButtonElement>) => {
-		setSelectedPeriod(Number(e.currentTarget.value));
+	const handleSelectInterval = (e: MouseEvent<HTMLButtonElement>) => {
+		setSelectedInterval(Number(e.currentTarget.value));
 	};
 
 	return (
 		<ChartRoot>
-			<PeriodSelector
-				periods={Periods}
-				onSelectPeriod={handleSelectPeriod}
-				selectedPeriod={selectedPeriod}
+			<IntervalSelector
+				intervals={Intervals}
+				onSelectInterval={handleSelectInterval}
+				selectedInterval={selectedInterval}
 			/>
 			<ChartContainer
 				ref={chartRef}