Nuxt 대시보드 프로젝트 시리즈 (5): 데이터 시각화 및 페이지 구현

<template>
  <div class="flex flex-col gap-6">
    <!-- 1. 지표 요약 (Grid) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div v-for="item in summary" :key="item.title" class="card-base">
        <div class="text-gray-500 text-sm">{{ item.title }}</div>
        <div class="text-2xl font-bold mt-1">{{ item.value }}</div>
        <div :class="item.diff > 0 ? 'text-green-500' : 'text-red-500'" class="text-xs mt-2">
          {{ item.diff > 0 ? '▲' : '▼' }} {{ Math.abs(item.diff) }}%
        </div>
      </div>
    </div>
 
    <!-- 2. 데이터 표 -->
    <div class="card-base">
      <h3 class="text-lg font-bold mb-4">최근 활동 내역</h3>
      <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
      />
    </div>
  </div>
</template>
 
<script setup>
const summary = [
  { title: '총 방문자', value: '128,430', diff: 12.5 },
  { title: '매출액', value: '₩4,250,000', diff: -3.2 },
  { title: '신규 가입', value: '1,204', diff: 24.8 },
  { title: '이탈률', value: '2.4%', diff: -1.5 },
]
 
const columns = [
  { title: 'ID', key: 'id' },
  { title: '사용자', key: 'name' },
  { title: '활동', key: 'action' },
  { title: '시간', key: 'date' },
]
 
const data = [
  { id: 1, name: '홍길동', action: '로그인', date: '2026-03-04 10:20' },
  { id: 2, name: '김철수', action: '결제 완료', date: '2026-03-04 10:25' },
  // ... 더 많은 데이터
]
 
const pagination = { pageSize: 10 }
</script>