From bc356d9edf49db5837765b16c818b7d4c300a0f3 Mon Sep 17 00:00:00 2001
From: zephyrdark <zephyrdark@gmail.com>
Date: Tue, 3 Feb 2026 08:27:29 +0900
Subject: [PATCH] feat: add portfolio detail page with holdings

---
 frontend/src/app/portfolio/[id]/page.tsx | 203 +++++++++++++++++++++++
 1 file changed, 203 insertions(+)
 create mode 100644 frontend/src/app/portfolio/[id]/page.tsx

diff --git a/frontend/src/app/portfolio/[id]/page.tsx b/frontend/src/app/portfolio/[id]/page.tsx
new file mode 100644
index 0000000..94f2425
--- /dev/null
+++ b/frontend/src/app/portfolio/[id]/page.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import Link from 'next/link';
+import Sidebar from '@/components/layout/Sidebar';
+import Header from '@/components/layout/Header';
+import { api } from '@/lib/api';
+
+interface HoldingWithValue {
+  ticker: string;
+  quantity: number;
+  avg_price: number;
+  current_price: number | null;
+  value: number | null;
+  current_ratio: number | null;
+  profit_loss: number | null;
+  profit_loss_ratio: number | null;
+}
+
+interface Target {
+  ticker: string;
+  target_ratio: number;
+}
+
+interface PortfolioDetail {
+  id: number;
+  name: string;
+  portfolio_type: string;
+  created_at: string;
+  updated_at: string;
+  targets: Target[];
+  holdings: HoldingWithValue[];
+  total_value: number | null;
+  total_invested: number | null;
+  total_profit_loss: number | null;
+}
+
+export default function PortfolioDetailPage() {
+  const router = useRouter();
+  const params = useParams();
+  const portfolioId = params.id as string;
+
+  const [loading, setLoading] = useState(true);
+  const [portfolio, setPortfolio] = useState<PortfolioDetail | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        await api.getCurrentUser();
+        await fetchPortfolio();
+      } catch {
+        router.push('/login');
+      } finally {
+        setLoading(false);
+      }
+    };
+    init();
+  }, [router, portfolioId]);
+
+  const fetchPortfolio = async () => {
+    try {
+      setError(null);
+      const data = await api.get<PortfolioDetail>(`/api/portfolios/${portfolioId}/detail`);
+      setPortfolio(data);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch portfolio';
+      setError(message);
+    }
+  };
+
+  const formatCurrency = (value: number | null) => {
+    if (value === null) return '-';
+    return new Intl.NumberFormat('ko-KR', {
+      style: 'currency',
+      currency: 'KRW',
+      maximumFractionDigits: 0,
+    }).format(value);
+  };
+
+  const formatPercent = (value: number | null) => {
+    if (value === null) return '-';
+    return `${value >= 0 ? '+' : ''}${value.toFixed(2)}%`;
+  };
+
+  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">
+          {error && (
+            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+              {error}
+            </div>
+          )}
+
+          {portfolio && (
+            <>
+              <div className="flex justify-between items-center mb-6">
+                <div>
+                  <h1 className="text-2xl font-bold text-gray-800">{portfolio.name}</h1>
+                  <span className={`text-xs px-2 py-1 rounded ${
+                    portfolio.portfolio_type === 'pension'
+                      ? 'bg-purple-100 text-purple-800'
+                      : 'bg-gray-100 text-gray-800'
+                  }`}>
+                    {portfolio.portfolio_type === 'pension' ? '퇴직연금' : '일반'}
+                  </span>
+                </div>
+                <Link
+                  href={`/portfolio/${portfolioId}/rebalance`}
+                  className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                >
+                  리밸런싱
+                </Link>
+              </div>
+
+              {/* Summary Cards */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div className="bg-white rounded-lg shadow p-6">
+                  <p className="text-sm text-gray-500 mb-1">총 평가금액</p>
+                  <p className="text-2xl font-bold text-gray-800">
+                    {formatCurrency(portfolio.total_value)}
+                  </p>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6">
+                  <p className="text-sm text-gray-500 mb-1">총 투자금액</p>
+                  <p className="text-2xl font-bold text-gray-800">
+                    {formatCurrency(portfolio.total_invested)}
+                  </p>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6">
+                  <p className="text-sm text-gray-500 mb-1">총 손익</p>
+                  <p className={`text-2xl font-bold ${
+                    (portfolio.total_profit_loss ?? 0) >= 0 ? 'text-green-600' : 'text-red-600'
+                  }`}>
+                    {formatCurrency(portfolio.total_profit_loss)}
+                  </p>
+                </div>
+              </div>
+
+              {/* Holdings 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-right text-sm font-medium text-gray-600">손익률</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y">
+                      {portfolio.holdings.map((holding) => (
+                        <tr key={holding.ticker}>
+                          <td className="px-4 py-3 text-sm font-medium">{holding.ticker}</td>
+                          <td className="px-4 py-3 text-sm text-right">{holding.quantity.toLocaleString()}</td>
+                          <td className="px-4 py-3 text-sm text-right">{formatCurrency(holding.avg_price)}</td>
+                          <td className="px-4 py-3 text-sm text-right">{formatCurrency(holding.current_price)}</td>
+                          <td className="px-4 py-3 text-sm text-right">{formatCurrency(holding.value)}</td>
+                          <td className="px-4 py-3 text-sm text-right">{holding.current_ratio?.toFixed(2)}%</td>
+                          <td className={`px-4 py-3 text-sm text-right ${
+                            (holding.profit_loss_ratio ?? 0) >= 0 ? 'text-green-600' : 'text-red-600'
+                          }`}>
+                            {formatPercent(holding.profit_loss_ratio)}
+                          </td>
+                        </tr>
+                      ))}
+                      {portfolio.holdings.length === 0 && (
+                        <tr>
+                          <td colSpan={7} className="px-4 py-8 text-center text-gray-500">
+                            보유 자산이 없습니다.
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </>
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}