greenwhale/app/pages/company/history.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section class="history--section">
      <div class="sub--container type2">
        <div class="title--wrap">
          <h2 class="title">
            그린웨일글로벌은 <br /><strong>새로운 친환경 미래</strong>를 만들어 가기 위해
            <br />출범하였습니다.
          </h2>
        </div>
        <div class="history--desc--wrap">
          <div class="history--desc left--type">
            <div class="img--wrap">
              <picture>
                <source media="(max-width: 768px)" srcset="/img/img--history1--mo.png">
                <img src="/img/img--history1.png" alt="">
              </picture>
            </div>
            <div class="desc--wrap">
              <p>
                <strong>플라스틱 환경문제</strong>는 우리가 살아가고 있는 현시대의 가장 큰
                문제점 중 하나로 대두하고 있습니다.
              </p>
              <p>
                한 미국 연구결과에 따르면, 플라스틱은 대중적으로 사용되기 시작한
                1950년부터 2015년까지 생산된 총량이 <strong>83억 톤</strong>에 이르고, 그
                중 약 절반은 최근 13년 내에 사용되었습니다.
              </p>
            </div>
          </div>
          <div class="history--desc right--type">
            <div class="desc--wrap">
              <p>
                인류의 <strong>플라스틱 의존도</strong>는 날마다 급증하고, 인류에게
                플라스틱 없이는 일상생활이 불가능한 시대에 봉착했습니다. 매년 증가하는
                플라스틱 사용량으로 2050년에는 <strong>석유자원의 20%</strong>가 플라스틱
                생산에 소비될 것으로 예측되고 있습니다.
              </p>
              <p>
                위와 같은 현상은 온실가스양을 증가시켜
                <strong>지구 온난화를 가속합니다.</strong>
              </p>
            </div>
            <div class="img--wrap">
              <picture>
                <source media="(max-width: 768px)" srcset="/img/img--history2--mo.png">
                <img src="/img/img--history2.png" alt="">
              </picture>
            </div>
          </div>
          <div class="history--desc left--type2">
            <div class="img--wrap">
              <picture>
                <source media="(max-width: 768px)" srcset="/img/img--history3--mo.png">
                <img src="/img/img--history3.png" alt="">
              </picture>
            </div>
            <div class="desc--wrap">
              <p>
                플라스틱은 생산과정에서뿐만 아니라 <strong>폐기과정</strong>에서도 지구
                환경에 악영향을 끼칩니다.
              </p>
              <p>
                현재, 전 세계적으로 매년 4억 톤 이상의 플라스틱 쓰레기가 배출되고, 이
                배출된 쓰레기들은 <strong>소각</strong>되거나 땅속에
                <strong>매립</strong>되고, 나머지는 <strong>바다</strong>에 버려지고
                있습니다.
              </p>
              <p>
                바다에 버려진 플라스틱 쓰레기들은 파도와 자외선에 의해 잘게 부서져 미세
                플라스틱이 되어 자연 생태계를 돌고 돌아
                <strong>결국 우리 인류에게 돌아오는 악순환</strong>이 반복되고 있습니다.
              </p>
            </div>
          </div>
          <div class="history--desc top--type">
            <div class="img--wrap">
              <picture>
                <source media="(max-width: 768px)" srcset="/img/img--history4--mo.png">
                <img src="/img/img--history4.png" alt="">
              </picture>
            </div>
            <div class="desc--box--wrap">
              <div class="desc--wrap">
                <p>
                  그린웨일글로벌은 기존 플라스틱 대체재인
                  <strong>바이오 생분해성 플라스틱 및 탄소저감형 플라스틱 산업</strong>
                  확대를 위한 사명감으로 환경오염의 악순환을 막으며, 새로운
                  <strong>친환경 미래</strong>를 만들어 가기 위해 출범하였습니다.
                </p>
                <p>
                  특수 원료 인증과 국내외 특허 취득 및 상표 등록, 환경부와 중소기업부
                  우수기업으로 선정되는 등의 일련의 발자취를 거쳐왔으며, 앞으로도 인류의
                  미래 환경에 적극 대처하는 초심을 잃지 않겠습니다.
                </p>
              </div>
              <div class="desc--wrap">
                <div>
                  그린웨일글로벌은 <br />
                  탄소저감형 바이오 플라스틱 제품으로 <br />
                  <strong>
                    인류가 깨끗한 환경과 더불어 살아갈 수 있는 <br />
                    미래를 개척합니다.
                  </strong>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="history--graph--wrap">
          <div class="txt--wrap">Achievement</div>
          <div class="graph--wrap">
            <div class="graph--box">
              <div class="deco--box">
                <span class="dot"></span>
                <span class="line"></span>
              </div>
              <div class="history--box">
                <h4 class="year">2019</h4>
                <ul>
                  <li>
                    <div>
                      <span>2019.03</span>
                      <p>그린웨일글로벌 주식회사 설립</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2019.08</span>
                      <p>생분해성플라스틱수지 원료 환경표지(EL724) 인증</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2019.09</span>
                      <p>
                        그린웨일글로벌 베트남 자회사 설립
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="graph--box">
              <div class="deco--box">
                <span class="dot"></span>
                <span class="line"></span>
              </div>
              <div class="history--box">
                <h4 class="year">2020</h4>
                <ul>
                  <li>
                    <div>
                      <span>2020.04</span>
                      <p>미국 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2020.05</span>
                      <p>한국 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2020.10</span>
                      <p>벤처기업 인증</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="graph--box">
              <div class="deco--box">
                <span class="dot"></span>
                <span class="line"></span>
              </div>
              <div class="history--box">
                <h4 class="year">2021</h4>
                <ul>
                  <li>
                    <div>
                      <span>2021.02</span>
                      <p>레진 양산 시설 구축 완료 (베트남)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2021.03</span>
                      <p>녹색기술 인증 취득 (한국산업기술진흥원)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2021.09</span>
                      <p>우수벤처기업 선정</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2021.10</span>
                      <p>유럽 TUV OK Biobased 인증 (원료)</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="graph--box">
              <div class="deco--box">
                <span class="dot"></span>
                <span class="line"></span>
              </div>
              <div class="history--box">
                <h4 class="year">2022</h4>
                <ul>
                  <li>
                    <div>
                      <span>2022.04</span>
                      <p>PCT 해외특허출원 (유럽, 아시아, 아프리카. 총 13개 권역)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2022.06</span>
                      <p>유럽 TUV OK Compost Industrial 인증 (원료, 제품)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2022.08</span>
                      <p>ISO 14001:2015 인증</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2022.09</span>
                      <p>ISO 50001:2018 인증</p>
                    </div>
                    <div>
                      <span></span>
                      <p>유럽 상표 등록 (GreenWhaleGlobal)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2022.12</span>
                      <p>
                        남아프리카공화국 특허 등록 <br />(생분해성 플라스틱 수지 제조기술
                        및 제품)
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="graph--box">
              <div class="deco--box">
                <span class="dot"></span>
                <span class="line"></span>
              </div>
              <div class="history--box">
                <h4 class="year">2023</h4>
                <ul>
                  <li>
                    <div>
                      <span>2023.02</span>
                      <p>베트남 레진 양산 시설 증설 (연간 6,000톤)</p>
                    </div>
                    <div>
                      <span></span>
                      <p>ECOIST 브랜드 출원</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2023.03</span>
                      <p>OAPI 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2023.05</span>
                      <p>미국 상표 등록 (GreenWhaleGlobal)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2023.07</span>
                      <p>
                        대한민국 올해의 녹색상품 수상 <br />(에코이스트 행거, 폴리백,
                        3D프린터 필라멘트)
                      </p>
                    </div>
                    <div>
                      <span></span>
                      <p>일본 상표 등록 (GreenWhaleGlobal)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2023.08</span>
                      <p>친환경 제품 온라인 쇼핑몰 입점 판매 (아마존)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2023.09</span>
                      <p>울산 자유무역지구 공장 확보(450평 규모)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2023.11</span>
                      <p>산업통상자원부 장관표창 (2023 순환경제 장관상)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2023.12</span>
                      <p>산업통상자원부 장관표창 (2023 대한민국 기술대상 장관상)</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="graph--box">
              <div class="deco--box">
                <span class="dot"></span>
                <span class="line"></span>
              </div>
              <div class="history--box">
                <h4 class="year">2024</h4>
                <ul>
                  <li>
                    <div>
                      <span>2024.01</span>
                      <p>CES2024 Innovation Award 수상</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2024.04</span>
                      <p>중소벤처기업부 '초격차 스타트업 1000+' 선정</p>
                    </div>
                    <div>
                      <span></span>
                      <p>인도 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2024.06</span>
                      <p>베트남 상표 등록 (GreenWhaleGlobal)</p>
                    </div>
                    <div>
                      <span></span>
                      <p>Select USA Investment Summit 참가</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2024.08</span>
                      <p>재활용 플라스틱을 활용한 바이오플라스틱(PCR+) 레진 상용화</p>
                    </div>
                    <div>
                      <span></span>
                      <p>
                        인도네시아 특허 등록 <br />(생분해성 플라스틱 수지 제조기술 및
                        제품)
                      </p>
                    </div>
                    <div>
                      <span></span>
                      <p>
                        총380만달러 규모 바이오플라스틱 원료 공급 계약 체결
                        <br />(해외바이어 2개사)
                      </p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2024.10</span>
                      <p>
                        열가소성 전분을 포함하는 바이오매스 기반 수지 조성물 <br />(PCR+)
                        특허 등록
                      </p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2024.11</span>
                      <p>ECOIST 상표 등록 (한국)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2024.12</span>
                      <p>2024 벤처창업진흥 유공 포상 장관상</p>
                    </div>
                    <div>
                      <span></span>
                      <p>미국향 첫 수출 완료, 글로벌 시장 확장 본격화</p>
                    </div>
                    <div>
                      <span></span>
                      <p>
                        LG Display 스타트업육성프로그램 (2025 Dream Play)  최종 선정
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="graph--box">
              <div class="deco--box">
                <span class="dot"></span>
              </div>
              <div class="history--box">
                <h4 class="year">2025</h4>
                <ul>
                  <li>
                    <div>
                      <span>2025.01</span>
                      <p>
                        2025년 초격차 스타트업1000+ 프로젝트 선정
                      </p>
                    </div>
                    <div>
                      <span></span>
                      <p>CES2025 참가 (서울통합관 강남구)</p>
                    </div>
                    <div>
                      <span></span>
                      <p>기술능력 평가 기술등급 T-3 획득</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2025.03</span>
                      <p>TUV OK BIOBASED ECOIST PCR+ PC 인증 획득</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2025.04</span>
                      <p>
                        실로암인더스트리 MOU 체결 <br />(친환경 소재를 활용한 제품 개발 및
                        생산 판매)
                      </p>
                    </div>
                    <div>
                      <span></span>
                      <p>
                        ZER01NE ACCELERATOR 2025 프로그램 최종 선정
                      </p>
                    </div>
                    <div>
                      <span></span>
                      <p>베트남 GLOBAL SOURCING FAIR 참가</p>
                    </div>
                    <div>
                      <span></span>
                      <p>
                        2025 탄소중립 사업화 지원사업 최종 선정
                      </p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2025.06</span>
                      <p>대한민국 환경부 녹색성장펀드 1호 투자 기업 <br />(한화자산운용 투자)</p>
                    </div>
                    <div>
                      <span></span>
                      <p>화장품 용기 제품 개발 완료, 국내 뷰티 브랜드 납품 개시</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2025.07</span>
                      <p>
                        미국 현지 판매영업소 설립 (LA, 서부 지역)
                      </p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2025.09</span>
                      <p>
                        스케일업 팁스 사업 선정
                      </p>
                    </div>
                    <div>
                      <span></span>
                      <p>
                        폴란드 현지 판매영업소 설립 (바르샤바)
                      </p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2025.11</span>
                      <p>
                        HALAL 인증
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>
<script setup>
  import TopVisual from "~/components/topVisual.vue";
  import { gsap } from "gsap";
  import { ScrollTrigger } from "gsap/ScrollTrigger";
  import { onMounted } from "vue";

  gsap.registerPlugin(ScrollTrigger);

  const className = ref("company");
  const title = ref("Company");
  const navigation = ref([
    {
      name: "Company",
      link: "/company/history",
      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: "/company/history",
      gnbList: [
        { name: "회사소개", link: "/company/intro" },
        { name: "회사연혁", link: "/company/history" },
        { name: "협력업체", link: "/company/partners" },
        { name: "회사소개자료", link: "/company/catalog" },
      ],
    },
  ]);

  onMounted(() => {
    // 초기 상태 설정
    gsap.set(".deco--box .dot", { opacity: 0 });
    gsap.set(".deco--box .line", { height: 0 });
    gsap.set(".history--box", { opacity: 0, x: 50 });

    // 각 graph--box에 대해 개별 애니메이션 적용
    document.querySelectorAll(".graph--box").forEach((box, index) => {
      const dot = box.querySelector(".deco--box .dot");
      const line = box.querySelector(".deco--box .line");
      const historyBox = box.querySelector(".history--box");

      // .dot 애니메이션
      gsap.to(dot, {
        opacity: 1,
        duration: 0.5,
        scrollTrigger: {
          trigger: box,
          start: "top 80%",
          toggleActions: "play reverse play reverse",
        },
      });

      // .line 애니메이션
      gsap.to(line, {
        height: "100%",
        duration: 0.3,
        scrollTrigger: {
          trigger: box,
          start: "top 80%",
          toggleActions: "play reverse play reverse",
        },
      });

      // 글씨 애니메이션 (오른쪽에서 왼쪽으로)
      gsap.to(historyBox, {
        opacity: 1,
        x: 0,
        duration: 0.8,
        ease: "power2.out",
        scrollTrigger: {
          trigger: box,
          start: "top 80%",
          toggleActions: "play reverse play reverse",
        },
      });
    });
  });
</script>