greenwhale/app/pages/contact/noticeView.vue

<template>
  <main>
    <section class="">
      <div class="sub--container type4">
        <div class="view--wrap">
          <div class="view--title">
            <h3>2025년 정기주주총회</h3>
            <div class="view--info">
              <p>그린웨일글로벌(주)</p>
              <span class="bar"></span>
              <p>2025-03-17 09:03:14</p>
              <span class="bar"></span>
              <p>조회수 : 304</p>
            </div>
          </div>
          <div class="view--cont">
            <p>
              그린웨일 글로벌 주식회사 (‘www.greenwhaleglobal.com’이하 '그린웨일 글로벌')은(는) 「개인정보 보호법」 제30조에 따라 정부주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다. <br /><br />
              이 개인정보처리방침은 2022년 11월 01일부터 적용됩니다. <br /><br />
              제1조(개인정보의 처리 목적) <br /><br />
              그린웨일 글로벌은 다음의 목적을 위하여 개인정보를 처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의 용도로는 이용되지 않으며 이용 목적이 변경되는 경우에는 「개인정보 보호법」 제18조에 따라 별도의 동의를 받는 등 필요한 조치를 이행할 예정입니다. <br /><br />
              재화 또는 서비스 제공: 맞춤 서비스 제공을 목적으로 개인정보를 처리합니다.
            </p>
          </div>
          <div class="btn--wrap">
            <NuxtLink to="/contact/notice">목록</NuxtLink>
          </div>
          <div class="link--wrap">
            <NuxtLink to="/" class="link">
              <p>Preview</p>
              <h5>2025년 정기주주총회</h5>
              <span>2025.07.11</span>
            </NuxtLink>
            <NuxtLink to="/" class="link">
              <p>Next</p>
              <h5>2025년 정기주주총회</h5>
              <span>2025.07.11</span>
            </NuxtLink>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>
<script setup>
let scrollObserver = null

onMounted(() => {
  const header = document.querySelector('.header--wrap')
  if (header) {
    header.classList.add('white')

    // MutationObserver로 클래스 변경 감지 및 방지
    scrollObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          if (!header.classList.contains('white')) {
            header.classList.add('white')
          }
        }
      })
    })

    scrollObserver.observe(header, {
      attributes: true,
      attributeFilter: ['class']
    })
  }
})

onUnmounted(() => {
  const header = document.querySelector('.header--wrap')
  if (header) {
    header.classList.remove('white')
  }

  if (scrollObserver) {
    scrollObserver.disconnect()
  }
})
</script>