feat: /portfolio/[token] 공유 URL + /admin/hidden 관리자 대시보드

- lib/admin-auth: HMAC 서명 포트폴리오 토큰 발급/검증 (1~365일)
- /api/admin/portfolio-token: 관리자 쿠키 인증 후 토큰 발급
- /portfolio/[token]: 위시캣 제출용 게이트웨이 (noindex, 만료 시 404)
- /admin/hidden: 숨김 페이지 바로가기 + 토큰 발급 UI

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/admin/components/AdminSidebar.tsx

@@ -88,6 +88,16 @@ const NAV_ITEMS = [
       </svg>
     ),
   },
+  {
+    href: '/admin/hidden',
+    label: '숨김 페이지',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+      </svg>
+    ),
+  },
   {
     href: '/admin/analytics',
     label: '방문자 분석',

app/admin/hidden/page.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+const HIDDEN_PAGES = [
+  {
+    path: '/freelance',
+    label: '외주 개발 문의',
+    desc: '위시캣·숨고 지원서에 뿌린 기존 링크. 노출 제거 + noindex.',
+  },
+  {
+    path: '/services/website',
+    label: '홈페이지 제작 상세',
+    desc: '홈페이지 제작 랜딩. 직링크 전용.',
+  },
+];
+
+interface IssuedToken {
+  token: string;
+  url: string;
+  memo: string;
+  expiresAt: string;
+}
+
+export default function AdminHiddenPage() {
+  const [memo, setMemo] = useState('');
+  const [ttlDays, setTtlDays] = useState(30);
+  const [loading, setLoading] = useState(false);
+  const [issued, setIssued] = useState<IssuedToken[]>([]);
+  const [error, setError] = useState('');
+
+  async function handleIssue() {
+    setError('');
+    if (!memo.trim()) {
+      setError('메모를 입력해주세요. (예: 위시캣 xx 프로젝트)');
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await fetch('/api/admin/portfolio-token', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ memo, ttlDays }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error || '실패');
+      const data = await res.json();
+      const url = `${window.location.origin}/portfolio/${data.token}`;
+      setIssued([{ token: data.token, url, memo: data.memo, expiresAt: data.expiresAt }, ...issued]);
+      setMemo('');
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '토큰 생성 실패');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function copy(text: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      alert('복사되었습니다');
+    } catch {
+      alert('복사 실패 — 수동으로 복사해주세요');
+    }
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto px-6 py-10 space-y-10">
+      <header>
+        <h1 className="text-2xl font-extrabold text-slate-900">숨김 페이지 관리</h1>
+        <p className="text-sm text-slate-500 mt-1">
+          공개 UI에서 숨긴 페이지 바로가기 + 위시캣 제출용 임시 공유 URL 발급.
+        </p>
+      </header>
+
+      {/* 숨김 페이지 바로가기 */}
+      <section>
+        <h2 className="text-sm font-bold text-slate-800 mb-3">🔗 숨김 페이지 바로가기</h2>
+        <div className="space-y-2">
+          {HIDDEN_PAGES.map((p) => (
+            <div
+              key={p.path}
+              className="flex items-center justify-between border border-slate-200 bg-white rounded-xl px-5 py-4"
+            >
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <Link
+                    href={p.path}
+                    target="_blank"
+                    className="font-bold text-slate-900 hover:text-violet-700"
+                  >
+                    {p.label}
+                  </Link>
+                  <code className="text-xs text-slate-500 font-mono">{p.path}</code>
+                </div>
+                <p className="text-xs text-slate-500 mt-1">{p.desc}</p>
+              </div>
+              <button
+                onClick={() => copy(window.location.origin + p.path)}
+                className="text-xs font-bold text-slate-700 border border-slate-300 hover:bg-slate-50 px-3 py-1.5 rounded-lg"
+              >
+                URL 복사
+              </button>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 포트폴리오 토큰 발급 */}
+      <section>
+        <h2 className="text-sm font-bold text-slate-800 mb-3">🎫 포트폴리오 임시 공유 URL 발급</h2>
+        <div className="border border-slate-200 bg-white rounded-xl p-6">
+          <p className="text-xs text-slate-500 mb-4 leading-relaxed">
+            위시캣 지원서 등 외부 제출용. <code className="font-mono bg-slate-100 px-1 rounded">/portfolio/[token]</code> 형태의
+            프리미엄 게이트웨이 페이지가 생성됩니다. 만료되면 404로 처리됩니다.
+          </p>
+          <div className="space-y-3">
+            <div>
+              <label className="block text-xs font-bold text-slate-700 mb-1.5">메모 (내부용)</label>
+              <input
+                type="text"
+                value={memo}
+                onChange={(e) => setMemo(e.target.value)}
+                placeholder="예: 위시캣 OO 프로젝트 제안서용"
+                className="w-full px-4 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-violet-500"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-bold text-slate-700 mb-1.5">유효 기간 (일)</label>
+              <input
+                type="number"
+                min={1}
+                max={365}
+                value={ttlDays}
+                onChange={(e) => setTtlDays(Number(e.target.value))}
+                className="w-32 px-4 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-violet-500"
+              />
+            </div>
+            {error && <p className="text-xs text-rose-600">{error}</p>}
+            <button
+              onClick={handleIssue}
+              disabled={loading}
+              className="bg-violet-600 hover:bg-violet-500 disabled:bg-slate-300 text-white font-bold text-sm px-5 py-2.5 rounded-lg transition"
+            >
+              {loading ? '생성 중...' : '토큰 발급'}
+            </button>
+          </div>
+        </div>
+
+        {/* 최근 발급 목록 (세션 메모리만 — 새로고침 시 초기화) */}
+        {issued.length > 0 && (
+          <div className="mt-5 space-y-3">
+            <p className="text-xs font-bold text-slate-600">이번 세션에 발급한 URL</p>
+            {issued.map((t) => (
+              <div key={t.token} className="border border-slate-200 bg-slate-50 rounded-xl p-4">
+                <div className="flex items-center justify-between gap-3 mb-2">
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs text-slate-600 mb-1">
+                      📝 {t.memo} · 만료 {new Date(t.expiresAt).toLocaleDateString('ko-KR')}
+                    </p>
+                    <code className="block text-xs font-mono text-slate-800 bg-white border border-slate-200 rounded p-2 truncate">
+                      {t.url}
+                    </code>
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => copy(t.url)}
+                    className="text-xs font-bold bg-violet-600 hover:bg-violet-500 text-white px-3 py-1.5 rounded-lg"
+                  >
+                    URL 복사
+                  </button>
+                  <a
+                    href={t.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-xs font-bold border border-slate-300 hover:bg-white px-3 py-1.5 rounded-lg text-slate-700"
+                  >
+                    열기 ↗
+                  </a>
+                </div>
+              </div>
+            ))}
+            <p className="text-[11px] text-slate-400">
+              ※ 발급 목록은 현재 세션에만 표시됩니다. 발급 후 반드시 URL을 복사해두세요.
+            </p>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

app/api/admin/portfolio-token/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+import { createPortfolioToken, verifyAdminTokenNode } from '@/lib/admin-auth';
+
+export const runtime = 'nodejs';
+
+async function requireAdmin() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('admin_token')?.value;
+  return !!token && verifyAdminTokenNode(token);
+}
+
+export async function POST(request: Request) {
+  if (!(await requireAdmin())) {
+    return NextResponse.json({ error: '인증이 필요합니다.' }, { status: 401 });
+  }
+
+  try {
+    const { memo, ttlDays } = await request.json();
+    const safeMemo = typeof memo === 'string' ? memo : '';
+    const safeTtl = Math.max(1, Math.min(365, Number(ttlDays) || 30));
+    const token = createPortfolioToken(safeMemo, safeTtl);
+    const expiresAt = new Date(Date.now() + safeTtl * 86400000).toISOString();
+    return NextResponse.json({ token, expiresAt, memo: safeMemo });
+  } catch {
+    return NextResponse.json({ error: '토큰 생성 실패' }, { status: 500 });
+  }
+}

app/portfolio/[token]/page.tsx

@@ -0,0 +1,95 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import { verifyPortfolioTokenNode } from '@/lib/admin-auth';
+
+export const metadata: Metadata = {
+  title: '박재오 — 외주 개발 포트폴리오',
+  description: '7년차 대기업 백엔드 개발자 박재오의 외주 포트폴리오.',
+  robots: { index: false, follow: false },
+};
+
+export const dynamic = 'force-dynamic';
+
+interface Props {
+  params: Promise<{ token: string }>;
+}
+
+export default async function PortfolioGateway({ params }: Props) {
+  const { token } = await params;
+  const payload = verifyPortfolioTokenNode(token);
+  if (!payload) notFound();
+
+  const expires = new Date(payload.exp).toLocaleDateString('ko-KR');
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-white">
+      <section
+        className="relative overflow-hidden px-6 py-20 lg:px-14 lg:py-28"
+        style={{
+          background:
+            'radial-gradient(circle at 30% 20%, #1e293b 0%, #020617 55%)',
+        }}
+      >
+        <div className="max-w-4xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <span className="inline-flex h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
+            <span className="font-mono text-xs text-emerald-300/80 tracking-[0.25em] uppercase">
+              Private Portfolio · {payload.memo || 'Confidential'}
+            </span>
+          </div>
+
+          <h1 className="text-4xl md:text-6xl font-extrabold leading-[1.05] mb-6" style={{ wordBreak: 'keep-all' }}>
+            박재오
+            <br />
+            <span className="bg-gradient-to-r from-sky-300 via-blue-200 to-cyan-300 bg-clip-text text-transparent">
+              외주 개발 포트폴리오
+            </span>
+          </h1>
+
+          <p className="text-slate-300 text-lg leading-relaxed max-w-2xl mb-10" style={{ wordBreak: 'keep-all' }}>
+            7년차 대기업 백엔드 개발자 · 계약서 우선 · 납기 패널티 보장 · 소스코드 100% 인도.
+            본 페이지는 {expires}까지 유효한 개별 공유 링크입니다.
+          </p>
+
+          <div className="grid sm:grid-cols-2 gap-4">
+            <Link
+              href="/freelance"
+              className="group border border-white/10 hover:border-sky-400/50 rounded-2xl p-6 bg-white/[0.02] hover:bg-white/[0.05] transition-all"
+            >
+              <p className="font-mono text-xs text-sky-300/70 uppercase tracking-widest mb-2">
+                Freelance
+              </p>
+              <h3 className="text-xl font-extrabold mb-2">외주 개발 · 전체 소개</h3>
+              <p className="text-sm text-slate-400 leading-relaxed">
+                계약 프로세스, 납기 패널티, 포트폴리오 사례, 견적 문의.
+              </p>
+              <span className="inline-block mt-4 text-sm font-bold text-sky-300 group-hover:underline">
+                자세히 보기 →
+              </span>
+            </Link>
+            <Link
+              href="/services/website"
+              className="group border border-white/10 hover:border-violet-400/50 rounded-2xl p-6 bg-white/[0.02] hover:bg-white/[0.05] transition-all"
+            >
+              <p className="font-mono text-xs text-violet-300/70 uppercase tracking-widest mb-2">
+                Website
+              </p>
+              <h3 className="text-xl font-extrabold mb-2">홈페이지·쇼핑몰 제작</h3>
+              <p className="text-sm text-slate-400 leading-relaxed">
+                Next.js 기반 반응형 웹, SEO 기본, 3개월 유지보수 포함.
+              </p>
+              <span className="inline-block mt-4 text-sm font-bold text-violet-300 group-hover:underline">
+                자세히 보기 →
+              </span>
+            </Link>
+          </div>
+
+          <div className="mt-10 text-xs text-slate-500 font-mono">
+            © 쟁승메이드 · 010-3907-1392 · bgg8988@gmail.com
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}