페이지네이션 수정

src/components/list/BoardCardList.vue

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

src/components/pagination/Pagination.vue

@@ -1,35 +1,44 @@
 <template>
     <nav aria-label="Page navigation">
         <ul class="pagination pagination-rounded justify-content-center">
-            <!-- <li class="page-item first">
+            <li class="page-item" :class="{ disabled: currentPage === 1 }">
-                <a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left bx-sm"></i></a>
+                <a class="page-link" href="javascript:void(0);" @click="goToPage(1)">
-            </li> -->
+                    <i class="tf-icon bx bx-chevrons-left bx-sm"></i>
-            <!-- <li class="page-item prev">
+                </a>
-                <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>
-            <li class="page-item">
+            <li class="page-item" :class="{ disabled: currentPage === 1 }">
-                <a class="page-link" href="javascript:void(0);">2</a>
+                <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">
+            <li v-for="page in totalPages" :key="page" class="page-item" :class="{ active: currentPage === page }">
-                <a class="page-link" href="javascript:void(0);">3</a>
+                <a class="page-link" href="javascript:void(0);" @click="goToPage(page)">{{ page }}</a>
             </li>
-            <li class="page-item">
+            <li class="page-item" :class="{ disabled: currentPage === totalPages }">
-                <a class="page-link" href="javascript:void(0);">4</a>
+                <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">
+            <li class="page-item" :class="{ disabled: currentPage === totalPages }">
-                <a class="page-link" href="javascript:void(0);">5</a>
+                <a class="page-link" href="javascript:void(0);" @click="goToPage(totalPages)">
-            </li>
+                    <i class="tf-icon bx bx-chevrons-right bx-sm"></i>
-            <li class="page-item next">
+                </a>
-                <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>
         </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>

src/views/board/BoardList.vue

@@ -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");