feat(products): 동적 카탈로그·상세 페이지 + 계좌이체 구매 모달

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-11 09:07:00 +09:00
parent f151af89f3
commit 199dae0ee5
5 changed files with 750 additions and 45 deletions
--- a/app/products/[id]/page.tsx
+++ b/app/products/[id]/page.tsx
@@ -0,0 +1,171 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { getProductById, type ProductRow } from '@/lib/supabase/product-files';
+import BuySection from './BuySection';
+
+// 완성 소프트웨어 상세 (서버 컴포넌트).
+// 비노출/비활성/존재하지 않음/DB 예외 → notFound() 로 일관 처리해 500을 내지 않는다.
+
+export const dynamic = 'force-dynamic';
+
+const KOR_TIGHT = { letterSpacing: '-0.02em' } as const;
+const KOR_BODY = { letterSpacing: '-0.01em' } as const;
+
+interface Props {
+  params: Promise<{ id: string }>;
+}
+
+async function loadProduct(id: string): Promise<ProductRow | null> {
+  try {
+    return await getProductById(createAdminClient(), id);
+  } catch (err) {
+    // DB 장애·마이그레이션 미적용 등 — 상세 페이지는 404로 폴백
+    console.error('[ProductDetail] getProductById failed:', err);
+    return null;
+  }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id } = await params;
+  const product = await loadProduct(id);
+  if (!product || !product.is_listed || !product.is_active) {
+    return { title: '완성 소프트웨어' };
+  }
+  return {
+    title: product.name,
+    description:
+      product.description ??
+      `${product.name} — 쟁승메이드가 직접 운영하며 검증한 완성 소프트웨어. 입금 확인 후 마이페이지에서 즉시 다운로드.`,
+  };
+}
+
+function CheckMark() {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0 mt-0.5"
+      aria-hidden
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+export default async function ProductDetailPage({ params }: Props) {
+  const { id } = await params;
+  const product = await loadProduct(id);
+
+  if (!product || !product.is_listed || !product.is_active) {
+    notFound();
+  }
+
+  const features = product.features ?? [];
+  const longText = product.description_long ?? product.description ?? '';
+
+  return (
+    <section style={{ background: 'var(--jsm-bg)' }}>
+      <div className="max-w-3xl mx-auto px-6 lg:px-8 py-14 lg:py-20">
+        {/* 브레드크럼 */}
+        <nav className="mb-8" aria-label="breadcrumb">
+          <Link
+            href="/products"
+            className="inline-flex items-center gap-1.5 text-sm font-medium transition-colors hover:text-[var(--jsm-accent)]"
+            style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+              <path d="m15 18-6-6 6-6" />
+            </svg>
+            소프트웨어
+          </Link>
+        </nav>
+
+        {/* 제품명 · 가격 */}
+        <header className="pb-8 border-b" style={{ borderColor: 'var(--jsm-line)' }}>
+          <h1
+            className="text-2xl sm:text-3xl lg:text-4xl font-bold break-keep"
+            style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
+          >
+            {product.name}
+          </h1>
+          <p
+            className="mt-4 text-2xl font-bold"
+            style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
+          >
+            ₩{product.price.toLocaleString('ko-KR')}
+          </p>
+        </header>
+
+        {/* 상세 설명 */}
+        {longText && (
+          <div className="py-8 border-b" style={{ borderColor: 'var(--jsm-line)' }}>
+            <p
+              className="text-base leading-relaxed break-keep whitespace-pre-line"
+              style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
+            >
+              {longText}
+            </p>
+          </div>
+        )}
+
+        {/* 기능 리스트 */}
+        {features.length > 0 && (
+          <div className="py-8 border-b" style={{ borderColor: 'var(--jsm-line)' }}>
+            <h2
+              className="text-sm font-semibold mb-4 uppercase tracking-wider"
+              style={{ color: 'var(--jsm-accent)' }}
+            >
+              주요 기능
+            </h2>
+            <ul className="space-y-3">
+              {features.map((f) => (
+                <li
+                  key={f}
+                  className="flex items-start gap-2.5 text-sm sm:text-base break-keep"
+                  style={{ color: 'var(--jsm-ink)', ...KOR_BODY }}
+                >
+                  <span style={{ color: 'var(--jsm-accent)' }}>
+                    <CheckMark />
+                  </span>
+                  <span>{f}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {/* 구매 안내 + CTA */}
+        <div className="pt-8">
+          <div
+            className="rounded-lg border px-4 py-3.5 mb-6"
+            style={{ background: 'var(--jsm-surface-alt)', borderColor: 'var(--jsm-line)' }}
+          >
+            <p className="text-sm leading-relaxed break-keep" style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}>
+              구매 후 마이페이지에서 즉시 다운로드 (입금 확인 후).
+            </p>
+          </div>
+
+          <BuySection
+            product={{ id: product.id, name: product.name, price: product.price }}
+          />
+
+          <p className="mt-5 text-xs break-keep" style={{ color: 'var(--jsm-ink-faint)', ...KOR_BODY }}>
+            구매 전{' '}
+            <Link href="/legal/refund" className="underline" style={{ color: 'var(--jsm-ink-soft)' }}>
+              환불 정책
+            </Link>
+            을 확인해 주세요.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}