363 lines
13 KiB
TypeScript
363 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import { LoadingSpinner } from "@/components/ui/loading-spinner";
|
|
import { ActivitySection } from "@/features/dashboard/components/ActivitySection";
|
|
import { DashboardAccessGate } from "@/features/dashboard/components/DashboardAccessGate";
|
|
import { DashboardSkeleton } from "@/features/dashboard/components/DashboardSkeleton";
|
|
import { HoldingsList } from "@/features/dashboard/components/HoldingsList";
|
|
import { MarketSummary } from "@/features/dashboard/components/MarketSummary";
|
|
import { StatusHeader } from "@/features/dashboard/components/StatusHeader";
|
|
import { StockDetailPreview } from "@/features/dashboard/components/StockDetailPreview";
|
|
import { useDashboardData } from "@/features/dashboard/hooks/use-dashboard-data";
|
|
import { useMarketRealtime } from "@/features/dashboard/hooks/use-market-realtime";
|
|
import { useKisWebSocketStore } from "@/features/kis-realtime/stores/kisWebSocketStore";
|
|
import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
|
|
import { useHoldingsRealtime } from "@/features/dashboard/hooks/use-holdings-realtime";
|
|
import type {
|
|
DashboardBalanceSummary,
|
|
DashboardHoldingItem,
|
|
DashboardMarketIndexItem,
|
|
} from "@/features/dashboard/types/dashboard.types";
|
|
import type { KisRealtimeStockTick } from "@/features/dashboard/utils/kis-stock-realtime.utils";
|
|
|
|
/**
|
|
* @file DashboardContainer.tsx
|
|
* @description 대시보드 메인 레이아웃 및 데이터 통합 관리 컴포넌트
|
|
* @remarks
|
|
* - [레이어] Components / Container
|
|
* - [사용자 행동] 대시보드 진입 -> 전체 자산/시장 지수/보유 종목 확인 -> 특정 종목 선택 상세 확인
|
|
* - [데이터 흐름] API(REST/WS) -> Hooks(useDashboardData, useMarketRealtime, useHoldingsRealtime) -> UI 병합 -> 하위 컴포넌트 전파
|
|
* - [연관 파일] use-dashboard-data.ts, use-holdings-realtime.ts, StatusHeader.tsx, HoldingsList.tsx
|
|
* @author jihoon87.lee
|
|
*/
|
|
export function DashboardContainer() {
|
|
// [Store] KIS 런타임 설정 상태 (인증 여부, 접속 계좌, 웹소켓 정보 등)
|
|
const {
|
|
verifiedCredentials,
|
|
isKisVerified,
|
|
isKisProfileVerified,
|
|
verifiedAccountNo,
|
|
_hasHydrated,
|
|
wsApprovalKey,
|
|
wsUrl,
|
|
} = useKisRuntimeStore(
|
|
useShallow((state) => ({
|
|
verifiedCredentials: state.verifiedCredentials,
|
|
isKisVerified: state.isKisVerified,
|
|
isKisProfileVerified: state.isKisProfileVerified,
|
|
verifiedAccountNo: state.verifiedAccountNo,
|
|
_hasHydrated: state._hasHydrated,
|
|
wsApprovalKey: state.wsApprovalKey,
|
|
wsUrl: state.wsUrl,
|
|
})),
|
|
);
|
|
|
|
// KIS 접근 가능 여부 판단
|
|
const canAccess = isKisVerified && Boolean(verifiedCredentials);
|
|
|
|
// [Hooks] 기본적인 대시보드 데이터(잔고, 지수, 활동내역) 조회 및 선택 상태 관리
|
|
// @see use-dashboard-data.ts - 초기 데이터 로딩 및 폴링 처리
|
|
const {
|
|
activity,
|
|
balance,
|
|
indices: initialIndices,
|
|
selectedSymbol,
|
|
setSelectedSymbol,
|
|
isLoading,
|
|
isRefreshing,
|
|
activityError,
|
|
balanceError,
|
|
indicesError,
|
|
lastUpdatedAt,
|
|
refresh,
|
|
} = useDashboardData(canAccess ? verifiedCredentials : null);
|
|
|
|
// [Hooks] 시장 지수(코스피/코스닥) 실시간 웹소켓 데이터 구독
|
|
// @see use-market-realtime.ts - 웹소켓 연결 및 지수 파싱
|
|
const { realtimeIndices, isConnected: isWsConnected } = useMarketRealtime(
|
|
verifiedCredentials,
|
|
isKisVerified,
|
|
);
|
|
|
|
// [Hooks] 보유 종목 실시간 시세 웹소켓 데이터 구독
|
|
// @see use-holdings-realtime.ts - 보유 종목 리스트 기반 시세 업데이트
|
|
const { realtimeData: realtimeHoldings } = useHoldingsRealtime(
|
|
balance?.holdings ?? [],
|
|
);
|
|
const reconnectWebSocket = useKisWebSocketStore((state) => state.reconnect);
|
|
|
|
// [Step 1] REST API로 가져온 기본 지수 정보와 실시간 웹소켓 시세 병합
|
|
const indices = useMemo(() => {
|
|
if (initialIndices.length === 0) {
|
|
return buildRealtimeOnlyIndices(realtimeIndices);
|
|
}
|
|
|
|
return initialIndices.map((item) => {
|
|
const realtime = realtimeIndices[item.code];
|
|
if (!realtime) return item;
|
|
|
|
return {
|
|
...item,
|
|
price: realtime.price,
|
|
change: realtime.change,
|
|
changeRate: realtime.changeRate,
|
|
};
|
|
});
|
|
}, [initialIndices, realtimeIndices]);
|
|
|
|
// [Step 2] 초기 잔고 데이터와 실시간 보유 종목 시세를 병합하여 손익 재계산
|
|
const mergedHoldings = useMemo(
|
|
() => mergeHoldingsWithRealtime(balance?.holdings ?? [], realtimeHoldings),
|
|
[balance?.holdings, realtimeHoldings],
|
|
);
|
|
|
|
const isKisRestConnected = Boolean(
|
|
(balance && !balanceError) ||
|
|
(initialIndices.length > 0 && !indicesError) ||
|
|
(activity && !activityError),
|
|
);
|
|
const hasRealtimeStreaming =
|
|
Object.keys(realtimeIndices).length > 0 ||
|
|
Object.keys(realtimeHoldings).length > 0;
|
|
const isRealtimePending = Boolean(
|
|
wsApprovalKey && wsUrl && isWsConnected && !hasRealtimeStreaming,
|
|
);
|
|
const effectiveIndicesError = indices.length === 0 ? indicesError : null;
|
|
const indicesWarning =
|
|
indices.length > 0 && indicesError
|
|
? "지수 API 재요청 중입니다. 화면 값은 실시간/최근 성공 데이터입니다."
|
|
: null;
|
|
|
|
/**
|
|
* 대시보드 수동 새로고침 시 REST 조회 + 웹소켓 재연결을 함께 수행합니다.
|
|
* @remarks UI 흐름: StatusHeader/각 카드 다시 불러오기 버튼 -> handleRefreshAll -> REST 재조회 + WS 완전 종료 후 재연결
|
|
* @see features/dashboard/components/StatusHeader.tsx 상단 다시 불러오기 버튼
|
|
* @see features/kis-realtime/stores/kisWebSocketStore.ts reconnect
|
|
*/
|
|
const handleRefreshAll = async () => {
|
|
await Promise.allSettled([
|
|
refresh(),
|
|
reconnectWebSocket({ refreshApproval: false }),
|
|
]);
|
|
};
|
|
|
|
/**
|
|
* 실시간 보유종목 데이터를 기반으로 전체 자산 요약을 계산합니다.
|
|
* @returns 실시간 요약 데이터 (총자산, 손익, 평가금액 등)
|
|
*/
|
|
const mergedSummary = useMemo(
|
|
() => buildRealtimeSummary(balance?.summary ?? null, mergedHoldings),
|
|
[balance?.summary, mergedHoldings],
|
|
);
|
|
|
|
// [Step 3] 실시간 병합 데이터에서 현재 선택된 종목 정보를 추출
|
|
// @see StockDetailPreview.tsx - 선택된 종목의 상세 정보 표시
|
|
const realtimeSelectedHolding = useMemo(() => {
|
|
if (!selectedSymbol || mergedHoldings.length === 0) return null;
|
|
return (
|
|
mergedHoldings.find((item) => item.symbol === selectedSymbol) ?? null
|
|
);
|
|
}, [mergedHoldings, selectedSymbol]);
|
|
|
|
// 하이드레이션 이전에는 로딩 스피너 표시
|
|
if (!_hasHydrated) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-6">
|
|
<LoadingSpinner />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// KIS 인증이 되지 않은 경우 접근 제한 게이트 표시
|
|
if (!canAccess) {
|
|
return <DashboardAccessGate canAccess={canAccess} />;
|
|
}
|
|
|
|
// 데이터 로딩 중이며 아직 데이터가 없는 경우 스켈레톤 표시
|
|
if (isLoading && !balance && indices.length === 0) {
|
|
return <DashboardSkeleton />;
|
|
}
|
|
|
|
return (
|
|
<section className="mx-auto flex w-full max-w-7xl flex-col gap-4 p-4 md:p-6">
|
|
{/* ========== 상단 상태 영역: 계좌 연결 정보 및 새로고침 ========== */}
|
|
<StatusHeader
|
|
summary={mergedSummary}
|
|
isKisRestConnected={isKisRestConnected}
|
|
isWebSocketReady={Boolean(wsApprovalKey && wsUrl && isWsConnected)}
|
|
isRealtimePending={isRealtimePending}
|
|
isProfileVerified={isKisProfileVerified}
|
|
verifiedAccountNo={verifiedAccountNo}
|
|
isRefreshing={isRefreshing}
|
|
lastUpdatedAt={lastUpdatedAt}
|
|
onRefresh={() => {
|
|
void handleRefreshAll();
|
|
}}
|
|
/>
|
|
|
|
{/* ========== 메인 그리드 구성 ========== */}
|
|
<div className="grid gap-4 lg:grid-cols-[1.15fr_1fr]">
|
|
{/* 왼쪽 섹션: 보유 종목 목록 리스트 */}
|
|
<HoldingsList
|
|
holdings={mergedHoldings}
|
|
selectedSymbol={selectedSymbol}
|
|
isLoading={isLoading}
|
|
error={balanceError}
|
|
onRetry={() => {
|
|
void handleRefreshAll();
|
|
}}
|
|
onSelect={setSelectedSymbol}
|
|
/>
|
|
|
|
{/* 오른쪽 섹션: 시장 지수 요약 및 선택 종목 상세 정보 */}
|
|
<div className="grid gap-4">
|
|
{/* 시장 지수 현황 (코스피/코스닥) */}
|
|
<MarketSummary
|
|
items={indices}
|
|
isLoading={isLoading}
|
|
error={effectiveIndicesError}
|
|
warning={indicesWarning}
|
|
isRealtimePending={isRealtimePending}
|
|
onRetry={() => {
|
|
void handleRefreshAll();
|
|
}}
|
|
/>
|
|
|
|
{/* 선택된 종목의 실시간 상세 요약 정보 */}
|
|
<StockDetailPreview
|
|
holding={realtimeSelectedHolding}
|
|
totalAmount={mergedSummary?.totalAmount ?? 0}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ========== 하단 섹션: 최근 매매/충전 활동 내역 ========== */}
|
|
<ActivitySection
|
|
activity={activity}
|
|
isLoading={isLoading}
|
|
error={activityError}
|
|
onRetry={() => {
|
|
void handleRefreshAll();
|
|
}}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @description REST 지수 데이터가 없을 때 실시간 수신값만으로 코스피/코스닥 표시 데이터를 구성합니다.
|
|
* @param realtimeIndices 실시간 지수 맵
|
|
* @returns 화면 렌더링용 지수 배열
|
|
* @remarks UI 흐름: DashboardContainer -> buildRealtimeOnlyIndices -> MarketSummary 렌더링
|
|
* @see features/dashboard/hooks/use-market-realtime.ts 실시간 지수 수신 훅
|
|
*/
|
|
function buildRealtimeOnlyIndices(
|
|
realtimeIndices: Record<string, { price: number; change: number; changeRate: number }>,
|
|
) {
|
|
const baseItems: DashboardMarketIndexItem[] = [
|
|
{ market: "KOSPI", code: "0001", name: "코스피", price: 0, change: 0, changeRate: 0 },
|
|
{ market: "KOSDAQ", code: "1001", name: "코스닥", price: 0, change: 0, changeRate: 0 },
|
|
];
|
|
|
|
return baseItems
|
|
.map((item) => {
|
|
const realtime = realtimeIndices[item.code];
|
|
if (!realtime) return null;
|
|
return {
|
|
...item,
|
|
price: realtime.price,
|
|
change: realtime.change,
|
|
changeRate: realtime.changeRate,
|
|
} satisfies DashboardMarketIndexItem;
|
|
})
|
|
.filter((item): item is DashboardMarketIndexItem => Boolean(item));
|
|
}
|
|
|
|
/**
|
|
* @description 보유종목 리스트에 실시간 체결가를 병합해 현재가/평가금액/손익을 재계산합니다.
|
|
* @param holdings REST 기준 보유종목
|
|
* @param realtimeHoldings 종목별 실시간 체결 데이터
|
|
* @returns 병합된 보유종목 리스트
|
|
* @remarks UI 흐름: DashboardContainer -> mergeHoldingsWithRealtime -> HoldingsList/StockDetailPreview 반영
|
|
* @see features/dashboard/hooks/use-holdings-realtime.ts 보유종목 실시간 체결 구독
|
|
*/
|
|
function mergeHoldingsWithRealtime(
|
|
holdings: DashboardHoldingItem[],
|
|
realtimeHoldings: Record<string, KisRealtimeStockTick>,
|
|
) {
|
|
if (holdings.length === 0 || Object.keys(realtimeHoldings).length === 0) {
|
|
return holdings;
|
|
}
|
|
|
|
return holdings.map((item) => {
|
|
const tick = realtimeHoldings[item.symbol];
|
|
if (!tick) return item;
|
|
|
|
const currentPrice = tick.currentPrice;
|
|
const purchaseAmount = item.averagePrice * item.quantity;
|
|
const evaluationAmount = currentPrice * item.quantity;
|
|
const profitLoss = evaluationAmount - purchaseAmount;
|
|
const profitRate = purchaseAmount > 0 ? (profitLoss / purchaseAmount) * 100 : 0;
|
|
|
|
return {
|
|
...item,
|
|
currentPrice,
|
|
evaluationAmount,
|
|
profitLoss,
|
|
profitRate,
|
|
};
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @description 실시간 보유종목 기준으로 대시보드 요약(총자산/손익)을 일관되게 재계산합니다.
|
|
* @param summary REST API 요약 값
|
|
* @param holdings 실시간 병합된 보유종목
|
|
* @returns 재계산된 요약 값
|
|
* @remarks UI 흐름: DashboardContainer -> buildRealtimeSummary -> StatusHeader 카드 반영
|
|
* @see features/dashboard/components/StatusHeader.tsx 상단 요약 렌더링
|
|
*/
|
|
function buildRealtimeSummary(
|
|
summary: DashboardBalanceSummary | null,
|
|
holdings: DashboardHoldingItem[],
|
|
) {
|
|
if (!summary) return null;
|
|
if (holdings.length === 0) return summary;
|
|
|
|
const evaluationAmount = holdings.reduce(
|
|
(total, item) => total + item.evaluationAmount,
|
|
0,
|
|
);
|
|
const purchaseAmount = holdings.reduce(
|
|
(total, item) => total + item.averagePrice * item.quantity,
|
|
0,
|
|
);
|
|
const totalProfitLoss = evaluationAmount - purchaseAmount;
|
|
const totalProfitRate =
|
|
purchaseAmount > 0 ? (totalProfitLoss / purchaseAmount) * 100 : 0;
|
|
|
|
const evaluationDelta = evaluationAmount - summary.evaluationAmount;
|
|
const baseTotalAmount =
|
|
summary.apiReportedNetAssetAmount > 0
|
|
? summary.apiReportedNetAssetAmount
|
|
: summary.totalAmount;
|
|
|
|
// 실시간은 "기준 순자산 + 평가금 증감분"으로만 반영합니다.
|
|
const totalAmount = Math.max(baseTotalAmount + evaluationDelta, 0);
|
|
const netAssetAmount = totalAmount;
|
|
const cashBalance = Math.max(totalAmount - evaluationAmount, 0);
|
|
|
|
return {
|
|
...summary,
|
|
totalAmount,
|
|
netAssetAmount,
|
|
cashBalance,
|
|
evaluationAmount,
|
|
purchaseAmount,
|
|
totalProfitLoss,
|
|
totalProfitRate,
|
|
} satisfies DashboardBalanceSummary;
|
|
}
|