코인 차트 기능 구현

src/entities/market/model/apis/candle.api.ts

@@ -0,0 +1,36 @@
+import { UPBIT_URL } from "@/shared";
+
+import { CandleData, CandleParams, MinutesCandleParams } from "../types";
+
+export const candleAPI = async (params: CandleParams): Promise<CandleData[]> => {
+  const { market, to, count, type } = params;
+
+  // URL 파라미터 구성
+  const urlParams = new URLSearchParams({
+    market,
+    count: count.toString(),
+  });
+
+  if (to) {
+    urlParams.append("to", to);
+  }
+
+  // 타입별 엔드포인트 구성
+  let endpoint = `${UPBIT_URL}/candles/${type}`;
+
+  // 분 캔들의 경우 unit을 Path 파라미터로 추가
+  if (type === "minutes") {
+    const unit = (params as MinutesCandleParams).unit;
+    endpoint = `${UPBIT_URL}/candles/minutes/${unit}`;
+  }
+
+  const url = `${endpoint}?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Candle API error: ${response.status} ${response.statusText}`);
+  }
+
+  const data: CandleData[] = await response.json();
+  return data;
+};

src/entities/market/model/apis/index.ts

@@ -1,3 +1,4 @@
+export * from "./candle.api";
 export * from "./market-all.api";
 export * from "./market-order.api";
 export * from "./ticker.api";

src/entities/market/model/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from "./useGetMarketOrder";
 export * from "./useMarketOrderRealtime";
 export * from "./useMarket";
+export * from "./useGetCandle";

src/entities/market/model/hooks/useGetCandle.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { candleAPI } from "../apis";
+import type { CandleParams, MinutesCandleParams } from "../types";
+
+export const useGetCandle = (params: CandleParams) => {
+  const { market, count, type } = params;
+
+  // 분 캔들일 때만 unit을 queryKey에 포함
+  const unit = type === "minutes" ? (params as MinutesCandleParams).unit : undefined;
+
+  const queryKey = unit ? ["candle", market, count, type, unit] : ["candle", market, count, type];
+
+  return useQuery({
+    queryKey,
+    queryFn: () => candleAPI(params),
+
+    refetchInterval: type === "seconds" || type === "minutes" ? 500 : false,
+  });
+};

src/entities/market/model/types/candle.type.ts

@@ -0,0 +1,36 @@
+/**
+ * 캔들 타입
+ * - seconds: 초 단위 (1초 고정)
+ * - minutes: 분 단위 (1, 3, 5, 10, 15, 30, 60, 240분)
+ * - days: 일 단위
+ * - weeks: 주 단위
+ * - months: 월 단위
+ */
+export type CandleType = "seconds" | "minutes" | "days" | "weeks" | "months";
+
+/**
+ * 분 단위 캔들 옵션
+ * Upbit API에서 지원하는 분 단위
+ */
+export type MinuteUnit = 1 | 3 | 5 | 10 | 15 | 30 | 60 | 240;
+
+type SecondsCandleParams = {
+  type: "seconds";
+} & BaseCandleParams;
+
+export type MinutesCandleParams = {
+  type: "minutes";
+  unit: MinuteUnit;
+} & BaseCandleParams;
+
+type OtherCandleParams = {
+  type: "days" | "weeks" | "months";
+} & BaseCandleParams;
+
+type BaseCandleParams = {
+  market: string;
+  to?: string;
+  count: number;
+};
+
+export type CandleParams = SecondsCandleParams | MinutesCandleParams | OtherCandleParams;

src/entities/market/model/types/chart.type.ts

@@ -0,0 +1,23 @@
+export type CandleData = {
+  market: string;
+  candle_date_time_utc: string;
+  candle_date_time_kst: string;
+  opening_price: number;
+  high_price: number;
+  low_price: number;
+  trade_price: number;
+  timestamp: number;
+  candle_acc_trade_price: number;
+  candle_acc_trade_volume: number;
+  unit: number;
+};
+
+export type ChartDataPoint = {
+  x: number;
+  y: number | number[] | string;
+};
+
+export type ChartSeriesData = {
+  prices: ChartDataPoint[];
+  volume: ChartDataPoint[];
+};

src/entities/market/model/types/index.ts

@@ -1,3 +1,5 @@
+export * from "./chart.type";
 export * from "./market-info.type";
 export * from "./orderbook-units.type";
 export * from "./trade.type";
+export * from "./candle.type";

src/features/home/components/common/button/TimeframeButton.tsx

@@ -1,9 +1,11 @@
 import { Button, Separator } from "@/shared";
 
+import type { ChartTimeframe } from "../../../store";
+
 type Props = {
-  timeframe: string;
-  selectedTimeframe: string;
-  setSelectedTimeframe: (timeframe: string) => void;
+  timeframe: ChartTimeframe;
+  selectedTimeframe: ChartTimeframe;
+  setSelectedTimeframe: (timeframe: ChartTimeframe) => void;
 };
 
 export const TimeframeButton = ({ timeframe, selectedTimeframe, setSelectedTimeframe }: Props) => {

src/features/home/components/features/coin-chart/ChartControls.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { useState } from "react";
-
 import { Separator } from "@/shared";
 
+import { type ChartTimeframe, useChartStore } from "../../../store";
 import { ChartOptionButton, TimeframeButton } from "../../common";
 
-const timeframes = ["1초", "1분", "5분", "30분", "1시간", "주", "달", "년"];
+const timeframes: ChartTimeframe[] = ["1초", "1분", "5분", "30분", "1시간", "주", "달", "년"];
 
 export const ChartControls = () => {
-  const [selectedTimeframe, setSelectedTimeframe] = useState<string>("1초");
+  const selectedTimeframe = useChartStore((state) => state.selectedTimeframe);
+  const setSelectedTimeframe = useChartStore((state) => state.setSelectedTimeframe);
 
   return (
     <div className='flex items-center gap-2 border-b border-white/10 p-2'>