audi/app/pages/admin/branch/list.vue

<template>
  <div class="admin--branch-list">
    <!-- 테이블 -->
    <div class="admin--table-wrapper">
      <table class="admin--table">
        <thead>
          <tr>
            <th>NO</th>
            <th>지점명</th>
            <th>대표번호</th>
            <th>주소</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="isLoading">
            <td colspan="4" class="admin--table-loading">
              데이터를 불러오는 중...
            </td>
          </tr>
          <tr v-else-if="!branches || branches.length === 0">
            <td colspan="4" class="admin--table-empty">
              등록된 지점이 없습니다.
            </td>
          </tr>
          <tr v-else v-for="(branch, index) in branches" :key="branch.id">
            <td>{{ totalCount - ((currentPage - 1) * perPage + index) }}</td>
            <td class="admin--table-title">{{ branch.name }}</td>
            <td>{{ branch.phone }}</td>
            <td>{{ branch.address }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 페이지네이션 -->
    <div v-if="totalPages > 1" class="admin--pagination">
      <button
        class="admin--pagination-btn"
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
      >
        이전
      </button>
      <button
        v-for="page in visiblePages"
        :key="page"
        class="admin--pagination-btn"
        :class="{ 'is-active': page === currentPage }"
        @click="changePage(page)"
      >
        {{ page }}
      </button>
      <button
        class="admin--pagination-btn"
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
      >
        다음
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

definePageMeta({
  layout: 'admin',
  middleware: ['auth']
})

const { get } = useApi()

const isLoading = ref(false)
const branches = ref([])
const currentPage = ref(1)
const perPage = ref(10)
const totalCount = ref(0)
const totalPages = ref(0)

// 보이는 페이지 번호 계산
const visiblePages = computed(() => {
  const pages = []
  const maxVisible = 5
  let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2))
  let end = Math.min(totalPages.value, start + maxVisible - 1)

  if (end - start < maxVisible - 1) {
    start = Math.max(1, end - maxVisible + 1)
  }

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }

  return pages
})

// 데이터 로드
const loadBranches = async () => {
  isLoading.value = true

  const params = {
    page: currentPage.value,
    per_page: perPage.value
  }

  const { data, error } = await get('/branch/list', params)

  if (data) {
    branches.value = data.items || []
    totalCount.value = data.total || 0
    totalPages.value = Math.ceil(totalCount.value / perPage.value)
  }

  isLoading.value = false
}

// 페이지 변경
const changePage = (page) => {
  if (page < 1 || page > totalPages.value) return
  currentPage.value = page
  loadBranches()
}

onMounted(() => {
  loadBranches()
})
</script>