feat: 로또 추천 API, 텔레그램 봇 연동, 관리자 페이지 추가
- 로또 번호 추천 구독자 전용 페이지 (/services/lotto/recommend) - NAS 몬테카를로 API 연동 + 클라이언트 사이드 폴백 - 무료 미리보기 1개 + 구독자용 프리미엄 번호 추천 - 구독 플랜 변경: 골드(900원)/플래티넘(2,900원)/다이아(9,900원) - 텔레그램 봇 연동: 연결/해제, 웹훅, /start 명령 처리 - 마이페이지 텔레그램 연결 UI + 가이드 모달 - 관리자 페이지 (/admin): 대시보드, 회원, 서비스, 문의 관리 - Supabase 마이그레이션: profiles 텔레그램 컬럼, 신규 상품 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
134
app/admin/dashboard/page.tsx
Normal file
134
app/admin/dashboard/page.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface Stats {
|
||||
totalMembers: number;
|
||||
totalOrders: number;
|
||||
totalRevenue: number;
|
||||
pendingContacts: number;
|
||||
monthlyChart: Array<{ month: string; revenue: number }>;
|
||||
}
|
||||
|
||||
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">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-slate-400 text-sm">{label}</span>
|
||||
<div className={`w-9 h-9 rounded-xl flex items-center justify-center ${color}`}>
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-white text-2xl font-bold">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [stats, setStats] = useState<Stats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/admin/stats')
|
||||
.then((r) => r.json())
|
||||
.then((d) => setStats(d))
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const maxRevenue = stats ? Math.max(...stats.monthlyChart.map((m) => m.revenue), 1) : 1;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-6xl mx-auto">
|
||||
{/* 헤더 */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-white text-2xl font-bold">대시보드</h1>
|
||||
<p className="text-slate-400 text-sm mt-0.5">쟁승메이드 운영 현황</p>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin w-8 h-8 border-2 border-red-500 border-t-transparent rounded-full" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 통계 카드 */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<StatCard
|
||||
label="총 회원 수"
|
||||
value={`${stats?.totalMembers ?? 0}명`}
|
||||
color="bg-blue-500/20 text-blue-400"
|
||||
icon={
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<StatCard
|
||||
label="총 결제 건수"
|
||||
value={`${stats?.totalOrders ?? 0}건`}
|
||||
color="bg-green-500/20 text-green-400"
|
||||
icon={
|
||||
<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>
|
||||
}
|
||||
/>
|
||||
<StatCard
|
||||
label="총 수익"
|
||||
value={`₩${(stats?.totalRevenue ?? 0).toLocaleString()}`}
|
||||
color="bg-yellow-500/20 text-yellow-400"
|
||||
icon={
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<StatCard
|
||||
label="미처리 문의"
|
||||
value={`${stats?.pendingContacts ?? 0}건`}
|
||||
color="bg-red-500/20 text-red-400"
|
||||
icon={
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 월별 수익 차트 */}
|
||||
<div className="bg-slate-900 rounded-2xl p-5 border border-slate-700/50">
|
||||
<h2 className="text-white font-semibold mb-5">월별 수익 현황 (최근 6개월)</h2>
|
||||
<div className="flex items-end gap-3 h-48">
|
||||
{stats?.monthlyChart.map((item) => {
|
||||
const height = maxRevenue > 0 ? Math.max((item.revenue / maxRevenue) * 100, item.revenue > 0 ? 4 : 0) : 0;
|
||||
const monthLabel = item.month.slice(5); // MM
|
||||
return (
|
||||
<div key={item.month} className="flex-1 flex flex-col items-center gap-2">
|
||||
<span className="text-slate-400 text-xs">
|
||||
{item.revenue > 0 ? `₩${(item.revenue / 1000).toFixed(0)}K` : ''}
|
||||
</span>
|
||||
<div className="w-full flex items-end justify-center h-32">
|
||||
<div
|
||||
className="w-full rounded-t-lg bg-gradient-to-t from-red-600 to-orange-400 transition-all duration-500"
|
||||
style={{ height: `${height}%`, minHeight: item.revenue > 0 ? '4px' : '0' }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-slate-400 text-xs">{monthLabel}월</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{(stats?.totalRevenue ?? 0) === 0 && (
|
||||
<p className="text-center text-slate-600 text-sm mt-2">결제 데이터가 없습니다</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user