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>그린웨일글로벌 베트남 자회사 설립 <br />(B.I.G 인수 외투법인 전환)</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>
                  <li>
                    <div>
                      <span>2020.11</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>
                  </li>
                  <li>
                    <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>
                  </li>
                  <li>
                    <div>
                      <span></span><p>ECOIST 브랜드 출원</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2023.03</span><p>OAPI 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span></span><p>공동대표규정 폐지 (황지영 대표 사임)</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>
                  </li>
                  <li>
                    <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>
                  </li>
                  <li>
                    <div>
                      <span></span><p>인도 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2024.06</span><p>베트남 상표 등록 (GreenWhaleGlobal)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span></span><p>Select USA Investment Summit 참가</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2024.08</span><p>재활용 플라스틱을 활용한 바이오플라스틱(PCR+) 레진 상용화</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span></span><p>인도네시아 특허 등록 <br />(생분해성 플라스틱 수지 제조기술 및 제품)</p>
                    </div>
                  </li>
                  <li>
                    <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>
                  </li>
                  <li>
                    <div>
                      <span></span><p>미국향 첫 수출 완료, 글로벌 시장 확장 본격화</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span></span><p>LG Display 스타트업육성프로그램 (2025 Dream Play) <br />최종 선정 (상금 1천만원 수령)</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+ 프로젝트 <br />(정부지원사업 지원금 1억 8천만원)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span></span><p>CES2025 참가 (서울통합관 강남구)</p>
                    </div>
                  </li>
                  <li>
                    <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>
                  </li>
                  <li>
                    <div>
                      <span></span><p>ZER01NE ACCELERATOR 2025 프로그램 최종 선정 <br />(상금 1억원 수령)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span></span><p>베트남 GLOBAL SOURCING FAIR 참가</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span></span><p>2025 탄소중립 사업화 지원사업 최종 선정 <br />(정부지원사업 지원금 2억원)</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2025.05</span><p>그린웨일글로벌 소재 HALAL 인증 절차 착수, 무슬림 시장 <br />진출 교두보 확보</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span>2025.06</span><p>한화자산운용 투자 확약</p>
                    </div>
                  </li>
                  <li>
                    <div>
                      <span></span><p>화장품 용기 제품 개발 완료, 국내 뷰티 브랜드 납품 개시</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: "회사소개", link: "/company/intro" },
      { name: "회사연혁", link: "/company/history" },
      { name: "협력업체", link: "/company/partners" },
      { name: "회사소개자료", link: "/company/catalog"}
    ]
  },
  { name: "회사연혁", link: "/company/history" }
])

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>