+ 게시판 검색 기능

app/pages/contact/notice.vue

@@ -8,8 +8,12 @@
         </div>
         <div class="search--wrap">
           <USelect v-model="searchValue" :items="searchItems" />
-          <UInput v-model="searchKeyword" placeholder="검색어를 입력해주세요." />
-          <UButton class="search--btn"></UButton>
+          <UInput 
+            v-model="searchKeyword" 
+            placeholder="검색어를 입력해주세요."
+            @keyup.enter="performSearch"
+          />
+          <UButton @click="performSearch" class="search--btn"></UButton>
         </div>
         <div class="notice--wrap">
           <div class="notice--list">
@@ -55,9 +59,10 @@
   import { ref, computed, onMounted } from "vue";
   import TopVisual from "~/components/topVisual.vue";
 
-  const searchItems = ref(["제목"]);
-  const searchValue = ref("선택");
+  const searchItems = ref(["제목", "내용", "제목+내용"]);
+  const searchValue = ref("제목");
   const searchKeyword = ref("");
+  const totalCount = ref(0);
   const loading = ref(true);
 
   const className = ref("contact");
@@ -89,16 +94,40 @@
   // 뉴스 데이터 배열 - API에서 받아올 것
   const newsData = ref([]);
 
+  // 검색 실행 함수
+  const performSearch = async () => {
+    currentPage.value = 1; // 검색시 첫 페이지로 이동
+    await fetchNoticeList(1);
+  };
+
+  // 검색 초기화 함수
+  const resetSearch = async () => {
+    searchKeyword.value = "";
+    searchValue.value = "제목";
+    currentPage.value = 1;
+    await fetchNoticeList(1);
+  };
+
   // API에서 공지사항 데이터 가져오기
   const fetchNoticeList = async (page = 1) => {
     try {
       loading.value = true;
 
-      // CodeIgniter 방식으로 호출 (/controller/method/param)
-      const response = await $get(`/board_list/notice`, {
+      // 검색 종류 매핑
+      const getSearchKind = (searchType) => {
+        switch (searchType) {
+          case "제목": return "title";
+          case "내용": return "contents";
+          case "제목+내용": return "title_contents";
+          default: return "title";
+        }
+      };
+
+      // CodeIgniter 방식으로 호출
+      const response = await $postForm(`/board_list/notice`, {
         page: page,
-        searchKind: searchValue.value,
-        searchKeyword: searchKeyword.value,
+        searchKind: getSearchKind(searchValue.value),
+        searchKeyword: searchKeyword.value || "",
       });
 
       // 백엔드가 JSON으로 응답하는지 확인
@@ -106,13 +135,13 @@
         // JSON 응답인 경우
         if (response.success && response.list) {
           // 전체 개수와 현재 페이지를 기준으로 번호 계산
-          const totalCount = response.totalCount || 0;
+          totalCount.value = response.totalCount || 0;
           const currentPageNum = page || 1;
           const pageSize = 20; // 백엔드의 페이지 사이즈와 동일
 
           newsData.value = response.list.map((item, index) => {
             // 번호 = 전체개수 - ((현재페이지-1) * 페이지크기 + 인덱스)
-            const displayNumber = totalCount - ((currentPageNum - 1) * pageSize + index);
+            const displayNumber = totalCount.value - ((currentPageNum - 1) * pageSize + index);
 
             return {
               id: displayNumber, // 순차적인 번호로 표시
@@ -145,7 +174,8 @@
   // 페이지네이션 로직
   const currentPage = ref(1);
   const itemsPerPage = 10;
-  const totalPages = computed(() => Math.ceil(newsData.value.length / itemsPerPage));
+  const backendPageSize = 20;
+  const totalPages = computed(() => Math.ceil(totalCount.value / itemsPerPage));
 
   const paginatedNews = computed(() => {
     const start = (currentPage.value - 1) * itemsPerPage;
@@ -153,24 +183,34 @@
     return newsData.value.slice(start, end);
   });
 
-  const goToPage = (page) => {
+  // 백엔드에서 필요한 데이터가 있는지 확인하고 필요시 API 호출
+  const needToFetchData = (targetPage) => {
+    const startIndex = (targetPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage - 1;
+    return endIndex >= newsData.value.length && newsData.value.length < totalCount.value;
+  };
+
+  const goToPage = async (page) => {
     if (page >= 1 && page <= totalPages.value) {
       currentPage.value = page;
-      fetchNoticeList(page);
+      
+      if (needToFetchData(page)) {
+        // 백엔드 페이지 계산: 프론트 페이지를 백엔드 페이지로 변환
+        const backendPage = Math.ceil((page * itemsPerPage) / backendPageSize);
+        await fetchNoticeList(backendPage);
+      }
     }
   };
 
-  const nextPage = () => {
+  const nextPage = async () => {
     if (currentPage.value < totalPages.value) {
-      currentPage.value++;
-      fetchNoticeList(currentPage.value);
+      await goToPage(currentPage.value + 1);
     }
   };
 
-  const prevPage = () => {
+  const prevPage = async () => {
     if (currentPage.value > 1) {
-      currentPage.value--;
-      fetchNoticeList(currentPage.value);
+      await goToPage(currentPage.value - 1);
     }
   };