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="검색어를 입력해주세요." />
          <UButton class="search--btn"></UButton>
        </div>
        <div class="notice--wrap">
          <div class="notice--list">
            <NuxtLink
              v-for="news in paginatedNews"
              :key="news.id"
              to="/contact/noticeView"
              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 TopVisual from "~/components/topVisual.vue";
  const searchItems = ref(["제목"]);
  const searchValue = ref("선택");
  const searchKeyword = ref("");

  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" },
      ],
    },
  ]);

  // 뉴스 데이터 배열 생성
  const newsData = ref([
    {
      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;
  const totalPages = computed(() => Math.ceil(newsData.value.length / itemsPerPage));

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

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

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

  const prevPage = () => {
    if (currentPage.value > 1) {
      currentPage.value--;
    }
  };
</script>