feat: AI 자동화 키트 신규 서비스 + 프롬프트 결제 연동 + 관리자 수익 목표 추적

- app/services/ai-kit/page.tsx: AI 자동화 월 구독 키트 서비스 페이지 신규 생성 (19,900원/월)
  - 6종 자동화 도구(업무일지·이메일·매출분석·SNS·회의록·상품설명) 소개
  - PaymentButton 결제 연동, 후기·FAQ·CTA 포함
- lib/products.ts: 신규 상품 7종 추가
  - prompt_image_gen(12,900) / prompt_resume(9,900) / prompt_email(10,900)
  - prompt_marketing(12,900) / prompt_report(10,900) / ai_kit_monthly(19,900)
- app/services/prompt/page.tsx: 프리미엄 패키지 CTA를 ContactModal → PaymentButton으로 교체
- app/components/Sidebar.tsx: AI 자동화 키트 메뉴 항목 추가 (NEW 배지)
- app/page.tsx: SUBSCRIPTION_SERVICES에 AI 자동화 키트 항목 추가
- app/admin/dashboard/page.tsx: 월 100만원 목표 수익 추적 카드(MonthlyGoalCard) 추가

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-27 09:42:42 +09:00
parent c0ff36b69d
commit 80a8cc1b3c
6 changed files with 456 additions and 5 deletions

View File

@@ -11,6 +11,8 @@ interface Stats {
monthlyChart: Array<{ month: string; revenue: number }>;
}
const MONTHLY_GOAL = 1_000_000; // 월 100만원 목표
function StatCard({ label, value, icon, color }: { label: string; value: string; icon: React.ReactNode; color: string }) {
return (
<div className="bg-slate-900 rounded-2xl p-5 border border-slate-700/50">
@@ -25,6 +27,68 @@ function StatCard({ label, value, icon, color }: { label: string; value: string;
);
}
function MonthlyGoalCard({ currentRevenue }: { currentRevenue: number }) {
const progress = Math.min((currentRevenue / MONTHLY_GOAL) * 100, 100);
const remaining = Math.max(MONTHLY_GOAL - currentRevenue, 0);
const isAchieved = currentRevenue >= MONTHLY_GOAL;
const progressColor = progress >= 100 ? 'from-emerald-400 to-green-500' : progress >= 70 ? 'from-yellow-400 to-orange-400' : 'from-blue-500 to-violet-500';
return (
<div className="bg-slate-900 rounded-2xl p-5 border border-slate-700/50">
<div className="flex items-center justify-between mb-4">
<div>
<p className="text-slate-400 text-sm"> </p>
<p className="text-white font-extrabold text-lg mt-0.5">1,000,000 </p>
</div>
<div className={`w-10 h-10 rounded-xl flex items-center justify-center ${isAchieved ? 'bg-emerald-500/20 text-emerald-400' : 'bg-blue-500/20 text-blue-400'}`}>
{isAchieved ? (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
) : (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
)}
</div>
</div>
{/* 프로그레스 바 */}
<div className="mb-3">
<div className="w-full bg-slate-800 rounded-full h-3 overflow-hidden">
<div
className={`h-full rounded-full bg-gradient-to-r ${progressColor} transition-all duration-700`}
style={{ width: `${progress}%` }}
/>
</div>
</div>
<div className="flex items-center justify-between">
<div>
<span className="text-white font-bold text-xl">{currentRevenue.toLocaleString()}</span>
<span className="text-slate-500 text-sm ml-1">/ 1,000,000</span>
</div>
<div className="text-right">
{isAchieved ? (
<span className="text-emerald-400 text-sm font-bold">🎉 !</span>
) : (
<span className="text-slate-400 text-sm">
<span className="text-white font-semibold">{remaining.toLocaleString()}</span>
</span>
)}
</div>
</div>
<div className="mt-3 pt-3 border-t border-slate-800">
<div className="flex items-center justify-between text-xs text-slate-500">
<span> <span className={`font-bold ${isAchieved ? 'text-emerald-400' : 'text-white'}`}>{progress.toFixed(1)}%</span></span>
<span> <span className="text-white font-semibold">1,000,000</span></span>
</div>
</div>
</div>
);
}
export default function AdminDashboard() {
const [stats, setStats] = useState<Stats | null>(null);
const [loading, setLoading] = useState(true);
@@ -53,6 +117,11 @@ export default function AdminDashboard() {
</div>
) : (
<>
{/* 월 목표 추적 */}
<div className="mb-6">
<MonthlyGoalCard currentRevenue={stats?.totalRevenue ?? 0} />
</div>
{/* 통계 카드 */}
<div className="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
<StatCard