greenwhale/app/pages/contact/notice.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section class="notice--section">
      <div class="sub--container type2">
        <div class="title--wrap">
          <h2 class="title">공지사항</h2>
        </div>
        <div class="search--wrap">
          <USelect v-model="searchValue" :items="searchItems" />
          <UInput 
            v-model="searchKeyword" 
            placeholder="검색어를 입력해주세요."
            @keyup.enter="performSearch"
          />
          <UButton @click="performSearch" class="search--btn"></UButton>
        </div>
        <div class="notice--wrap">
          <div class="notice--list">
            <NuxtLink
              v-for="news in paginatedNews"
              :key="news.id"
              :to="news.link"
              class="notice"
            >
              <span class="news--index">{{ news.id }}</span>
              <h4>{{ news.title }}</h4>
              <span class="news--date">{{ news.date }}</span>
            </NuxtLink>
          </div>
          <div class="pagination--wrap">
            <UButton
              @click="prevPage"
              class="prev--btn"
              :disabled="currentPage === 1"
            ></UButton>
            <div class="numbs">
              <UButton
                v-for="page in totalPages"
                :key="page"
                @click="goToPage(page)"
                :class="{ active: currentPage === page }"
              >
                {{ page }}
              </UButton>
            </div>
            <UButton
              @click="nextPage"
              class="next--btn"
              :disabled="currentPage === totalPages"
            ></UButton>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>
<script setup>
  import { ref, computed, onMounted } from "vue";
  import TopVisual from "~/components/topVisual.vue";

  const searchItems = ref(["제목", "내용", "제목+내용"]);
  const searchValue = ref("제목");
  const searchKeyword = ref("");
  const totalCount = ref(0);
  const loading = ref(true);
  const allNewsData = ref([]); // 전체 데이터를 누적하여 저장
  const loadedPages = ref(new Set()); // 이미 로드한 백엔드 페이지 추적

  const className = ref("contact");
  const title = ref("Contact");
  const navigation = ref([
    {
      name: "Contact",
      link: "/contact/notice",
      gnbList: [
        { name: "Company", link: "/company/intro" },
        { name: "Product", link: "/products/materials" },
        { name: "Technology", link: "/technology/facilities" },
        { name: "Media", link: "/media/news" },
        { name: "Contact", link: "/contact/notice" },
      ],
    },
    {
      name: "공지사항",
      link: "/contact/notice",
      gnbList: [
        { name: "공지사항", link: "/contact/notice" },
        { name: "FAQ", link: "/contact/faq" },
        { name: "고객센터", link: "/contact/support" },
        { name: "오시는길", link: "/contact/location" },
      ],
    },
  ]);

  // 뉴스 데이터 배열 - API에서 받아올 것
  const newsData = ref([]);

  // 검색 실행 함수
  const performSearch = async () => {
    currentPage.value = 1; // 검색시 첫 페이지로 이동
    await fetchNoticeList(1, true); // reset=true로 검색
  };

  // 검색 초기화 함수
  const resetSearch = async () => {
    searchKeyword.value = "";
    searchValue.value = "제목";
    currentPage.value = 1;
    await fetchNoticeList(1, true); // reset=true로 초기화
  };

  // API에서 공지사항 데이터 가져오기
  const fetchNoticeList = async (page = 1, reset = false) => {
    try {
      // 검색이 변경되면 항상 리셋
      if (searchKeyword.value || searchValue.value !== "제목") {
        reset = true;
      }

      // 이미 로드한 페이지는 스킵
      if (!reset && loadedPages.value.has(page)) {
        console.log(`페이지 ${page}는 이미 로드됨`);
        return;
      }

      loading.value = true;

      // 검색 종류 매핑
      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: getSearchKind(searchValue.value),
        searchKeyword: searchKeyword.value || "",
      });

      // 백엔드가 JSON으로 응답하는지 확인
      if (response && typeof response === "object") {
        // JSON 응답인 경우
        if (response.success && response.list) {
          // 전체 개수와 현재 페이지를 기준으로 번호 계산
          totalCount.value = response.totalCount || 0;
          const currentPageNum = page || 1;
          const pageSize = 20; // 백엔드의 페이지 사이즈와 동일

          console.log("공지사항 API 응답:", {
            totalCount: totalCount.value,
            listCount: response.list.length,
            currentPage: currentPageNum,
            pageSize,
            backendPage: page,
          });

          const newData = response.list.map((item, index) => {
            // 번호 = 전체개수 - ((현재페이지-1) * 페이지크기 + 인덱스)
            const displayNumber = totalCount.value - ((currentPageNum - 1) * pageSize + index);

            return {
              id: displayNumber, // 순차적인 번호로 표시
              title: item.title,
              date: item.regdate,
              link: `/contact/noticeView?idx=${item.board_idx}`, // 실제 링크는 board_idx 사용
            };
          });

          if (reset) {
            // 리셋 모드: 전체 데이터 초기화
            allNewsData.value = newData;
            loadedPages.value = new Set([page]);
          } else {
            // 누적 모드: 새 데이터를 적절한 위치에 삽입
            const startIndex = (page - 1) * pageSize;
            allNewsData.value.splice(startIndex, pageSize, ...newData);
            loadedPages.value.add(page);
          }

          // newsData를 allNewsData로 업데이트
          newsData.value = [...allNewsData.value];
        } else {
          console.error("JSON 응답 형식이 올바르지 않습니다:", response);
          newsData.value = [];
        }
      } else if (typeof response === "string") {
        // HTML 응답인 경우 (백엔드에서 AJAX 감지 실패시)
        console.warn("HTML 응답을 받았습니다. AJAX 감지가 실패했을 수 있습니다.");
        console.log("HTML 내용:", response.substring(0, 200) + "...");
        newsData.value = [];
      } else {
        console.error("예상하지 못한 응답 형식:", typeof response, response);
        newsData.value = [];
      }
    } catch (error) {
      console.error("공지사항 데이터 로드 실패:", error);
      // 에러시 기본 더미 데이터 사용
    } finally {
      loading.value = false;
    }
  };

  // 페이지네이션 로직
  const currentPage = ref(1);
  const itemsPerPage = 10;
  const backendPageSize = 20;
  const totalPages = computed(() => Math.ceil(totalCount.value / itemsPerPage));

  const paginatedNews = computed(() => {
    const start = (currentPage.value - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    return newsData.value.slice(start, end);
  });

  // 백엔드에서 필요한 데이터가 있는지 확인하고 필요시 API 호출
  const needToFetchData = (targetPage) => {
    const startIndex = (targetPage - 1) * itemsPerPage;
    const endIndex = targetPage * itemsPerPage;
    
    // 필요한 데이터의 백엔드 페이지들 계산
    const startBackendPage = Math.floor(startIndex / backendPageSize) + 1;
    const endBackendPage = Math.ceil(endIndex / backendPageSize);
    
    // 아직 로드되지 않은 페이지가 있는지 확인
    for (let i = startBackendPage; i <= endBackendPage; i++) {
      if (!loadedPages.value.has(i)) {
        return i; // 로드가 필요한 백엔드 페이지 번호 반환
      }
    }
    return null; // 모든 필요한 데이터가 이미 로드됨
  };

  const goToPage = async (page) => {
    if (page >= 1 && page <= totalPages.value) {
      currentPage.value = page;

      const backendPageToLoad = needToFetchData(page);
      if (backendPageToLoad !== null) {
        console.log(`프론트엔드 페이지 ${page}를 위해 백엔드 페이지 ${backendPageToLoad} 로드`);
        await fetchNoticeList(backendPageToLoad);
      }
    }
  };

  const nextPage = async () => {
    if (currentPage.value < totalPages.value) {
      await goToPage(currentPage.value + 1);
    }
  };

  const prevPage = async () => {
    if (currentPage.value > 1) {
      await goToPage(currentPage.value - 1);
    }
  };

  // 컴포넌트 마운트 시 데이터 로드
  onMounted(() => {
    fetchNoticeList(1, true); // reset=true로 초기 로드
  });
</script>