localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

페이지네이션 수정

Browse Source
This commit is contained in:
kimdaae328 2025-01-16 13:38:26 +09:00
parent 68d1b41f11
commit 94f96e54c0
3 changed files with 66 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/list/BoardCardList.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="container mt-4">
<div class="mt-4">
<div v-if="posts.length === 0" class="text-center">
게시물이 없습니다.
</div>

55
src/components/pagination/Pagination.vue
View File

@ -1,35 +1,44 @@
<template>
<nav aria-label="Page navigation">
<ul class="pagination pagination-rounded justify-content-center">
<!-- <li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left bx-sm"></i></a>
</li> -->
<!-- <li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevron-left bx-sm"></i></a>
</li> -->
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">1</a>
<li class="page-item" :class="{ disabled: currentPage === 1 }">
<a class="page-link" href="javascript:void(0);" @click="goToPage(1)">
<i class="tf-icon bx bx-chevrons-left bx-sm"></i>
</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
<li class="page-item" :class="{ disabled: currentPage === 1 }">
<a class="page-link" href="javascript:void(0);" @click="goToPage(currentPage - 1)">
<i class="tf-icon bx bx-chevron-left bx-sm"></i>
</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">3</a>
<li v-for="page in totalPages" :key="page" class="page-item" :class="{ active: currentPage === page }">
<a class="page-link" href="javascript:void(0);" @click="goToPage(page)">{{ page }}</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
<li class="page-item" :class="{ disabled: currentPage === totalPages }">
<a class="page-link" href="javascript:void(0);" @click="goToPage(currentPage + 1)">
<i class="tf-icon bx bx-chevron-right bx-sm"></i>
</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevron-right bx-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevrons-right bx-sm"></i></a>
<li class="page-item" :class="{ disabled: currentPage === totalPages }">
<a class="page-link" href="javascript:void(0);" @click="goToPage(totalPages)">
<i class="tf-icon bx bx-chevrons-right bx-sm"></i>
</a>
</li>
</ul>
</nav>
</template>
<script setup></script>
<script setup>
const props = defineProps({
currentPage: Number,
totalPages: Number,
});
const emit = defineEmits(['update:page']);
const goToPage = (page) => {
if (page >= 1 && page <= props.totalPages) {
emit('update:page', page);
}
};
</script>

35
src/views/board/BoardList.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="container-xxl flex-grow-1 container-p-y">
<!-- 검색 -->
<search-bar @update:data="search" />
<!-- 리스트 -->
<div class="row g-3">
<div class="mt-8">
<router-link to="/board/write">
@ -8,10 +11,15 @@
</router-link>
</div>
<board-card :posts="filteredList" @click="goDetail" />
<board-card :posts="paginatedList" @click="goDetail" />
<!-- 페이지네이션 -->
<div class="mt-8">
<pagination />
<pagination
:current-page="currentPage"
:total-pages="totalPages"
@update:page="changePage"
/>
</div>
</div>
</div>
@ -47,6 +55,29 @@ const filteredList = computed(() =>
)
);
// 페이지네이션 상태
const currentPage = ref(1); // 현재 페이지 번호
const itemsPerPage = 5; // 한 페이지에 표시할 아이템 수
// 현재 페이지 데이터 계산
const paginatedList = computed(() => {
const start = (currentPage.value - 1) * itemsPerPage;
const end = start + itemsPerPage;
return filteredList.value.slice(start, end);
});
// 총 페이지 수 계산
const totalPages = computed(() => {
return Math.ceil(filteredList.value.length / itemsPerPage);
});
// 페이지 변경 함수
const changePage = (page) => {
if (page >= 1 && page <= totalPages.value) {
currentPage.value = page;
}
};
// 게시물 데이터 로드
const fetchPosts = async () => {
const response = await axios.get("board/general");