feat: add rebalancing calculation page
This commit is contained in:
parent
bc356d9edf
commit
d2314cad4e
249
frontend/src/app/portfolio/[id]/rebalance/page.tsx
Normal file
249
frontend/src/app/portfolio/[id]/rebalance/page.tsx
Normal file
@ -0,0 +1,249 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import Sidebar from '@/components/layout/Sidebar';
|
||||
import Header from '@/components/layout/Header';
|
||||
import { api } from '@/lib/api';
|
||||
|
||||
interface RebalanceItem {
|
||||
ticker: string;
|
||||
name: string | null;
|
||||
target_ratio: number;
|
||||
current_ratio: number;
|
||||
current_quantity: number;
|
||||
current_value: number;
|
||||
target_value: number;
|
||||
diff_value: number;
|
||||
diff_quantity: number;
|
||||
action: string;
|
||||
}
|
||||
|
||||
interface RebalanceResponse {
|
||||
portfolio_id: number;
|
||||
total_value: number;
|
||||
items: RebalanceItem[];
|
||||
}
|
||||
|
||||
interface SimulationResponse extends RebalanceResponse {
|
||||
current_total: number;
|
||||
additional_amount: number;
|
||||
new_total: number;
|
||||
}
|
||||
|
||||
export default function RebalancePage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const portfolioId = params.id as string;
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [rebalance, setRebalance] = useState<RebalanceResponse | SimulationResponse | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [additionalAmount, setAdditionalAmount] = useState('');
|
||||
const [simulating, setSimulating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
await api.getCurrentUser();
|
||||
await fetchRebalance();
|
||||
} catch {
|
||||
router.push('/login');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
init();
|
||||
}, [router, portfolioId]);
|
||||
|
||||
const fetchRebalance = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
const data = await api.get<RebalanceResponse>(`/api/portfolios/${portfolioId}/rebalance`);
|
||||
setRebalance(data);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to calculate rebalance';
|
||||
setError(message);
|
||||
}
|
||||
};
|
||||
|
||||
const simulate = async () => {
|
||||
if (!additionalAmount) return;
|
||||
setSimulating(true);
|
||||
try {
|
||||
setError(null);
|
||||
const data = await api.post<SimulationResponse>(
|
||||
`/api/portfolios/${portfolioId}/rebalance/simulate`,
|
||||
{ additional_amount: parseFloat(additionalAmount) }
|
||||
);
|
||||
setRebalance(data);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Simulation failed';
|
||||
setError(message);
|
||||
} finally {
|
||||
setSimulating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat('ko-KR', {
|
||||
style: 'currency',
|
||||
currency: 'KRW',
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const getActionBadge = (action: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
buy: 'bg-green-100 text-green-800',
|
||||
sell: 'bg-red-100 text-red-800',
|
||||
hold: 'bg-gray-100 text-gray-800',
|
||||
};
|
||||
const labels: Record<string, string> = {
|
||||
buy: '매수',
|
||||
sell: '매도',
|
||||
hold: '유지',
|
||||
};
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded text-xs ${styles[action] || styles.hold}`}>
|
||||
{labels[action] || action}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-gray-500">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar />
|
||||
<div className="flex-1">
|
||||
<Header />
|
||||
<main className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-800 mb-6">리밸런싱 계산</h1>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Simulation Input */}
|
||||
<div className="bg-white rounded-lg shadow p-4 mb-6">
|
||||
<div className="flex gap-4 items-end">
|
||||
<div className="flex-1">
|
||||
<label htmlFor="additional-amount" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
추가 입금액 (시뮬레이션)
|
||||
</label>
|
||||
<input
|
||||
id="additional-amount"
|
||||
type="number"
|
||||
value={additionalAmount}
|
||||
onChange={(e) => setAdditionalAmount(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="예: 1000000"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={simulate}
|
||||
disabled={!additionalAmount || simulating}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-400 transition-colors"
|
||||
>
|
||||
{simulating ? '계산 중...' : '시뮬레이션'}
|
||||
</button>
|
||||
<button
|
||||
onClick={fetchRebalance}
|
||||
className="px-4 py-2 border rounded hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
초기화
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{rebalance && (
|
||||
<>
|
||||
{/* Summary */}
|
||||
<div className="bg-white rounded-lg shadow p-4 mb-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">현재 총액</p>
|
||||
<p className="text-xl font-bold">
|
||||
{formatCurrency('current_total' in rebalance ? rebalance.current_total : rebalance.total_value)}
|
||||
</p>
|
||||
</div>
|
||||
{'additional_amount' in rebalance && (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">추가 입금</p>
|
||||
<p className="text-xl font-bold text-blue-600">
|
||||
+{formatCurrency(rebalance.additional_amount)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">새 총액</p>
|
||||
<p className="text-xl font-bold">
|
||||
{formatCurrency(rebalance.new_total)}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rebalance Table */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
<div className="p-4 border-b">
|
||||
<h2 className="text-lg font-semibold">리밸런싱 내역</h2>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" className="px-4 py-3 text-left text-sm font-medium text-gray-600">종목</th>
|
||||
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">목표 비중</th>
|
||||
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">현재 비중</th>
|
||||
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">현재 수량</th>
|
||||
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">조정 금액</th>
|
||||
<th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-600">조정 수량</th>
|
||||
<th scope="col" className="px-4 py-3 text-center text-sm font-medium text-gray-600">액션</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{rebalance.items.map((item) => (
|
||||
<tr key={item.ticker}>
|
||||
<td className="px-4 py-3">
|
||||
<div className="font-medium">{item.ticker}</div>
|
||||
{item.name && <div className="text-xs text-gray-500">{item.name}</div>}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-right">{item.target_ratio.toFixed(2)}%</td>
|
||||
<td className="px-4 py-3 text-sm text-right">{item.current_ratio.toFixed(2)}%</td>
|
||||
<td className="px-4 py-3 text-sm text-right">{item.current_quantity.toLocaleString()}</td>
|
||||
<td className={`px-4 py-3 text-sm text-right ${
|
||||
item.diff_value > 0 ? 'text-green-600' : item.diff_value < 0 ? 'text-red-600' : ''
|
||||
}`}>
|
||||
{item.diff_value > 0 ? '+' : ''}{formatCurrency(item.diff_value)}
|
||||
</td>
|
||||
<td className={`px-4 py-3 text-sm text-right font-medium ${
|
||||
item.diff_quantity > 0 ? 'text-green-600' : item.diff_quantity < 0 ? 'text-red-600' : ''
|
||||
}`}>
|
||||
{item.diff_quantity > 0 ? '+' : ''}{item.diff_quantity}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">{getActionBadge(item.action)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user