From 0fa34fe90c7173c90a84f118b2166370515d4b82 Mon Sep 17 00:00:00 2001 From: kimdaae328 Date: Mon, 20 Jan 2025 16:14:16 +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=EB=B0=8F=20=EC=A1=B0=ED=9A=8C=EC=88=98=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=EC=97=90=20=EC=B6=94=EA=B0=80,=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=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/BoardCard.vue | 9 +- src/components/list/BoardCardList.vue | 1 + src/components/pagination/Pagination.vue | 139 ++++++++++++++---- src/views/board/BoardList.vue | 172 ++++++++++++++--------- 4 files changed, 231 insertions(+), 90 deletions(-) diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue index 7460faa..a64f91f 100644 --- a/src/components/list/BoardCard.vue +++ b/src/components/list/BoardCard.vue @@ -24,8 +24,11 @@
{{ formattedDate }} - +
+ + {{ views || 0 }} + {{ likes || 0 }} @@ -66,6 +69,10 @@ const props = defineProps({ type: String, required: true, }, + views: { + type: Number, + default: 0, + }, likes: { type: Number, default: 0, diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue index fbc984b..3c66287 100644 --- a/src/components/list/BoardCardList.vue +++ b/src/components/list/BoardCardList.vue @@ -10,6 +10,7 @@ :title="post.title" :content="post.content" :date="post.date" + :views="post.views" :likes="post.likes" :comments="post.comments" /> diff --git a/src/components/pagination/Pagination.vue b/src/components/pagination/Pagination.vue index 8d5e3bd..81a080f 100644 --- a/src/components/pagination/Pagination.vue +++ b/src/components/pagination/Pagination.vue @@ -1,35 +1,126 @@ + + - + \ No newline at end of file diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue index 55d0f0c..fce7108 100644 --- a/src/views/board/BoardList.vue +++ b/src/views/board/BoardList.vue @@ -11,10 +11,10 @@
- + + +
@@ -27,22 +27,33 @@
-
- +
+

공지사항

+
-
- +
+

일반게시판

+
-
-
@@ -62,6 +73,22 @@ import axios from '@api'; const generalList = ref([]); const noticeList = ref([]); const searchText = ref(''); +const selectedOrder = ref(''); +const sortDirection = ref('desc'); +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 goDetail = (id) => { @@ -71,86 +98,101 @@ const goDetail = (id) => { // 검색 처리 const search = (e) => { searchText.value = e.trim(); + fetchGeneralPosts(1); + fetchNoticePosts(searchText.value); }; -// 검색 결과 필터링(일반게시물) -const filteredList = computed(() => - generalList.value.filter((item) => - item.title.toLowerCase().includes(searchText.value.toLowerCase()) - ) -); - -// 검색 결과 필터링(공지사항) -const filteredList2 = computed(() => - noticeList.value.filter((item) => - item.title.toLowerCase().includes(searchText.value.toLowerCase()) - ) -); - -// 페이지네이션 상태 -const currentPage = ref(1); // 현재 페이지 번호 -const itemsPerPage = 10; // 한 페이지에 표시할 아이템 수 - -// 현재 페이지 데이터 계산 -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 handleSortChange = (event) => { + const value = event.target.value; + if (value === 'view') { + selectedOrder.value = 'view'; + sortDirection.value = 'desc'; + } else if (value === 'date') { + selectedOrder.value = 'date'; + sortDirection.value = 'desc'; + } else { + selectedOrder.value = ''; + sortDirection.value = 'desc'; + }; + fetchGeneralPosts(1); }; // 게시물 데이터 로드(일반) -const fetchPosts = async () => { - const response = await axios.get("board/general"); +const fetchGeneralPosts = async (page = 1) => { + const response = await axios.get("board/general", { + params: { + page: page, + orderBy: selectedOrder.value, + sortDirection: sortDirection.value, + searchKeyword: searchText.value + } + }); - if (response.data && response.data.data && Array.isArray(response.data.data.list)) { - generalList.value = response.data.data.list.map((post, index) => ({ + if (response.data && response.data.data) { + const data = response.data.data; + // 게시물 리스트 업데이트 + generalList.value = data.list.map((post, index) => ({ ...post, id: post.id || index, img: post.img || null, - likes: post.likes || 0, - comments: post.comments || 0, + views: post.cnt || 0, + likes: post.likeCount || 0, + comments: post.commentCount || 0, })); + + // 페이지네이션 정보 업데이트 + pagination.value = { + currentPage: data.pageNum, + pages: data.pages, + prePage: data.prePage, + nextPage: data.nextPage, + isFirstPage: data.isFirstPage, + isLastPage: data.isLastPage, + hasPreviousPage: data.hasPreviousPage, + hasNextPage: data.hasNextPage, + navigatePages: data.navigatePages, + navigatepageNums: data.navigatepageNums, + navigateFirstPage: data.navigateFirstPage, + navigateLastPage: data.navigateLastPage + }; } else { console.error("데이터 오류:", response.data); } }; -const fetchPosts2 = async () => { - const response = await axios.get("board/notices"); +// 게시물 데이터 로드(공지사항) +const fetchNoticePosts = async () => { + const response = await axios.get("board/notices", { + params: { + searchKeyword: searchText.value + } + }); if (response.data && response.data.data && Array.isArray(response.data.data)) { noticeList.value = response.data.data.map((post, index) => ({ ...post, id: post.id || index, img: post.img || null, - likes: post.likes || 0, - comments: post.comments || 0, + views: post.cnt || 0, + likes: post.likeCount || 0, + comments: post.commentCount || 0, })); } else { console.error("데이터 오류:", response.data); } }; +// 페이지 변경 +const handlePageChange = (page) => { + if (page !== pagination.value.currentPage) { + fetchGeneralPosts(page); + } +}; + // 데이터 로드 onMounted(() => { - fetchPosts(); - fetchPosts2(); + fetchGeneralPosts(); + fetchNoticePosts(); }); - - -