From 96cc452d37ecf28907a3ebaebcec025e488171a3 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sat, 16 May 2026 03:12:51 +0900
Subject: [PATCH] =?UTF-8?q?feat(music):=20/music=20=ED=97=88=EB=B8=8C=20?=
 =?UTF-8?q?=EC=8B=A0=EC=84=A4=20=E2=80=94=203=20=EC=B9=B4=EB=93=9C=20(?=
 =?UTF-8?q?=ED=8C=A9=20=EC=83=81=EC=84=B8=20/=20=EC=83=98=ED=94=8C=20/=20?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=9C=EB=94=94=EC=98=A4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Music 사업부 진입점. /music/{packs,samples,studio} 으로 분기.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/music/layout.tsx | 10 ++++++
 app/music/page.tsx   | 72 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 app/music/layout.tsx
 create mode 100644 app/music/page.tsx

diff --git a/app/music/layout.tsx b/app/music/layout.tsx
new file mode 100644
index 0000000..bbe4a75
--- /dev/null
+++ b/app/music/layout.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'AI 음악 제품',
+  description: 'Suno 프롬프트 + 뮤직비디오 워크플로우 + 유튜브 SEO 템플릿 한 팩에. 1시간 만에 음악·뮤비 완성.',
+};
+
+export default function MusicLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/app/music/page.tsx b/app/music/page.tsx
new file mode 100644
index 0000000..52171a2
--- /dev/null
+++ b/app/music/page.tsx
@@ -0,0 +1,72 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Music — AI 음악 제품',
+};
+
+const CARDS = [
+  {
+    href: '/music/packs',
+    label: '팩 상세',
+    desc: '입문 ₩39,000부터 — Suno 프롬프트북 + 뮤비 워크플로우 + SEO 템플릿',
+    key: 'packs',
+  },
+  {
+    href: '/music/samples',
+    label: '샘플 갤러리',
+    desc: '실제 결과물 — 장르별 데모 + 가사 + 영상 미리보기',
+    key: 'samples',
+  },
+  {
+    href: '/music/studio',
+    label: 'AI 스튜디오',
+    desc: 'Suno API 연동 — 직접 트랙 생성 (베타)',
+    key: 'studio',
+  },
+];
+
+export default function MusicHub() {
+  return (
+    <div className="min-h-screen bg-black text-white">
+      <section className="relative w-full min-h-[60vh] flex items-center justify-center px-6 border-b border-white/10">
+        <div className="absolute inset-0 bg-gradient-to-b from-[#060e20] to-black pointer-events-none" />
+        <div className="relative z-10 max-w-3xl mx-auto text-center">
+          <p className="font-mono text-[11px] tracking-widest uppercase text-white/50 mb-4">
+            Music
+          </p>
+          <h1
+            className="kx-display text-4xl md:text-6xl font-bold mb-5"
+            style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
+          >
+            AI 음악 제품
+          </h1>
+          <p className="text-base md:text-lg text-white/70 max-w-2xl mx-auto leading-relaxed">
+            Suno 프롬프트 + 뮤직비디오 워크플로우 + 유튜브 SEO 템플릿. 한 팩에 담긴 4단계 워크플로우로 1시간 안에 결과물 완성.
+          </p>
+        </div>
+      </section>
+
+      <section className="py-20 px-6">
+        <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-5">
+          {CARDS.map((c) => (
+            <Link
+              key={c.key}
+              href={c.href}
+              className="group rounded-2xl border border-white/15 bg-white/[0.02] p-7 hover:border-white/40 hover:bg-white/[0.05] transition flex flex-col"
+              style={{ textDecoration: 'none' }}
+            >
+              <h2 className="kx-display text-xl md:text-2xl font-bold text-white mb-3">
+                {c.label}
+              </h2>
+              <p className="text-sm md:text-base text-white/60 leading-relaxed flex-1">
+                {c.desc}
+              </p>
+              <span aria-hidden="true" className="mt-4 text-white/40 text-xs">→</span>
+            </Link>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}