트레이딩창 UI 배치 및 UX 수정 및 기획서 추가
This commit is contained in:
311
features/trade/components/holdings/HoldingsPanel.tsx
Normal file
311
features/trade/components/holdings/HoldingsPanel.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { RefreshCw, TrendingDown, TrendingUp } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { fetchDashboardBalance } from "@/features/dashboard/apis/dashboard.api";
|
||||
import type {
|
||||
DashboardBalanceSummary,
|
||||
DashboardHoldingItem,
|
||||
} from "@/features/dashboard/types/dashboard.types";
|
||||
import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface HoldingsPanelProps {
|
||||
credentials: KisRuntimeCredentials;
|
||||
}
|
||||
|
||||
/** 천단위 포맷 */
|
||||
function fmt(v: number) {
|
||||
return Number.isFinite(v) ? v.toLocaleString("ko-KR") : "0";
|
||||
}
|
||||
|
||||
/** 수익률 색상 */
|
||||
function profitClass(v: number) {
|
||||
if (v > 0) return "text-red-500";
|
||||
if (v < 0) return "text-blue-600 dark:text-blue-400";
|
||||
return "text-muted-foreground";
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 매매창 하단에 보유 종목 및 평가손익 현황을 표시합니다.
|
||||
* @see features/trade/components/layout/TradeDashboardContent.tsx - holdingsPanel prop으로 DashboardLayout에 전달
|
||||
* @see features/dashboard/apis/dashboard.api.ts - fetchDashboardBalance API 호출
|
||||
*/
|
||||
export function HoldingsPanel({ credentials }: HoldingsPanelProps) {
|
||||
// [State] 잔고/보유종목 데이터
|
||||
const [summary, setSummary] = useState<DashboardBalanceSummary | null>(null);
|
||||
const [holdings, setHoldings] = useState<DashboardHoldingItem[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
|
||||
/**
|
||||
* UI 흐름: HoldingsPanel 마운트 or 새로고침 버튼 -> loadBalance -> fetchDashboardBalance API ->
|
||||
* 응답 -> summary/holdings 상태 업데이트 -> 테이블 렌더링
|
||||
*/
|
||||
const loadBalance = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await fetchDashboardBalance(credentials);
|
||||
setSummary(data.summary);
|
||||
setHoldings(data.holdings);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "잔고 조회 중 오류가 발생했습니다.",
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [credentials]);
|
||||
|
||||
// [Effect] 컴포넌트 마운트 시 잔고 조회
|
||||
useEffect(() => {
|
||||
loadBalance();
|
||||
}, [loadBalance]);
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-brand-900/20">
|
||||
{/* ========== HOLDINGS HEADER ========== */}
|
||||
<div className="flex items-center justify-between border-b border-border px-4 py-2 dark:border-brand-800/45">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
className="flex items-center gap-2 text-sm font-semibold text-foreground dark:text-brand-50 hover:text-brand-600 dark:hover:text-brand-300 transition-colors"
|
||||
>
|
||||
<span className="text-brand-500">▶</span>
|
||||
보유 종목 현황
|
||||
<span className="text-xs font-normal text-muted-foreground dark:text-brand-100/60">
|
||||
({holdings.length}종목)
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* 요약 배지: 수익/손실 */}
|
||||
{summary && !isLoading && (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold",
|
||||
summary.totalProfitLoss >= 0
|
||||
? "bg-red-50 text-red-600 dark:bg-red-900/25 dark:text-red-400"
|
||||
: "bg-blue-50 text-blue-600 dark:bg-blue-900/25 dark:text-blue-400",
|
||||
)}
|
||||
>
|
||||
{summary.totalProfitLoss >= 0 ? (
|
||||
<TrendingUp className="h-3 w-3" />
|
||||
) : (
|
||||
<TrendingDown className="h-3 w-3" />
|
||||
)}
|
||||
{summary.totalProfitLoss >= 0 ? "+" : ""}
|
||||
{fmt(summary.totalProfitLoss)}원 (
|
||||
{summary.totalProfitRate >= 0 ? "+" : ""}
|
||||
{summary.totalProfitRate.toFixed(2)}%)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 새로고침 버튼 */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={loadBalance}
|
||||
disabled={isLoading}
|
||||
className="h-7 gap-1 px-2 text-[11px] text-muted-foreground hover:text-brand-600 dark:text-brand-100/60 dark:hover:text-brand-300"
|
||||
>
|
||||
<RefreshCw
|
||||
className={cn("h-3.5 w-3.5", isLoading && "animate-spin")}
|
||||
/>
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* ========== HOLDINGS CONTENT ========== */}
|
||||
{isExpanded && (
|
||||
<div>
|
||||
{/* 요약 바 */}
|
||||
{summary && !isLoading && (
|
||||
<div className="grid grid-cols-2 gap-2 border-b border-border/50 bg-muted/10 px-4 py-2 dark:border-brand-800/35 dark:bg-brand-900/15 sm:grid-cols-4">
|
||||
<SummaryItem
|
||||
label="총 평가금액"
|
||||
value={`${fmt(summary.evaluationAmount)}원`}
|
||||
/>
|
||||
<SummaryItem
|
||||
label="총 매입금액"
|
||||
value={`${fmt(summary.purchaseAmount)}원`}
|
||||
/>
|
||||
<SummaryItem
|
||||
label="평가손익"
|
||||
value={`${summary.totalProfitLoss >= 0 ? "+" : ""}${fmt(summary.totalProfitLoss)}원`}
|
||||
tone={
|
||||
summary.totalProfitLoss > 0
|
||||
? "profit"
|
||||
: summary.totalProfitLoss < 0
|
||||
? "loss"
|
||||
: "neutral"
|
||||
}
|
||||
/>
|
||||
<SummaryItem
|
||||
label="수익률"
|
||||
value={`${summary.totalProfitRate >= 0 ? "+" : ""}${summary.totalProfitRate.toFixed(2)}%`}
|
||||
tone={
|
||||
summary.totalProfitRate > 0
|
||||
? "profit"
|
||||
: summary.totalProfitRate < 0
|
||||
? "loss"
|
||||
: "neutral"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 로딩 상태 */}
|
||||
{isLoading && <HoldingsSkeleton />}
|
||||
|
||||
{/* 에러 상태 */}
|
||||
{!isLoading && error && (
|
||||
<div className="flex items-center justify-center px-4 py-6 text-sm text-muted-foreground dark:text-brand-100/60">
|
||||
<span className="mr-2 text-destructive">⚠</span>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 보유 종목 없음 */}
|
||||
{!isLoading && !error && holdings.length === 0 && (
|
||||
<div className="flex items-center justify-center px-4 py-6 text-sm text-muted-foreground dark:text-brand-100/60">
|
||||
보유 중인 종목이 없습니다.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 보유 종목 테이블 */}
|
||||
{!isLoading && !error && holdings.length > 0 && (
|
||||
<div className="overflow-x-auto">
|
||||
{/* 테이블 헤더 */}
|
||||
<div className="grid min-w-[600px] grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr] border-b border-border/50 bg-muted/15 px-4 py-1.5 text-[11px] font-medium text-muted-foreground dark:border-brand-800/35 dark:bg-brand-900/20 dark:text-brand-100/65">
|
||||
<div>종목명</div>
|
||||
<div className="text-right">보유수량</div>
|
||||
<div className="text-right">평균단가</div>
|
||||
<div className="text-right">현재가</div>
|
||||
<div className="text-right">평가손익</div>
|
||||
<div className="text-right">수익률</div>
|
||||
</div>
|
||||
|
||||
{/* 종목 행 */}
|
||||
{holdings.map((holding) => (
|
||||
<HoldingRow key={holding.symbol} holding={holding} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 요약 항목 */
|
||||
function SummaryItem({
|
||||
label,
|
||||
value,
|
||||
tone,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
tone?: "profit" | "loss" | "neutral";
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[10px] text-muted-foreground dark:text-brand-100/60">
|
||||
{label}
|
||||
</p>
|
||||
<p
|
||||
className={cn(
|
||||
"text-xs font-semibold tabular-nums",
|
||||
tone === "profit" && "text-red-500",
|
||||
tone === "loss" && "text-blue-600 dark:text-blue-400",
|
||||
(!tone || tone === "neutral") && "text-foreground dark:text-brand-50",
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 보유 종목 행 */
|
||||
function HoldingRow({ holding }: { holding: DashboardHoldingItem }) {
|
||||
return (
|
||||
<div className="grid min-w-[600px] grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr] items-center border-b border-border/30 px-4 py-2 text-xs hover:bg-muted/20 dark:border-brand-800/25 dark:hover:bg-brand-900/20">
|
||||
{/* 종목명 */}
|
||||
<div className="min-w-0">
|
||||
<p className="truncate font-medium text-foreground dark:text-brand-50">
|
||||
{holding.name}
|
||||
</p>
|
||||
<p className="text-[10px] text-muted-foreground dark:text-brand-100/55">
|
||||
{holding.symbol} · {holding.market}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 보유수량 */}
|
||||
<div className="text-right tabular-nums text-foreground dark:text-brand-50">
|
||||
{fmt(holding.quantity)}주
|
||||
</div>
|
||||
|
||||
{/* 평균단가 */}
|
||||
<div className="text-right tabular-nums text-foreground dark:text-brand-50">
|
||||
{fmt(holding.averagePrice)}
|
||||
</div>
|
||||
|
||||
{/* 현재가 */}
|
||||
<div
|
||||
className={cn(
|
||||
"text-right tabular-nums font-medium",
|
||||
profitClass(holding.currentPrice - holding.averagePrice),
|
||||
)}
|
||||
>
|
||||
{fmt(holding.currentPrice)}
|
||||
</div>
|
||||
|
||||
{/* 평가손익 */}
|
||||
<div
|
||||
className={cn(
|
||||
"text-right tabular-nums font-medium",
|
||||
profitClass(holding.profitLoss),
|
||||
)}
|
||||
>
|
||||
{holding.profitLoss >= 0 ? "+" : ""}
|
||||
{fmt(holding.profitLoss)}
|
||||
</div>
|
||||
|
||||
{/* 수익률 */}
|
||||
<div
|
||||
className={cn(
|
||||
"text-right tabular-nums font-semibold",
|
||||
profitClass(holding.profitRate),
|
||||
)}
|
||||
>
|
||||
{holding.profitRate >= 0 ? "+" : ""}
|
||||
{holding.profitRate.toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** 로딩 스켈레톤 */
|
||||
function HoldingsSkeleton() {
|
||||
return (
|
||||
<div className="space-y-2 px-4 py-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-4">
|
||||
<Skeleton className="h-8 w-24" />
|
||||
<Skeleton className="h-8 flex-1" />
|
||||
<Skeleton className="h-8 w-20" />
|
||||
<Skeleton className="h-8 w-20" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user