influence/components/login/privacyPop.vue

<template>
  <!-- 이용약관 -->
  <v-dialog v-model="props.privacyPop" persistent width="62.5rem">
    <div class="v-common-dialog-wrapper custom-dialog alert">
      <div class="modal-tit">
        <strong>{{ langType === 'kr' ? props.privacyDetail.kr.title : props.privacyDetail.en.title }}</strong>
        <button class="btn-close" @click="$emit('closePop');"></button>
      </div>
      <div class="flag--wrap">
        <div class="lang-set">
          <v-select v-model="langType" :items="langTypeList" @update:modelValue="fnLangChange" variant="outlined" style="width: 9.375rem; height: 2.25rem" class="custom-select"></v-select>
        </div>
      </div>
      <div class="v-common-dialog-content type--l">
        <div class="agree--contents border--top">
          <pre v-html="langType == 'kr' ? props.privacyDetail.kr.contents : props.privacyDetail.en.contents"></pre>
        </div>
      </div>
      <div class="btn-wrap">
        <div class="inner--btn--wrap">
          <v-btn class="custom-btn btn-blue mini" @click="$emit('closePop')"><i class="ico"></i>확인</v-btn>
        </div>
      </div>
    </div>
    </v-dialog>
</template>

<script setup>
  /***********************
  *     import
  ************************/
  import useUtil from '@/composables/useUtil';
import { useI18n } from 'vue-i18n';
  
  /***********************
  *     plugins inject
  ************************/
  const {$toast, $log, $dayjs, $eventBus } = useNuxtApp()
  // props
  const props = defineProps({
    privacyPop: Boolean,
    privacyDetail: Object
  })
  // 다국어
  const langTypeList = ref({})
  const langType = ref('')
  const emit = defineEmits(["closePop"])
  const i18n = useI18n()

  watchEffect(() =>{
    // 감시하고자 하는 데이터를 해당 블럭내에서 사용하면 호출된다.
    // getLang.value를 감시하는 상태
    fnGetEnumCode(useLangStore().getLang)
  })
  /***********************
  *     data & created
  ************************/
  /**
   * @SCRIPT
   * 다국어 기능 | 한글 영문 변경 이벤트
   */
  function fnLangChange() {
    useLangStore().setLang(langType.value)
  }

  function fnGetEnumCode(lang){
    lang = useUtil.nvl(lang, 'kr')
    langType.value = lang
    let objEnum = useEnumCode.getEnumCode(lang)
    langTypeList.value = objEnum.langType
    i18n.locale.value = lang
  }
  /***********************
  *     Methods
  ************************/
  
</script>