audi/app/pages/admin/board/event/index.vue

<template>
  <div class="admin--board-list">
    <!-- 검색 영역 -->
    <div class="admin--search-box">
      <div class="admin--search-form">
        <select v-model="searchType" class="admin--form-select admin--search-select">
          <option value="title">제목</option>
          <option value="name">이름</option>
          <option value="content">내용</option>
        </select>
        <input
          v-model="searchKeyword"
          type="text"
          class="admin--form-input admin--search-input"
          placeholder="검색어를 입력하세요"
          @keyup.enter="handleSearch"
        >
        <button class="admin--btn admin--btn-primary" @click="handleSearch">검색</button>
        <button class="admin--btn admin--btn-secondary" @click="handleReset">초기화</button>
      </div>
      <div class="admin--search-actions">
        <button class="admin--btn admin--btn-primary" @click="goToCreate">+ 등록</button>
      </div>
    </div>

    <!-- 테이블 -->
    <div class="admin--table-wrapper">
      <table class="admin--table">
        <thead>
          <tr>
            <th>NO</th>
            <th>제목</th>
            <th>이름</th>
            <th>등록일</th>
            <th>조회</th>
            <th>관리</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="isLoading">
            <td colspan="6" class="admin--table-loading">데이터를 불러오는 중...</td>
          </tr>
          <tr v-else-if="!posts || posts.length === 0">
            <td colspan="6" class="admin--table-empty">등록된 게시물이 없습니다.</td>
          </tr>
          <tr v-else v-for="(post, index) in posts" :key="post.id">
            <td>{{ post.is_notice ? '공지' : totalCount - ((currentPage - 1) * perPage + index) }}</td>
            <td class="admin--table-title">{{ post.title }}</td>
            <td>{{ post.name }}</td>
            <td>{{ formatDate(post.created_at) }}</td>
            <td>{{ post.views }}</td>
            <td>
              <div class="admin--table-actions">
                <button class="admin--btn-small admin--btn-small-primary" @click="goToEdit(post.id)">수정</button>
                <button class="admin--btn-small admin--btn-small-danger" @click="handleDelete(post.id)">삭제</button>
              </div>
            </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'
import { useRouter } from 'vue-router'

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

const router = useRouter()
const { get, del } = useApi()

const isLoading = ref(false)
const posts = ref([])
const searchType = ref('title')
const searchKeyword = 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 loadPosts = async () => {
  isLoading.value = true
  const params = { page: currentPage.value, per_page: perPage.value }
  if (searchKeyword.value) {
    params.search_type = searchType.value
    params.search_keyword = searchKeyword.value
  }
  const { data } = await get('/board/event', params)
  if (data) {
    posts.value = data.items || []
    totalCount.value = data.total || 0
    totalPages.value = Math.ceil(totalCount.value / perPage.value)
  }
  isLoading.value = false
}

const handleSearch = () => { currentPage.value = 1; loadPosts() }
const handleReset = () => { searchType.value = 'title'; searchKeyword.value = ''; currentPage.value = 1; loadPosts() }
const changePage = (page) => { if (page < 1 || page > totalPages.value) return; currentPage.value = page; loadPosts() }
const goToCreate = () => router.push('/admin/board/event/create')
const goToEdit = (id) => router.push(`/admin/board/event/edit/${id}`)
const handleDelete = async (id) => {
  if (!confirm('정말 삭제하시겠습니까?')) return
  const { error } = await del(`/board/event/${id}`)
  if (error) alert('삭제에 실패했습니다.')
  else { alert('삭제되었습니다.'); loadPosts() }
}
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`
}

onMounted(() => loadPosts())
</script>