web-temp/layers/components/layouts/Footer.vue

<template>
  <footer id="footer" ref="footerRef" class="bg-black">
    <div
      class="inner relative max-w-7xl mx-auto px-10 py-8 text-[12px] text-gray-400 md:px-4 md:py-7 md:text-[12px]"
    >
      <div class="menu-area">
        <ul class="flex items-center flex-wrap md:gap-1.5">
          <li
            v-for="(footerMenuItem, index) in footerLinks"
            :key="index"
            class="text-sm md:text-[11px] md:tracking-[-0.5px] relative flex items-center"
            :class="{
              'before:content-[\'\'] before:inline-block before:bg-gray-500 before:h-2 before:w-px before:mx-1.5 before:mt-1 before:align-top md:before:mt-1':
                index > 0,
              'md:before:hidden': index === 4,
            }"
          >
            <NuxtLink
              :to="footerMenuItem.url"
              :target="footerMenuItem.target"
              :class="[
                footerMenuItem.active === 'y' && 'text-[#e04600]',
                index === 2 && 'text-[#e04600]',
                'hover:text-gray-600 transition-colors',
              ]"
            >
              {{ footerMenuItem.title }}
            </NuxtLink>
          </li>
        </ul>
      </div>

      <div class="flex mt-2.5 md:flex-col md:mt-1.5">
        <!-- <img
          :src="footerData.game_rating_image_url"
          alt="게임등급"
          class="w-10 h-14 md:w-10 md:h-12 md:order-1"
        /> -->

        <dl
          class="grid grid-cols-[110px_auto_110px_auto] w-full max-w-[490px] ml-5 border-t border-l border-gray-600 tracking-tight md:grid-cols-[66px_auto_84px_auto] md:max-w-[358px] md:m-0 md:mb-2.5"
        >
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            게임명
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.title }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            상호
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.company_name }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            이용등급
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.reg_no }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            등급분류번호
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.rating_grade }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            제작년월일
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.prod_date }}
          </dd>
          <dt
            class="p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5"
          >
            신고(등록)번호
          </dt>
          <dd
            class="p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5"
          >
            {{ footerData.game_rating_info.rating_class_no }}
          </dd>
        </dl>
      </div>

      <div class="address-area mt-6">
        <address class="not-italic text-gray-500">
          <div class="row my-1.5">
            <span
              v-dompurify-html="footerData.footer_info"
              class="[&_a]:cursor-pointer [&_a]:text-blue-500 [&_a]:underline"
            ></span>
          </div>
        </address>
      </div>

      <div class="copyright-area mt-5 text-gray-500 md:mt-4">
        <span>&copy; Smilegate. All rights reserved</span>
      </div>

      <div class="logo-area flex mt-3 md:mt-2.5">
        <a
          href="https://www.smilegate.com"
          target="_blank"
          class="smilegate"
        >
          <img
            src="https://static-pubcomm.gate8.com/local/template/l9/common/logo_smilegate.png"
            alt="스마일게이트 로고"
            class="w-auto h-auto"
          />
        </a>
        <a
          v-if="setDevCi"
          :href="footerData.use_dev_ci_url"
          target="_blank"
          class="nx3 ml-2.5 md:ml-4"
        >
          <img
            :src="footerData.use_dev_ci_url"
            alt="CI"
            class="w-auto h-auto"
          />
        </a>
      </div>

      <div
        class="language-area absolute bottom-7 right-10 text-white md:bottom-5.5 md:right-4"
      >
        <BlocksLanguageSwitcher />

        <!-- <SelectLanguage /> -->
        <!-- <AtomsLanguageSwitcher /> -->
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">

const { tm } = useI18n()

const gameDataStore = useGameDataStore()
const { gameData } = storeToRefs(gameDataStore)


const footerLinks = computed(() => {
  return tm('Footer_Menu') as unknown as any[]
})
const footerData = ref(gameData.value?.footer_json as any)
const setDevCi = ref(gameData.value?.footer_dev_ci_img_yn as boolean)
</script>

<style scoped>
/* 태국어 폰트 크기 조정 */
@media (max-width: 411px) {
  :global(.lang-th) .menu-area li {
    font-size: 10px;
  }
}

@media (max-width: 321px) {
  :global(.lang-th) .menu-area li {
    font-size: 9px;
  }
}
</style>