feat: add career portfolio page

src/app/(main)/profile/portfolio/page.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { ArrowLeft, Building2, BadgeCheck, Calendar, Wrench, Ticket, FileText, Edit3, Save, X, Loader2 } from 'lucide-react';
+import { useAuthStore } from '@/stores';
+import employeeService, { type PortfolioEntry } from '@/services/employeeService';
+
+const initialColor = (name: string) => {
+  const colors = ['from-emerald-400 to-emerald-500', 'from-orange-400 to-orange-500', 'from-blue-400 to-blue-500', 'from-pink-400 to-pink-500', 'from-purple-400 to-purple-500'];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return colors[Math.abs(hash) % colors.length];
+};
+
+export default function PortfolioPage() {
+  const router = useRouter();
+  const user = useAuthStore((s) => s.user);
+  const [portfolio, setPortfolio] = useState<PortfolioEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editText, setEditText] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!user) return;
+    setLoading(true);
+    employeeService.getPortfolio(user.empId)
+      .then((res) => {
+        setPortfolio(Array.isArray(res.data) ? res.data : []);
+      })
+      .catch(() => setError('포트폴리오를 불러오는데 실패했습니다.'))
+      .finally(() => setLoading(false));
+  }, [user]);
+
+  const handleEditAchievements = (entry: PortfolioEntry) => {
+    setEditingId(entry.dispatchId);
+    setEditText(entry.achievements || '');
+  };
+
+  const handleSaveAchievements = async () => {
+    if (!user || !editingId) return;
+    setSaving(true);
+    try {
+      await employeeService.updateAchievements(user.empId, editingId, editText);
+      setPortfolio((prev) => prev.map((p) => p.dispatchId === editingId ? { ...p, achievements: editText } : p));
+      setEditingId(null);
+    } catch {
+      alert('저장에 실패했습니다.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!user) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-5xl mx-auto text-center py-20 text-text-muted">로그인이 필요합니다.</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-5xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center gap-4 mb-8">
+          <button onClick={() => router.back()} className="p-2 hover:bg-surface-container rounded-xl transition-colors">
+            <ArrowLeft className="w-5 h-5 text-text-muted" />
+          </button>
+          <div>
+            <h1 className="font-outfit text-2xl font-semibold text-text-main tracking-tight">경력 기술서</h1>
+            <p className="text-text-muted text-sm mt-0.5">{user.name}님의 포트폴리오</p>
+          </div>
+        </div>
+
+        {/* Summary */}
+        {!loading && portfolio.length > 0 && (
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
+            <div className="bg-surface rounded-2xl p-5 border border-border">
+              <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Total Projects</p>
+              <p className="font-outfit text-2xl font-bold text-text-main">{portfolio.length}</p>
+            </div>
+            <div className="bg-surface rounded-2xl p-5 border border-border">
+              <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Current</p>
+              <p className="font-outfit text-2xl font-bold text-emerald-500">{portfolio.filter((p) => !p.endDate).length}</p>
+            </div>
+            <div className="bg-surface rounded-2xl p-5 border border-border">
+              <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">SR Tickets</p>
+              <p className="font-outfit text-2xl font-bold text-blue-500">{portfolio.reduce((a, p) => a + p.resolvedTickets.length, 0)}</p>
+            </div>
+            <div className="bg-surface rounded-2xl p-5 border border-border">
+              <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Reports</p>
+              <p className="font-outfit text-2xl font-bold text-purple-500">{portfolio.reduce((a, p) => a + p.reports.length, 0)}</p>
+            </div>
+          </div>
+        )}
+
+        {/* Content */}
+        {loading ? (
+          <div className="flex items-center justify-center h-48 text-text-muted text-sm">로딩 중...</div>
+        ) : error ? (
+          <div className="bg-surface rounded-2xl p-8 text-center border border-border">
+            <p className="text-status-critical-text">{error}</p>
+          </div>
+        ) : portfolio.length === 0 ? (
+          <div className="bg-surface rounded-2xl p-8 sm:p-12 text-center border border-border">
+            <Building2 className="w-12 h-12 mx-auto mb-4 text-text-muted/40" />
+            <p className="text-text-muted">등록된 포트폴리오 항목이 없습니다.</p>
+          </div>
+        ) : (
+          <div className="relative space-y-0">
+            {portfolio.map((entry, idx) => (
+              <div key={entry.dispatchId} className="relative flex gap-4 sm:gap-6 pb-8">
+                {/* Timeline rail */}
+                <div className="flex flex-col items-center">
+                  <div className={`w-4 h-4 rounded-full bg-gradient-to-br ${initialColor(entry.projectName)} ring-4 ring-white z-10 flex-shrink-0`} />
+                  {idx < portfolio.length - 1 && <div className="w-0.5 flex-1 bg-gray-200 mt-1" />}
+                </div>
+
+                {/* Card */}
+                <div className="flex-1 min-w-0 bg-surface rounded-2xl border border-border overflow-hidden">
+                  {/* Header */}
+                  <div className="px-4 sm:px-6 py-4 flex items-start justify-between gap-3 border-b border-border bg-gradient-to-r from-indigo-50/30 to-transparent">
+                    <div className="min-w-0">
+                      <h3 className="font-outfit font-semibold text-lg text-text-main">{entry.projectName}</h3>
+                      <p className="text-xs text-text-muted mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1">
+                        <span className="flex items-center gap-1"><BadgeCheck className="w-3 h-3" />{entry.roleTitle}</span>
+                        <span className="flex items-center gap-1"><Calendar className="w-3 h-3" />{entry.startDate}{entry.endDate ? ` ~ ${entry.endDate}` : ' ~ Present'}</span>
+                        <span>공수 {entry.contributionRate}%</span>
+                      </p>
+                    </div>
+                    <span className="text-xs bg-primary/10 text-primary px-2.5 py-1 rounded-full font-medium shrink-0">{entry.contributionRate}%</span>
+                  </div>
+
+                  {/* Body */}
+                  <div className="px-4 sm:px-6 py-4 space-y-4">
+                    {/* Tech Stack */}
+                    <div>
+                      <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1.5">Tech Stack</p>
+                      <div className="flex flex-wrap gap-1.5">
+                        {entry.individualTech.split(',').map((tech) => (
+                          <span key={tech.trim()} className="text-xs bg-surface-container text-text-main px-2.5 py-1 rounded-lg font-medium">{tech.trim()}</span>
+                        ))}
+                      </div>
+                    </div>
+
+                    {/* Performed Tasks */}
+                    {entry.performedTasks && (
+                      <div>
+                        <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Performed Tasks</p>
+                        <p className="text-sm text-text-main leading-relaxed whitespace-pre-wrap">{entry.performedTasks}</p>
+                      </div>
+                    )}
+
+                    {/* Achievements */}
+                    <div>
+                      <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Achievements</p>
+                      {editingId === entry.dispatchId ? (
+                        <div className="space-y-2">
+                          <textarea value={editText} onChange={(e) => setEditText(e.target.value)} rows={4}
+                            className="w-full px-3 py-2 border border-border rounded-xl bg-surface-container-lowest text-text-main placeholder-text-muted text-sm focus:outline-none focus:ring-2 focus:ring-primary/20" />
+                          <div className="flex gap-2">
+                            <button onClick={handleSaveAchievements} disabled={saving}
+                              className="flex items-center gap-1.5 bg-primary text-white px-4 py-2 rounded-xl text-xs font-semibold hover:bg-primary-hover transition-colors disabled:opacity-50">
+                              {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
+                              Save
+                            </button>
+                            <button onClick={() => setEditingId(null)}
+                              className="flex items-center gap-1.5 bg-gray-100 text-text-muted px-4 py-2 rounded-xl text-xs font-semibold hover:bg-gray-200 transition-colors">
+                              <X className="w-3.5 h-3.5" /> Cancel
+                            </button>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="group relative">
+                          <p className="text-sm text-text-main leading-relaxed whitespace-pre-wrap">{entry.achievements || '-'}</p>
+                          <button onClick={() => handleEditAchievements(entry)}
+                            className="absolute top-0 right-0 opacity-0 group-hover:opacity-100 p-1.5 bg-surface-container hover:bg-surface-container-high rounded-lg transition-all">
+                            <Edit3 className="w-3.5 h-3.5 text-text-muted" />
+                          </button>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Linked SR Tickets */}
+                    {entry.resolvedTickets.length > 0 && (
+                      <div>
+                        <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1.5 flex items-center gap-1.5">
+                          <Ticket className="w-3 h-3" /> Resolved SR Tickets ({entry.resolvedTickets.length})
+                        </p>
+                        <div className="space-y-1.5">
+                          {entry.resolvedTickets.map((t) => (
+                            <div key={t.ticketId} className="flex items-start gap-2 text-sm bg-surface-container-low rounded-lg px-3 py-2">
+                              <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded font-medium shrink-0">{t.category}</span>
+                              <span className="text-text-main">{t.title}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Linked Reports */}
+                    {entry.reports.length > 0 && (
+                      <div>
+                        <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1.5 flex items-center gap-1.5">
+                          <FileText className="w-3 h-3" /> Reports ({entry.reports.length})
+                        </p>
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-1.5">
+                          {entry.reports.slice(-4).map((r) => (
+                            <div key={r.targetDate} className="flex items-center gap-2 text-xs bg-surface-container-low rounded-lg px-3 py-2">
+                              <span className="text-text-muted">{r.targetDate}</span>
+                              <span className="text-text-main truncate">{r.reportType}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}