258 lines
7.8 KiB
Vue
258 lines
7.8 KiB
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.link"
|
|
: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>© Smilegate. All rights reserved</span>
|
|
</div>
|
|
|
|
<div class="logo-area flex mt-3 md:mt-2.5">
|
|
<a
|
|
:href="
|
|
locale === 'ja'
|
|
? 'https://www.smilegate.com/jp'
|
|
: 'https://www.smilegate.com/en'
|
|
"
|
|
target="_blank"
|
|
class="smilegate"
|
|
>
|
|
<img
|
|
:src="footerData.dev_ci_url"
|
|
alt="스마일게이트 로고"
|
|
class="w-auto h-auto"
|
|
/>
|
|
</a>
|
|
<a
|
|
href="https://www.nx3games.com"
|
|
target="_blank"
|
|
class="nx3 ml-2.5 md:ml-4"
|
|
>
|
|
<img
|
|
:src="footerData.dev_ci_url2"
|
|
alt="NX3 로고"
|
|
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 { locale } = useI18n()
|
|
interface FooterMenuType {
|
|
id: string
|
|
title: string
|
|
link: string
|
|
target: string
|
|
active: string
|
|
highlight?: string
|
|
}
|
|
|
|
const footerLinks = ref<FooterMenuType[]>([
|
|
{
|
|
id: 'company',
|
|
title: '회사소개',
|
|
link: '#',
|
|
target: '_blank',
|
|
active: 'n',
|
|
},
|
|
{
|
|
id: 'terms',
|
|
title: '이용약관',
|
|
link: 'https://common.game.onstove.com/terms/index?gameType=SG&termsType=1&langCode=@m{Terms_Lang_Code}',
|
|
target: '_blank',
|
|
active: 'n',
|
|
},
|
|
{
|
|
id: 'privacy',
|
|
title: '개인정보처리방침',
|
|
link: 'https://clause.onstove.com/stove/terms?category=privacy',
|
|
target: '_blank',
|
|
active: 'y',
|
|
},
|
|
{
|
|
id: 'operation',
|
|
title: '운영정책',
|
|
link: 'https://common.game.onstove.com/terms/index?gameType=CZN&termsType=3&langCode=@m{Terms_Lang_Code}',
|
|
target: '_blank',
|
|
active: 'n',
|
|
},
|
|
{
|
|
id: 'fund',
|
|
title: '청소년보호정책',
|
|
link: 'https://common.game.onstove.com/terms/index?gameType=CZN&termsType=6&langCode=ja',
|
|
target: '_blank',
|
|
active: 'n',
|
|
},
|
|
{
|
|
id: 'customerService',
|
|
title: '게임 이용 등급',
|
|
link: 'https://cs.onstove.com/@m{Terms_Lang_Code}/service/STOVE_CHAOSZERO',
|
|
target: '_blank',
|
|
active: 'n',
|
|
},
|
|
] as FooterMenuType[])
|
|
|
|
const footerData = ref({
|
|
dev_ci_url:
|
|
'https://static-pubcomm.gate8.com/local/template/l9/common/logo_smilegate.png',
|
|
dev_ci_url2:
|
|
'https://static-pubcomm.gate8.com/local/template/l9/common/logo_nx3.png',
|
|
game_rating_image_url:
|
|
'https://static-pubcomm.gate8.com/local/template/l9/common/grades_age/Type15.svg',
|
|
use_dev_ci_url: true,
|
|
fund_display_yn: true,
|
|
use_game_rating: true,
|
|
fund_display_url: 'https://testgame.com/law/fund-ko',
|
|
game_rating_info: {
|
|
title: '테스트 게임',
|
|
reg_no: 'R-2024-7890',
|
|
prod_date: '2024-05-01',
|
|
rating_type: '15',
|
|
company_name: '테스트엔터테인먼트',
|
|
content_info: '1,2,3,',
|
|
rating_grade: '15세 이용가',
|
|
rating_class_no: '2024-123456',
|
|
},
|
|
footer_info:
|
|
"(주)스마일게이트홀딩스 메가포트지점 대표: 성준호<br>주소: 경기도 성남시 분당구 분당로 55, 7층 (서현동 분당 퍼스트타워)<br>통신판매업 신고번호: 제2023-성남분당A-0145호<br>사업자등록번호: 813-85-02492<br>E-mail: <a href='mailto:help@smilegate.com'>help@smilegate.com</a><br>TEL: 1670-0399",
|
|
})
|
|
</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>
|