gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: env 인터널API 추가, 푸터 수정

Browse Source
This commit is contained in:
“hyeonggkim”
2025-10-24 21:23:18 +09:00
parent 02ed4ede30
commit 283b440409
7 changed files with 152 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.dev
View File

@@ -7,6 +7,7 @@ STATIC_URL='https://static-pubcomm.gate8.com'
# STOVE #############################################################################
# STOVE - API Url
STOVE_API_URL=https://api-dev.onstove.com
STOVE_API_URL_SERVERL=https://i-api-dev.onstove.com
STOVE_M_API_URL=https://maintenance.gate8.com
# STOVE - GNB

1
.env.live
View File

@@ -7,6 +7,7 @@ STATIC_URL='https://static-pubcomm.onstove.com'
# STOVE #############################################################################
# STOVE - API Url
STOVE_API_URL=https://api.onstove.com
STOVE_API_URL_SERVERL=https://i-api.onstove.com
STOVE_M_API_URL=https://maintenance.onstove.com
# STOVE - GNB

1
.env.qa
View File

@@ -7,6 +7,7 @@ STATIC_URL='https://static-pubcomm.gate8.com'
# STOVE #############################################################################
# STOVE - API Url
STOVE_API_URL=https://api.gate8.com
STOVE_API_URL_SERVERL=https://i-api.gate8.com
STOVE_M_API_URL=https://maintenance.gate8.com
# STOVE - GNB

1
.env.sandbox
View File

@@ -7,6 +7,7 @@ STATIC_URL='https://static-pubcomm.gate8.com'
# STOVE #############################################################################
# STOVE - API Url
STOVE_API_URL=https://api.gate8.com
STOVE_API_URL_SERVERL=https://i-api.gate8.com
STOVE_M_API_URL=https://maintenance.gate8.com
# STOVE - GNB

316
layers/components/layouts/Footer.vue
View File

@@ -1,149 +1,133 @@
<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]"
class="inner relative max-w-7xl mx-auto px-10 py-9 text-[12px] text-gray-400 md:px-4 md:py-9 md:text-[12px]"
>
<div class="menu-area">
<ul class="flex items-center flex-wrap md:gap-1.5">
<ul class="flex items-center flex-wrap md:gap-6">
<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"
:to="footerMenuItem.url"
:target="footerMenuItem.target"
:class="[
footerMenuItem.active === 'y' && 'text-[#e04600]',
index === 2 && 'text-[#e04600]',
index === 2 && 'text-[#fff]',
'hover:text-gray-600 transition-colors',
]"
>
{{ footerMenuItem.title }}
</NuxtLink>
</li>
<li class="relative">
<button class="hover:text-gray-600 transition-colors" @click="toggleAgeRating">
{{ tm('Footer_AgeRating') }}
</button>
<div v-if="showAgeRating" class="game-rating-card absolute bottom-6 left-1/2 -translate-x-1/2 bg-[#383838] rounded-lg w-[340px] mx-auto z-10">
<!-- 헤더 -->
<div class="px-6 py-4 rounded-t-lg flex justify-between items-center">
<h3 class="text-white text-base">{{ tm('Footer_AgeRating') }}</h3>
<button class="text-white hover:text-gray-300 transition-colors" @click="toggleAgeRating">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- 등급 아이콘 그리드 -->
<div class="px-6 pt-2 pb-6">
<!-- 아이콘은 52x60 사이즈 갭은 4px 4개씩 그리드 레이아웃 -->
<div class="grid grid-cols-4 gap-[4px] mb-4 max-w-[220px] justify-start items-start">
<!-- 19세 등급 -->
<div v-for="image in getGameRatingImage" :key="image" class="text-center">
<img :src="image" alt="게임이용등급안내" class="w-full h-full object-contain" />
</div>
<div v-for="image in getContentInfoImage" :key="image" class="text-center">
<img :src="image" alt="게임이용등급안내" class="w-full h-full object-contain" />
</div>
</div>
</div>
<!-- 정보 테이블 -->
<div class="px-6 py-6 rounded-b-lg bg-[#A31639]">
<div class="space-y-2">
<div class="flex flex-start border-b border-white/10 pb-2">
<span class="text-white text-sm flex-1">{{ tm('Footer_AgeRating_Info')[0] }}</span>
<span class="text-white text-sm flex-1">{{ footerData.game_rating_info.company_name }}</span>
</div>
<div class="flex flex-start border-b border-white/10 pb-2">
<span class="text-white text-sm flex-1">{{ tm('Footer_AgeRating_Info')[1] }}</span>
<span class="text-white text-sm flex-1">{{ footerData.game_rating_info.rating_grade }}</span>
</div>
<div class="flex flex-start border-b border-white/10 pb-2">
<span class="text-white text-sm flex-1">{{ tm('Footer_AgeRating_Info')[2] }}</span>
<span class="text-white text-sm flex-1">{{ footerData.game_rating_info.reg_no }}</span>
</div>
<div class="flex flex-start border-b border-white/10 pb-2">
<span class="text-white text-sm flex-1">{{ tm('Footer_AgeRating_Info')[3] }}</span>
<span class="text-white text-sm flex-1">{{ footerData.game_rating_info.prod_date }}</span>
</div>
<div class="flex flex-start">
<span class="text-white text-sm flex-1">{{ tm('Footer_AgeRating_Info')[4] }}</span>
<span class="text-white text-sm flex-1">{{ footerData.game_rating_info.rating_class_no }}</span>
</div>
</div>
</div>
</div>
</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">
<div class="row my-1.5 leading-5">
<span
v-dompurify-html="footerData.footer_info"
v-dompurify-html="tm('Footer_Address')"
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">
<div class="mt-6 md:mt-6">
<div class="text-xs text-white/30">{{ tm('Footer_caution') }}</div>
</div>
<div class="copyright-area mt-6 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">
<div class="logo-area flex mt-6 md:mt-6">
<a
:href="
locale === 'ja'
? 'https://www.smilegate.com/jp'
: 'https://www.smilegate.com/en'
"
href="https://www.smilegate.com"
target="_blank"
class="smilegate"
>
<img
:src="footerData.dev_ci_url"
src="https://static-pubcomm.gate8.com/local/template/l9/common/logo_smilegate.png"
alt="스마일게이트 로고"
class="w-auto h-auto"
/>
</a>
<a
href="https://www.nx3games.com"
v-if="setDevCi.dev_ci_yn"
:href="footerData.use_dev_ci_url"
target="_blank"
class="nx3 ml-2.5 md:ml-4"
>
<img
:src="footerData.dev_ci_url2"
alt="NX3 로고"
src="https://static-pubcomm.gate8.com/local/template/l9/common/logo_nx3.png"
alt="CI"
class="w-auto h-auto"
/>
<!-- <img
:src="setDevCi.dev_ci_img_path"
alt="CI"
class="w-auto h-auto"
/> -->
</a>
</div>
@@ -160,88 +144,78 @@
</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 { tm } = useI18n()
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",
const gameDataStore = useGameDataStore()
const { gameData } = storeToRefs(gameDataStore)
const config = useRuntimeConfig()
const staticUrl = config.public.staticUrl
// 공통다국어 data
const footerLinks = computed(() => {
return tm('Footer_Menu') as unknown as any[]
})
const footerData = ref(gameData.value?.footer_json as any)
const setDevCi = ref({
dev_ci_yn: gameData.value?.footer_dev_ci_img_yn as boolean,
dev_ci_img_path: gameData.value?.footer_dev_ci_img_path as string,
})
///local/template/common/grades_age
const getGameRatingImage = computed(() => {
const contentInfo = footerData.value.game_rating_info.rating_type.split(',')
// rating_type 12, 15, 18, 19 에 따라 이미지명을 가져오고 이미지를 반환
return contentInfo.map(item => {
if (item === '12') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type12.svg`
} else if (item === '15') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type15.svg`
} else if (item === '19') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/Type19.svg`
} else if (item === 'all') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeAll.svg`
} else if (item === 'e') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeExempt.svg`
} else {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_age/TypeTest.svg`
}
})
})
const getContentInfoImage = computed(() => {
const contentInfo = footerData.value.game_rating_info.content_info.split(',')
contentInfo.pop()
return contentInfo.map(item => {
if (item === '1') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-sexual.svg`
} else if (item === '2') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-fear.svg`
} else if (item === '3') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-inapposite.svg`
} else if (item === '4') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-drug.svg`
} else if (item === '5') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-crime.svg`
} else if (item === '6') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-speculation.svg`
} else if (item === '7') {
return `${staticUrl}/local/template/${gameData.value.s3_folder_name}/common/grades_use/Type-violence.svg`
}
})
})
const showAgeRating = ref(false)
const toggleAgeRating = () => {
showAgeRating.value = !showAgeRating.value
}
</script>
<style scoped>
/* 태국어 폰트 크기 조정 */
@media (max-width: 411px) {
:global(.lang-th) .menu-area li {

4
layers/server/middleware/gameData.ts
View File

@@ -34,8 +34,8 @@ export default defineEventHandler(async event => {
// gameData를 직접 가져와서 context에 저장 (API 호출 없이)
try {
const config = useRuntimeConfig()
const stoveApiBaseUrl = config.public.stoveApiUrl
const apiUrl = `${stoveApiBaseUrl}/pub-comm/v1.0/template/game`
const stoveApiUrlServer = config.public.stoveApiUrlServer
const apiUrl = `${stoveApiUrlServer}/pub-comm/v1.0/template/game`
const langCode = ssrGetFinalLocale(
event?.node.req.url,

1
nuxt.config.ts
View File

@@ -81,6 +81,7 @@ export default defineNuxtConfig({
staticUrl: process.env.STATIC_URL,
stoveApiUrl: process.env.STOVE_API_URL,
stoveApiUrlServer: process.env.STOVE_API_URL_SERVERL,
stoveMaintenanceApiUrl: process.env.STOVE_M_API_URL,
stoveGnb: process.env.STOVE_GNB,