From 807c01246b3e37e023d603a26fd56aac91a9f6eb Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sat, 16 May 2026 03:17:43 +0900
Subject: [PATCH] =?UTF-8?q?feat(music):=20/music/samples=20=E2=80=94=20?=
 =?UTF-8?q?=ED=98=84=20/services/music/samples=20=EC=BB=A8=ED=85=90?=
 =?UTF-8?q?=EC=B8=A0=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@/ 절대 경로 import + 내부 Link 새 URL.
원본은 Phase D에서 삭제 예정.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/music/samples/page.tsx | 102 +++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 app/music/samples/page.tsx

diff --git a/app/music/samples/page.tsx b/app/music/samples/page.tsx
new file mode 100644
index 0000000..16c9f45
--- /dev/null
+++ b/app/music/samples/page.tsx
@@ -0,0 +1,102 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
+export const metadata: Metadata = {
+  title: 'AI 음악·뮤비 샘플 갤러리',
+  description: '쟁승메이드 AI 음악 팩으로 제작한 샘플 뮤직비디오 모음. 장르별 결과물을 직접 확인하세요.',
+};
+
+type Sample = {
+  id: string;
+  title: string;
+  genre: string;
+  duration: string;
+  views?: string;
+  featured?: boolean;
+  embedId?: string;
+};
+
+const SAMPLES: Sample[] = [
+  { id: 's1', title: 'K-POP 스타일 TOP 샘플', genre: 'K-POP', duration: '0:45', featured: true },
+  { id: 's2', title: 'Lo-fi 감성 MV', genre: 'Lo-fi', duration: '1:02' },
+  { id: 's3', title: '시티팝 무드 영상', genre: 'City Pop', duration: '0:58' },
+  { id: 's4', title: 'EDM 쇼츠 훅', genre: 'EDM', duration: '0:30' },
+  { id: 's5', title: '발라드 감성 컷', genre: 'Ballad', duration: '1:10' },
+  { id: 's6', title: '트랩 비트 쇼츠', genre: 'Trap', duration: '0:35' },
+];
+
+export default function MusicSamplesPage() {
+  return (
+    <div className="px-6 py-20 lg:px-14" style={{ background: 'var(--kx-surface)' }}>
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-12">
+          <span className="kx-label">SAMPLE GALLERY</span>
+          <h1 className="kx-display text-3xl md:text-5xl font-bold mt-3 mb-4" style={{ color: 'var(--kx-on-surface)' }}>
+            AI 음악·뮤비 샘플 모음
+          </h1>
+          <p className="max-w-2xl mx-auto text-sm md:text-base" style={{ color: 'var(--kx-on-variant)' }}>
+            팩 워크플로우로 제작된 결과물입니다. 장르별로 다양한 톤을 확인해보세요.
+            <br className="hidden md:block" />
+            <span className="text-xs" style={{ color: 'var(--kx-on-variant)' }}>
+              일부 샘플은 런칭 직후 순차 공개됩니다.
+            </span>
+          </p>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
+          {SAMPLES.map((s) => (
+            <div
+              key={s.id}
+              className={`group relative aspect-[9/16] rounded-2xl overflow-hidden border ${
+                s.featured ? 'border-violet-400/50 shadow-2xl shadow-violet-900/40' : 'border-white/10'
+              }`}
+              style={{ background: 'linear-gradient(135deg, #1a0840 0%, #061228 100%)' }}
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-violet-500/15 to-cyan-500/10 group-hover:from-violet-500/25 group-hover:to-cyan-500/20 transition-all" />
+
+              {s.featured && (
+                <span
+                  className="absolute top-3 left-3 z-10 text-[10px] px-2 py-1 rounded-full font-semibold tracking-widest"
+                  style={{ background: 'rgba(204,151,255,0.2)', color: 'var(--kx-primary)', border: '1px solid rgba(204,151,255,0.5)' }}
+                >
+                  TOP
+                </span>
+              )}
+
+              <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-5">
+                <div className="text-5xl mb-3 opacity-80 group-hover:scale-110 transition-transform">🎬</div>
+                <p className="text-[10px] md:text-xs font-mono tracking-widest text-violet-300/80 mb-1">{s.genre.toUpperCase()}</p>
+                <p className="text-sm md:text-base font-semibold" style={{ color: 'var(--kx-on-surface)' }}>
+                  {s.title}
+                </p>
+                <p className="text-xs mt-1" style={{ color: 'var(--kx-on-variant)' }}>{s.duration}</p>
+                <p className="text-[10px] mt-3 opacity-60" style={{ color: 'var(--kx-on-variant)' }}>
+                  {s.embedId ? '영상 재생' : '영상 준비 중'}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div
+          className="mt-16 text-center p-10 kx-glass"
+          style={{ border: '1px solid rgba(204,151,255,0.12)', borderRadius: '0.75rem 0.75rem 0.125rem 0.125rem' }}
+        >
+          <span className="kx-label">NEXT</span>
+          <h2 className="kx-display text-2xl md:text-3xl font-bold mt-2 mb-3" style={{ color: 'var(--kx-on-surface)' }}>
+            내 채널에도 이런 쇼츠 올리고 싶다면
+          </h2>
+          <p className="text-sm mb-6" style={{ color: 'var(--kx-on-variant)' }}>
+            동일 워크플로우 팩 ₩39,000부터.
+          </p>
+          <Link
+            href="/music/packs#pricing"
+            className="kx-btn-primary px-8 py-3.5 rounded-full text-sm inline-flex"
+          >
+            팩 가격 보기
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}