From c1f175f9bdfcc64384e8f7bb520de93af3086e1f Mon Sep 17 00:00:00 2001
From: zephyrdark <zephyrdark@gmail.com>
Date: Tue, 3 Feb 2026 07:13:14 +0900
Subject: [PATCH] feat: add new portfolio creation page

---
 frontend/src/app/portfolio/new/page.tsx | 103 ++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 frontend/src/app/portfolio/new/page.tsx

diff --git a/frontend/src/app/portfolio/new/page.tsx b/frontend/src/app/portfolio/new/page.tsx
new file mode 100644
index 0000000..cf0eb48
--- /dev/null
+++ b/frontend/src/app/portfolio/new/page.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Sidebar from '@/components/layout/Sidebar';
+import Header from '@/components/layout/Header';
+import { api } from '@/lib/api';
+
+export default function NewPortfolioPage() {
+  const router = useRouter();
+  const [name, setName] = useState('');
+  const [portfolioType, setPortfolioType] = useState('general');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const portfolio = await api.post('/api/portfolios', {
+        name,
+        portfolio_type: portfolioType,
+      });
+      router.push(`/portfolio/${(portfolio as { id: number }).id}`);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to create portfolio';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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>
+          )}
+
+          <div className="max-w-md">
+            <form onSubmit={handleSubmit} className="bg-white rounded-lg shadow p-6">
+              <div className="mb-4">
+                <label htmlFor="portfolio-name" className="block text-sm font-medium text-gray-700 mb-2">
+                  포트폴리오 이름
+                </label>
+                <input
+                  id="portfolio-name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="예: 퇴직연금 포트폴리오"
+                  required
+                />
+              </div>
+
+              <div className="mb-6">
+                <label htmlFor="portfolio-type" className="block text-sm font-medium text-gray-700 mb-2">
+                  유형
+                </label>
+                <select
+                  id="portfolio-type"
+                  value={portfolioType}
+                  onChange={(e) => setPortfolioType(e.target.value)}
+                  className="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <option value="general">일반</option>
+                  <option value="pension">퇴직연금</option>
+                </select>
+              </div>
+
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => router.back()}
+                  className="flex-1 px-4 py-2 border rounded hover:bg-gray-50 transition-colors"
+                >
+                  취소
+                </button>
+                <button
+                  type="submit"
+                  disabled={loading || !name}
+                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-400 transition-colors"
+                >
+                  {loading ? '생성 중...' : '생성'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}