greenwhale/app/pages/index.vue

<template>
  <main>
    <MainVisual />
    <section class="main--content--wrap">
      <div class="main--container">
        <div class="title--wrap mb-[40px]">
          <h3 class="green--title">Brand Story</h3>
          <p class="sub--title">연간 4억톤 이상 폐기물이 버려져<br> 우리의 지구 환경에 많은 악영향을 주고 있습니다.</p>
          <h2>그린웨일글로벌은 자연물질을 <br class="mobile">플라스틱으로 생성하여 <br>환경오염을 방지하는 신개념 <br class="mobile">친환경 미래를 만들어 갈 것입니다.</h2>
        </div>
        <div class="content--wrap">
          <div class="img--card--wrap">
            <div class="card"><img src="/img/main--card1.png" alt="그린웨일글로벌"></div>
            <div class="card"><img src="/img/main--card2.png" alt="그린웨일글로벌"></div>
            <div class="card"><img src="/img/main--card3.png" alt="그린웨일글로벌"></div>
          </div>
          <div class="black--btn--wrap">
            <NuxtLink class="black--btn" to="/company/intro">더보기<i class="ico"></i></NuxtLink>
          </div>
        </div>
      </div>
    </section>
    <section class="main--content--wrap bg--type white--txt">
      <div class="main--container">
        <div class="title--wrap mb-[40px]">
          <h3 class="green--title">Technology</h3>
          <h2>그린웨일글로벌은 <br />자연에서 얻은 바이오매스를 <br class="mobile" />독자적 기술로 친환경 소재로 바꾸어, <br />생분해성·재활용·바이오 플라스틱을 통해 <br />지구를 지키는 미래를 만들어갑니다.</h2>
        </div>
        <div class="content--wrap">
          <div class="square--card--wrap">
            <dl class="card">
              <dt>Ecoist®-Terra</dt>
              <dd>자연으로 돌아가는 플라스틱</dd>
            </dl>
            <dl class="card">
              <dt>Ecoist®-Revo</dt>
              <dd>되살아나는 플라스틱</dd>
            </dl>
            <dl class="card">
              <dt>Ecoist®-Nova</dt>
              <dd>새로운 세대의 바이오 폴리머</dd>
            </dl>
            <dl class="card">
              <dt>Ecoist®-Boost</dt>
              <dd>강화 & 성능 향상</dd>
            </dl>
            <dl class="card">
              <dt>Halastic®</dt>
              <dd>세계 최초 할랄 인증 친환경 바이오플라스틱</dd>
            </dl>
          </div>
          <div class="black--btn--wrap">
            <NuxtLink class="black--btn blur--type" to="/technology/facilities">더보기<i class="ico"></i></NuxtLink>
          </div>
        </div>
      </div>
    </section>
    <section class="main--content--wrap black--type white--txt">
      <div class="main--container">
        <div class="title--wrap mb-[60px]">
          <h3 class="green--title">The Numbers</h3>
          <h2>전세계가 한마음으로 <br />친환경 미래를 위해 노력하고 있습니다.</h2>
        </div>
        <div class="content--wrap">
          <div class="number--card--wrap">
            <div class="card">
              <i class="ico"></i>
              <div class="card--title">
                <p class="circle">플라스틱 감축</p>
                <div class="number--wrap">
                  <span class="number">-80</span>
                  <span class="percent">%</span>
                </div>
                <p class="sub--txt">Plastic pollution reduced <br />by 2040 <br />(UNEP)</p>
              </div>
              <ul class="card--desc">
                <li>
                  <span class="nation">KR</span>
                  <p class="txt">
                    <strong>-50%</strong> <span>Plastic Usage by 2030</span>
                  </p>
                </li>
                <li>
                  <span class="nation">EU</span>
                  <p class="txt">
                    <strong>100%</strong> <span>recycled plastic packaging by 2030</span><br />
                    <strong>100%</strong> <span>recycled plastic packaging by 2030</span>
                  </p>
                </li>
                <li>
                  <span class="nation">US</span>
                  <p class="txt">
                    <strong>-25%</strong> <span>Single Use Plastic Packaging by 2032</span>
                  </p>
                </li>
              </ul>
            </div>
            <div class="card">
              <i class="ico"></i>
              <div class="card--title">
                <p class="circle">온실가스 감축</p>
                <div class="number--wrap">
                  <span class="number">-100</span>
                  <span class="percent">%</span>
                </div>
                <p class="sub--txt">GHG emissions by 2050 <br />compared to 2010 levels <br />(UN IPCC report)</p>
              </div>
              <ul class="card--desc">
                <li>
                  <span class="nation">KR</span>
                  <p class="txt">
                    <strong>-40%</strong> <span>by 2030 (vs. 2018)</span> <strong>-100%</strong> <span>by 2050</span>
                  </p>
                </li>
                <li>
                  <span class="nation">EU</span>
                  <p class="txt">
                    <strong>-55%</strong> <span>by 2030 (vs. 1990)</span> <strong>-100%</strong> <span>by 2050</span>
                  </p>
                </li>
                <li>
                  <span class="nation">US</span>
                  <p class="txt">
                    <strong>-48%</strong> <span>by 2030 (vs. 1990)</span> <strong>-100%</strong> <span>by 2045</span>
                  </p>
                </li>
              </ul>
            </div>
            <div class="card">
              <i class="ico"></i>
              <div class="card--title">
                <p class="circle">재활용 촉진</p>
                <div class="number--wrap">
                  <span class="number">42</span>
                  <span class="percent">%</span>
                </div>
                <p class="sub--txt">Recycled possibly <br />by 2040 <br />(OECD scenario)</p>
              </div>
              <ul class="card--desc">
                <li>
                  <span class="nation">KR</span>
                  <p class="txt">
                    <strong>70%</strong> <span>by 2030</span>
                  </p>
                </li>
                <li>
                  <span class="nation">EU</span>
                  <p class="txt">
                    <strong>77%</strong> <span>bottles collected by 2025,</span> <strong>90%</strong> <span>by 2029 Bottles with</span> <strong>25%</strong> <span>recycled plastic by 2025, </span><strong>30%</strong> <span>by 2030</span>
                  </p>
                </li>
                <li>
                  <span class="nation">US</span>
                  <p class="txt">
                    <strong>65%</strong> <span>single use plastic recycled by 2032</span><br />
                    <span>All packaging</span> <strong>100%</strong> <span>recycled or compostable</span>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
    <ItemSlide />
    <MarqueeContent />
    <section class="main--content--wrap">
      <div class="main--container">
        <div class="title--wrap mb-[40px]">
          <h3 class="green--title">News</h3>
          <h2>그린웨일글로벌과 관련한 <br />최신 소식을 확인하세요.</h2>
        </div>
        <div class="content--wrap">
          <div class="news--card--wrap">
            <a
              v-for="news in displayNews"
              :key="news.id"
              :href="news.link"
              target="_blank"
              rel="noopener noreferrer"
              class="news"
            >
              <h4 class="news--title">{{ news.title }}</h4>
              <!-- <p class="news--cont">뉴스 내용이 없어서 주석 처리</p> -->
              <span class="news--date">{{ news.date }}</span>
            </a>
          </div>
          <div class="black--btn--wrap">
            <NuxtLink class="black--btn" to="/media/news">더보기<i class="ico"></i></NuxtLink>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

const newsData = ref([]);

// API에서 뉴스 데이터 가져오기 (최신 3개만)
const fetchNewsList = async () => {
  try {
    const response = await $postForm(`/board_list/media`, {
      boardId: 'news',
      page: 1,
      searchKind: "",
      searchKeyword: "",
    });

    if (response && response.success && response.list) {
      const newData = response.list.slice(0, 3).map((item, index) => {
        return {
          id: index + 1,
          title: item.title,
          date: item.regdate,
          link: item.etc1 || "#", // etc1 필드에 외부 링크 저장
        };
      });
      
      newsData.value = newData;
    } else {
      console.error("뉴스 데이터 로드 실패");
    }
  } catch (error) {
    console.error("뉴스 데이터 로드 중 오류:", error);
  }
};

// 표시할 뉴스 데이터 (최대 3개)
const displayNews = computed(() => {
  return newsData.value.length > 0 ? newsData.value : [
    {
      id: 1,
      title: "뉴스 데이터를 불러오는 중입니다...",
      date: "2025.01.01",
      link: "#"
    }
  ];
});

// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
  fetchNewsList();
});
</script>