greenwhale/app/pages/media/news.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section class="news--section">
      <div class="sub--container type2">
        <div class="title--wrap">
          <h2 class="title">친환경 플라스틱과 관련한 <br />
            <strong>새로운 소식들을 전해드립니다.</strong></h2>
        </div>
        <div class="news--wrap">
          <div class="news--list">
            <NuxtLink
              v-for="news in paginatedNews"
              :key="news.id"
              :to="news.link"
              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>
            </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 className = ref("media")
const title = ref("Media")
const navigation = ref([
  { name: "Media",
    link: "/media/news" ,
    gnbList : [
      { name: "환경뉴스", link: "/media/news" },
      { name: "보도자료", link: "/media/press" },
    ]
  },
  { name: "환경뉴스", link: "/media/news" }
])

// 뉴스 데이터 배열 생성
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>