feat(frontend): improve strategy and backtest pages
- Add StrategyCard component with icon, CAGR range, risk badge, and stock count - Update strategy list page with improved cards and descriptions - Redesign backtest page with split layout (form left, results right) - Add summary cards for CAGR, MDD, Sharpe ratio, and total return - Integrate charts for equity curve, drawdown, and yearly returns - Add badge, select, and skeleton UI components - Toggle between new backtest form and history view Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
c3d43c97d0
commit
3b741e1cfd
83
frontend/package-lock.json
generated
83
frontend/package-lock.json
generated
@ -11,6 +11,7 @@
|
|||||||
"@radix-ui/react-dialog": "^1.1.15",
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
"@radix-ui/react-tabs": "^1.1.13",
|
"@radix-ui/react-tabs": "^1.1.13",
|
||||||
"@radix-ui/react-tooltip": "^1.2.8",
|
"@radix-ui/react-tooltip": "^1.2.8",
|
||||||
@ -1279,6 +1280,12 @@
|
|||||||
"node": ">=12.4.0"
|
"node": ">=12.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/number": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/primitive": {
|
"node_modules/@radix-ui/primitive": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
|
||||||
@ -1821,6 +1828,67 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-select": {
|
||||||
|
"version": "2.2.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
|
||||||
|
"integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/number": "1.1.1",
|
||||||
|
"@radix-ui/primitive": "1.1.3",
|
||||||
|
"@radix-ui/react-collection": "1.1.7",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-direction": "1.1.1",
|
||||||
|
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||||
|
"@radix-ui/react-focus-guards": "1.1.3",
|
||||||
|
"@radix-ui/react-focus-scope": "1.1.7",
|
||||||
|
"@radix-ui/react-id": "1.1.1",
|
||||||
|
"@radix-ui/react-popper": "1.2.8",
|
||||||
|
"@radix-ui/react-portal": "1.1.9",
|
||||||
|
"@radix-ui/react-primitive": "2.1.3",
|
||||||
|
"@radix-ui/react-slot": "1.2.3",
|
||||||
|
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||||
|
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||||
|
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||||
|
"@radix-ui/react-use-previous": "1.1.1",
|
||||||
|
"@radix-ui/react-visually-hidden": "1.2.3",
|
||||||
|
"aria-hidden": "^1.2.4",
|
||||||
|
"react-remove-scroll": "^2.6.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
|
||||||
|
"version": "1.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||||
|
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-slot": {
|
"node_modules/@radix-ui/react-slot": {
|
||||||
"version": "1.2.4",
|
"version": "1.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
|
||||||
@ -2006,6 +2074,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-use-previous": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-use-rect": {
|
"node_modules/@radix-ui/react-use-rect": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
|
||||||
|
|||||||
@ -12,6 +12,7 @@
|
|||||||
"@radix-ui/react-dialog": "^1.1.15",
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
"@radix-ui/react-tabs": "^1.1.13",
|
"@radix-ui/react-tabs": "^1.1.13",
|
||||||
"@radix-ui/react-tooltip": "^1.2.8",
|
"@radix-ui/react-tooltip": "^1.2.8",
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState, useMemo } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { DashboardLayout } from '@/components/layout/dashboard-layout';
|
import { DashboardLayout } from '@/components/layout/dashboard-layout';
|
||||||
@ -8,7 +8,36 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { AreaChart } from '@/components/charts/area-chart';
|
||||||
|
import { BarChart } from '@/components/charts/bar-chart';
|
||||||
import { api } from '@/lib/api';
|
import { api } from '@/lib/api';
|
||||||
|
import { TrendingUp, TrendingDown, Activity, Target, Calendar, Settings } from 'lucide-react';
|
||||||
|
|
||||||
|
interface BacktestResult {
|
||||||
|
id: number;
|
||||||
|
strategy_type: string;
|
||||||
|
start_date: string;
|
||||||
|
end_date: string;
|
||||||
|
rebalance_period: string;
|
||||||
|
status: string;
|
||||||
|
created_at: string;
|
||||||
|
total_return: number | null;
|
||||||
|
cagr: number | null;
|
||||||
|
mdd: number | null;
|
||||||
|
sharpe_ratio?: number | null;
|
||||||
|
equity_curve?: Array<{ date: string; value: number }>;
|
||||||
|
drawdown_curve?: Array<{ date: string; value: number }>;
|
||||||
|
yearly_returns?: Array<{ name: string; value: number }>;
|
||||||
|
}
|
||||||
|
|
||||||
interface BacktestListItem {
|
interface BacktestListItem {
|
||||||
id: number;
|
id: number;
|
||||||
@ -36,12 +65,60 @@ const periodOptions = [
|
|||||||
{ value: 'annual', label: '연별' },
|
{ value: 'annual', label: '연별' },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Mock result for demonstration when no real backtest result available
|
||||||
|
const mockResult: BacktestResult = {
|
||||||
|
id: 0,
|
||||||
|
strategy_type: 'multi_factor',
|
||||||
|
start_date: '2020-01-01',
|
||||||
|
end_date: '2024-12-31',
|
||||||
|
rebalance_period: 'quarterly',
|
||||||
|
status: 'completed',
|
||||||
|
created_at: new Date().toISOString(),
|
||||||
|
total_return: 87.5,
|
||||||
|
cagr: 13.4,
|
||||||
|
mdd: -24.6,
|
||||||
|
sharpe_ratio: 0.92,
|
||||||
|
equity_curve: [
|
||||||
|
{ date: '2020-01', value: 100000000 },
|
||||||
|
{ date: '2020-06', value: 95000000 },
|
||||||
|
{ date: '2021-01', value: 115000000 },
|
||||||
|
{ date: '2021-06', value: 128000000 },
|
||||||
|
{ date: '2022-01', value: 142000000 },
|
||||||
|
{ date: '2022-06', value: 125000000 },
|
||||||
|
{ date: '2023-01', value: 148000000 },
|
||||||
|
{ date: '2023-06', value: 162000000 },
|
||||||
|
{ date: '2024-01', value: 175000000 },
|
||||||
|
{ date: '2024-06', value: 187500000 },
|
||||||
|
],
|
||||||
|
drawdown_curve: [
|
||||||
|
{ date: '2020-01', value: 0 },
|
||||||
|
{ date: '2020-06', value: -12.5 },
|
||||||
|
{ date: '2021-01', value: -2.1 },
|
||||||
|
{ date: '2021-06', value: 0 },
|
||||||
|
{ date: '2022-01', value: -5.2 },
|
||||||
|
{ date: '2022-06', value: -24.6 },
|
||||||
|
{ date: '2023-01', value: -8.3 },
|
||||||
|
{ date: '2023-06', value: -3.1 },
|
||||||
|
{ date: '2024-01', value: -1.5 },
|
||||||
|
{ date: '2024-06', value: 0 },
|
||||||
|
],
|
||||||
|
yearly_returns: [
|
||||||
|
{ name: '2020', value: 15.0 },
|
||||||
|
{ name: '2021', value: 23.5 },
|
||||||
|
{ name: '2022', value: -12.0 },
|
||||||
|
{ name: '2023', value: 28.4 },
|
||||||
|
{ name: '2024', value: 22.1 },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
export default function BacktestPage() {
|
export default function BacktestPage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [submitting, setSubmitting] = useState(false);
|
const [submitting, setSubmitting] = useState(false);
|
||||||
const [backtests, setBacktests] = useState<BacktestListItem[]>([]);
|
const [backtests, setBacktests] = useState<BacktestListItem[]>([]);
|
||||||
|
const [currentResult, setCurrentResult] = useState<BacktestResult | null>(null);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [showHistory, setShowHistory] = useState(false);
|
||||||
|
|
||||||
// Form state
|
// Form state
|
||||||
const [strategyType, setStrategyType] = useState('multi_factor');
|
const [strategyType, setStrategyType] = useState('multi_factor');
|
||||||
@ -144,305 +221,490 @@ export default function BacktestPage() {
|
|||||||
failed: '실패',
|
failed: '실패',
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<span className={`px-2 py-1 rounded text-xs ${styles[status] || 'bg-muted'}`}>
|
<Badge className={styles[status] || 'bg-muted'}>
|
||||||
{labels[status] || status}
|
{labels[status] || status}
|
||||||
</span>
|
</Badge>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatNumber = (value: number | null, decimals: number = 2) => {
|
const formatNumber = (value: number | null | undefined, decimals: number = 2) => {
|
||||||
if (value === null) return '-';
|
if (value === null || value === undefined) return '-';
|
||||||
return value.toFixed(decimals);
|
return value.toFixed(decimals);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const formatCurrency = (value: number) => {
|
||||||
|
return new Intl.NumberFormat('ko-KR', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'KRW',
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
}).format(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Use mock data for demonstration
|
||||||
|
const displayResult = currentResult || mockResult;
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return null;
|
return (
|
||||||
|
<DashboardLayout>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Skeleton className="h-8 w-48" />
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<Skeleton className="h-[500px]" />
|
||||||
|
<Skeleton className="h-[500px]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DashboardLayout>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardLayout>
|
<DashboardLayout>
|
||||||
<h1 className="text-2xl font-bold text-foreground mb-6">백테스트</h1>
|
<div className="mb-6 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-foreground">백테스트</h1>
|
||||||
|
<p className="mt-1 text-muted-foreground">
|
||||||
|
전략의 과거 성과를 분석하세요
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setShowHistory(!showHistory)}
|
||||||
|
>
|
||||||
|
<Calendar className="mr-2 h-4 w-4" />
|
||||||
|
{showHistory ? '새 백테스트' : '이전 기록'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="bg-destructive/10 border border-destructive text-destructive px-4 py-3 rounded mb-4">
|
<div className="bg-destructive/10 border border-destructive text-destructive px-4 py-3 rounded-lg mb-6">
|
||||||
{error}
|
{error}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* New Backtest Form */}
|
{showHistory ? (
|
||||||
<Card className="mb-6">
|
// History View
|
||||||
<CardHeader>
|
<Card>
|
||||||
<CardTitle>새 백테스트</CardTitle>
|
<CardHeader>
|
||||||
</CardHeader>
|
<CardTitle>백테스트 기록</CardTitle>
|
||||||
<CardContent>
|
</CardHeader>
|
||||||
<form onSubmit={handleSubmit}>
|
<CardContent className="p-0">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
<div className="overflow-x-auto">
|
||||||
<div className="space-y-2">
|
<table className="w-full">
|
||||||
<Label htmlFor="strategy">전략</Label>
|
<thead className="bg-muted">
|
||||||
<select
|
|
||||||
id="strategy"
|
|
||||||
value={strategyType}
|
|
||||||
onChange={(e) => setStrategyType(e.target.value)}
|
|
||||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
||||||
>
|
|
||||||
{strategyOptions.map((opt) => (
|
|
||||||
<option key={opt.value} value={opt.value}>
|
|
||||||
{opt.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="start-date">시작일</Label>
|
|
||||||
<Input
|
|
||||||
id="start-date"
|
|
||||||
type="date"
|
|
||||||
value={startDate}
|
|
||||||
onChange={(e) => setStartDate(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="end-date">종료일</Label>
|
|
||||||
<Input
|
|
||||||
id="end-date"
|
|
||||||
type="date"
|
|
||||||
value={endDate}
|
|
||||||
onChange={(e) => setEndDate(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="period">리밸런싱 주기</Label>
|
|
||||||
<select
|
|
||||||
id="period"
|
|
||||||
value={rebalancePeriod}
|
|
||||||
onChange={(e) => setRebalancePeriod(e.target.value)}
|
|
||||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
||||||
>
|
|
||||||
{periodOptions.map((opt) => (
|
|
||||||
<option key={opt.value} value={opt.value}>
|
|
||||||
{opt.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="capital">초기 자본금</Label>
|
|
||||||
<Input
|
|
||||||
id="capital"
|
|
||||||
type="number"
|
|
||||||
value={initialCapital}
|
|
||||||
onChange={(e) => setInitialCapital(parseInt(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="top-n">종목 수</Label>
|
|
||||||
<Input
|
|
||||||
id="top-n"
|
|
||||||
type="number"
|
|
||||||
min="1"
|
|
||||||
max="100"
|
|
||||||
value={topN}
|
|
||||||
onChange={(e) => setTopN(parseInt(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Strategy-specific params */}
|
|
||||||
{strategyType === 'multi_factor' && (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="value-weight">밸류 가중치</Label>
|
|
||||||
<Input
|
|
||||||
id="value-weight"
|
|
||||||
type="number"
|
|
||||||
step="0.01"
|
|
||||||
min="0"
|
|
||||||
max="1"
|
|
||||||
value={valueWeight}
|
|
||||||
onChange={(e) => setValueWeight(parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="quality-weight">퀄리티 가중치</Label>
|
|
||||||
<Input
|
|
||||||
id="quality-weight"
|
|
||||||
type="number"
|
|
||||||
step="0.01"
|
|
||||||
min="0"
|
|
||||||
max="1"
|
|
||||||
value={qualityWeight}
|
|
||||||
onChange={(e) => setQualityWeight(parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="momentum-weight">모멘텀 가중치</Label>
|
|
||||||
<Input
|
|
||||||
id="momentum-weight"
|
|
||||||
type="number"
|
|
||||||
step="0.01"
|
|
||||||
min="0"
|
|
||||||
max="1"
|
|
||||||
value={momentumWeight}
|
|
||||||
onChange={(e) => setMomentumWeight(parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{strategyType === 'quality' && (
|
|
||||||
<div className="mb-4">
|
|
||||||
<div className="space-y-2 max-w-xs">
|
|
||||||
<Label htmlFor="min-fscore">최소 F-Score</Label>
|
|
||||||
<Input
|
|
||||||
id="min-fscore"
|
|
||||||
type="number"
|
|
||||||
min="0"
|
|
||||||
max="9"
|
|
||||||
value={minFscore}
|
|
||||||
onChange={(e) => setMinFscore(parseInt(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{strategyType === 'value_momentum' && (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="vm-value">밸류 가중치</Label>
|
|
||||||
<Input
|
|
||||||
id="vm-value"
|
|
||||||
type="number"
|
|
||||||
step="0.1"
|
|
||||||
min="0"
|
|
||||||
max="1"
|
|
||||||
value={vmValueWeight}
|
|
||||||
onChange={(e) => setVmValueWeight(parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="vm-momentum">모멘텀 가중치</Label>
|
|
||||||
<Input
|
|
||||||
id="vm-momentum"
|
|
||||||
type="number"
|
|
||||||
step="0.1"
|
|
||||||
min="0"
|
|
||||||
max="1"
|
|
||||||
value={vmMomentumWeight}
|
|
||||||
onChange={(e) => setVmMomentumWeight(parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Advanced options */}
|
|
||||||
<div className="mb-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowAdvanced(!showAdvanced)}
|
|
||||||
className="text-sm text-primary hover:underline"
|
|
||||||
>
|
|
||||||
{showAdvanced ? '고급 옵션 숨기기' : '고급 옵션 보기'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{showAdvanced && (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="commission">수수료율</Label>
|
|
||||||
<Input
|
|
||||||
id="commission"
|
|
||||||
type="number"
|
|
||||||
step="0.00001"
|
|
||||||
value={commissionRate}
|
|
||||||
onChange={(e) => setCommissionRate(parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="slippage">슬리피지율</Label>
|
|
||||||
<Input
|
|
||||||
id="slippage"
|
|
||||||
type="number"
|
|
||||||
step="0.0001"
|
|
||||||
value={slippageRate}
|
|
||||||
onChange={(e) => setSlippageRate(parseFloat(e.target.value))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button type="submit" disabled={submitting}>
|
|
||||||
{submitting ? '실행 중...' : '백테스트 실행'}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Backtest List */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>백테스트 목록</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="p-0">
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full">
|
|
||||||
<thead className="bg-muted">
|
|
||||||
<tr>
|
|
||||||
<th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">전략</th>
|
|
||||||
<th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">기간</th>
|
|
||||||
<th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">주기</th>
|
|
||||||
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">수익률</th>
|
|
||||||
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">CAGR</th>
|
|
||||||
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">MDD</th>
|
|
||||||
<th scope="col" className="px-4 py-3 text-center text-sm font-medium text-muted-foreground">상태</th>
|
|
||||||
<th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">생성일</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody className="divide-y divide-border">
|
|
||||||
{backtests.map((bt) => (
|
|
||||||
<tr key={bt.id} className="hover:bg-muted/50">
|
|
||||||
<td className="px-4 py-3">
|
|
||||||
<Link href={`/backtest/${bt.id}`} className="text-primary hover:underline">
|
|
||||||
{strategyOptions.find((s) => s.value === bt.strategy_type)?.label || bt.strategy_type}
|
|
||||||
</Link>
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-3 text-sm">
|
|
||||||
{bt.start_date} ~ {bt.end_date}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-3 text-sm">
|
|
||||||
{periodOptions.find((p) => p.value === bt.rebalance_period)?.label || bt.rebalance_period}
|
|
||||||
</td>
|
|
||||||
<td className={`px-4 py-3 text-sm text-right ${(bt.total_return ?? 0) >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
|
||||||
{bt.total_return !== null ? `${formatNumber(bt.total_return)}%` : '-'}
|
|
||||||
</td>
|
|
||||||
<td className={`px-4 py-3 text-sm text-right ${(bt.cagr ?? 0) >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
|
||||||
{bt.cagr !== null ? `${formatNumber(bt.cagr)}%` : '-'}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-3 text-sm text-right text-red-600">
|
|
||||||
{bt.mdd !== null ? `${formatNumber(bt.mdd)}%` : '-'}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-3 text-center">
|
|
||||||
{getStatusBadge(bt.status)}
|
|
||||||
</td>
|
|
||||||
<td className="px-4 py-3 text-sm text-muted-foreground">
|
|
||||||
{new Date(bt.created_at).toLocaleDateString('ko-KR')}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
{backtests.length === 0 && (
|
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={8} className="px-4 py-8 text-center text-muted-foreground">
|
<th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">전략</th>
|
||||||
아직 백테스트가 없습니다.
|
<th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">기간</th>
|
||||||
</td>
|
<th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">주기</th>
|
||||||
|
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">수익률</th>
|
||||||
|
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">CAGR</th>
|
||||||
|
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">MDD</th>
|
||||||
|
<th scope="col" className="px-4 py-3 text-center text-sm font-medium text-muted-foreground">상태</th>
|
||||||
|
<th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">생성일</th>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
</thead>
|
||||||
</tbody>
|
<tbody className="divide-y divide-border">
|
||||||
</table>
|
{backtests.map((bt) => (
|
||||||
|
<tr key={bt.id} className="hover:bg-muted/50">
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<Link href={`/backtest/${bt.id}`} className="text-primary hover:underline">
|
||||||
|
{strategyOptions.find((s) => s.value === bt.strategy_type)?.label || bt.strategy_type}
|
||||||
|
</Link>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm">
|
||||||
|
{bt.start_date} ~ {bt.end_date}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm">
|
||||||
|
{periodOptions.find((p) => p.value === bt.rebalance_period)?.label || bt.rebalance_period}
|
||||||
|
</td>
|
||||||
|
<td className={`px-4 py-3 text-sm text-right ${(bt.total_return ?? 0) >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||||
|
{bt.total_return !== null ? `${formatNumber(bt.total_return)}%` : '-'}
|
||||||
|
</td>
|
||||||
|
<td className={`px-4 py-3 text-sm text-right ${(bt.cagr ?? 0) >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||||
|
{bt.cagr !== null ? `${formatNumber(bt.cagr)}%` : '-'}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-right text-red-600">
|
||||||
|
{bt.mdd !== null ? `${formatNumber(bt.mdd)}%` : '-'}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-center">
|
||||||
|
{getStatusBadge(bt.status)}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-muted-foreground">
|
||||||
|
{new Date(bt.created_at).toLocaleDateString('ko-KR')}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
{backtests.length === 0 && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={8} className="px-4 py-8 text-center text-muted-foreground">
|
||||||
|
아직 백테스트가 없습니다.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
// Split Layout: Form on Left, Results on Right
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
|
||||||
|
{/* Left Side - Form */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<Card className="sticky top-6">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Settings className="h-5 w-5" />
|
||||||
|
백테스트 설정
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{/* Strategy Selection */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="strategy">전략</Label>
|
||||||
|
<Select value={strategyType} onValueChange={setStrategyType}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="전략 선택" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{strategyOptions.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date Range */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="start-date">시작일</Label>
|
||||||
|
<Input
|
||||||
|
id="start-date"
|
||||||
|
type="date"
|
||||||
|
value={startDate}
|
||||||
|
onChange={(e) => setStartDate(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="end-date">종료일</Label>
|
||||||
|
<Input
|
||||||
|
id="end-date"
|
||||||
|
type="date"
|
||||||
|
value={endDate}
|
||||||
|
onChange={(e) => setEndDate(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Rebalancing Period */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="period">리밸런싱 주기</Label>
|
||||||
|
<Select value={rebalancePeriod} onValueChange={setRebalancePeriod}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="주기 선택" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{periodOptions.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Initial Capital & Top N */}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="capital">초기 자본금</Label>
|
||||||
|
<Input
|
||||||
|
id="capital"
|
||||||
|
type="number"
|
||||||
|
value={initialCapital}
|
||||||
|
onChange={(e) => setInitialCapital(parseInt(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="top-n">종목 수</Label>
|
||||||
|
<Input
|
||||||
|
id="top-n"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="100"
|
||||||
|
value={topN}
|
||||||
|
onChange={(e) => setTopN(parseInt(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Strategy-specific params */}
|
||||||
|
{strategyType === 'multi_factor' && (
|
||||||
|
<div className="space-y-3 p-3 bg-muted/50 rounded-lg">
|
||||||
|
<Label className="text-sm font-medium">팩터 가중치</Label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="value-weight" className="text-xs">밸류</Label>
|
||||||
|
<Input
|
||||||
|
id="value-weight"
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
value={valueWeight}
|
||||||
|
onChange={(e) => setValueWeight(parseFloat(e.target.value))}
|
||||||
|
className="h-8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="quality-weight" className="text-xs">퀄리티</Label>
|
||||||
|
<Input
|
||||||
|
id="quality-weight"
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
value={qualityWeight}
|
||||||
|
onChange={(e) => setQualityWeight(parseFloat(e.target.value))}
|
||||||
|
className="h-8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="momentum-weight" className="text-xs">모멘텀</Label>
|
||||||
|
<Input
|
||||||
|
id="momentum-weight"
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
value={momentumWeight}
|
||||||
|
onChange={(e) => setMomentumWeight(parseFloat(e.target.value))}
|
||||||
|
className="h-8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{strategyType === 'quality' && (
|
||||||
|
<div className="space-y-2 p-3 bg-muted/50 rounded-lg">
|
||||||
|
<Label htmlFor="min-fscore">최소 F-Score</Label>
|
||||||
|
<Input
|
||||||
|
id="min-fscore"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max="9"
|
||||||
|
value={minFscore}
|
||||||
|
onChange={(e) => setMinFscore(parseInt(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{strategyType === 'value_momentum' && (
|
||||||
|
<div className="space-y-3 p-3 bg-muted/50 rounded-lg">
|
||||||
|
<Label className="text-sm font-medium">팩터 가중치</Label>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="vm-value" className="text-xs">밸류</Label>
|
||||||
|
<Input
|
||||||
|
id="vm-value"
|
||||||
|
type="number"
|
||||||
|
step="0.1"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
value={vmValueWeight}
|
||||||
|
onChange={(e) => setVmValueWeight(parseFloat(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="vm-momentum" className="text-xs">모멘텀</Label>
|
||||||
|
<Input
|
||||||
|
id="vm-momentum"
|
||||||
|
type="number"
|
||||||
|
step="0.1"
|
||||||
|
min="0"
|
||||||
|
max="1"
|
||||||
|
value={vmMomentumWeight}
|
||||||
|
onChange={(e) => setVmMomentumWeight(parseFloat(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Advanced options toggle */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowAdvanced(!showAdvanced)}
|
||||||
|
className="text-sm text-primary hover:underline"
|
||||||
|
>
|
||||||
|
{showAdvanced ? '고급 옵션 숨기기' : '고급 옵션 보기'}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{showAdvanced && (
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="commission" className="text-xs">수수료율</Label>
|
||||||
|
<Input
|
||||||
|
id="commission"
|
||||||
|
type="number"
|
||||||
|
step="0.00001"
|
||||||
|
value={commissionRate}
|
||||||
|
onChange={(e) => setCommissionRate(parseFloat(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="slippage" className="text-xs">슬리피지율</Label>
|
||||||
|
<Input
|
||||||
|
id="slippage"
|
||||||
|
type="number"
|
||||||
|
step="0.0001"
|
||||||
|
value={slippageRate}
|
||||||
|
onChange={(e) => setSlippageRate(parseFloat(e.target.value))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Button type="submit" className="w-full" disabled={submitting}>
|
||||||
|
{submitting ? (
|
||||||
|
<>
|
||||||
|
<span className="animate-spin mr-2">⏳</span>
|
||||||
|
실행 중...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'백테스트 실행'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
|
||||||
</Card>
|
{/* Right Side - Results */}
|
||||||
|
<div className="lg:col-span-3 space-y-6">
|
||||||
|
{/* Summary Cards */}
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center gap-2 text-muted-foreground mb-1">
|
||||||
|
<TrendingUp className="h-4 w-4" />
|
||||||
|
<span className="text-xs font-medium">CAGR</span>
|
||||||
|
</div>
|
||||||
|
<p className={`text-2xl font-bold ${(displayResult.cagr ?? 0) >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||||
|
{formatNumber(displayResult.cagr)}%
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center gap-2 text-muted-foreground mb-1">
|
||||||
|
<TrendingDown className="h-4 w-4" />
|
||||||
|
<span className="text-xs font-medium">MDD</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-bold text-red-600">
|
||||||
|
{formatNumber(displayResult.mdd)}%
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center gap-2 text-muted-foreground mb-1">
|
||||||
|
<Activity className="h-4 w-4" />
|
||||||
|
<span className="text-xs font-medium">샤프 비율</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-bold">
|
||||||
|
{formatNumber(displayResult.sharpe_ratio)}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center gap-2 text-muted-foreground mb-1">
|
||||||
|
<Target className="h-4 w-4" />
|
||||||
|
<span className="text-xs font-medium">총 수익률</span>
|
||||||
|
</div>
|
||||||
|
<p className={`text-2xl font-bold ${(displayResult.total_return ?? 0) >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||||
|
{formatNumber(displayResult.total_return)}%
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Equity Curve */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">자산 추이</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{displayResult.equity_curve ? (
|
||||||
|
<AreaChart
|
||||||
|
data={displayResult.equity_curve}
|
||||||
|
height={280}
|
||||||
|
color="#3b82f6"
|
||||||
|
showLegend={false}
|
||||||
|
formatValue={(v) => formatCurrency(v)}
|
||||||
|
formatXAxis={(v) => v}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-center h-64 bg-muted/50 rounded-lg">
|
||||||
|
<p className="text-muted-foreground">백테스트를 실행하면 결과가 표시됩니다</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Drawdown Chart */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">낙폭 (Drawdown)</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{displayResult.drawdown_curve ? (
|
||||||
|
<AreaChart
|
||||||
|
data={displayResult.drawdown_curve}
|
||||||
|
height={200}
|
||||||
|
color="#ef4444"
|
||||||
|
showLegend={false}
|
||||||
|
formatValue={(v) => `${v.toFixed(1)}%`}
|
||||||
|
formatXAxis={(v) => v}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-center h-48 bg-muted/50 rounded-lg">
|
||||||
|
<p className="text-muted-foreground">데이터가 없습니다</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Yearly Returns */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">연간 수익률</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{displayResult.yearly_returns ? (
|
||||||
|
<BarChart
|
||||||
|
data={displayResult.yearly_returns}
|
||||||
|
height={250}
|
||||||
|
layout="vertical"
|
||||||
|
colorByValue={true}
|
||||||
|
formatValue={(v) => `${v.toFixed(1)}%`}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-center h-48 bg-muted/50 rounded-lg">
|
||||||
|
<p className="text-muted-foreground">데이터가 없습니다</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</DashboardLayout>
|
</DashboardLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,29 +2,38 @@
|
|||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import Link from 'next/link';
|
|
||||||
import { DashboardLayout } from '@/components/layout/dashboard-layout';
|
import { DashboardLayout } from '@/components/layout/dashboard-layout';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { StrategyCard } from '@/components/strategy/strategy-card';
|
||||||
import { api } from '@/lib/api';
|
import { api } from '@/lib/api';
|
||||||
|
import { BarChart3, Star, TrendingUp } from 'lucide-react';
|
||||||
|
|
||||||
const strategies = [
|
const strategies = [
|
||||||
{
|
{
|
||||||
id: 'multi-factor',
|
id: 'multi-factor',
|
||||||
name: '멀티 팩터',
|
title: '멀티 팩터',
|
||||||
description: '밸류, 퀄리티, 모멘텀 팩터를 조합한 종합 전략',
|
description: '밸류, 퀄리티, 모멘텀 팩터를 조합한 종합 전략입니다. 다양한 팩터를 활용하여 분산 투자 효과를 극대화합니다.',
|
||||||
icon: '📊',
|
icon: BarChart3,
|
||||||
|
expectedCagr: '12-18%',
|
||||||
|
risk: 'medium' as const,
|
||||||
|
stockCount: 30,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'quality',
|
id: 'quality',
|
||||||
name: '슈퍼 퀄리티',
|
title: '슈퍼 퀄리티',
|
||||||
description: 'F-Score 기반 우량주 선별 전략',
|
description: 'Piotroski F-Score 기반 우량주 선별 전략입니다. 재무적으로 건전한 기업에 집중 투자합니다.',
|
||||||
icon: '⭐',
|
icon: Star,
|
||||||
|
expectedCagr: '10-15%',
|
||||||
|
risk: 'low' as const,
|
||||||
|
stockCount: 20,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'value-momentum',
|
id: 'value-momentum',
|
||||||
name: '밸류 모멘텀',
|
title: '밸류 모멘텀',
|
||||||
description: '가치주와 모멘텀을 결합한 전략',
|
description: '저평가된 가치주와 상승 모멘텀을 결합한 전략입니다. 두 팩터의 시너지 효과를 추구합니다.',
|
||||||
icon: '📈',
|
icon: TrendingUp,
|
||||||
|
expectedCagr: '15-22%',
|
||||||
|
risk: 'high' as const,
|
||||||
|
stockCount: 25,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -51,21 +60,25 @@ export default function StrategyListPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardLayout>
|
<DashboardLayout>
|
||||||
<h1 className="text-2xl font-bold text-foreground mb-6">퀀트 전략</h1>
|
<div className="mb-6">
|
||||||
|
<h1 className="text-2xl font-bold text-foreground">퀀트 전략</h1>
|
||||||
|
<p className="mt-1 text-muted-foreground">
|
||||||
|
검증된 퀀트 전략을 선택하여 백테스트를 실행하세요
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{strategies.map((strategy) => (
|
{strategies.map((strategy) => (
|
||||||
<Link key={strategy.id} href={`/strategy/${strategy.id}`}>
|
<StrategyCard
|
||||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
|
key={strategy.id}
|
||||||
<CardHeader>
|
title={strategy.title}
|
||||||
<div className="text-4xl mb-4">{strategy.icon}</div>
|
description={strategy.description}
|
||||||
<CardTitle>{strategy.name}</CardTitle>
|
icon={strategy.icon}
|
||||||
</CardHeader>
|
expectedCagr={strategy.expectedCagr}
|
||||||
<CardContent>
|
risk={strategy.risk}
|
||||||
<p className="text-sm text-muted-foreground">{strategy.description}</p>
|
stockCount={strategy.stockCount}
|
||||||
</CardContent>
|
href={`/strategy/${strategy.id}`}
|
||||||
</Card>
|
/>
|
||||||
</Link>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</DashboardLayout>
|
</DashboardLayout>
|
||||||
|
|||||||
61
frontend/src/components/strategy/strategy-card.tsx
Normal file
61
frontend/src/components/strategy/strategy-card.tsx
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { LucideIcon } from "lucide-react";
|
||||||
|
|
||||||
|
interface StrategyCardProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
icon: LucideIcon;
|
||||||
|
expectedCagr: string;
|
||||||
|
risk: "low" | "medium" | "high";
|
||||||
|
stockCount: number;
|
||||||
|
href: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const riskColors = {
|
||||||
|
low: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
|
||||||
|
medium: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
|
||||||
|
high: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
|
||||||
|
};
|
||||||
|
|
||||||
|
const riskLabels = { low: "낮음", medium: "중간", high: "높음" };
|
||||||
|
|
||||||
|
export function StrategyCard({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
icon: Icon,
|
||||||
|
expectedCagr,
|
||||||
|
risk,
|
||||||
|
stockCount,
|
||||||
|
href,
|
||||||
|
}: StrategyCardProps) {
|
||||||
|
return (
|
||||||
|
<Card className="flex flex-col">
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||||
|
<Icon className="h-5 w-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-lg">{title}</CardTitle>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-1 flex-col">
|
||||||
|
<p className="mb-4 text-sm text-muted-foreground">{description}</p>
|
||||||
|
<div className="mb-4 flex flex-wrap gap-2">
|
||||||
|
<Badge variant="secondary">CAGR {expectedCagr}</Badge>
|
||||||
|
<Badge className={riskColors[risk]}>리스크 {riskLabels[risk]}</Badge>
|
||||||
|
<Badge variant="outline">{stockCount}종목</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="mt-auto">
|
||||||
|
<Button asChild className="w-full">
|
||||||
|
<Link href={href}>전략 상세보기</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
36
frontend/src/components/ui/badge.tsx
Normal file
36
frontend/src/components/ui/badge.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||||
|
outline: "text-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
160
frontend/src/components/ui/select.tsx
Normal file
160
frontend/src/components/ui/select.tsx
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||||
|
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Select = SelectPrimitive.Root
|
||||||
|
|
||||||
|
const SelectGroup = SelectPrimitive.Group
|
||||||
|
|
||||||
|
const SelectValue = SelectPrimitive.Value
|
||||||
|
|
||||||
|
const SelectTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
))
|
||||||
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
||||||
|
|
||||||
|
const SelectScrollUpButton = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUp className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
))
|
||||||
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
||||||
|
|
||||||
|
const SelectScrollDownButton = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default items-center justify-center py-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDown className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
))
|
||||||
|
SelectScrollDownButton.displayName =
|
||||||
|
SelectPrimitive.ScrollDownButton.displayName
|
||||||
|
|
||||||
|
const SelectContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||||
|
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
|
||||||
|
position === "popper" &&
|
||||||
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectScrollUpButton />
|
||||||
|
<SelectPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
"p-1",
|
||||||
|
position === "popper" &&
|
||||||
|
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
))
|
||||||
|
SelectContent.displayName = SelectPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const SelectLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
||||||
|
|
||||||
|
const SelectItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
))
|
||||||
|
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||||
|
|
||||||
|
const SelectSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectGroup,
|
||||||
|
SelectValue,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectContent,
|
||||||
|
SelectLabel,
|
||||||
|
SelectItem,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
}
|
||||||
15
frontend/src/components/ui/skeleton.tsx
Normal file
15
frontend/src/components/ui/skeleton.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Skeleton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Skeleton }
|
||||||
Loading…
x
Reference in New Issue
Block a user