audi/app/pages/company/news.vue

<template>
    <main>
      <section class="visual--section">
        <div class="img--wrap">
          <picture>
            <img src="/img/company/img--about1.jpg" alt="" />
          </picture>
        </div>
        <div class="title--wrap color--white">
          <h2>Company</h2>
        </div>
      </section>
      <div class="detail--container">
        <section>
          <div class="desc--section full--type">
            <h3 class="big--title">NEWS</h3>
          </div>
        </section>
        <div class="content--wrap">
          <div class="news--wrap">
            <table class="news--table">
              <colgroup>
                <col style="width:5%">
                <col style="width:60%">
                <col style="width:10%">
                <col style="width:5%">
              </colgroup>
              <thead>
                <tr>
                  <th v-for="column in columns" :key="column.key">
                    {{ column.label }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="news in paginatedNews" :key="news.id" @click="goToNews(news)">
                  <td>{{ news.id }}</td>
                  <td class="ellipsis1">{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}</td>
                  <td>{{ news.date }}</td>
                  <td>{{ news.views }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- 페이지네이션 -->
          <div class="pagination--wrap">
            <button
              class="pagination--btn prev"
              @click="goToPage(currentPage - 1)"
              :disabled="currentPage === 1"
            >
              <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
                <use href="/img/ico--back--s.svg#main"></use>
              </svg>
            </button>

            <div class="pagination--numbers">
              <button
                v-for="page in displayPages"
                :key="page"
                class="pagination--number"
                :class="{ active: page === currentPage }"
                @click="goToPage(page)"
              >
                {{ page }}
              </button>
            </div>

            <button
              class="pagination--btn next"
              @click="goToPage(currentPage + 1)"
              :disabled="currentPage === totalPages"
            >
              <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
                <use href="/img/ico--forward--s.svg#main"></use>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </main>
</template>

<script setup>
  // 테이블 컬럼 정의
  const columns = [
    { key: 'id', label: '번호' },
    { key: 'title', label: '제목' },
    { key: 'date', label: '등록일' },
    { key: 'views', label: '조회수' }
  ];

  // 뉴스 데이터
  const newsData = ref([
    {
      id: 1,
      title: '아우디 신형 e-tron GT 출시 소식',
      date: '2025-01-15',
      views: 1234,
      link: '/company/view'
    },
    {
      id: 2,
      title: '아우디 콰트로 45주년 기념 이벤트',
      date: '2025-01-14',
      views: 987,
      link: '/company/view'
    },
    {
      id: 3,
      title: '아우디 전기차 라인업 확대',
      date: '2025-01-13',
      views: 2156,
      link: '/company/view'
    },
    {
      id: 4,
      title: 'Audi Sport 신규 모델 발표',
      date: '2025-01-12',
      views: 1543,
      link: '/company/view'
    },
    {
      id: 5,
      title: '아우디 지속가능성 이니셔티브',
      date: '2025-01-11',
      views: 876,
      link: '/company/view'
    },
    {
      id: 6,
      title: '아우디 커넥트 서비스 업데이트',
      date: '2025-01-10',
      views: 1098,
      link: '/company/view'
    },
    {
      id: 7,
      title: '아우디 디자인 어워드 수상',
      date: '2025-01-09',
      views: 765,
      link: '/company/view'
    },
    {
      id: 8,
      title: '아우디 자율주행 기술 발전',
      date: '2025-01-08',
      views: 1876,
      link: '/company/view'
    },
    {
      id: 9,
      title: '아우디 RS 시리즈 신규 출시',
      date: '2025-01-07',
      views: 2341,
      link: '/company/view'
    },
    {
      id: 10,
      title: '아우디 프리미엄 서비스 소개',
      date: '2025-01-06',
      views: 654,
      link: '/company/view0'
    },
    {
      id: 11,
      title: '아우디 e-tron 배터리 기술 혁신',
      date: '2025-01-05',
      views: 1432,
      link: '/company/view1'
    },
  ]);

  const currentPage = ref(1);
  const itemsPerPage = 10;

  // 전체 페이지 수 계산
  const totalPages = computed(() => {
    return 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);
  });

  // 표시할 페이지 번호 (최대 5개)
  const displayPages = computed(() => {
    const pages = [];
    const maxDisplay = 5;
    let startPage = Math.max(1, currentPage.value - 2);
    let endPage = Math.min(totalPages.value, startPage + maxDisplay - 1);

    if (endPage - startPage < maxDisplay - 1) {
      startPage = Math.max(1, endPage - maxDisplay + 1);
    }

    for (let i = startPage; i <= endPage; i++) {
      pages.push(i);
    }
    return pages;
  });

  // 페이지 이동
  const goToPage = (page) => {
    if (page >= 1 && page <= totalPages.value) {
      currentPage.value = page;
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  // 뉴스 클릭 시 이동
  const goToNews = (row) => {
    navigateTo(row.link);
  };
</script>