커뮤니티 운영 대시보드

KPI Ingredients

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<section class="rounded-2xl border border-zinc-200 bg-white p-5 text-zinc-950">
  <div class="mb-5 flex items-center justify-between border-b border-zinc-200 pb-4">
    <div>
      <p class="text-xs font-bold uppercase tracking-wide text-orange-600">커뮤니티</p>
      <h2 class="mt-1 text-xl font-extrabold">커뮤니티 운영 대시보드</h2>
    </div>
    <span class="rounded-lg bg-orange-50 px-3 py-1 text-xs font-bold text-orange-700">초급</span>
  </div>
  <div class="grid gap-3 md:grid-cols-3">
    <article class="rounded-xl border border-zinc-200 p-4">
      <p class="text-xs font-bold text-zinc-500">신규 게시글</p>
      <strong class="mt-1 block text-2xl">342건</strong>
      <span class="text-xs font-black text-emerald-600">+18.0%</span>
    </article>
    <article class="rounded-xl border border-zinc-200 p-4">
      <p class="text-xs font-bold text-zinc-500">신고 대기</p>
      <strong class="mt-1 block text-2xl">21건</strong>
      <span class="text-xs font-black text-orange-600">+5건</span>
    </article>
    <article class="rounded-xl border border-zinc-200 p-4">
      <p class="text-xs font-bold text-zinc-500">활성 사용자</p>
      <strong class="mt-1 block text-2xl">8,920명</strong>
      <span class="text-xs font-black text-sky-600">+6.4%</span>
    </article>
  </div>
  <div class="mt-5 h-64">
    <canvas id="community-operations-dashboard-chart"></canvas>
  </div>
</section>

<script>
  const ctx = document.getElementById("community-operations-dashboard-chart");
  new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["월", "화", "수", "목", "금"],
      datasets: [{
        label: "카테고리별 활동량",
        data: [42, 58, 51, 66, 72],
        backgroundColor: "#e84b2a",
        borderRadius: 10
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: { x: { grid: { display: false } }, y: { grid: { color: "rgba(0,0,0,0.08)" } } }
    }
  });
</script>