SaaS 구독 관리 대시보드

KPI Ingredients

import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

const metrics = [
  { label: "MRR", value: "₩12.4M", change: "+14.1%" },
  { label: "Churn", value: "3.2%", change: "-0.6%p" },
  { label: "Trial 전환", value: "18.9%", change: "+1.7%p" },
];

const chartData = [
  { name: "월", value: 42 },
  { name: "화", value: 58 },
  { name: "수", value: 51 },
  { name: "목", value: 66 },
  { name: "금", value: 72 },
];

export function SaasSubscriptionDashboardPreview() {
  return (
    <section className="rounded-2xl border border-zinc-200 bg-white p-5 text-zinc-950">
      <div className="grid gap-3 md:grid-cols-3">
        {metrics.map((metric) => (
          <article key={metric.label} className="rounded-xl border border-zinc-200 p-4">
            <p className="text-xs font-bold text-zinc-500">{metric.label}</p>
            <strong className="mt-1 block text-2xl font-black">{metric.value}</strong>
            <span className="text-xs font-black text-emerald-600">{metric.change}</span>
          </article>
        ))}
      </div>
      <div className="mt-5 h-64">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={chartData}>
            <CartesianGrid vertical={false} stroke="rgba(0,0,0,0.08)" />
            <XAxis dataKey="name" tickLine={false} axisLine={false} />
            <YAxis tickLine={false} axisLine={false} />
            <Tooltip />
            <Bar dataKey="value" fill="#e84b2a" radius={[10, 10, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </section>
  );
}