Merge commit '7d21aa9459cbca25a14c46d2b7679fb95a9d51a6' into feature/20250910-all
This commit is contained in:
clkim
@@ -1,16 +1,21 @@
|
||||
<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]">
|
||||
<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 gap-1.5 md:gap-0">
|
||||
<li v-for="(footerMenuItem, index) in footerLinks" :key="index"
|
||||
class="footer-menu-item">
|
||||
<li
|
||||
v-for="(footerMenuItem, index) in footerLinks"
|
||||
:key="index"
|
||||
class="text-sm md:text-xs md:tracking-tight relative"
|
||||
>
|
||||
<NuxtLink
|
||||
:to="footerMenuItem.link"
|
||||
:target="footerMenuItem.target"
|
||||
:class="[
|
||||
footerMenuItem.active === 'y' && 'text-orange-600',
|
||||
'hover:text-gray-600 transition-colors'
|
||||
'hover:text-gray-600 transition-colors',
|
||||
]"
|
||||
>
|
||||
{{ footerMenuItem.title }}
|
||||
@@ -18,50 +23,115 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rating-area">
|
||||
<img :src="footerData.dev_ci_url" alt="게임등급" class="rating-image" />
|
||||
<dl class="rating-info">
|
||||
<dt class="rating-label">게임명</dt>
|
||||
<dd class="rating-value">{{ footerData.game_rating_info.title }}</dd>
|
||||
<dt class="rating-label">상호</dt>
|
||||
<dd class="rating-value">{{ footerData.game_rating_info.company_name }}</dd>
|
||||
<dt class="rating-label">이용등급</dt>
|
||||
<dd class="rating-value">{{ footerData.game_rating_info.reg_no }}</dd>
|
||||
<dt class="rating-label">등급분류번호</dt>
|
||||
<dd class="rating-value">{{ footerData.game_rating_info.rating_grade }}</dd>
|
||||
<dt class="rating-label">제작년월일</dt>
|
||||
<dd class="rating-value">{{ footerData.game_rating_info.prod_date }}</dd>
|
||||
<dt class="rating-label">신고(등록)번호</dt>
|
||||
<dd class="rating-value">{{ footerData.game_rating_info.rating_class_no }}</dd>
|
||||
|
||||
<div class="flex mt-2.5 md:flex-col md:mt-1.5">
|
||||
<img
|
||||
:src="footerData.dev_ci_url"
|
||||
alt="게임등급"
|
||||
class="w-41 h-14 md:w-34 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>
|
||||
<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'"
|
||||
:href="
|
||||
locale === 'ja'
|
||||
? 'https://www.smilegate.com/jp'
|
||||
: 'https://www.smilegate.com/en'
|
||||
"
|
||||
target="_blank"
|
||||
class="smilegate w-22 h-4.5 md:w-14 md:h-3"
|
||||
>
|
||||
<img
|
||||
:src="footerData.dev_ci_url"
|
||||
alt="스마일게이트 로고"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
<img
|
||||
:src="footerData.dev_ci_url"
|
||||
alt="스마일게이트 로고"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.nx3games.com" target="_blank" class="nx3 w-14 h-3.5 ml-2.5 md:w-9 md:h-2.5 md:ml-4">
|
||||
<a
|
||||
href="https://www.nx3games.com"
|
||||
target="_blank"
|
||||
class="nx3 w-14 h-3.5 ml-2.5 md:w-9 md:h-2.5 md:ml-4"
|
||||
>
|
||||
<img
|
||||
:src="footerData.dev_ci_url"
|
||||
alt="NX3 로고"
|
||||
@@ -69,14 +139,15 @@
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="language-area absolute bottom-7 right-10 text-white md:bottom-5.5 md:right-4">
|
||||
|
||||
<div
|
||||
class="language-area absolute bottom-7 right-10 text-white md:bottom-5.5 md:right-4"
|
||||
>
|
||||
<!-- <SelectLanguage /> -->
|
||||
<!-- <AtomsLanguageSwitcher /> -->
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -91,118 +162,69 @@ interface FooterMenuType {
|
||||
}
|
||||
|
||||
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[])
|
||||
{
|
||||
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://cdn.testgame.com/ci/ko_logo.png",
|
||||
"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"
|
||||
dev_ci_url: "https://cdn.testgame.com/ci/ko_logo.png",
|
||||
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",
|
||||
})
|
||||
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>
|
||||
.footer-menu-item {
|
||||
@apply text-sm md:text-xs md:tracking-tight relative;
|
||||
}
|
||||
|
||||
.footer-menu-item:not(:first-child)::before {
|
||||
content: '';
|
||||
@apply inline-block bg-gray-400 h-2 w-px mx-1.5 mt-1 align-top;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer-menu-item:nth-of-type(5)::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 411px) {
|
||||
.footer-menu-item {
|
||||
@apply th:text-xs;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 321px) {
|
||||
.footer-menu-item {
|
||||
@apply th:text-[14px];
|
||||
}
|
||||
}
|
||||
|
||||
/* Rating Area Styles */
|
||||
.rating-area {
|
||||
@apply flex mt-2.5 md:flex-col md:mt-1.5;
|
||||
}
|
||||
|
||||
.rating-image {
|
||||
@apply w-41 h-14 md:w-34 md:h-12 md:order-1;
|
||||
}
|
||||
|
||||
.rating-info {
|
||||
@apply 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;
|
||||
}
|
||||
|
||||
.rating-label {
|
||||
@apply p-1.5 px-4 border-r border-b border-gray-600 bg-[#1a1a1a] md:p-0.5 md:px-1.5;
|
||||
}
|
||||
|
||||
.rating-value {
|
||||
@apply p-1.5 px-4 border-r border-b border-gray-600 text-gray-500 md:p-0.5 md:px-1.5;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user