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-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
@ -1279,6 +1280,12 @@
|
||||
"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": {
|
||||
"version": "1.1.3",
|
||||
"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": {
|
||||
"version": "1.2.4",
|
||||
"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": {
|
||||
"version": "1.1.1",
|
||||
"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-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
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 { Input } from '@/components/ui/input';
|
||||
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 { 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 {
|
||||
id: number;
|
||||
@ -36,12 +65,60 @@ const periodOptions = [
|
||||
{ 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() {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [backtests, setBacktests] = useState<BacktestListItem[]>([]);
|
||||
const [currentResult, setCurrentResult] = useState<BacktestResult | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showHistory, setShowHistory] = useState(false);
|
||||
|
||||
// Form state
|
||||
const [strategyType, setStrategyType] = useState('multi_factor');
|
||||
@ -144,305 +221,490 @@ export default function BacktestPage() {
|
||||
failed: '실패',
|
||||
};
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded text-xs ${styles[status] || 'bg-muted'}`}>
|
||||
<Badge className={styles[status] || 'bg-muted'}>
|
||||
{labels[status] || status}
|
||||
</span>
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const formatNumber = (value: number | null, decimals: number = 2) => {
|
||||
if (value === null) return '-';
|
||||
const formatNumber = (value: number | null | undefined, decimals: number = 2) => {
|
||||
if (value === null || value === undefined) return '-';
|
||||
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) {
|
||||
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 (
|
||||
<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 && (
|
||||
<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}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New Backtest Form */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle>새 백테스트</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="strategy">전략</Label>
|
||||
<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 && (
|
||||
{showHistory ? (
|
||||
// History View
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>백테스트 기록</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-muted">
|
||||
<tr>
|
||||
<td colSpan={8} className="px-4 py-8 text-center text-muted-foreground">
|
||||
아직 백테스트가 없습니다.
|
||||
</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-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>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,29 +2,38 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
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 { BarChart3, Star, TrendingUp } from 'lucide-react';
|
||||
|
||||
const strategies = [
|
||||
{
|
||||
id: 'multi-factor',
|
||||
name: '멀티 팩터',
|
||||
description: '밸류, 퀄리티, 모멘텀 팩터를 조합한 종합 전략',
|
||||
icon: '📊',
|
||||
title: '멀티 팩터',
|
||||
description: '밸류, 퀄리티, 모멘텀 팩터를 조합한 종합 전략입니다. 다양한 팩터를 활용하여 분산 투자 효과를 극대화합니다.',
|
||||
icon: BarChart3,
|
||||
expectedCagr: '12-18%',
|
||||
risk: 'medium' as const,
|
||||
stockCount: 30,
|
||||
},
|
||||
{
|
||||
id: 'quality',
|
||||
name: '슈퍼 퀄리티',
|
||||
description: 'F-Score 기반 우량주 선별 전략',
|
||||
icon: '⭐',
|
||||
title: '슈퍼 퀄리티',
|
||||
description: 'Piotroski F-Score 기반 우량주 선별 전략입니다. 재무적으로 건전한 기업에 집중 투자합니다.',
|
||||
icon: Star,
|
||||
expectedCagr: '10-15%',
|
||||
risk: 'low' as const,
|
||||
stockCount: 20,
|
||||
},
|
||||
{
|
||||
id: 'value-momentum',
|
||||
name: '밸류 모멘텀',
|
||||
description: '가치주와 모멘텀을 결합한 전략',
|
||||
icon: '📈',
|
||||
title: '밸류 모멘텀',
|
||||
description: '저평가된 가치주와 상승 모멘텀을 결합한 전략입니다. 두 팩터의 시너지 효과를 추구합니다.',
|
||||
icon: TrendingUp,
|
||||
expectedCagr: '15-22%',
|
||||
risk: 'high' as const,
|
||||
stockCount: 25,
|
||||
},
|
||||
];
|
||||
|
||||
@ -51,21 +60,25 @@ export default function StrategyListPage() {
|
||||
|
||||
return (
|
||||
<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">
|
||||
{strategies.map((strategy) => (
|
||||
<Link key={strategy.id} href={`/strategy/${strategy.id}`}>
|
||||
<Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
|
||||
<CardHeader>
|
||||
<div className="text-4xl mb-4">{strategy.icon}</div>
|
||||
<CardTitle>{strategy.name}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">{strategy.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
<StrategyCard
|
||||
key={strategy.id}
|
||||
title={strategy.title}
|
||||
description={strategy.description}
|
||||
icon={strategy.icon}
|
||||
expectedCagr={strategy.expectedCagr}
|
||||
risk={strategy.risk}
|
||||
stockCount={strategy.stockCount}
|
||||
href={`/strategy/${strategy.id}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</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