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>

    <div class="pop_wrap">
      <div class="pop" id="pop1" v-show="popupStates.pop1">
        <a href="https://youtu.be/1yR2c0gD-0o" target="_blank"
          ><img src="/img/pop04.jpg" alt=""
        /></a>
        <div class="pop_footer">
          <p>
            <input type="checkbox" id="pop1Close" @change="closePopupOneDay('pop1')" />
            <label for="pop1Close">오늘하루열지않기</label>
          </p>
          <a href="#" class="pop_close" @click.prevent="closePopup('pop1')">닫기X</a>
        </div>
      </div>

      <div class="pop" id="pop2" v-show="popupStates.pop2">
        <div class="pop_footer">
          <p>
            <input type="checkbox" id="pop2Close" @change="closePopupOneDay('pop2')" />
            <label for="pop2Close">오늘하루열지않기</label>
          </p>
          <a href="#" class="pop_close" @click.prevent="closePopup('pop2')">닫기X</a>
        </div>
      </div>

      <div class="pop" id="pop3" v-show="popupStates.pop3">
        <div class="pop_footer">
          <p>
            <input type="checkbox" id="pop3Close" @change="closePopupOneDay('pop3')" />
            <label for="pop3Close">오늘하루열지않기</label>
          </p>
          <a href="#" class="pop_close" @click.prevent="closePopup('pop3')">닫기X</a>
        </div>
      </div>
    </div>
  </main>
</template>

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

  const newsData = ref([]);

  // 팝업 상태 관리
  const popupStates = ref({
    pop1: false,
    pop2: false,
    pop3: false,
  });

  // 쿠키 관련 함수들
  const setCookie = (name, value, days) => {
    const expires = new Date();
    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
  };

  const getCookie = (name) => {
    const nameEQ = name + "=";
    const ca = document.cookie.split(";");
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === " ") c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  };

  // 팝업 닫기 함수
  const closePopup = (popupId) => {
    popupStates.value[popupId] = false;
  };

  // 하루 동안 팝업 닫기 함수
  const closePopupOneDay = (popupId) => {
    setCookie(popupId, "1", 1);
    popupStates.value[popupId] = false;
  };

  // 팝업 초기화 함수
  const initPopups = () => {
    // 각 팝업의 쿠키 상태를 확인하여 표시 여부 결정
    Object.keys(popupStates.value).forEach((popupId) => {
      if (getCookie(popupId) === "1") {
        popupStates.value[popupId] = false; // 쿠키가 있으면 숨김
      }
      // 쿠키가 없으면 초기값 유지
    });
  };

  // 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();
    initPopups();
  });
</script>