gahusb
b8c5a202ce
- Suno API: /api/v1/generate (taskId) + record-info 폴링으로 전환 - SUNO_API_URL 기본값 https://api.sunoapi.org, SUNO_API_KEY만 필수 - 모델: V4 / V4_5 / V3_5, customMode·callBackUrl 지원 - 결과 카드: sunoData 배열(오디오·이미지·태그·duration) 렌더 - 팩 상세: 팩 구성품 + 추천 대상 섹션 추가, Before/After 제거
446 lines
22 KiB
TypeScript
446 lines
22 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Link from 'next/link';
|
||
import PurchaseAgreementModal from '../../components/PurchaseAgreementModal';
|
||
|
||
type Tier = 'starter' | 'pro' | 'master';
|
||
|
||
const TIERS: Record<Tier, { name: string; price: string; priceNum: string; desc: string; features: string[]; highlight?: boolean }> = {
|
||
starter: {
|
||
name: '입문',
|
||
price: '₩39,000',
|
||
priceNum: '39,000',
|
||
desc: '첫 AI 음악을 위한 필수 구성',
|
||
features: [
|
||
'Suno 프롬프트 조합법 20종',
|
||
'기본 가사 최적화 템플릿',
|
||
'구조 템플릿 PDF 40p',
|
||
'저작권 가이드 기본판',
|
||
'12개월 무료 업데이트',
|
||
],
|
||
},
|
||
pro: {
|
||
name: '프로',
|
||
price: '₩99,000',
|
||
priceNum: '99,000',
|
||
desc: '쇼츠 업로드까지 완성하는 풀세트',
|
||
highlight: true,
|
||
features: [
|
||
'입문 전체 포함',
|
||
'고급 편집법 (Stems 분리 · 마스터링 프롬프트)',
|
||
'MV 비디오 생성 워크플로우 (Runway/Luma/Pika)',
|
||
'샘플 프로젝트 1개 (.prj · 영상 포함)',
|
||
'이메일/페이지 1:1 Q&A 1회 (30일 이내)',
|
||
'유튜브 SEO 템플릿',
|
||
],
|
||
},
|
||
master: {
|
||
name: '마스터',
|
||
price: '₩149,000',
|
||
priceNum: '149,000',
|
||
desc: '여러 장르·포맷을 커버하는 마스터피스',
|
||
features: [
|
||
'프로 전체 포함',
|
||
'샘플 프로젝트 다수 (장르별 3종)',
|
||
'우선 업데이트 · 베타 기능 선공개',
|
||
'저작권 가이드 심화판 + 상업 이용 체크리스트',
|
||
'제작 레시피 영상 가이드',
|
||
],
|
||
},
|
||
};
|
||
|
||
const PROCESS = [
|
||
{
|
||
num: '01',
|
||
title: '크리에이티브 디렉팅',
|
||
subtitle: 'Concept & Lyrics',
|
||
customer: '원하는 키워드 3개 또는 사연 제공',
|
||
value: 'ChatGPT·Claude로 Suno가 이해하는 가사·스타일 태그로 변환',
|
||
result: 'AI 최적화 가사 · 메타데이터 시트',
|
||
color: 'from-violet-500 to-fuchsia-500',
|
||
},
|
||
{
|
||
num: '02',
|
||
title: '오디오 엔지니어링',
|
||
subtitle: 'Music Generation',
|
||
customer: '결과물 확인 · 방향 피드백',
|
||
value: 'Suno Custom Mode로 가사 배치·파트·보컬·악기 세밀 조정. 가장 높은 퀄리티가 나올 때까지 프롬프트 깎기',
|
||
result: '고품질 완곡 (Full Track, 스템 분리본)',
|
||
color: 'from-fuchsia-500 to-pink-500',
|
||
},
|
||
{
|
||
num: '03',
|
||
title: '비주얼 마스터링',
|
||
subtitle: 'AI MV Generation',
|
||
customer: '-',
|
||
value: 'Midjourney · Runway · Luma로 음악 분위기에 맞는 이미지·영상 생성. 비트와 가사에 맞춘 싱크 설계',
|
||
result: '쇼츠(9:16) 또는 유튜브(16:9) 고화질 영상',
|
||
color: 'from-sky-500 to-cyan-500',
|
||
},
|
||
{
|
||
num: '04',
|
||
title: '퍼블리싱 가이드',
|
||
subtitle: 'Viral Optimization',
|
||
customer: '유튜브 업로드',
|
||
value: '제목·해시태그·설명란(SEO) AI 최적화 템플릿 제공',
|
||
result: '즉시 업로드 가능한 유튜브 배포 패키지',
|
||
color: 'from-cyan-500 to-emerald-500',
|
||
},
|
||
];
|
||
|
||
const FAQS = [
|
||
{
|
||
q: 'Suno 유료 플랜 가입이 꼭 필요한가요?',
|
||
a: 'Suno 무료 플랜은 상업적 이용이 제한됩니다. 본인 결과물을 유튜브·SNS에 업로드해 수익화하려면 Suno Pro 이상 권장. 팩 구매 후 가입 전 플랜 선택 가이드가 포함됩니다.',
|
||
},
|
||
{
|
||
q: '제가 만든 결과물의 상업 이용·저작권은?',
|
||
a: '결과물의 상업권은 고객이 가입한 AI 서비스의 이용약관을 따릅니다. 팩에는 Suno·Runway·Luma 각 서비스의 최신 약관 요약과 상업 이용 체크리스트가 포함되어 있습니다. (법률 자문이 아닌 참고용 가이드입니다.)',
|
||
},
|
||
{
|
||
q: '결과물 품질을 보장하나요?',
|
||
a: 'AI 생성물은 모델 버전·프롬프트 입력에 따라 달라지므로 결과물 자체를 보장하지 않습니다. 다만 팩은 동일 프롬프트로 반복 가능한 고품질 구간을 설계하는 방법을 제공합니다. 샘플 쇼츠·프로젝트로 품질 기대치를 사전 확인하세요.',
|
||
},
|
||
{
|
||
q: '환불이 가능한가요?',
|
||
a: '전자상거래법 제17조 제2항 제5호에 따라 디지털 콘텐츠는 제공 시작 후 청약철회가 제한됩니다. 무료 샘플로 사전 확인을 제공하므로 충분히 검토 후 구매해주세요. 파일 손상·전달 불량 등 회사 귀책은 즉시 재전달 또는 환불됩니다.',
|
||
},
|
||
{
|
||
q: '업데이트는 어떻게 받나요?',
|
||
a: '구매자 전용 Notion 페이지에서 변경 이력과 최신 파일을 제공. 12개월간 무료 업데이트가 기본, 마스터는 우선 업데이트·베타 선공개가 포함됩니다.',
|
||
},
|
||
];
|
||
|
||
export default function MusicServicePage() {
|
||
const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
|
||
const [openFaq, setOpenFaq] = useState<number | null>(0);
|
||
|
||
return (
|
||
<div className="min-h-full bg-slate-950 text-white">
|
||
{/* 상세 페이지 헤더 (컴팩트) */}
|
||
<section className="px-6 pt-14 pb-8 lg:px-14 bg-slate-950 border-b border-white/5">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<span className="inline-flex h-2 w-2 rounded-full bg-violet-400 animate-pulse" />
|
||
<span className="kx-label">AI MUSIC PACK · v1 · 상품 상세</span>
|
||
</div>
|
||
<h1 className="kx-display text-3xl md:text-5xl font-extrabold leading-tight mb-3" style={{ wordBreak: 'keep-all' }}>
|
||
AI 음악 마스터 구조 팩
|
||
</h1>
|
||
<p className="text-slate-300 md:text-lg max-w-3xl">
|
||
Suno 프롬프트 + MV 워크플로우 + 저작권 가이드 + 템플릿 PDF + 샘플 프로젝트.
|
||
4단계 AI 음악 제작 공정을 한 팩으로.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* PRICING — 상세 최상단 */}
|
||
<section id="pricing" className="px-6 py-14 lg:px-14 bg-slate-950">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="flex items-end justify-between flex-wrap gap-3 mb-8">
|
||
<div>
|
||
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-1">Pricing · 1회 결제</p>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold">3개 티어, 목표에 맞게 선택</h2>
|
||
</div>
|
||
<Link href="/services/music/samples" className="text-sm text-violet-300 hover:text-violet-200 underline underline-offset-4">
|
||
샘플 먼저 보기 →
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-5 items-stretch">
|
||
{(Object.keys(TIERS) as Tier[]).map((key) => {
|
||
const t = TIERS[key];
|
||
return (
|
||
<div
|
||
key={key}
|
||
className={`relative rounded-3xl p-8 flex flex-col border transition-all ${
|
||
t.highlight
|
||
? 'border-violet-400 bg-gradient-to-br from-violet-900/40 to-slate-900 shadow-[0_0_60px_rgba(139,92,246,0.35)] md:scale-[1.03] md:-translate-y-2'
|
||
: 'border-white/10 bg-white/[0.02] hover:border-white/30'
|
||
}`}
|
||
>
|
||
{t.highlight && (
|
||
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
|
||
<span className="inline-flex items-center gap-1 bg-gradient-to-r from-violet-500 to-pink-500 text-white text-[10px] font-extrabold px-3 py-1.5 rounded-full uppercase tracking-wider">
|
||
🔥 가장 많이 팔림
|
||
</span>
|
||
</div>
|
||
)}
|
||
<h3 className="font-extrabold text-2xl mb-1">{t.name}</h3>
|
||
<p className="text-sm text-slate-400 mb-6">{t.desc}</p>
|
||
<div className="mb-6">
|
||
<span className="text-4xl font-extrabold font-mono">{t.price}</span>
|
||
<span className="text-xs text-slate-500 ml-2">1회 결제</span>
|
||
</div>
|
||
<ul className="space-y-3 text-sm text-slate-200 mb-8 flex-1">
|
||
{t.features.map((f) => (
|
||
<li key={f} className="flex gap-2.5">
|
||
<svg className="w-4 h-4 text-emerald-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<span className="leading-relaxed">{f}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<button
|
||
onClick={() => setSelectedTier(key)}
|
||
className={`w-full py-4 rounded-xl font-extrabold text-sm transition-colors ${
|
||
t.highlight
|
||
? 'bg-violet-500 hover:bg-violet-400 text-white'
|
||
: 'bg-white/10 hover:bg-white/20 text-white'
|
||
}`}
|
||
>
|
||
{t.name} 구매하기 →
|
||
</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<p className="text-xs text-slate-500 text-center mt-8">
|
||
구매 전 <Link href="/legal/refund" className="underline hover:text-white">환불 정책</Link>을 반드시 확인해주세요.
|
||
디지털 콘텐츠 특성상 제공 시작 후 청약철회가 제한됩니다.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 팩 구성품 */}
|
||
<section className="px-6 py-16 lg:px-14 bg-slate-950 border-t border-white/5">
|
||
<div className="max-w-6xl mx-auto">
|
||
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-2">What's Included</p>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold mb-8">팩 구성품</h2>
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
{[
|
||
{ icon: '📄', title: 'Suno 프롬프트 북 (PDF)', desc: '장르·무드·보컬 톤 조합법 20+종. 복붙해서 바로 사용.' },
|
||
{ icon: '🎼', title: '구조 템플릿 팩', desc: 'Verse·Chorus·Bridge 파트 설계도 + Suno Custom 모드 입력 예시.' },
|
||
{ icon: '🎬', title: 'MV 워크플로우 가이드', desc: 'Midjourney · Runway · Luma로 비트 싱크 영상 만드는 단계별 매뉴얼.' },
|
||
{ icon: '⚖️', title: '저작권 & 상업 이용 가이드', desc: 'Suno/Runway 약관 요약 + 수익화 안전 체크리스트.' },
|
||
{ icon: '📦', title: '샘플 프로젝트 (프로·마스터)', desc: '완성된 .prj 파일 + 영상. 그대로 수정해 재사용 가능.' },
|
||
{ icon: '🔄', title: '12개월 무료 업데이트', desc: 'Suno 신규 모델·기능 반영. 구매자 Notion에서 자동 수령.' },
|
||
].map((item) => (
|
||
<div
|
||
key={item.title}
|
||
className="flex gap-4 p-5 rounded-xl border border-white/10 bg-white/[0.02]"
|
||
>
|
||
<div className="text-2xl flex-shrink-0">{item.icon}</div>
|
||
<div>
|
||
<h3 className="font-bold text-white mb-1">{item.title}</h3>
|
||
<p className="text-sm text-slate-400 leading-relaxed">{item.desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* PROCESS — 4 STEPS */}
|
||
<section className="px-6 py-24 lg:px-14 bg-gradient-to-b from-slate-950 to-[#0b0530]">
|
||
<div className="max-w-5xl mx-auto">
|
||
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-2">
|
||
Process Architecture
|
||
</p>
|
||
<h2 className="text-3xl md:text-4xl font-extrabold mb-4" style={{ wordBreak: 'keep-all' }}>
|
||
컨셉 → 음악 → 비주얼 → 퍼블리싱,
|
||
</h2>
|
||
<p className="text-slate-400 text-lg mb-16">한 번에 이어지는 4단계 공정 설계도.</p>
|
||
|
||
<div className="space-y-6">
|
||
{PROCESS.map((step) => (
|
||
<div
|
||
key={step.num}
|
||
className="group relative border border-white/10 hover:border-violet-400/50 rounded-3xl p-8 md:p-10 bg-white/[0.02] backdrop-blur transition-all"
|
||
>
|
||
<div className="flex flex-col md:flex-row md:items-start gap-6">
|
||
<div className="flex-shrink-0">
|
||
<div
|
||
className={`inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br ${step.color} font-extrabold text-2xl text-white shadow-lg`}
|
||
>
|
||
{step.num}
|
||
</div>
|
||
</div>
|
||
<div className="flex-1">
|
||
<p className="font-mono text-[11px] text-violet-300/60 uppercase tracking-widest mb-1">
|
||
{step.subtitle}
|
||
</p>
|
||
<h3 className="text-2xl md:text-3xl font-extrabold text-white mb-4">
|
||
{step.title}
|
||
</h3>
|
||
<dl className="grid sm:grid-cols-3 gap-4 text-sm">
|
||
<div>
|
||
<dt className="text-slate-500 text-xs uppercase font-bold mb-1">고객 역할</dt>
|
||
<dd className="text-slate-300 leading-relaxed">{step.customer}</dd>
|
||
</div>
|
||
<div>
|
||
<dt className="text-slate-500 text-xs uppercase font-bold mb-1">나의 가치</dt>
|
||
<dd className="text-slate-300 leading-relaxed">{step.value}</dd>
|
||
</div>
|
||
<div>
|
||
<dt className="text-slate-500 text-xs uppercase font-bold mb-1">결과물</dt>
|
||
<dd className="text-white font-semibold leading-relaxed">{step.result}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SAMPLES */}
|
||
<section id="samples" className="px-6 py-20 lg:px-14 bg-[#0b0530]">
|
||
<div className="max-w-5xl mx-auto">
|
||
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-2">
|
||
Most Popular Sample
|
||
</p>
|
||
<h2 className="text-3xl md:text-4xl font-extrabold mb-3">
|
||
이 쇼츠, 이 팩으로 만들었어요.
|
||
</h2>
|
||
<p className="text-slate-400 mb-10">가장 인기 있는 결과물 1개. 전체 샘플은 별도 페이지에서.</p>
|
||
|
||
<div className="max-w-sm mx-auto mb-8">
|
||
<div className="aspect-[9/16] rounded-2xl border border-violet-400/30 bg-gradient-to-br from-violet-900/50 to-slate-900 flex items-center justify-center relative overflow-hidden group cursor-pointer shadow-2xl shadow-violet-900/40">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-violet-500/15 to-cyan-500/15 group-hover:from-violet-500/30 group-hover:to-cyan-500/30 transition-all" />
|
||
<div className="relative text-center p-6">
|
||
<div className="text-6xl mb-4">🎬</div>
|
||
<p className="text-xs text-violet-300/80 font-mono tracking-widest">FEATURED</p>
|
||
<p className="text-base text-slate-100 mt-2 font-semibold">TOP 샘플 (준비 중)</p>
|
||
<p className="text-xs text-slate-400 mt-1">유튜브 쇼츠 임베드 예정</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<a
|
||
href="/services/music/samples"
|
||
className="inline-flex items-center gap-2 px-6 py-3 rounded-full border border-violet-400/40 bg-violet-500/10 hover:bg-violet-500/20 text-sm font-semibold text-violet-200 transition"
|
||
>
|
||
전체 샘플 갤러리 보기
|
||
<span aria-hidden>→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 추천 대상 */}
|
||
<section className="px-6 py-20 lg:px-14 bg-slate-950 border-t border-white/5">
|
||
<div className="max-w-5xl mx-auto">
|
||
<p className="font-mono text-xs text-violet-300/70 tracking-widest uppercase mb-2 text-center">
|
||
Who It's For
|
||
</p>
|
||
<h2 className="text-3xl md:text-4xl font-extrabold text-center mb-12">
|
||
이런 분께 추천드려요
|
||
</h2>
|
||
<div className="grid md:grid-cols-2 gap-5">
|
||
<div className="border border-emerald-500/30 bg-emerald-500/5 rounded-2xl p-8 shadow-[0_0_40px_rgba(16,185,129,0.12)]">
|
||
<div className="text-4xl mb-3">🎯</div>
|
||
<h3 className="font-extrabold text-emerald-300 mb-3 text-lg">이런 분께 딱</h3>
|
||
<ul className="space-y-2 text-sm text-slate-200 leading-relaxed">
|
||
<li>• Suno를 써봤지만 원하는 무드가 안 나오는 분</li>
|
||
<li>• 유튜브 쇼츠·릴스 채널 운영 중인 1인 크리에이터</li>
|
||
<li>• 브랜드·매장 BGM을 직접 만들고 싶은 소상공인</li>
|
||
<li>• AI 음악 워크플로우를 처음부터 제대로 배우고 싶은 분</li>
|
||
</ul>
|
||
</div>
|
||
<div className="border border-white/10 bg-white/[0.02] rounded-2xl p-8">
|
||
<div className="text-4xl mb-3">🙅</div>
|
||
<h3 className="font-extrabold text-slate-300 mb-3 text-lg">이런 분께는 비추</h3>
|
||
<ul className="space-y-2 text-sm text-slate-400 leading-relaxed">
|
||
<li>• 완성된 맞춤곡 파일을 바로 받고 싶은 분 (B2B 문의 권장)</li>
|
||
<li>• DAW·마스터링 전문가 수준 튜닝을 원하는 분</li>
|
||
<li>• Suno 유료 플랜 가입 의사가 없는 분 (상업 이용 제한)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* B2B */}
|
||
<section className="px-6 py-16 lg:px-14 bg-gradient-to-br from-slate-900 to-slate-950 border-y border-white/5">
|
||
<div className="max-w-5xl mx-auto">
|
||
<div className="flex flex-col md:flex-row md:items-center gap-6 border border-amber-500/30 bg-amber-500/5 rounded-2xl p-8">
|
||
<div className="flex-1">
|
||
<p className="font-mono text-xs text-amber-300/80 tracking-widest uppercase mb-2">
|
||
For Business
|
||
</p>
|
||
<h3 className="text-2xl font-extrabold text-white mb-2">
|
||
📣 내 가게 전용 BGM, 저작권 걱정 없이.
|
||
</h3>
|
||
<p className="text-sm text-slate-300 leading-relaxed">
|
||
카페 · 쇼핑몰 · 인스타 릴스 · 틱톡 셀러용 전용 BGM 제작.
|
||
1분 만에 브랜드에 맞는 음악을 뽑아드립니다.
|
||
</p>
|
||
</div>
|
||
<Link
|
||
href="/contact?service=bgm"
|
||
className="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-400 text-slate-900 px-6 py-3 rounded-xl font-extrabold text-sm transition-colors"
|
||
>
|
||
B2B 문의 →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ */}
|
||
<section className="px-6 py-20 lg:px-14 bg-slate-950">
|
||
<div className="max-w-3xl mx-auto">
|
||
<h2 className="text-3xl md:text-4xl font-extrabold text-center mb-10">
|
||
자주 묻는 질문
|
||
</h2>
|
||
<div className="space-y-3">
|
||
{FAQS.map((f, i) => (
|
||
<div key={i} className="border border-white/10 rounded-xl overflow-hidden bg-white/[0.02]">
|
||
<button
|
||
onClick={() => setOpenFaq(openFaq === i ? null : i)}
|
||
className="w-full flex items-center justify-between px-5 py-4 text-left hover:bg-white/5 transition-colors"
|
||
>
|
||
<span className="font-bold text-white text-sm">{f.q}</span>
|
||
<span className={`text-violet-400 text-xl transition-transform ${openFaq === i ? 'rotate-45' : ''}`}>
|
||
+
|
||
</span>
|
||
</button>
|
||
{openFaq === i && (
|
||
<div className="px-5 pb-5 text-sm text-slate-300 leading-relaxed" style={{ wordBreak: 'keep-all' }}>
|
||
{f.a}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FINAL CTA */}
|
||
<section className="px-6 py-20 lg:px-14 bg-gradient-to-br from-violet-900 via-slate-950 to-[#0b0530]">
|
||
<div className="max-w-3xl mx-auto text-center">
|
||
<h2 className="text-3xl md:text-5xl font-extrabold text-white mb-4 leading-tight" style={{ wordBreak: 'keep-all' }}>
|
||
오늘 밤,
|
||
<br />
|
||
<span className="bg-gradient-to-r from-violet-300 via-pink-200 to-cyan-300 bg-clip-text text-transparent">
|
||
첫 쇼츠를 업로드하세요.
|
||
</span>
|
||
</h2>
|
||
<p className="text-slate-400 text-lg mb-10">
|
||
₩39,000부터 · 평생 업데이트 · 즉시 다운로드
|
||
</p>
|
||
<a
|
||
href="#pricing"
|
||
className="inline-flex items-center gap-2 bg-violet-600 hover:bg-violet-500 text-white px-12 py-5 rounded-xl font-extrabold text-base transition-colors shadow-[0_0_60px_rgba(139,92,246,0.5)]"
|
||
>
|
||
팩 선택하기 →
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
{selectedTier && (
|
||
<PurchaseAgreementModal
|
||
isOpen={!!selectedTier}
|
||
onClose={() => setSelectedTier(null)}
|
||
productName={`AI 음악 마스터 팩 · ${TIERS[selectedTier].name}`}
|
||
price={TIERS[selectedTier].price}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|