308 lines
13 KiB
TypeScript
308 lines
13 KiB
TypeScript
|
import { AlertCircle, ClipboardList, FileText } from "lucide-react";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from "@/components/ui/card";
|
||
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
|
|
import type {
|
||
|
|
DashboardActivityResponse,
|
||
|
|
DashboardTradeSide,
|
||
|
|
} from "@/features/dashboard/types/dashboard.types";
|
||
|
|
import {
|
||
|
|
formatCurrency,
|
||
|
|
formatPercent,
|
||
|
|
getChangeToneClass,
|
||
|
|
} from "@/features/dashboard/utils/dashboard-format";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
interface ActivitySectionProps {
|
||
|
|
activity: DashboardActivityResponse | null;
|
||
|
|
isLoading: boolean;
|
||
|
|
error: string | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description 대시보드 하단 주문내역/매매일지 섹션입니다.
|
||
|
|
* @remarks UI 흐름: DashboardContainer -> ActivitySection -> tabs(주문내역/매매일지) -> 리스트 렌더링
|
||
|
|
* @see features/dashboard/components/DashboardContainer.tsx 하단 영역에서 호출합니다.
|
||
|
|
* @see app/api/kis/domestic/activity/route.ts 주문내역/매매일지 데이터 소스
|
||
|
|
*/
|
||
|
|
export function ActivitySection({ activity, isLoading, error }: ActivitySectionProps) {
|
||
|
|
const orders = activity?.orders ?? [];
|
||
|
|
const journalRows = activity?.tradeJournal ?? [];
|
||
|
|
const summary = activity?.journalSummary;
|
||
|
|
const warnings = activity?.warnings ?? [];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="pb-3">
|
||
|
|
{/* ========== TITLE ========== */}
|
||
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
||
|
|
<ClipboardList className="h-4 w-4 text-brand-600 dark:text-brand-400" />
|
||
|
|
주문내역 · 매매일지
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
최근 주문 체결 내역과 실현손익 기록을 확인합니다.
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
|
||
|
|
<CardContent className="space-y-3">
|
||
|
|
{isLoading && !activity && (
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
주문내역/매매일지를 불러오는 중입니다.
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{error && (
|
||
|
|
<p className="flex items-start gap-1.5 text-sm text-red-600 dark:text-red-400">
|
||
|
|
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
||
|
|
<span>{error}</span>
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{warnings.length > 0 && (
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{warnings.map((warning) => (
|
||
|
|
<Badge
|
||
|
|
key={warning}
|
||
|
|
variant="outline"
|
||
|
|
className="border-amber-300 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-300"
|
||
|
|
>
|
||
|
|
<AlertCircle className="h-3 w-3" />
|
||
|
|
{warning}
|
||
|
|
</Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* ========== TABS ========== */}
|
||
|
|
<Tabs defaultValue="orders" className="gap-3">
|
||
|
|
<TabsList className="w-full justify-start">
|
||
|
|
<TabsTrigger value="orders">주문내역 {orders.length}건</TabsTrigger>
|
||
|
|
<TabsTrigger value="journal">매매일지 {journalRows.length}건</TabsTrigger>
|
||
|
|
</TabsList>
|
||
|
|
|
||
|
|
<TabsContent value="orders">
|
||
|
|
<div className="overflow-hidden rounded-xl border border-border/70">
|
||
|
|
<div className="grid grid-cols-[100px_1fr_140px_120px_120px_90px] gap-2 bg-muted/40 px-3 py-2 text-xs font-medium text-muted-foreground">
|
||
|
|
<span>일시</span>
|
||
|
|
<span>종목</span>
|
||
|
|
<span>주문</span>
|
||
|
|
<span>체결</span>
|
||
|
|
<span>평균체결가</span>
|
||
|
|
<span>상태</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ScrollArea className="h-[280px]">
|
||
|
|
{orders.length === 0 ? (
|
||
|
|
<p className="px-3 py-4 text-sm text-muted-foreground">
|
||
|
|
표시할 주문내역이 없습니다.
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<div className="divide-y divide-border/60">
|
||
|
|
{orders.map((order) => (
|
||
|
|
<div
|
||
|
|
key={`${order.orderNo}-${order.orderDate}-${order.orderTime}`}
|
||
|
|
className="grid grid-cols-[100px_1fr_140px_120px_120px_90px] items-center gap-2 px-3 py-2 text-sm"
|
||
|
|
>
|
||
|
|
{/* ========== ORDER DATETIME ========== */}
|
||
|
|
<div className="text-xs text-muted-foreground">
|
||
|
|
<p>{order.orderDate}</p>
|
||
|
|
<p>{order.orderTime}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* ========== STOCK INFO ========== */}
|
||
|
|
<div>
|
||
|
|
<p className="font-medium text-foreground">{order.name}</p>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
{order.symbol} · {getSideLabel(order.side)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* ========== ORDER INFO ========== */}
|
||
|
|
<div className="text-xs">
|
||
|
|
<p>수량 {order.orderQuantity.toLocaleString("ko-KR")}주</p>
|
||
|
|
<p className="text-muted-foreground">
|
||
|
|
{order.orderTypeName} · {formatCurrency(order.orderPrice)}원
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* ========== FILLED INFO ========== */}
|
||
|
|
<div className="text-xs">
|
||
|
|
<p>체결 {order.filledQuantity.toLocaleString("ko-KR")}주</p>
|
||
|
|
<p className="text-muted-foreground">
|
||
|
|
금액 {formatCurrency(order.filledAmount)}원
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* ========== AVG PRICE ========== */}
|
||
|
|
<div className="text-xs font-medium text-foreground">
|
||
|
|
{formatCurrency(order.averageFilledPrice)}원
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* ========== STATUS ========== */}
|
||
|
|
<div>
|
||
|
|
<Badge
|
||
|
|
variant="outline"
|
||
|
|
className={cn(
|
||
|
|
"text-[11px]",
|
||
|
|
order.isCanceled
|
||
|
|
? "border-slate-300 text-slate-600 dark:border-slate-700 dark:text-slate-300"
|
||
|
|
: order.remainingQuantity > 0
|
||
|
|
? "border-amber-300 text-amber-700 dark:border-amber-700 dark:text-amber-300"
|
||
|
|
: "border-emerald-300 text-emerald-700 dark:border-emerald-700 dark:text-emerald-300",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{order.isCanceled
|
||
|
|
? "취소"
|
||
|
|
: order.remainingQuantity > 0
|
||
|
|
? "미체결"
|
||
|
|
: "체결완료"}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</ScrollArea>
|
||
|
|
</div>
|
||
|
|
</TabsContent>
|
||
|
|
|
||
|
|
<TabsContent value="journal" className="space-y-3">
|
||
|
|
{/* ========== JOURNAL SUMMARY ========== */}
|
||
|
|
<div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
|
||
|
|
<SummaryMetric
|
||
|
|
label="총 실현손익"
|
||
|
|
value={summary ? `${formatCurrency(summary.totalRealizedProfit)}원` : "-"}
|
||
|
|
toneClass={summary ? getChangeToneClass(summary.totalRealizedProfit) : undefined}
|
||
|
|
/>
|
||
|
|
<SummaryMetric
|
||
|
|
label="총 수익률"
|
||
|
|
value={summary ? formatPercent(summary.totalRealizedRate) : "-"}
|
||
|
|
toneClass={summary ? getChangeToneClass(summary.totalRealizedProfit) : undefined}
|
||
|
|
/>
|
||
|
|
<SummaryMetric
|
||
|
|
label="총 매수금액"
|
||
|
|
value={summary ? `${formatCurrency(summary.totalBuyAmount)}원` : "-"}
|
||
|
|
/>
|
||
|
|
<SummaryMetric
|
||
|
|
label="총 매도금액"
|
||
|
|
value={summary ? `${formatCurrency(summary.totalSellAmount)}원` : "-"}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="overflow-hidden rounded-xl border border-border/70">
|
||
|
|
<div className="grid grid-cols-[100px_1fr_120px_130px_120px_110px] gap-2 bg-muted/40 px-3 py-2 text-xs font-medium text-muted-foreground">
|
||
|
|
<span>일자</span>
|
||
|
|
<span>종목</span>
|
||
|
|
<span>매매구분</span>
|
||
|
|
<span>매수/매도금액</span>
|
||
|
|
<span>실현손익(률)</span>
|
||
|
|
<span>비용</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ScrollArea className="h-[280px]">
|
||
|
|
{journalRows.length === 0 ? (
|
||
|
|
<p className="px-3 py-4 text-sm text-muted-foreground">
|
||
|
|
표시할 매매일지가 없습니다.
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<div className="divide-y divide-border/60">
|
||
|
|
{journalRows.map((row) => {
|
||
|
|
const toneClass = getChangeToneClass(row.realizedProfit);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={`${row.tradeDate}-${row.symbol}-${row.realizedProfit}-${row.buyAmount}-${row.sellAmount}`}
|
||
|
|
className="grid grid-cols-[100px_1fr_120px_130px_120px_110px] items-center gap-2 px-3 py-2 text-sm"
|
||
|
|
>
|
||
|
|
<p className="text-xs text-muted-foreground">{row.tradeDate}</p>
|
||
|
|
<div>
|
||
|
|
<p className="font-medium text-foreground">{row.name}</p>
|
||
|
|
<p className="text-xs text-muted-foreground">{row.symbol}</p>
|
||
|
|
</div>
|
||
|
|
<p className={cn("text-xs font-medium", getSideToneClass(row.side))}>
|
||
|
|
{getSideLabel(row.side)}
|
||
|
|
</p>
|
||
|
|
<p className="text-xs">
|
||
|
|
매수 {formatCurrency(row.buyAmount)}원 / 매도 {formatCurrency(row.sellAmount)}원
|
||
|
|
</p>
|
||
|
|
<p className={cn("text-xs font-medium", toneClass)}>
|
||
|
|
{formatCurrency(row.realizedProfit)}원 ({formatPercent(row.realizedRate)})
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
수수료 {formatCurrency(row.fee)}원
|
||
|
|
<br />
|
||
|
|
세금 {formatCurrency(row.tax)}원
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</ScrollArea>
|
||
|
|
</div>
|
||
|
|
</TabsContent>
|
||
|
|
</Tabs>
|
||
|
|
|
||
|
|
{!isLoading && !error && !activity && (
|
||
|
|
<p className="flex items-center gap-1.5 text-sm text-muted-foreground">
|
||
|
|
<FileText className="h-4 w-4" />
|
||
|
|
활동 데이터가 없습니다.
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
interface SummaryMetricProps {
|
||
|
|
label: string;
|
||
|
|
value: string;
|
||
|
|
toneClass?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description 매매일지 요약 지표 카드입니다.
|
||
|
|
* @param label 지표명
|
||
|
|
* @param value 지표값
|
||
|
|
* @param toneClass 값 색상 클래스
|
||
|
|
* @see features/dashboard/components/ActivitySection.tsx 매매일지 상단 요약 표시
|
||
|
|
*/
|
||
|
|
function SummaryMetric({ label, value, toneClass }: SummaryMetricProps) {
|
||
|
|
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={cn("mt-1 text-sm font-semibold text-foreground", toneClass)}>{value}</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description 매수/매도 라벨 텍스트를 반환합니다.
|
||
|
|
* @param side 매수/매도 구분값
|
||
|
|
* @returns 라벨 문자열
|
||
|
|
* @see features/dashboard/components/ActivitySection.tsx 주문내역/매매일지 표시
|
||
|
|
*/
|
||
|
|
function getSideLabel(side: DashboardTradeSide) {
|
||
|
|
if (side === "buy") return "매수";
|
||
|
|
if (side === "sell") return "매도";
|
||
|
|
return "기타";
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description 매수/매도 라벨 색상 클래스를 반환합니다.
|
||
|
|
* @param side 매수/매도 구분값
|
||
|
|
* @returns Tailwind 텍스트 클래스
|
||
|
|
* @see features/dashboard/components/ActivitySection.tsx 매매구분 표시
|
||
|
|
*/
|
||
|
|
function getSideToneClass(side: DashboardTradeSide) {
|
||
|
|
if (side === "buy") return "text-red-600 dark:text-red-400";
|
||
|
|
if (side === "sell") return "text-blue-600 dark:text-blue-400";
|
||
|
|
return "text-muted-foreground";
|
||
|
|
}
|