influence/components/home/dashboard/common/pagination.vue

<template>
  <div class="pagenation--wrapper">
    <div class="total--wrapper">
      Total : <span class="total--count">{{ props.pageObj.totalCnt }}</span>
    </div>
    <div
      v-if="props.pageObj.totalCnt && props.pageObj.totalCnt > 0"
      class="pager--btn--wrap"
    >
      <v-btn
        flat
        class="page--btn prev--btn"
        :disabled="pageObj.page == 1"
        @click="$emit('chg_page', pageObj.page - 1)"
      />

      <div class="page--numb">
        <span class="current">{{ props.pageObj.page }}</span>/<span>{{ totalPages }}</span>
      </div>

      <v-btn
        flat
        class="page--btn next--btn"
        :disabled="pageObj.page == totalPages || pageObj.totalCnt == 0" 
        @click="$emit('chg_page', pageObj.page + 1)"
      />
    </div>

    <slot name="rightArea" />
  </div>
</template>

<script setup>
  /***********************
  *     plugins inject
  ************************/

  // let pageObj = ref( {
  //   page: 1, // 현재 페이지
  //   pageSize: 10, // 테이블 조회 데이터 개수
  //   totalCnt: 0, // 전체 페이지
  // })
  // props
  const props = defineProps({
    pageObj: Object,
  })
  // 발신 이벤트 선언
  const emit = defineEmits(['chg_page'])

  const totalPages = computed(() => {
    return Math.ceil(props.pageObj.totalCnt / props.pageObj.pageSize)
  })

  /***********************
  *     data & created
  ************************/

  /***********************
  *     Methods
  ************************/

</script>