greenwhale/app/pages/media/press.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section class="press--section">
      <div class="sub--container type2">
        <div class="title--wrap">
          <h2 class="title">
            그린웨일글로벌의 <br />
            <strong>새로운 소식들을 전해드립니다.</strong>
          </h2>
        </div>
        <div class="sns--wrap">
          <h3>SNS</h3>
          <div class="sns--list">
            <swiper
              :slides-per-view="4"
              :space-between="20"
              :loop="true"
              :autoplay="{
                delay: 3000,
                disableOnInteraction: false,
              }"
              :navigation="false"
              :modules="[Autoplay]"
            >
              <swiper-slide v-for="sns in snsData" :key="sns.id">
                <a class="sns" :href="sns.link" target="_blank" rel="noopener noreferrer">
                  <div
                    class="img--wrap"
                    :style="`background-image: url('${sns.image}')`"
                  ></div>
                  <div class="txt--wrap">
                    <h4>{{ sns.title }}</h4>
                    <span>바로가기<i class="ico"></i></span>
                  </div>
                </a>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="news--wrap">
          <h3>기사</h3>
          <div class="news--list">
            <a
              v-for="news in paginatedNews"
              :key="news.id"
              :href="news.link"
              target="_blank"
              rel="noopener noreferrer"
              class="news"
            >
              <div class="news--title--wrap">
                <h4>{{ news.title }}</h4>
                <span>{{ news.date }}</span>
              </div>
              <div class="news--thumb--wrap">
                <img :src="news.image" alt="" />
              </div>
            </a>
          </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 { Swiper, SwiperSlide } from "swiper/vue";
  import { Autoplay } from "swiper/modules";
  import "swiper/css";
  import TopVisual from "~/components/topVisual.vue";

  const className = ref("media");
  const title = ref("Media");
  const navigation = ref([
    {
      name: "Media",
      link: "/media/press",
      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: "/media/press",
      gnbList: [
        { name: "환경뉴스", link: "/media/news" },
        { name: "보도자료", link: "/media/press" },
      ],
    },
  ]);

  const loading = ref(true);
  const newsData = ref([]);
  const snsData = ref([]);
  const totalCount = ref(0);

  // API에서 보도자료 데이터 가져오기
  const fetchPressList = async (page = 1) => {
    try {
      loading.value = true;

      // 공지사항과 동일한 방식으로 호출
      const response = await $postForm(`/board_list/media`, {
        boardId: "media",
        page: page,
        searchKind: "",
        searchKeyword: "",
      });

      // 백엔드가 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("보도자료(media) API 응답:", {
          //   totalCount: totalCount.value,
          //   listCount: response.list.length,
          //   currentPage: currentPageNum,
          //   pageSize,
          // });

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

            return {
              id: displayNumber, // 순차적인 번호로 표시
              title: item.title,
              date: item.regdate,
              image: item.main_file1
                ? `/backend${item.main_file1}`
                : "/img/img--cycle--center.png", // 기본 이미지
              link: item.etc1 || "#", // etc1 필드에 외부 링크 저장
            };
          });
        } else {
          console.error("JSON 응답 형식이 올바르지 않습니다:", response);
          // 에러시 기본 더미 데이터 사용
          setDefaultPressData();
        }
      } else if (typeof response === "string") {
        // HTML 응답인 경우 (백엔드에서 AJAX 감지 실패시)
        console.warn("HTML 응답을 받았습니다. AJAX 감지가 실패했을 수 있습니다.");
        console.log("HTML 내용:", response.substring(0, 200) + "...");
        // 기본 더미 데이터 사용
        setDefaultPressData();
      } else {
        console.error("예상하지 못한 응답 형식:", typeof response, response);
        // 기본 더미 데이터 사용
        setDefaultPressData();
      }
    } catch (error) {
      console.error("보도자료 데이터 로드 실패:", error);
      // 에러시 기본 더미 데이터 사용
      setDefaultPressData();
    } finally {
      loading.value = false;
    }
  };

  // API에서 SNS 데이터 가져오기
  const fetchSnsList = async () => {
    try {
      const response = await $postForm(`/board_list/media_sns`, {
        boardId: "media_sns",
        page: 1,
        searchKind: "",
        searchKeyword: "",
      });

      if (response && typeof response === "object") {
        if (response.success && response.list) {
          //console.log("SNS API 응답:", response.list);

          snsData.value = response.list.map((item) => ({
            id: item.board_idx,
            title: item.title,
            image: item.main_file1
              ? `http://green.interscope.co.kr/backend${item.main_file1}`
              : "/img/img--sns1.png",
            link: item.etc1 || "#", // etc1 필드에 외부 링크 저장
          }));
        } else {
          console.error("SNS JSON 응답 형식이 올바르지 않습니다:", response);
          setDefaultSnsData();
        }
      } else {
        console.error("SNS 예상하지 못한 응답 형식:", typeof response, response);
        setDefaultSnsData();
      }
    } catch (error) {
      console.error("SNS 데이터 로드 실패:", error);
      setDefaultSnsData();
    }
  };

  // 기본 SNS 더미 데이터 설정
  const setDefaultSnsData = () => {
    snsData.value = [
      {
        id: 1,
        title: "그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌",
        image: "/img/img--sns1.png",
        link: "#",
      },
      {
        id: 2,
        title: "그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌",
        image: "/img/img--sns2.png",
        link: "#",
      },
      {
        id: 3,
        title: "그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌",
        image: "/img/img--sns3.png",
        link: "#",
      },
      {
        id: 4,
        title: "그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌",
        image: "/img/img--sns4.png",
        link: "#",
      },
    ];
  };

  // 기본 더미 데이터 설정
  const setDefaultPressData = () => {
    newsData.value = [
      {
        id: 1,
        title: "그린플라스틱연합, ESG친환경대전서 '자원순환 탄소중립 GPA 컨퍼런스' 개최",
        date: "2025.07.11",
        image: "/img/img--news.png",
        link: "/",
      },
      {
        id: 2,
        title: "친환경 플라스틱 기술 개발 동향",
        date: "2025.07.10",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 3,
        title: "탄소중립 실현을 위한 플라스틱 재활용 기술",
        date: "2025.07.09",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 4,
        title: "바이오플라스틱 시장 전망과 기술 동향",
        date: "2025.07.08",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 5,
        title: "플라스틱 감축을 위한 정부 정책 변화",
        date: "2025.07.07",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 6,
        title: "순환경제와 플라스틱 재활용 산업",
        date: "2025.07.06",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 7,
        title: "해양 플라스틱 오염 해결을 위한 혁신 기술",
        date: "2025.07.05",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 8,
        title: "친환경 포장재 개발 현황",
        date: "2025.07.04",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 9,
        title: "플라스틱 대체재 소재 연구 동향",
        date: "2025.07.03",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 10,
        title: "ESG 경영과 플라스틱 감축 전략",
        date: "2025.07.02",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 11,
        title: "글로벌 플라스틱 규제 동향",
        date: "2025.07.01",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 12,
        title: "생분해성 플라스틱 상용화 전망",
        date: "2025.06.30",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 13,
        title: "플라스틱 없는 일주일 캠페인",
        date: "2025.06.29",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 14,
        title: "재활용 플라스틱 품질 향상 기술",
        date: "2025.06.28",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 15,
        title: "플라스틱 순환경제 구축 방안",
        date: "2025.06.27",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 16,
        title: "친환경 소재 개발 투자 확대",
        date: "2025.06.26",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 17,
        title: "마이크로플라스틱 저감 기술",
        date: "2025.06.25",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 18,
        title: "플라스틱 재활용률 제고 방안",
        date: "2025.06.24",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 19,
        title: "바이오매스 기반 플라스틱 개발",
        date: "2025.06.23",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 20,
        title: "환경친화적 플라스틱 산업 전망",
        date: "2025.06.22",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 21,
        title: "플라스틱 폐기물 감축 정책",
        date: "2025.06.21",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 22,
        title: "지속가능한 포장재 솔루션",
        date: "2025.06.20",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 23,
        title: "플라스틱 리사이클링 혁신 기술",
        date: "2025.06.19",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 24,
        title: "친환경 플라스틱 인증 시스템",
        date: "2025.06.18",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
      {
        id: 25,
        title: "탄소 발자국 감축을 위한 플라스틱 대안",
        date: "2025.06.17",
        image: "/img/img--cycle--center.png",
        link: "/",
      },
    ];
  };

  // 페이지네이션 로직
  const currentPage = ref(1);
  const itemsPerPage = 10; // 프론트엔드에서 10개씩 표시
  const backendPageSize = 20; // 백엔드는 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 = 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;

      if (needToFetchData(page)) {
        // 백엔드 페이지 계산: 프론트 페이지를 백엔드 페이지로 변환
        const backendPage = Math.ceil((page * itemsPerPage) / backendPageSize);
        await fetchPressList(backendPage);
      }
    }
  };

  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(() => {
    fetchPressList(1);
    fetchSnsList();
  });
</script>