1000 lines
37 KiB
TypeScript
1000 lines
37 KiB
TypeScript
"use client";
|
|
|
|
import { FormEvent, useCallback, useEffect, useRef, useState, useTransition } from "react";
|
|
import { Activity, Search, ShieldCheck, TrendingDown, TrendingUp } from "lucide-react";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
useKisRuntimeStore,
|
|
type KisRuntimeCredentials,
|
|
} from "@/features/dashboard/store/use-kis-runtime-store";
|
|
import type {
|
|
DashboardMarketPhase,
|
|
DashboardKisRevokeResponse,
|
|
DashboardPriceSource,
|
|
DashboardKisValidateResponse,
|
|
DashboardKisWsApprovalResponse,
|
|
DashboardStockItem,
|
|
DashboardStockOverviewResponse,
|
|
DashboardStockSearchItem,
|
|
DashboardStockSearchResponse,
|
|
StockCandlePoint,
|
|
} from "@/features/dashboard/types/dashboard.types";
|
|
|
|
/**
|
|
* @file features/dashboard/components/dashboard-main.tsx
|
|
* @description 대시보드 메인 UI(검색/시세/차트)
|
|
*/
|
|
|
|
const PRICE_FORMATTER = new Intl.NumberFormat("ko-KR");
|
|
|
|
function formatPrice(value: number) {
|
|
return `${PRICE_FORMATTER.format(value)}원`;
|
|
}
|
|
|
|
function formatVolume(value: number) {
|
|
return `${PRICE_FORMATTER.format(value)}주`;
|
|
}
|
|
|
|
function getPriceSourceLabel(source: DashboardPriceSource, marketPhase: DashboardMarketPhase) {
|
|
switch (source) {
|
|
case "inquire-overtime-price":
|
|
return "시간외 현재가(inquire-overtime-price)";
|
|
case "inquire-ccnl":
|
|
return marketPhase === "afterHours"
|
|
? "체결가 폴백(inquire-ccnl)"
|
|
: "체결가(inquire-ccnl)";
|
|
default:
|
|
return "현재가(inquire-price)";
|
|
}
|
|
}
|
|
|
|
function getMarketPhaseLabel(marketPhase: DashboardMarketPhase) {
|
|
return marketPhase === "regular" ? "장중(한국시간 09:00~15:30)" : "장외/휴장";
|
|
}
|
|
|
|
/**
|
|
* 주가 라인 차트(SVG)
|
|
*/
|
|
function StockLineChart({ candles }: { candles: StockCandlePoint[] }) {
|
|
const chart = (() => {
|
|
const width = 760;
|
|
const height = 280;
|
|
const paddingX = 24;
|
|
const paddingY = 20;
|
|
const plotWidth = width - paddingX * 2;
|
|
const plotHeight = height - paddingY * 2;
|
|
|
|
const prices = candles.map((item) => item.price);
|
|
const minPrice = Math.min(...prices);
|
|
const maxPrice = Math.max(...prices);
|
|
const range = Math.max(maxPrice - minPrice, 1);
|
|
|
|
const points = candles.map((item, index) => {
|
|
const x = paddingX + (index / Math.max(candles.length - 1, 1)) * plotWidth;
|
|
const y = paddingY + ((maxPrice - item.price) / range) * plotHeight;
|
|
return { x, y };
|
|
});
|
|
|
|
const linePoints = points.map((point) => `${point.x},${point.y}`).join(" ");
|
|
const firstPoint = points[0];
|
|
const lastPoint = points[points.length - 1];
|
|
const areaPoints = `${linePoints} ${lastPoint.x},${height - paddingY} ${firstPoint.x},${height - paddingY}`;
|
|
|
|
return { width, height, paddingX, paddingY, minPrice, maxPrice, linePoints, areaPoints };
|
|
})();
|
|
|
|
return (
|
|
<div className="h-[300px] w-full">
|
|
<svg viewBox={`0 0 ${chart.width} ${chart.height}`} className="h-full w-full">
|
|
<defs>
|
|
<linearGradient id="priceAreaGradient" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="var(--color-brand-500)" stopOpacity="0.35" />
|
|
<stop offset="100%" stopColor="var(--color-brand-500)" stopOpacity="0.02" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<line
|
|
x1={chart.paddingX}
|
|
y1={chart.paddingY}
|
|
x2={chart.width - chart.paddingX}
|
|
y2={chart.paddingY}
|
|
stroke="currentColor"
|
|
className="text-border"
|
|
/>
|
|
<line
|
|
x1={chart.paddingX}
|
|
y1={chart.height / 2}
|
|
x2={chart.width - chart.paddingX}
|
|
y2={chart.height / 2}
|
|
stroke="currentColor"
|
|
className="text-border/70"
|
|
/>
|
|
<line
|
|
x1={chart.paddingX}
|
|
y1={chart.height - chart.paddingY}
|
|
x2={chart.width - chart.paddingX}
|
|
y2={chart.height - chart.paddingY}
|
|
stroke="currentColor"
|
|
className="text-border"
|
|
/>
|
|
|
|
<polygon points={chart.areaPoints} fill="url(#priceAreaGradient)" />
|
|
<polyline
|
|
points={chart.linePoints}
|
|
fill="none"
|
|
stroke="var(--color-brand-600)"
|
|
strokeWidth={3}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
<div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
|
|
<span>{candles[0]?.time}</span>
|
|
<span>저가 {formatPrice(chart.minPrice)}</span>
|
|
<span>고가 {formatPrice(chart.maxPrice)}</span>
|
|
<span>{candles[candles.length - 1]?.time}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PriceStat({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="rounded-xl border border-border/70 bg-background/70 p-3">
|
|
<p className="text-xs text-muted-foreground">{label}</p>
|
|
<p className="mt-1 text-sm font-semibold text-foreground">{value}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
async function fetchStockSearch(keyword: string) {
|
|
const response = await fetch(`/api/kis/domestic/search?q=${encodeURIComponent(keyword)}`, {
|
|
cache: "no-store",
|
|
});
|
|
|
|
const payload = (await response.json()) as DashboardStockSearchResponse | { error?: string };
|
|
|
|
if (!response.ok) {
|
|
throw new Error("error" in payload ? payload.error : "종목 검색 중 오류가 발생했습니다.");
|
|
}
|
|
|
|
return payload as DashboardStockSearchResponse;
|
|
}
|
|
|
|
async function fetchStockOverview(symbol: string, credentials: KisRuntimeCredentials) {
|
|
const response = await fetch(`/api/kis/domestic/overview?symbol=${encodeURIComponent(symbol)}`, {
|
|
method: "GET",
|
|
headers: {
|
|
"x-kis-app-key": credentials.appKey,
|
|
"x-kis-app-secret": credentials.appSecret,
|
|
"x-kis-trading-env": credentials.tradingEnv,
|
|
},
|
|
cache: "no-store",
|
|
});
|
|
|
|
const payload = (await response.json()) as DashboardStockOverviewResponse | { error?: string };
|
|
|
|
if (!response.ok) {
|
|
throw new Error("error" in payload ? payload.error : "종목 조회 중 오류가 발생했습니다.");
|
|
}
|
|
|
|
return payload as DashboardStockOverviewResponse;
|
|
}
|
|
|
|
async function validateKisCredentials(credentials: KisRuntimeCredentials) {
|
|
const response = await fetch("/api/kis/validate", {
|
|
method: "POST",
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
body: JSON.stringify(credentials),
|
|
cache: "no-store",
|
|
});
|
|
|
|
const payload = (await response.json()) as DashboardKisValidateResponse;
|
|
|
|
if (!response.ok || !payload.ok) {
|
|
throw new Error(payload.message || "API 키 검증에 실패했습니다.");
|
|
}
|
|
|
|
return payload;
|
|
}
|
|
|
|
/**
|
|
* KIS 접근토큰 폐기 요청
|
|
* @param credentials 검증 완료된 KIS 키
|
|
* @returns 폐기 응답
|
|
* @see app/api/kis/revoke/route.ts POST - revokeP 폐기 프록시
|
|
*/
|
|
async function revokeKisCredentials(credentials: KisRuntimeCredentials) {
|
|
const response = await fetch("/api/kis/revoke", {
|
|
method: "POST",
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
body: JSON.stringify(credentials),
|
|
cache: "no-store",
|
|
});
|
|
|
|
const payload = (await response.json()) as DashboardKisRevokeResponse;
|
|
|
|
if (!response.ok || !payload.ok) {
|
|
throw new Error(payload.message || "API 키 접근 폐기에 실패했습니다.");
|
|
}
|
|
|
|
return payload;
|
|
}
|
|
|
|
const KIS_REALTIME_TR_ID_REAL = "H0UNCNT0";
|
|
const KIS_REALTIME_TR_ID_MOCK = "H0STCNT0";
|
|
|
|
function resolveRealtimeTrId(tradingEnv: KisRuntimeCredentials["tradingEnv"]) {
|
|
return tradingEnv === "mock" ? KIS_REALTIME_TR_ID_MOCK : KIS_REALTIME_TR_ID_REAL;
|
|
}
|
|
|
|
/**
|
|
* KIS 실시간 웹소켓 승인키를 발급받습니다.
|
|
* @param credentials 검증 완료된 KIS 키
|
|
* @returns approval key + ws url
|
|
* @see app/api/kis/ws/approval/route.ts POST - Approval 발급 프록시
|
|
*/
|
|
async function fetchKisWebSocketApproval(credentials: KisRuntimeCredentials) {
|
|
const response = await fetch("/api/kis/ws/approval", {
|
|
method: "POST",
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
body: JSON.stringify(credentials),
|
|
cache: "no-store",
|
|
});
|
|
|
|
const payload = (await response.json()) as DashboardKisWsApprovalResponse;
|
|
if (!response.ok || !payload.ok || !payload.approvalKey || !payload.wsUrl) {
|
|
throw new Error(payload.message || "KIS 실시간 웹소켓 승인키 발급에 실패했습니다.");
|
|
}
|
|
|
|
return payload;
|
|
}
|
|
|
|
/**
|
|
* KIS 실시간 체결가 구독/해제 메시지를 생성합니다.
|
|
* @param approvalKey websocket 승인키
|
|
* @param symbol 종목코드
|
|
* @param trType "1"(구독) | "2"(해제)
|
|
* @returns websocket 요청 메시지
|
|
* @see https://github.com/koreainvestment/open-trading-api
|
|
*/
|
|
function buildKisRealtimeMessage(
|
|
approvalKey: string,
|
|
symbol: string,
|
|
trId: string,
|
|
trType: "1" | "2",
|
|
) {
|
|
return {
|
|
header: {
|
|
approval_key: approvalKey,
|
|
custtype: "P",
|
|
tr_type: trType,
|
|
"content-type": "utf-8",
|
|
},
|
|
body: {
|
|
input: {
|
|
tr_id: trId,
|
|
tr_key: symbol,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
interface KisRealtimeTick {
|
|
point: StockCandlePoint;
|
|
price: number;
|
|
accumulatedVolume: number;
|
|
tickTime: string;
|
|
}
|
|
|
|
/**
|
|
* KIS 실시간 체결가 원문을 차트 포인트로 변환합니다.
|
|
* @param raw websocket 수신 원문
|
|
* @param expectedSymbol 현재 선택 종목코드
|
|
* @returns 실시간 포인트 또는 null
|
|
*/
|
|
function parseKisRealtimeTick(raw: string, expectedSymbol: string, expectedTrId: string): KisRealtimeTick | null {
|
|
if (!/^([01])\|/.test(raw)) return null;
|
|
|
|
const parts = raw.split("|");
|
|
if (parts.length < 4) return null;
|
|
if (parts[1] !== expectedTrId) return null;
|
|
|
|
const tickCount = Number(parts[2] ?? "1");
|
|
const values = parts[3].split("^");
|
|
const isBatch = Number.isInteger(tickCount) && tickCount > 1 && values.length % tickCount === 0;
|
|
const fieldsPerTick = isBatch ? values.length / tickCount : values.length;
|
|
const baseIndex = isBatch ? (tickCount - 1) * fieldsPerTick : 0;
|
|
const symbol = values[baseIndex];
|
|
const hhmmss = values[baseIndex + 1];
|
|
const price = Number((values[baseIndex + 2] ?? "").replaceAll(",", "").trim());
|
|
const accumulatedVolume = Number((values[baseIndex + 13] ?? "").replaceAll(",", "").trim());
|
|
|
|
if (symbol !== expectedSymbol) return null;
|
|
if (!Number.isFinite(price) || price <= 0) return null;
|
|
|
|
return {
|
|
point: {
|
|
time: formatRealtimeTickTime(hhmmss),
|
|
price,
|
|
},
|
|
price,
|
|
accumulatedVolume: Number.isFinite(accumulatedVolume) && accumulatedVolume > 0 ? accumulatedVolume : 0,
|
|
tickTime: hhmmss ?? "",
|
|
};
|
|
}
|
|
|
|
function formatRealtimeTickTime(hhmmss?: string) {
|
|
if (!hhmmss || hhmmss.length !== 6) return "실시간";
|
|
return `${hhmmss.slice(0, 2)}:${hhmmss.slice(2, 4)}:${hhmmss.slice(4, 6)}`;
|
|
}
|
|
|
|
function appendRealtimeTick(prev: StockCandlePoint[], next: StockCandlePoint) {
|
|
if (prev.length === 0) return [next];
|
|
|
|
const last = prev[prev.length - 1];
|
|
if (last.time === next.time) {
|
|
return [...prev.slice(0, -1), next];
|
|
}
|
|
|
|
return [...prev, next].slice(-80);
|
|
}
|
|
|
|
function toTickOrderValue(hhmmss?: string) {
|
|
if (!hhmmss || !/^\d{6}$/.test(hhmmss)) return -1;
|
|
return Number(hhmmss);
|
|
}
|
|
|
|
/**
|
|
* 대시보드 메인 화면
|
|
*/
|
|
export function DashboardMain() {
|
|
// [State] KIS 키 입력/검증 상태(zustand + persist)
|
|
const {
|
|
kisTradingEnvInput,
|
|
kisAppKeyInput,
|
|
kisAppSecretInput,
|
|
verifiedCredentials,
|
|
isKisVerified,
|
|
tradingEnv,
|
|
setKisTradingEnvInput,
|
|
setKisAppKeyInput,
|
|
setKisAppSecretInput,
|
|
setVerifiedKisSession,
|
|
invalidateKisVerification,
|
|
clearKisRuntimeSession,
|
|
} = useKisRuntimeStore(
|
|
useShallow((state) => ({
|
|
kisTradingEnvInput: state.kisTradingEnvInput,
|
|
kisAppKeyInput: state.kisAppKeyInput,
|
|
kisAppSecretInput: state.kisAppSecretInput,
|
|
verifiedCredentials: state.verifiedCredentials,
|
|
isKisVerified: state.isKisVerified,
|
|
tradingEnv: state.tradingEnv,
|
|
setKisTradingEnvInput: state.setKisTradingEnvInput,
|
|
setKisAppKeyInput: state.setKisAppKeyInput,
|
|
setKisAppSecretInput: state.setKisAppSecretInput,
|
|
setVerifiedKisSession: state.setVerifiedKisSession,
|
|
invalidateKisVerification: state.invalidateKisVerification,
|
|
clearKisRuntimeSession: state.clearKisRuntimeSession,
|
|
})),
|
|
);
|
|
|
|
// [State] 검증 상태 메시지
|
|
const [kisStatusMessage, setKisStatusMessage] = useState<string | null>(null);
|
|
const [kisStatusError, setKisStatusError] = useState<string | null>(null);
|
|
|
|
// [State] 검색/선택 데이터
|
|
const [keyword, setKeyword] = useState("삼성전자");
|
|
const [searchResults, setSearchResults] = useState<DashboardStockSearchItem[]>([]);
|
|
const [selectedStock, setSelectedStock] = useState<DashboardStockItem | null>(null);
|
|
const [selectedOverviewMeta, setSelectedOverviewMeta] = useState<{
|
|
priceSource: DashboardPriceSource;
|
|
marketPhase: DashboardMarketPhase;
|
|
fetchedAt: string;
|
|
} | null>(null);
|
|
const [realtimeCandles, setRealtimeCandles] = useState<StockCandlePoint[]>([]);
|
|
const [isRealtimeConnected, setIsRealtimeConnected] = useState(false);
|
|
const [realtimeError, setRealtimeError] = useState<string | null>(null);
|
|
const [lastRealtimeTickAt, setLastRealtimeTickAt] = useState<number | null>(null);
|
|
const [realtimeTickCount, setRealtimeTickCount] = useState(0);
|
|
|
|
// [State] 영역별 에러
|
|
const [searchError, setSearchError] = useState<string | null>(null);
|
|
const [overviewError, setOverviewError] = useState<string | null>(null);
|
|
|
|
// [State] 비동기 전환 상태
|
|
const [isValidatingKis, startValidateTransition] = useTransition();
|
|
const [isRevokingKis, startRevokeTransition] = useTransition();
|
|
const [isSearching, startSearchTransition] = useTransition();
|
|
const [isLoadingOverview, startOverviewTransition] = useTransition();
|
|
|
|
const realtimeSocketRef = useRef<WebSocket | null>(null);
|
|
const realtimeApprovalKeyRef = useRef<string | null>(null);
|
|
const lastRealtimeTickOrderRef = useRef<number>(-1);
|
|
const isPositive = (selectedStock?.change ?? 0) >= 0;
|
|
const chartCandles =
|
|
isRealtimeConnected && realtimeCandles.length > 0 ? realtimeCandles : (selectedStock?.candles ?? []);
|
|
const apiPriceSourceLabel = selectedOverviewMeta
|
|
? getPriceSourceLabel(selectedOverviewMeta.priceSource, selectedOverviewMeta.marketPhase)
|
|
: null;
|
|
const realtimeTrId = verifiedCredentials ? resolveRealtimeTrId(verifiedCredentials.tradingEnv) : null;
|
|
const effectivePriceSourceLabel =
|
|
isRealtimeConnected && lastRealtimeTickAt
|
|
? `실시간 체결(WebSocket ${realtimeTrId ?? KIS_REALTIME_TR_ID_REAL})`
|
|
: apiPriceSourceLabel;
|
|
|
|
useEffect(() => {
|
|
setRealtimeCandles([]);
|
|
setIsRealtimeConnected(false);
|
|
setRealtimeError(null);
|
|
setLastRealtimeTickAt(null);
|
|
setRealtimeTickCount(0);
|
|
lastRealtimeTickOrderRef.current = -1;
|
|
}, [selectedStock?.symbol]);
|
|
|
|
useEffect(() => {
|
|
if (!isRealtimeConnected || lastRealtimeTickAt) return;
|
|
|
|
const noTickTimer = window.setTimeout(() => {
|
|
setRealtimeError("실시간 연결은 되었지만 체결 데이터가 없습니다. 장중(09:00~15:30)인지 확인해 주세요.");
|
|
}, 8000);
|
|
|
|
return () => {
|
|
window.clearTimeout(noTickTimer);
|
|
};
|
|
}, [isRealtimeConnected, lastRealtimeTickAt]);
|
|
|
|
useEffect(() => {
|
|
const symbol = selectedStock?.symbol;
|
|
|
|
if (!symbol || !isKisVerified || !verifiedCredentials) {
|
|
setIsRealtimeConnected(false);
|
|
setRealtimeError(null);
|
|
setRealtimeTickCount(0);
|
|
lastRealtimeTickOrderRef.current = -1;
|
|
realtimeSocketRef.current?.close();
|
|
realtimeSocketRef.current = null;
|
|
realtimeApprovalKeyRef.current = null;
|
|
return;
|
|
}
|
|
|
|
let disposed = false;
|
|
let socket: WebSocket | null = null;
|
|
|
|
const realtimeTrId = resolveRealtimeTrId(verifiedCredentials.tradingEnv);
|
|
|
|
const connectKisRealtimePrice = async () => {
|
|
try {
|
|
setRealtimeError(null);
|
|
setIsRealtimeConnected(false);
|
|
|
|
const approval = await fetchKisWebSocketApproval(verifiedCredentials);
|
|
if (disposed) return;
|
|
|
|
realtimeApprovalKeyRef.current = approval.approvalKey ?? null;
|
|
socket = new WebSocket(`${approval.wsUrl}/tryitout`);
|
|
realtimeSocketRef.current = socket;
|
|
|
|
socket.onopen = () => {
|
|
if (disposed || !realtimeApprovalKeyRef.current) return;
|
|
|
|
const subscribeMessage = buildKisRealtimeMessage(realtimeApprovalKeyRef.current, symbol, realtimeTrId, "1");
|
|
socket?.send(JSON.stringify(subscribeMessage));
|
|
setIsRealtimeConnected(true);
|
|
};
|
|
|
|
socket.onmessage = (event) => {
|
|
if (disposed || typeof event.data !== "string") return;
|
|
|
|
const tick = parseKisRealtimeTick(event.data, symbol, realtimeTrId);
|
|
if (!tick) return;
|
|
|
|
// 지연 도착으로 시간이 역행하는 틱은 무시해 차트 흔들림을 줄입니다.
|
|
const nextTickOrder = toTickOrderValue(tick.tickTime);
|
|
if (nextTickOrder > 0 && lastRealtimeTickOrderRef.current > nextTickOrder) {
|
|
return;
|
|
}
|
|
if (nextTickOrder > 0) {
|
|
lastRealtimeTickOrderRef.current = nextTickOrder;
|
|
}
|
|
|
|
setRealtimeError(null);
|
|
setLastRealtimeTickAt(Date.now());
|
|
setRealtimeTickCount((prev) => prev + 1);
|
|
setRealtimeCandles((prev) => appendRealtimeTick(prev, tick.point));
|
|
|
|
// 실시간 체결가를 카드 현재가/등락/거래량에도 반영합니다.
|
|
setSelectedStock((prev) => {
|
|
if (!prev || prev.symbol !== symbol) return prev;
|
|
|
|
const nextPrice = tick.price;
|
|
const nextChange = nextPrice - prev.prevClose;
|
|
const nextChangeRate = prev.prevClose > 0 ? (nextChange / prev.prevClose) * 100 : prev.changeRate;
|
|
const nextHigh = prev.high > 0 ? Math.max(prev.high, nextPrice) : nextPrice;
|
|
const nextLow = prev.low > 0 ? Math.min(prev.low, nextPrice) : nextPrice;
|
|
|
|
return {
|
|
...prev,
|
|
currentPrice: nextPrice,
|
|
change: nextChange,
|
|
changeRate: nextChangeRate,
|
|
high: nextHigh,
|
|
low: nextLow,
|
|
volume: tick.accumulatedVolume > 0 ? tick.accumulatedVolume : prev.volume,
|
|
};
|
|
});
|
|
};
|
|
|
|
socket.onerror = () => {
|
|
if (disposed) return;
|
|
setIsRealtimeConnected(false);
|
|
setRealtimeError("실시간 연결 중 오류가 발생했습니다.");
|
|
};
|
|
|
|
socket.onclose = () => {
|
|
if (disposed) return;
|
|
setIsRealtimeConnected(false);
|
|
};
|
|
} catch (error) {
|
|
if (disposed) return;
|
|
const message =
|
|
error instanceof Error ? error.message : "실시간 웹소켓 초기화 중 오류가 발생했습니다.";
|
|
setRealtimeError(message);
|
|
setIsRealtimeConnected(false);
|
|
}
|
|
};
|
|
|
|
void connectKisRealtimePrice();
|
|
|
|
return () => {
|
|
disposed = true;
|
|
setIsRealtimeConnected(false);
|
|
|
|
const approvalKey = realtimeApprovalKeyRef.current;
|
|
if (socket?.readyState === WebSocket.OPEN && approvalKey) {
|
|
const unsubscribeMessage = buildKisRealtimeMessage(approvalKey, symbol, realtimeTrId, "2");
|
|
socket.send(JSON.stringify(unsubscribeMessage));
|
|
}
|
|
|
|
socket?.close();
|
|
if (realtimeSocketRef.current === socket) {
|
|
realtimeSocketRef.current = null;
|
|
}
|
|
realtimeApprovalKeyRef.current = null;
|
|
};
|
|
}, [
|
|
isKisVerified,
|
|
selectedStock?.symbol,
|
|
verifiedCredentials,
|
|
]);
|
|
|
|
const loadOverview = useCallback(
|
|
async (symbol: string, credentials: KisRuntimeCredentials) => {
|
|
try {
|
|
setOverviewError(null);
|
|
|
|
const data = await fetchStockOverview(symbol, credentials);
|
|
setSelectedStock(data.stock);
|
|
setSelectedOverviewMeta({
|
|
priceSource: data.priceSource,
|
|
marketPhase: data.marketPhase,
|
|
fetchedAt: data.fetchedAt,
|
|
});
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "종목 조회 중 오류가 발생했습니다.";
|
|
setOverviewError(message);
|
|
setSelectedOverviewMeta(null);
|
|
}
|
|
},
|
|
[],
|
|
);
|
|
|
|
const loadSearch = useCallback(
|
|
async (nextKeyword: string, credentials: KisRuntimeCredentials, pickFirst = false) => {
|
|
try {
|
|
setSearchError(null);
|
|
|
|
const data = await fetchStockSearch(nextKeyword);
|
|
setSearchResults(data.items);
|
|
|
|
if (pickFirst && data.items[0]) {
|
|
await loadOverview(data.items[0].symbol, credentials);
|
|
}
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "종목 검색 중 오류가 발생했습니다.";
|
|
setSearchError(message);
|
|
}
|
|
},
|
|
[loadOverview],
|
|
);
|
|
|
|
function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
|
|
if (!isKisVerified || !verifiedCredentials) {
|
|
setSearchError("상단에서 API 키 검증을 먼저 완료해 주세요.");
|
|
return;
|
|
}
|
|
|
|
startSearchTransition(() => {
|
|
void loadSearch(keyword, verifiedCredentials, true);
|
|
});
|
|
}
|
|
|
|
function handlePickStock(item: DashboardStockSearchItem) {
|
|
if (!isKisVerified || !verifiedCredentials) {
|
|
setSearchError("상단에서 API 키 검증을 먼저 완료해 주세요.");
|
|
return;
|
|
}
|
|
|
|
setKeyword(item.name);
|
|
|
|
startOverviewTransition(() => {
|
|
void loadOverview(item.symbol, verifiedCredentials);
|
|
});
|
|
}
|
|
|
|
function handleValidateKis() {
|
|
startValidateTransition(() => {
|
|
void (async () => {
|
|
try {
|
|
setKisStatusError(null);
|
|
setKisStatusMessage(null);
|
|
|
|
const trimmedAppKey = kisAppKeyInput.trim();
|
|
const trimmedAppSecret = kisAppSecretInput.trim();
|
|
|
|
if (!trimmedAppKey || !trimmedAppSecret) {
|
|
throw new Error("앱 키와 앱 시크릿을 모두 입력해 주세요.");
|
|
}
|
|
|
|
const credentials: KisRuntimeCredentials = {
|
|
appKey: trimmedAppKey,
|
|
appSecret: trimmedAppSecret,
|
|
tradingEnv: kisTradingEnvInput,
|
|
};
|
|
|
|
const result = await validateKisCredentials(credentials);
|
|
|
|
setVerifiedKisSession(credentials, result.tradingEnv);
|
|
setKisStatusMessage(
|
|
`${result.message} (${result.tradingEnv === "real" ? "실전" : "모의"} 모드)`,
|
|
);
|
|
|
|
startSearchTransition(() => {
|
|
void loadSearch(keyword || "삼성전자", credentials, true);
|
|
});
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "API 키 검증 중 오류가 발생했습니다.";
|
|
|
|
invalidateKisVerification();
|
|
setSearchResults([]);
|
|
setSelectedStock(null);
|
|
setSelectedOverviewMeta(null);
|
|
setKisStatusError(message);
|
|
}
|
|
})();
|
|
});
|
|
}
|
|
|
|
function handleRevokeKis() {
|
|
if (!verifiedCredentials) {
|
|
setKisStatusError("먼저 API 키 검증을 완료해 주세요.");
|
|
return;
|
|
}
|
|
|
|
startRevokeTransition(() => {
|
|
void (async () => {
|
|
try {
|
|
// 접근 폐기 전, 화면 상태 메시지를 초기화합니다.
|
|
setKisStatusError(null);
|
|
setKisStatusMessage(null);
|
|
|
|
const result = await revokeKisCredentials(verifiedCredentials);
|
|
|
|
// 로그아웃처럼 검증/조회 상태를 초기화합니다.
|
|
clearKisRuntimeSession(result.tradingEnv);
|
|
setSearchResults([]);
|
|
setSelectedStock(null);
|
|
setSelectedOverviewMeta(null);
|
|
setSearchError(null);
|
|
setOverviewError(null);
|
|
setKisStatusMessage(`${result.message} (${result.tradingEnv === "real" ? "실전" : "모의"} 모드)`);
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "API 키 접근 폐기 중 오류가 발생했습니다.";
|
|
setKisStatusError(message);
|
|
}
|
|
})();
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
{/* ========== KIS KEY VERIFY SECTION ========== */}
|
|
<section>
|
|
<Card className="border-brand-200 bg-gradient-to-r from-brand-50/60 to-background">
|
|
<CardHeader>
|
|
<CardTitle>KIS API 키 연결</CardTitle>
|
|
<CardDescription>
|
|
대시보드 사용 전, 개인 API 키를 입력하고 검증해 주세요. 검증에 성공해야 시세 조회가 동작합니다.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<div className="md:col-span-1">
|
|
<label className="mb-1 block text-xs text-muted-foreground">거래 모드</label>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
variant={kisTradingEnvInput === "real" ? "default" : "outline"}
|
|
className={cn("flex-1", kisTradingEnvInput === "real" ? "bg-brand-600 hover:bg-brand-700" : "")}
|
|
onClick={() => setKisTradingEnvInput("real")}
|
|
>
|
|
실전
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant={kisTradingEnvInput === "mock" ? "default" : "outline"}
|
|
className={cn("flex-1", kisTradingEnvInput === "mock" ? "bg-brand-600 hover:bg-brand-700" : "")}
|
|
onClick={() => setKisTradingEnvInput("mock")}
|
|
>
|
|
모의
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:col-span-1">
|
|
<label className="mb-1 block text-xs text-muted-foreground">KIS App Key</label>
|
|
<Input
|
|
type="password"
|
|
value={kisAppKeyInput}
|
|
onChange={(event) => setKisAppKeyInput(event.target.value)}
|
|
placeholder="앱 키 입력"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-1">
|
|
<label className="mb-1 block text-xs text-muted-foreground">KIS App Secret</label>
|
|
<Input
|
|
type="password"
|
|
value={kisAppSecretInput}
|
|
onChange={(event) => setKisAppSecretInput(event.target.value)}
|
|
placeholder="앱 시크릿 입력"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Button
|
|
type="button"
|
|
onClick={handleValidateKis}
|
|
disabled={isValidatingKis || !kisAppKeyInput.trim() || !kisAppSecretInput.trim()}
|
|
className="bg-brand-600 hover:bg-brand-700"
|
|
>
|
|
{isValidatingKis ? "검증 중..." : "API 키 검증"}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleRevokeKis}
|
|
disabled={isRevokingKis || !isKisVerified || !verifiedCredentials}
|
|
className="border-brand-200 text-brand-700 hover:bg-brand-50 hover:text-brand-800"
|
|
>
|
|
{isRevokingKis ? "폐기 중..." : "접근 폐기"}
|
|
</Button>
|
|
|
|
{isKisVerified ? (
|
|
<span className="rounded-full bg-brand-100 px-3 py-1 text-xs font-semibold text-brand-700">
|
|
검증 완료 ({tradingEnv === "real" ? "실전" : "모의"})
|
|
</span>
|
|
) : (
|
|
<span className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">미검증</span>
|
|
)}
|
|
</div>
|
|
|
|
{kisStatusError ? <p className="text-sm text-red-600">{kisStatusError}</p> : null}
|
|
{kisStatusMessage ? <p className="text-sm text-brand-700">{kisStatusMessage}</p> : null}
|
|
|
|
<div className="rounded-lg border border-brand-200 bg-brand-50/70 px-3 py-2 text-xs text-brand-800">
|
|
입력한 API 키는 새로고침 유지를 위해 현재 브라우저 저장소(zustand persist)에만 보관되며, 접근 폐기를 누르면 즉시 초기화됩니다.
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* ========== DASHBOARD TITLE SECTION ========== */}
|
|
<section>
|
|
<h2 className="text-3xl font-bold tracking-tight">국내주식 대시보드</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
종목명 검색, 현재가, 일자별 차트를 한 화면에서 확인합니다.
|
|
</p>
|
|
</section>
|
|
|
|
{/* ========== STOCK SEARCH SECTION ========== */}
|
|
<section>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>종목 검색</CardTitle>
|
|
<CardDescription>종목명 또는 종목코드(예: 삼성전자, 005930)로 검색할 수 있습니다.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<form onSubmit={handleSubmit} className="flex flex-col gap-3 md:flex-row">
|
|
<div className="relative flex-1">
|
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
value={keyword}
|
|
onChange={(event) => setKeyword(event.target.value)}
|
|
placeholder="종목명 / 종목코드 검색"
|
|
className="pl-9"
|
|
disabled={!isKisVerified}
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="md:min-w-28" disabled={!isKisVerified || isSearching || !keyword.trim()}>
|
|
{isSearching ? "검색 중..." : "검색"}
|
|
</Button>
|
|
</form>
|
|
|
|
{!isKisVerified ? (
|
|
<p className="text-xs text-muted-foreground">상단에서 API 키 검증을 완료해야 검색/시세 기능이 동작합니다.</p>
|
|
) : searchError ? (
|
|
<p className="text-sm text-red-600">{searchError}</p>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground">
|
|
{searchResults.length > 0
|
|
? `검색 결과 ${searchResults.length}개`
|
|
: "검색어를 입력하고 엔터를 누르면 종목이 표시됩니다."}
|
|
</p>
|
|
)}
|
|
|
|
<div className="grid gap-2 md:grid-cols-2 xl:grid-cols-5">
|
|
{searchResults.map((item) => {
|
|
const active = item.symbol === selectedStock?.symbol;
|
|
|
|
return (
|
|
<button
|
|
key={`${item.symbol}-${item.market}`}
|
|
type="button"
|
|
onClick={() => handlePickStock(item)}
|
|
className={cn(
|
|
"rounded-lg border px-3 py-2 text-left transition-colors",
|
|
active
|
|
? "border-brand-500 bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300"
|
|
: "border-border bg-background hover:bg-muted/60",
|
|
)}
|
|
disabled={!isKisVerified}
|
|
>
|
|
<p className="text-sm font-semibold">{item.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{item.symbol} · {item.market}
|
|
</p>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* ========== STOCK OVERVIEW SECTION ========== */}
|
|
<section className="grid gap-4 xl:grid-cols-3">
|
|
<Card className="xl:col-span-2">
|
|
<CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<CardTitle className="text-xl">{selectedStock?.name ?? "종목을 선택해 주세요"}</CardTitle>
|
|
<CardDescription>
|
|
{selectedStock ? `${selectedStock.symbol} · ${selectedStock.market}` : "선택된 종목이 없습니다."}
|
|
</CardDescription>
|
|
</div>
|
|
|
|
{selectedStock && (
|
|
<div
|
|
className={cn(
|
|
"inline-flex items-center gap-1 rounded-full px-3 py-1 text-sm font-semibold",
|
|
isPositive
|
|
? "bg-brand-50 text-brand-700 dark:bg-brand-900/35 dark:text-brand-300"
|
|
: "bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-300",
|
|
)}
|
|
>
|
|
{isPositive ? <TrendingUp className="h-4 w-4" /> : <TrendingDown className="h-4 w-4" />}
|
|
{isPositive ? "+" : ""}
|
|
{selectedStock.change.toLocaleString()} ({isPositive ? "+" : ""}
|
|
{selectedStock.changeRate.toFixed(2)}%)
|
|
</div>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
{overviewError ? (
|
|
<p className="text-sm text-red-600">{overviewError}</p>
|
|
) : !isKisVerified ? (
|
|
<p className="text-sm text-muted-foreground">상단에서 API 키 검증을 완료해 주세요.</p>
|
|
) : isLoadingOverview && !selectedStock ? (
|
|
<p className="text-sm text-muted-foreground">종목 데이터를 불러오는 중입니다...</p>
|
|
) : selectedStock ? (
|
|
<>
|
|
<p className="mb-4 text-3xl font-extrabold tracking-tight">{formatPrice(selectedStock.currentPrice)}</p>
|
|
{effectivePriceSourceLabel && selectedOverviewMeta ? (
|
|
<div className="mb-4 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
|
<span className="rounded-full border border-brand-200 bg-brand-50 px-2 py-1 text-brand-700">
|
|
현재가 소스: {effectivePriceSourceLabel}
|
|
</span>
|
|
<span className="rounded-full border border-border px-2 py-1">
|
|
구간: {getMarketPhaseLabel(selectedOverviewMeta.marketPhase)}
|
|
</span>
|
|
<span className="rounded-full border border-border px-2 py-1">
|
|
조회시각: {new Date(selectedOverviewMeta.fetchedAt).toLocaleTimeString("ko-KR")}
|
|
</span>
|
|
</div>
|
|
) : null}
|
|
<StockLineChart candles={chartCandles} />
|
|
{realtimeError ? <p className="mt-3 text-xs text-red-600">{realtimeError}</p> : null}
|
|
</>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">종목을 선택하면 시세와 차트가 표시됩니다.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">핵심 지표</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-2">
|
|
<PriceStat label="시가" value={formatPrice(selectedStock?.open ?? 0)} />
|
|
<PriceStat label="고가" value={formatPrice(selectedStock?.high ?? 0)} />
|
|
<PriceStat label="저가" value={formatPrice(selectedStock?.low ?? 0)} />
|
|
<PriceStat label="전일 종가" value={formatPrice(selectedStock?.prevClose ?? 0)} />
|
|
<PriceStat label="누적 거래량" value={formatVolume(selectedStock?.volume ?? 0)} />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">연동 상태</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-sm text-muted-foreground">
|
|
<div className="flex items-center gap-2">
|
|
<ShieldCheck className="h-4 w-4 text-brand-500" />
|
|
<p>국내주식 {tradingEnv === "real" ? "실전" : "모의"}투자 API 연결 완료</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Activity className={cn("h-4 w-4", isRealtimeConnected ? "text-brand-500" : "text-muted-foreground")} />
|
|
<p>
|
|
실시간 체결가 연결 상태:{" "}
|
|
{isRealtimeConnected ? "연결됨 (WebSocket)" : "대기 중 (일봉 차트 표시)"}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Activity className="h-4 w-4 text-muted-foreground" />
|
|
<p>마지막 실시간 수신: {lastRealtimeTickAt ? new Date(lastRealtimeTickAt).toLocaleTimeString("ko-KR") : "수신 전"}</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Activity className="h-4 w-4 text-muted-foreground" />
|
|
<p>실시간 틱 수신 수: {realtimeTickCount.toLocaleString("ko-KR")}건</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Activity className="h-4 w-4 text-brand-500" />
|
|
<p>다음 단계: 주문/리스크 제어 API 연결</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|