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 mobile"></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>