검색/페이징/필터링 후 수정시 검색어/페이징 풀림

src/views/board/BoardEdit.vue

@@ -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();
     };
 
     // 전 페이지로 이동

src/views/board/BoardList.vue

@@ -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>
 
@@ -71,9 +77,7 @@
                                                 class="bi bi-paperclip"
                                             ></i>
 
-                                            <span v-if="isNewPost(notice.rawDate)" class="box-new badge text-white ms-2 fs-tiny">
+                                            <span v-if="isNewPost(notice.rawDate)" class="box-new badge text-white ms-2 fs-tiny"> N </span>
-                                                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>
@@ -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 = () => {
+    const handleSortChange = e => {
-        fetchGeneralPosts(1);
+        selectedOrder.value = e.target.value;
+        handlePageFilter();
     };
 
     // 리스트 개수 변경 핸들러
-    const handleSizeChange = () => {
+    const handleSizeChange = e => {
-        fetchGeneralPosts(1);
+        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,
+                    size: size,
-                    orderBy: selectedOrder.value,
+                    orderBy: orderBy,
-                    searchKeyword: searchText.value,
+                    searchKeyword: keyword,
                 },
             });
 
@@ -243,11 +276,11 @@
         } catch (error) {}
     };
 
-// 공지사항 데이터 로드
+    // 공지사항 데이터 로드
-const fetchNoticePosts = async () => {
+    const fetchNoticePosts = async () => {
         try {
-        const { data } = await axios.get("board/notices", {
+            const { data } = await axios.get('board/notices', {
-            params: { searchKeyword: searchText.value }
+                params: { searchKeyword: searchText.value },
             });
 
             if (data?.data) {
@@ -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>