greenwhale/app/pages/contact/noticeView.vue

<template>
  <main>
    <section class="">
      <div class="sub--container type4">
        <div class="view--wrap" v-if="!loading">
          <div class="view--title">
            <h3>{{ noticeData.title }}</h3>
            <div class="view--info">
              <p>{{ noticeData.name }}</p>
              <span class="bar"></span>
              <p>{{ noticeData.regdate }}</p>
              <span class="bar"></span>
              <p>조회수 : {{ noticeData.viewcnt }}</p>
            </div>
          </div>
          <div class="view--cont">
            <div v-html="noticeData.contents"></div>
          </div>
          <div class="btn--wrap">
            <NuxtLink to="/contact/notice">목록</NuxtLink>
          </div>
          <div class="link--wrap">
            <NuxtLink v-if="prevData && prevData.board_idx" :to="`/contact/noticeView?idx=${prevData.board_idx}`" class="link">
              <p>이전글</p>
              <h5>{{ prevData.title }}</h5>
              <span>{{ prevData.regdate || '-' }}</span>
            </NuxtLink>
            <div v-if="!prevData || !prevData.board_idx" class="link">
              <p>이전글</p>
              <h5>이전글이 없습니다.</h5>
              <span>-</span>
            </div>
            <NuxtLink v-if="nextData && nextData.board_idx" :to="`/contact/noticeView?idx=${nextData.board_idx}`" class="link">
              <p>다음글</p>
              <h5>{{ nextData.title }}</h5>
              <span>{{ nextData.regdate || '-' }}</span>
            </NuxtLink>
            <div v-if="!nextData || !nextData.board_idx" class="link">
              <p>다음글</p>
              <h5>다음글이 없습니다.</h5>
              <span>-</span>
            </div>
          </div>
        </div>
        <div v-else class="loading">
          <p>로딩 중...</p>
        </div>
      </div>
    </section>
  </main>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'

const route = useRoute()
const idx = route.query.idx

console.log("현재 라우트:", route)
console.log("받은 idx:", idx)

const loading = ref(true)
const noticeData = ref({
  title: '',
  name: '',
  regdate: '',
  viewcnt: 0,
  contents: ''
})
const nextData = ref(null)
const prevData = ref(null)

let scrollObserver = null

// 공지사항 상세 데이터 가져오기
const fetchNoticeDetail = async () => {
  try {
    loading.value = true
    
    const currentIdx = route.query.idx
    if (!currentIdx) {
      throw new Error('게시글 ID가 없습니다.')
    }
    
    // POST 방식으로 파라미터 전달 (수정됨 - 2025-01-17)
    console.log('POST 요청 전송 중:', {boardId: 'notice', boardIdx: currentIdx})
    const response = await $postForm('/board_view', {
      boardId: 'notice', 
      boardIdx: currentIdx
    })
    
    console.log("받은 상세 데이터:", response)
    
    if (response && response.success && response.view) {
      noticeData.value = {
        title: response.view.title || '',
        name: response.view.name || '그린웨일글로벌(주)',
        regdate: response.view.regdate || '',
        viewcnt: response.view.viewcnt || 0,
        contents: response.view.contents || ''
      }
      
      // 이전글/다음글 데이터
      nextData.value = response.next
      prevData.value = response.prev
      
      console.log("nextData:", nextData.value)
      console.log("prevData:", prevData.value)
    } else {
      throw new Error('게시글을 찾을 수 없습니다.')
    }
  } catch (error) {
    console.error('공지사항 상세 데이터 로드 실패:', error)
    alert('게시글을 불러올 수 없습니다.')
    navigateTo('/contact/notice')
  } finally {
    loading.value = false
  }
}

// URL 파라미터 변경 감지를 위한 watcher 추가
watch(() => route.query.idx, (newIdx) => {
  if (newIdx) {
    fetchNoticeDetail()
  }
})

onMounted(() => {
  // 데이터 로드
  fetchNoticeDetail()
  
  // 헤더 스타일 처리
  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>