From 94f96e54c015b06f61ab9392d65f10ed3e887742 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Thu, 16 Jan 2025 13:38:26 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/BoardCardList.vue    |  2 +-
 src/components/pagination/Pagination.vue | 55 ++++++++++++++----------
 src/views/board/BoardList.vue            | 35 ++++++++++++++-
 3 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue
index 6e0b651..f133a6f 100644
--- a/src/components/list/BoardCardList.vue
+++ b/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>
diff --git a/src/components/pagination/Pagination.vue b/src/components/pagination/Pagination.vue
index 8d5e3bd..5bb8ead 100644
--- a/src/components/pagination/Pagination.vue
+++ b/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">
-                <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>
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index ce7873a..b9d5b76 100644
--- a/src/views/board/BoardList.vue
+++ b/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");