128 lines
3.5 KiB
Vue
128 lines
3.5 KiB
Vue
<template>
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<!-- 상단 바: 검색창, 정렬 셀렉트 박스, 새 글쓰기 버튼 -->
|
|
<div class="row mb-4">
|
|
<!-- 검색창 -->
|
|
<div class="col">
|
|
<search-bar @update:data="search" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- 정렬 셀렉트 박스 -->
|
|
<div class="col-md-3 mb-4">
|
|
<select class="form-select">
|
|
<option selected>정렬 기준 선택</option>
|
|
<option value="1">조회수</option>
|
|
<option value="2">날짜</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 새 글쓰기 버튼 -->
|
|
<div class="col-auto ms-auto mb-4">
|
|
<router-link to="/board/write">
|
|
<WriteButton />
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 게시물 리스트 -->
|
|
<div class="row g-3">
|
|
<board-card :posts="paginatedList" @click="goDetail" />
|
|
</div>
|
|
|
|
<!-- 페이지네이션 -->
|
|
<div class="row g-3">
|
|
|
|
<div class="mt-8">
|
|
<pagination
|
|
:current-page="currentPage"
|
|
:total-pages="totalPages"
|
|
@update:page="changePage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import BoardCard from '@/components/list/BoardCardList.vue';
|
|
import Pagination from '@c/pagination/Pagination.vue';
|
|
import SearchBar from '@c/search/SearchBar.vue';
|
|
import router from '@/router';
|
|
import WriteButton from '@c/button/WriteBtn.vue';
|
|
import axios from '@api';
|
|
|
|
// 데이터 초기화
|
|
const list = ref([]);
|
|
const searchText = ref('');
|
|
|
|
// 상세 페이지 이동
|
|
const goDetail = (id) => {
|
|
router.push({ name: 'BoardDetail', params: { id } });
|
|
};
|
|
|
|
// 검색 처리
|
|
const search = (e) => {
|
|
searchText.value = e.trim();
|
|
};
|
|
|
|
// 검색 결과 필터링
|
|
const filteredList = computed(() =>
|
|
list.value.filter((item) =>
|
|
item.title.toLowerCase().includes(searchText.value.toLowerCase())
|
|
)
|
|
);
|
|
|
|
// 페이지네이션 상태
|
|
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");
|
|
|
|
if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
|
|
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,
|
|
}));
|
|
} else {
|
|
console.error("데이터 오류:", response.data);
|
|
}
|
|
};
|
|
|
|
// 데이터 로드
|
|
onMounted(() => {
|
|
fetchPosts();
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
/* 필요에 따라 스타일 추가 */
|
|
</style>
|