검색/페이징/필터링 후 수정시 검색어/페이징 풀림
This commit is contained in:
parent
92b7d5d4ac
commit
de04cf679b
@ -166,8 +166,18 @@
|
||||
// 목록 페이지로 이동
|
||||
const goList = () => {
|
||||
accessStore.$reset();
|
||||
//router.push('/board');
|
||||
router.back();
|
||||
|
||||
const getFilter = localStorage.getItem(`boardList_${currentBoardId.value}`);
|
||||
if (getFilter) {
|
||||
router.push({
|
||||
path: '/board',
|
||||
query: JSON.parse(getFilter),
|
||||
});
|
||||
} else {
|
||||
router.push('/board');
|
||||
}
|
||||
|
||||
//router.back();
|
||||
};
|
||||
|
||||
// 전 페이지로 이동
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
<div class="d-flex align-items-center" style="gap: 15px">
|
||||
<!-- 리스트 갯수 선택 -->
|
||||
<select class="form-select w-auto" v-model="selectedSize" @change="handleSizeChange" style="margin-left: 0">
|
||||
<select class="form-select w-auto" v-model="selectedSize" @change="handleSizeChange($event)" style="margin-left: 0">
|
||||
<option value="10">10개씩</option>
|
||||
<option value="20">20개씩</option>
|
||||
<option value="30">30개씩</option>
|
||||
@ -17,14 +17,20 @@
|
||||
</select>
|
||||
|
||||
<!-- 셀렉트 박스 -->
|
||||
<select class="form-select w-auto" v-model="selectedOrder" @change="handleSortChange">
|
||||
<select class="form-select w-auto" v-model="selectedOrder" @change="handleSortChange($event)">
|
||||
<option value="date">날짜</option>
|
||||
<option value="views">조회수</option>
|
||||
</select>
|
||||
|
||||
<!-- 공지 접기 기능 -->
|
||||
<div class="form-check mb-0">
|
||||
<input class="form-check-input" type="checkbox" v-model="showNotices" id="hideNotices" />
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
v-model="showNotices"
|
||||
id="hideNotices"
|
||||
@change="handlePageFilter()"
|
||||
/>
|
||||
<label class="form-check-label" for="hideNotices">공지 숨기기</label>
|
||||
</div>
|
||||
|
||||
@ -65,15 +71,13 @@
|
||||
[ {{ notice.commentCount }} ]
|
||||
</span>
|
||||
|
||||
<i v-if="notice.img" class="bi bi-image mx-1"></i>
|
||||
<i
|
||||
v-if="Array.isArray(notice.hasAttachment) && notice.hasAttachment.length > 0"
|
||||
class="bi bi-paperclip"
|
||||
></i>
|
||||
<i v-if="notice.img" class="bi bi-image mx-1"></i>
|
||||
<i
|
||||
v-if="Array.isArray(notice.hasAttachment) && notice.hasAttachment.length > 0"
|
||||
class="bi bi-paperclip"
|
||||
></i>
|
||||
|
||||
<span v-if="isNewPost(notice.rawDate)" class="box-new badge text-white ms-2 fs-tiny">
|
||||
N
|
||||
</span>
|
||||
<span v-if="isNewPost(notice.rawDate)" class="box-new badge text-white ms-2 fs-tiny"> N </span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">{{ notice.author }}</td>
|
||||
@ -89,7 +93,7 @@
|
||||
@click="goDetail(post.realId)"
|
||||
>
|
||||
<td class="text-center">{{ post.id }}</td>
|
||||
<td class="cursor-pointer ">
|
||||
<td class="cursor-pointer">
|
||||
<div class="d-flex align-items-center">
|
||||
{{ post.title }}
|
||||
<span v-if="post.commentCount" class="comment-count">[ {{ post.commentCount }} ]</span>
|
||||
@ -101,7 +105,7 @@
|
||||
<span v-if="isNewPost(post.rawDate)" class="box-new badge text-white ms-2 fs-tiny">N</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">{{ post.nickname ? post.nickname : post.author }}</td>
|
||||
<td class="text-center">{{ post.nickname ? post.nickname : post.author }}</td>
|
||||
<td class="text-center">{{ post.date }}</td>
|
||||
<td class="text-center">{{ post.views }}</td>
|
||||
</tr>
|
||||
@ -126,10 +130,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Pagination from '@c/pagination/Pagination.vue';
|
||||
import SearchBar from '@c/search/SearchBar.vue';
|
||||
import router from '@/router';
|
||||
//import { route, router } from '@/router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import WriteButton from '@c/button/WriteBtn.vue';
|
||||
import axios from '@api';
|
||||
import dayjs from 'dayjs';
|
||||
@ -148,6 +153,9 @@
|
||||
const selectedSize = ref(10);
|
||||
const showNotices = ref(false);
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const pagination = ref({
|
||||
currentPage: 1,
|
||||
pages: 1,
|
||||
@ -165,9 +173,32 @@
|
||||
|
||||
// 상세 페이지 이동
|
||||
const goDetail = id => {
|
||||
saveFilterToStorage(id);
|
||||
router.push({ name: 'BoardDetail', params: { id: id } });
|
||||
};
|
||||
|
||||
// 로컬 스토리지 필터 저장
|
||||
const saveFilterToStorage = seq => {
|
||||
const query = {
|
||||
page: 1,
|
||||
size: selectedSize.value,
|
||||
orderBy: selectedOrder.value,
|
||||
searchText: searchText.value,
|
||||
showNotice: showNotices.value,
|
||||
};
|
||||
|
||||
localStorage.setItem(`boardList_${seq}`, JSON.stringify(query));
|
||||
};
|
||||
|
||||
// 스토리지 초기화
|
||||
const clearFliterStorage = () => {
|
||||
Object.keys(localStorage).forEach(key => {
|
||||
if (key.startsWith('boardList_')) {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 날짜 포맷 변환 함수 (오늘이면 HH:mm, 아니면 YYYY-MM-DD)
|
||||
const formatDate = dateString => {
|
||||
const date = dayjs(dateString);
|
||||
@ -183,28 +214,30 @@
|
||||
// 검색 처리
|
||||
const search = e => {
|
||||
searchText.value = e.trim();
|
||||
fetchGeneralPosts(1);
|
||||
handlePageFilter();
|
||||
};
|
||||
|
||||
// 정렬 변경 핸들러
|
||||
const handleSortChange = () => {
|
||||
fetchGeneralPosts(1);
|
||||
const handleSortChange = e => {
|
||||
selectedOrder.value = e.target.value;
|
||||
handlePageFilter();
|
||||
};
|
||||
|
||||
// 리스트 개수 변경 핸들러
|
||||
const handleSizeChange = () => {
|
||||
fetchGeneralPosts(1);
|
||||
const handleSizeChange = e => {
|
||||
selectedSize.value = e.target.value;
|
||||
handlePageFilter();
|
||||
};
|
||||
|
||||
// 일반 게시물 데이터 로드
|
||||
const fetchGeneralPosts = async (page = 1) => {
|
||||
const fetchGeneralPosts = async (page = 1, keyword = '', orderBy = 'date', size = 10) => {
|
||||
try {
|
||||
const { data } = await axios.get('board/general', {
|
||||
params: {
|
||||
page,
|
||||
size: selectedSize.value,
|
||||
orderBy: selectedOrder.value,
|
||||
searchKeyword: searchText.value,
|
||||
size: size,
|
||||
orderBy: orderBy,
|
||||
searchKeyword: keyword,
|
||||
},
|
||||
});
|
||||
|
||||
@ -243,12 +276,12 @@
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
// 공지사항 데이터 로드
|
||||
const fetchNoticePosts = async () => {
|
||||
try {
|
||||
const { data } = await axios.get("board/notices", {
|
||||
params: { searchKeyword: searchText.value }
|
||||
});
|
||||
// 공지사항 데이터 로드
|
||||
const fetchNoticePosts = async () => {
|
||||
try {
|
||||
const { data } = await axios.get('board/notices', {
|
||||
params: { searchKeyword: searchText.value },
|
||||
});
|
||||
|
||||
if (data?.data) {
|
||||
noticeList.value = data.data.map(post => ({
|
||||
@ -275,20 +308,60 @@ const fetchNoticePosts = async () => {
|
||||
}
|
||||
|
||||
searchText.value = searchTextValue;
|
||||
fetchGeneralPosts(1);
|
||||
handlePageFilter();
|
||||
};
|
||||
|
||||
// 페이지 변경
|
||||
const handlePageChange = page => {
|
||||
if (page !== pagination.value.currentPage) {
|
||||
fetchGeneralPosts(page);
|
||||
handlePageFilter(page);
|
||||
}
|
||||
};
|
||||
|
||||
// 페이지 이동 (검색 필터 유지)
|
||||
const handlePageFilter = (page = 1) => {
|
||||
router.push({
|
||||
path: '/board',
|
||||
query: {
|
||||
page: page,
|
||||
size: selectedSize.value,
|
||||
orderBy: selectedOrder.value,
|
||||
searchText: searchText.value,
|
||||
showNotice: showNotices.value,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 페이징, 검색 필터 감지
|
||||
watch(
|
||||
() => route.query,
|
||||
newQuery => {
|
||||
pagination.currentPage = newQuery.page || 1;
|
||||
const keyword = newQuery?.searchText;
|
||||
const orderBy = newQuery?.orderBy;
|
||||
const size = newQuery?.size;
|
||||
|
||||
fetchGeneralPosts(pagination.currentPage, keyword, orderBy, size);
|
||||
},
|
||||
);
|
||||
// 데이터 로드
|
||||
onMounted(() => {
|
||||
// 쿼리 파라미터에서 페이지 정보 추출
|
||||
const page = route.query?.page;
|
||||
const keyword = route.query?.searchText;
|
||||
const orderBy = route.query?.orderBy;
|
||||
const size = route.query?.size;
|
||||
const showNotice = route.query?.showNotice;
|
||||
|
||||
// 필터 항목 세팅
|
||||
if (keyword) searchText.value = keyword;
|
||||
if (orderBy) selectedOrder.value = orderBy;
|
||||
if (size) selectedSize.value = size;
|
||||
if (showNotice) showNotices.value = showNotice == 'false' ? false : true;
|
||||
|
||||
clearFliterStorage();
|
||||
fetchNoticePosts();
|
||||
fetchGeneralPosts();
|
||||
fetchGeneralPosts(page, keyword, orderBy, size);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user