influence/components/home/jobNoti/jobNotiModal.vue

<template>
  <v-dialog v-model="isNotiPop" persistent width="32.81rem">
    <div class="v-common-dialog-wrapper custom-dialog">
      <div class="modal-tit">
        <strong>공지</strong>
        <button class="btn-close" @click="fnClose()"></button>
      </div>
      <div class="v-common-dialog-content pa-0">
        <div class="notice-img">
          <div class="notice-info">
            <strong>{{ jobNotiObj.title }}</strong>
            <p>{{ $dayjs(jobNotiObj.stDatetime).format('YYYY-MM-DD HH:mm:ss') }} ~ {{ $dayjs(jobNotiObj.edDatetime).format('YYYY-MM-DD HH:mm:ss') }}</p>
          </div>
        </div>
        <div class="notice-txt">
          <pre>
            {{ jobNotiObj.content }}
          </pre>
        </div>
      </div>
      <div class="btn-wrap">
        <v-btn class="custom-btn btn-blue mini" @click="fnTest()"> <i class="ico"></i>다시보지않기</v-btn>
        <v-btn class="custom-btn btn-blue mini" @click="fnClose()"> <i class="ico"></i>확인</v-btn>
      </div>
    </div>
  </v-dialog>
</template>

<script setup>
import useApi from "@/composables/useApi";
import useAxios from "@/composables/useAxios";
import useErrorHandler from "@/composables/useErrorHandler";
import useUtil from '@/composables/useUtil';
import { useI18n } from "vue-i18n";

  /***********************
   *     plugins inject
   ************************/
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
  const i18n = useI18n();
  // 참조가능 데이터 설정
  onMounted(() => {
    fnInit()
  })
  
  /***********************
   *     data & created
   ************************/
  const pageId = "homeJobNoti"
  const jobNotiObj = ref({})
  const isNotiPop = ref(false)
  let doNotShowNoti = ref(true)


  /***********************
   *     Methods
   ************************/
  function fnInit(){
    // 긴급공지 조회
    fnJobNotiCheck()
  }

  /**
   * @API
   * 최종 로그인 전 긴급공지에 대한 정보를 가져온다.
   */
  function fnJobNotiCheck() {
    useAxios().get(useApi.getNotice).then((res) => {
      $log.debug("[login][fnJobNotiCheck][success]")
      let data = res.data.data
      let isNotiYn = data.useYN === 'Y' ? true : false
      jobNotiObj.value = data
      doNotShowNoti.value = useUtil.isNull(localStorage.getItem('jobNotiYN'))
      
      if(doNotShowNoti.value) {
        if(isNotiYn) {
          isNotiPop.value = true
        } else {
          isNotiPop.value = false
        }
      } else {
        isNotiPop.value = false
      }
    }).catch((error)=>{
      $log.debug("[login][fnJobNotiCheck][error]")
      useErrorHandler().fnSetCommErrorHandle(error)
    }).finally(()=>{
      $log.debug("[login][fnJobNotiCheck][finished]")
    })
  }

  function fnClose() {
    isNotiPop.value = false
  }

  function fnTest() {
    isNotiPop.value = false
    localStorage.setItem('jobNotiYN', false)
  }

</script>