게시물 id 수정

src/components/list/BoardCardList.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="container mt-4">
+    <div class="mt-4">
         <div v-if="posts.length === 0" class="text-center">
             게시물이 없습니다.
         </div>
-        <div v-for="post in posts" :key="post.id">
+        <div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
             <BoardCard
                 :img="post.img"
                 :category="post.category"
@@ -30,6 +30,12 @@ export default {
             required: true,
         },
     },
+    emits: ['click'],
+    methods: {
+        handleClick(id) {
+            this.$emit('click', id);
+        },
+    },
 };
 </script>
 

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>

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>
@@ -32,6 +40,7 @@ const searchText = ref('');
 
 // 상세 페이지 이동
 const goDetail = (id) => {
+    console.log('Navigating to ID:', id)
     router.push({ name: 'BoardDetail', params: { id } });
 };
 
@@ -47,13 +56,38 @@ 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");
     console.log(response.data.data.list)
+
     if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
-        list.value = response.data.data.list.map((post) => ({
+        list.value = response.data.data.list.map((post, index) => ({
             ...post,
+            id: post.id || index,
             img: post.img || null,
             likes: post.likes || 0,
             comments: post.comments || 0,

src/views/board/BoardView.vue

@@ -83,6 +83,7 @@ const fetchBoardDetails = async () => {
 
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
+    console.log('Route Params:', route.params);
     fetchBoardDetails();
 });
 </script>