실시간 호가창 구현

src/app/api/market-order/route.ts

@@ -0,0 +1,76 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { marketOrderAPI } from "@/entities";
+import { Json, createClient } from "@/shared";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { market } = await request.json();
+
+    if (!market) {
+      return NextResponse.json({ error: "Market is required" }, { status: 400 });
+    }
+
+    // Upbit API에서 데이터 가져오기
+    const upbitData = await marketOrderAPI(market);
+    const marketData = upbitData[0];
+
+    if (!marketData) {
+      return NextResponse.json({ error: "No data from Upbit API" }, { status: 404 });
+    }
+
+    // Supabase에 저장 (upsert)
+    const supabase = createClient();
+    const { data, error } = await supabase
+      .from("market_orders")
+      .upsert(
+        {
+          market: marketData.market,
+          orderbook_units: marketData.orderbook_units as unknown as Json,
+          timestamp: marketData.timestamp,
+        },
+        {
+          onConflict: "market",
+        },
+      )
+      .select()
+      .single();
+
+    if (error) {
+      console.error("Supabase upsert error:", error);
+      return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+
+    return NextResponse.json({ success: true, data });
+  } catch (error) {
+    console.error("Sync error:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}
+
+// GET 요청으로 특정 마켓 조회
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const market = searchParams.get("market");
+
+    if (!market) {
+      return NextResponse.json({ error: "Market is required" }, { status: 400 });
+    }
+
+    const supabase = createClient();
+    const { data, error } = await supabase.from("market_orders").select("*").eq("market", market).single();
+
+    if (error) {
+      if (error.code === "PGRST116") {
+        return NextResponse.json({ error: "Market not found" }, { status: 404 });
+      }
+      return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error("Get error:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

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

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

src/entities/market/model/apis/market-order.api.ts

@@ -0,0 +1,39 @@
+import { UPBIT_URL } from "@/shared";
+
+import { OrderbookUnit } from "../types";
+
+export interface MarketOrderResponse {
+  market: string;
+  orderbook_units: OrderbookUnit[];
+  timestamp: number;
+}
+
+export const marketOrderAPI = async (markets: string): Promise<MarketOrderResponse[]> => {
+  const response = await fetch(`${UPBIT_URL}/orderbook?markets=${markets}`, {
+    cache: "no-store",
+  });
+
+  if (!response.ok) {
+    console.error("Upbit API error", response.status, response.statusText);
+    throw new Error("Failed to fetch market order data");
+  }
+
+  const data = await response.json();
+  return data;
+};
+
+export const syncMarketOrderAPI = async (market: string): Promise<MarketOrderResponse[]> => {
+  const response = await fetch("/api/market-order", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ market }),
+  });
+
+  if (!response.ok) {
+    console.error("Sync failed:", response.status, response.statusText);
+    throw new Error("Failed to fetch sync market order data");
+  }
+
+  const data = await response.json();
+  return data;
+};

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

@@ -0,0 +1,2 @@
+export * from "./useGetMarketOrder";
+export * from "./useMarketOrderRealtime";

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

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { marketOrderAPI } from "../apis";
+
+export const useGetMarketOrder = (markets: string) => {
+  return useQuery({
+    queryKey: ["market-order", markets],
+    queryFn: () => marketOrderAPI(markets),
+
+    refetchInterval: 1000,
+  });
+};

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

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { createClient } from "@/shared";
+
+import { OrderbookUnit } from "../types";
+
+export interface MarketOrderRealtimeData {
+  market: string;
+  orderbook_units: OrderbookUnit[];
+  timestamp: number;
+}
+
+export const useMarketOrderRealtime = (market: string) => {
+  const [data, setData] = useState<MarketOrderRealtimeData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const supabase = createClient();
+
+    // 초기 데이터 로드
+    const fetchInitialData = async () => {
+      try {
+        const { data: marketData, error: fetchError } = await supabase
+          .from("market_orders")
+          .select("*")
+          .eq("market", market)
+          .single();
+
+        if (fetchError) {
+          if (fetchError.code !== "PGRST116") {
+            // 데이터가 없는 경우가 아니라면 에러 처리
+            throw fetchError;
+          }
+        } else if (marketData) {
+          setData({
+            market: marketData.market,
+            orderbook_units: marketData.orderbook_units as OrderbookUnit[],
+            timestamp: marketData.timestamp,
+          });
+        }
+        setIsLoading(false);
+      } catch (err) {
+        setError(err as Error);
+        setIsLoading(false);
+      }
+    };
+
+    fetchInitialData();
+
+    // Realtime 구독 설정
+    const channel = supabase
+      .channel(`market_orders:${market}`)
+      .on(
+        "postgres_changes",
+        {
+          event: "*",
+          schema: "public",
+          table: "market_orders",
+          filter: `market=eq.${market}`,
+        },
+        (payload) => {
+          if (payload.eventType === "INSERT" || payload.eventType === "UPDATE") {
+            const newData = payload.new as {
+              market: string;
+              orderbook_units: unknown;
+              timestamp: number;
+            };
+
+            setData({
+              market: newData.market,
+              orderbook_units: newData.orderbook_units as OrderbookUnit[],
+              timestamp: newData.timestamp,
+            });
+          }
+        },
+      )
+      .subscribe();
+
+    // Cleanup
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [market]);
+
+  return { data, isLoading, error };
+};

src/entities/market/model/index.ts

@@ -1,2 +1,3 @@
 export * from "./apis";
 export * from "./types";
+export * from "./hooks";

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

@@ -1 +1,2 @@
 export * from "./market-info.type";
+export * from "./orderbook-units.type";

src/entities/market/model/types/orderbook-units.type.ts

@@ -0,0 +1,6 @@
+export type OrderbookUnit = {
+  ask_price: number;
+  bid_price: number;
+  ask_size: number;
+  bid_size: number;
+};