페이지네이션 진행중

src/views/board/BoardList.vue

@@ -190,6 +190,8 @@ const fetchGeneralPosts = async (page = 1) => {
             console.log(data)
             const totalPosts = data.data.total; // 전체 게시물 개수 받아오기
 
+            console.log('📌 API 응답 데이터:', data.data);
+
             generalList.value = data.data.list.map((post, index) => ({
                 realId: post.id,
                 id: totalPosts - ((page - 1) * selectedSize.value) - index,

src/views/board/BoardView.vue

@@ -94,7 +94,11 @@
                             @updateReaction="handleUpdateReaction"
                             @submitComment="handleCommentReply"
                         />
-                        <Pagination/>
+                        <Pagination
+                            v-if="pagination.pages"
+                            v-bind="pagination"
+                            @update:currentPage="handlePageChange"
+                        />
                     </div>
                 </div>
             </div>
@@ -141,6 +145,21 @@ const passwordAlert = ref("");
 const isPassword = ref(false);
 const lastClickedButton = ref("");
 
+const pagination = ref({
+    currentPage: 1,
+    pages: 1,
+    prePage: 0,
+    nextPage: 1,
+    isFirstPage: true,
+    isLastPage: false,
+    hasPreviousPage: false,
+    hasNextPage: false,
+    navigatePages: 10,
+    navigatepageNums: [1],
+    navigateFirstPage: 1,
+    navigateLastPage: 1
+});
+
 
 // 게시물 상세 데이터 불러오기
 const fetchBoardDetails = async () => {
@@ -202,10 +221,13 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
 };
 
 // 댓글 목록 조회
-const fetchComments = async () => {
+const fetchComments = async (pageNum  = 1) => {
     try {
         const response = await axios.get(`board/${currentBoardId.value}/comments`, {
-            params: { LOCBRDSEQ: currentBoardId.value }
+            params: {
+                LOCBRDSEQ: currentBoardId.value,
+                pageNum: pageNum
+            }
         });
         console.log("목록 API 응답 데이터:", response.data); 
 
@@ -240,6 +262,22 @@ const fetchComments = async () => {
 
         // console.log("변환된 comments 데이터:", comments.value);
 
+        pagination.value = {
+            ...pagination.value,
+            currentPage: response.data.data.pageNum,  // 현재 페이지 번호
+            pages: response.data.data.pages,  // 전체 페이지 수
+            prePage: response.data.data.prePage, // 이전 페이지
+            nextPage: response.data.data.nextPage, // 다음 페이지
+            isFirstPage: response.data.data.isFirstPage, // 첫 페이지 여부
+            isLastPage: response.data.data.isLastPage, // 마지막 페이지 여부
+            hasPreviousPage: response.data.data.hasPreviousPage, // 이전 페이지 존재 여부
+            hasNextPage: response.data.data.hasNextPage, // 다음 페이지 존재 여부
+            navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
+            navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록
+            navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
+            navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
+        };
+
     } catch (error) {
         console.error('댓글 목록 불러오기 오류:', error);
     }
@@ -372,6 +410,14 @@ const deletePost = async () => {
     }
 };
 
+// 페이지 변경
+const handlePageChange = (page) => {
+    if (page !== pagination.value.currentPage) {
+        pagination.value.currentPage = page;
+        fetchComments(page);
+    }
+};
+
 // 날짜
 const formattedDate = (dateString) => {
     if (!dateString) return "날짜 없음";