539 lines
18 KiB
Vue
539 lines
18 KiB
Vue
<template>
|
|
<header class="header">
|
|
<BlocksStoveGnb class="min-h-[48px]" />
|
|
</header>
|
|
<section class="inspection-section">
|
|
<clientOnly>
|
|
<!-- 로고 -->
|
|
<div class="inspection-logo">
|
|
<img
|
|
:src="logoImgUrl"
|
|
alt="logo"
|
|
class="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
<div class="inspection-content">
|
|
<!-- 점검 메시지 -->
|
|
|
|
<h1 class="inspection-title text-lg md:text-2xl">
|
|
{{ tm('Inspection_Now_Maintenance') }}
|
|
</h1>
|
|
|
|
<div class="inspection-cards">
|
|
<!-- 점검 시간 카드 -->
|
|
<div
|
|
v-if="webInspectionData"
|
|
class="inspection-card inspection-time-card"
|
|
>
|
|
<h2 class="card-title text-base text-md md:text-lg">
|
|
{{ tm('Inspection_Maintenance_Time') }}
|
|
</h2>
|
|
<div class="inspection-time text-sm md:text-base font-medium">
|
|
<div
|
|
v-dompurify-html="getLocaleTimezone('', '')"
|
|
class="time-row"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 온스토브 & 다운로드 카드 -->
|
|
<div class="inspection-bottom-cards">
|
|
<!-- 온스토브 카드 -->
|
|
<div class="inspection-card inspection-stove-card">
|
|
<h3
|
|
:class="{ 'text-center': !launchingStatus }"
|
|
class="card-title text-base md:text-lg"
|
|
>
|
|
<span
|
|
v-if="!launchingStatus"
|
|
v-dompurify-html="tm('Inspection_Game_During_Maintenance')"
|
|
></span>
|
|
<span
|
|
v-else
|
|
v-dompurify-html="tm('org_Inspection_During_Maintenance')"
|
|
class="block text-left"
|
|
></span>
|
|
</h3>
|
|
<div class="button-group justify-center">
|
|
<!-- <a
|
|
:href="communityUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inspection-btn inspection-btn-outline inspection-btn-community"
|
|
:class="{ 'bg-[var(--primary)]' : !launchingStatus }"
|
|
>
|
|
<span>{{ tm('Inspection_Community_Btn') || '공식 커뮤니티' }}</span>
|
|
<AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
|
|
</a> -->
|
|
|
|
<AtomsButtonVariant
|
|
type="custom"
|
|
class="inspection-btn inspection-btn-community color-black text-sm px-4 md:text-base"
|
|
:class="{ 'inspection-btn-outline flex-1': launchingStatus }"
|
|
@click="handleCommunityClick"
|
|
>
|
|
<span>{{ tm('Inspection_Community_Btn') }}</span>
|
|
<AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
|
|
</AtomsButtonVariant>
|
|
|
|
<div v-if="launchingStatus" class="flex flex-1">
|
|
<BlocksButtonLauncher
|
|
v-if="
|
|
(Number(gameData?.platform_type) !== 2 &&
|
|
device.isDesktop) ||
|
|
Number(gameData?.platform_type) === 1
|
|
"
|
|
type="custom"
|
|
platform="pc"
|
|
class="inspection-btn inspection-btn-primary w-full color-black text-sm md:text-base flex-1"
|
|
>
|
|
<span>{{ tm('Txt_Game_Start') }}</span>
|
|
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M10.3098 1.49172C8.86574 1.28049 7.15098 1.28055 5.70176 1.49167C3.50821 1.81315 1.81986 3.50786 1.49213 5.69168L1.4918 5.69391C1.38564 6.41904 1.33331 7.19181 1.33331 7.99998C1.33331 8.80815 1.3857 9.58136 1.49187 10.3065C1.81362 12.4934 3.50335 14.1805 5.69381 14.5079L5.69577 14.5082C6.42109 14.6143 7.19417 14.6666 7.99717 14.6666C8.80032 14.6666 9.57311 14.6143 10.3035 14.5083L10.3046 14.5082C12.4928 14.1865 14.1802 12.4917 14.5078 10.3083L14.5082 10.3061C14.6143 9.58092 14.6666 8.80815 14.6666 7.99998C14.6666 7.19527 14.6203 6.42148 14.5137 5.69347C14.1921 3.50726 12.4966 1.81316 10.3098 1.49172ZM6.38756 8.95267C6.39301 9.15365 6.40004 9.35195 6.40866 9.54742L6.40968 9.57054C6.41945 9.78867 6.43118 10.0033 6.44489 10.2141C6.45959 10.4433 6.68743 10.5836 6.88293 10.4823C7.22837 10.3029 7.58116 10.1096 7.9413 9.90379C8.20002 9.7541 8.46167 9.6013 8.72479 9.43914C8.98791 9.27854 9.24516 9.11482 9.49505 8.95111C9.84196 8.72502 10.1771 8.49581 10.4961 8.26817C10.6769 8.14031 10.6769 7.85965 10.4961 7.7318C10.1771 7.50415 9.84343 7.2765 9.49505 7.04886C9.24516 6.88514 8.98791 6.72298 8.72479 6.56082C8.46167 6.39866 8.20002 6.2443 7.9413 6.09618C7.58263 5.89036 7.22837 5.69702 6.88293 5.5177C6.68743 5.41636 6.45959 5.55669 6.44489 5.78589C6.43118 5.99671 6.41945 6.21129 6.40968 6.42943L6.40866 6.45254C6.40004 6.64801 6.39301 6.84631 6.38756 7.0473C6.37874 7.3607 6.37433 7.67722 6.37433 7.99998C6.37433 8.32274 6.37874 8.64082 6.38756 8.95267Z"
|
|
fill="#332C2A"
|
|
/>
|
|
</svg>
|
|
</BlocksButtonLauncher>
|
|
|
|
<AtomsButtonVariant
|
|
v-else-if="Number(gameData?.platform_type) !== 1"
|
|
type="custom"
|
|
class="inspection-btn inspection-btn-primary w-full color-black text-sm md:text-base flex-1"
|
|
@click="handleGameStart"
|
|
>
|
|
<span>{{ tm('Txt_Game_Start') }}</span>
|
|
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M10.3098 1.49172C8.86574 1.28049 7.15098 1.28055 5.70176 1.49167C3.50821 1.81315 1.81986 3.50786 1.49213 5.69168L1.4918 5.69391C1.38564 6.41904 1.33331 7.19181 1.33331 7.99998C1.33331 8.80815 1.3857 9.58136 1.49187 10.3065C1.81362 12.4934 3.50335 14.1805 5.69381 14.5079L5.69577 14.5082C6.42109 14.6143 7.19417 14.6666 7.99717 14.6666C8.80032 14.6666 9.57311 14.6143 10.3035 14.5083L10.3046 14.5082C12.4928 14.1865 14.1802 12.4917 14.5078 10.3083L14.5082 10.3061C14.6143 9.58092 14.6666 8.80815 14.6666 7.99998C14.6666 7.19527 14.6203 6.42148 14.5137 5.69347C14.1921 3.50726 12.4966 1.81316 10.3098 1.49172ZM6.38756 8.95267C6.39301 9.15365 6.40004 9.35195 6.40866 9.54742L6.40968 9.57054C6.41945 9.78867 6.43118 10.0033 6.44489 10.2141C6.45959 10.4433 6.68743 10.5836 6.88293 10.4823C7.22837 10.3029 7.58116 10.1096 7.9413 9.90379C8.20002 9.7541 8.46167 9.6013 8.72479 9.43914C8.98791 9.27854 9.24516 9.11482 9.49505 8.95111C9.84196 8.72502 10.1771 8.49581 10.4961 8.26817C10.6769 8.14031 10.6769 7.85965 10.4961 7.7318C10.1771 7.50415 9.84343 7.2765 9.49505 7.04886C9.24516 6.88514 8.98791 6.72298 8.72479 6.56082C8.46167 6.39866 8.20002 6.2443 7.9413 6.09618C7.58263 5.89036 7.22837 5.69702 6.88293 5.5177C6.68743 5.41636 6.45959 5.55669 6.44489 5.78589C6.43118 5.99671 6.41945 6.21129 6.40968 6.42943L6.40866 6.45254C6.40004 6.64801 6.39301 6.84631 6.38756 7.0473C6.37874 7.3607 6.37433 7.67722 6.37433 7.99998C6.37433 8.32274 6.37874 8.64082 6.38756 8.95267Z"
|
|
fill="#332C2A"
|
|
/>
|
|
</svg>
|
|
</AtomsButtonVariant>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 다운로드 카드 -->
|
|
<div
|
|
v-if="launchingStatus"
|
|
class="inspection-card inspection-download-card"
|
|
:class="`platform-type-${gameData?.platform_type}`"
|
|
>
|
|
<h3 class="card-title text-base md:text-lg">
|
|
{{
|
|
t('Inspection_Txt_Download', {
|
|
gameName: gameData?.game_name,
|
|
})
|
|
}}
|
|
</h3>
|
|
<div class="flex flex-row gap-3 flex-wrap">
|
|
<BlocksButtonLauncher
|
|
v-for="(btn, index) in enabledMarkets"
|
|
:key="index"
|
|
:class="getButtonClass(btn.platform)"
|
|
class="h-[40px] md:h-[48px]"
|
|
:platform="btn.platform as any"
|
|
:url="btn.url"
|
|
:type="btn.platform === 'pc' ? 'default' : 'single'"
|
|
variant="outlined"
|
|
>
|
|
{{ getButtonText(btn.platform) }}
|
|
</BlocksButtonLauncher>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</clientOnly>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { globalDateFormat } from '@seed-next/date'
|
|
|
|
const config = useRuntimeConfig()
|
|
const stoveApiUrl = config.public.stoveApiUrl as string
|
|
|
|
const dataResourcesUrl = config.public.dataResourcesUrl as string
|
|
const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_inspection.json'
|
|
// Multilingual
|
|
const resultGetMultilingual = await useGetMultilingual({
|
|
baseApiUrl: dataResourcesUrl,
|
|
fileName: multilingualFileName,
|
|
})
|
|
|
|
const { t, tm, locale }: any = useI18n({
|
|
useScope: 'local',
|
|
messages: Object(resultGetMultilingual?.value?.multilingual),
|
|
})
|
|
|
|
const device = useDevice()
|
|
const loadingStore = useLoadingStore()
|
|
const { webInspectionData, getInspectionDataExternal } =
|
|
useGetInspectionDataExternal()
|
|
const gameDataStore = useGameDataStore()
|
|
const { gameData } = storeToRefs(gameDataStore)
|
|
await getInspectionDataExternal({
|
|
baseApiUrl: stoveApiUrl,
|
|
gameId: gameData.value.game_id,
|
|
})
|
|
|
|
// locale에 따라 뒤에 KST 또는 UTC 추가 ko, en, zh-tw, ja
|
|
// ko: (KST)
|
|
// en: (UTC)
|
|
// zh-tw: 台灣時間 (KST)
|
|
// ja: (JST)
|
|
// 나머지: (KST)
|
|
const getLocaleTimezone = (localeType: string, region) => {
|
|
const tsStartDate = webInspectionData.value?.ts_start_date || 0
|
|
const tsEndDate = webInspectionData.value?.ts_end_date || 0
|
|
const currentLocale = localeType || locale.value
|
|
|
|
const timezoneMap: Record<string, string> = {
|
|
ko: 'KST',
|
|
en: 'UTC',
|
|
ja: 'JST',
|
|
'zh-tw': '台灣時間',
|
|
'zh-cn': 'CST',
|
|
th: 'ICT',
|
|
}
|
|
const timezone = timezoneMap[currentLocale] || 'KST'
|
|
const defaultRegion = currentLocale === 'ko' ? 'KR' : ''
|
|
|
|
const formatDate = (date: Date, loc: string, reg: string) =>
|
|
`${globalDateFormat(date, loc, reg || defaultRegion, { useFullDate: true })}`
|
|
|
|
const localTime = `${formatDate(new Date(tsStartDate), currentLocale, region || '')} <br class="md:hidden">~ ${formatDate(new Date(tsEndDate), currentLocale, region || '')} (${timezone})`
|
|
const utcTime = `${formatDate(new Date(tsStartDate), 'en', region || '')} <br class="md:hidden">~ ${formatDate(new Date(tsEndDate), 'en', region || '')} (UTC)`
|
|
|
|
return currentLocale === 'en' ? utcTime : `${localTime}<br>${utcTime}`
|
|
}
|
|
|
|
const launchingStatus = computed(() => {
|
|
return webInspectionData.value?.launching_status
|
|
})
|
|
|
|
// const market_json = {
|
|
// pc: { url: 'https://apps.apple.com/app/id1234567890', use_yn: 0 },
|
|
// app_store: { url: 'https://apps.apple.com/app/id1234567890', use_yn: 0 },
|
|
// google_play: { url: 'https://play.google.com/store/apps/details?id=example', use_yn: 1 }
|
|
// }
|
|
|
|
//gameData.value.market_json 값 중 use_yn === 1 인 항목만 배열로 변환
|
|
const enabledMarkets = computed(() => {
|
|
const platformType = Number(gameData.value.platform_type)
|
|
const markets = Object.entries(gameData.value.market_json)
|
|
// return Object.entries(market_json)
|
|
.filter(([, info]: [string, any]) => info && info.use_yn === 1)
|
|
.map(([platform, info]: [string, any]) => ({
|
|
platform,
|
|
url: info.url as string,
|
|
}))
|
|
|
|
// platform_type이 1이면 app_store, google_play 제외하고 pc 추가
|
|
if (platformType === 1) {
|
|
const filteredMarkets = markets.filter(
|
|
m => m.platform !== 'app_store' && m.platform !== 'google_play'
|
|
)
|
|
const hasPc = filteredMarkets.some(m => m.platform === 'pc')
|
|
if (!hasPc) {
|
|
filteredMarkets.unshift({
|
|
platform: 'pc',
|
|
url: '',
|
|
})
|
|
}
|
|
return filteredMarkets
|
|
}
|
|
|
|
// platform_type이 2이면 pc 제외
|
|
if (platformType === 2) {
|
|
return markets.filter(m => m.platform !== 'pc')
|
|
}
|
|
|
|
// platform_type이 3이면 pc 항목 추가
|
|
if (platformType === 3) {
|
|
const hasPc = markets.some(m => m.platform === 'pc')
|
|
if (!hasPc) {
|
|
markets.unshift({
|
|
platform: 'pc',
|
|
url: '',
|
|
})
|
|
}
|
|
}
|
|
|
|
return markets
|
|
})
|
|
|
|
const logoImgUrl = computed(() => {
|
|
const currentLocale = locale.value || 'ko'
|
|
const localeData = (webInspectionData.value as any)?.[currentLocale]
|
|
return formatPathHost(localeData.img_json.bi_large)
|
|
})
|
|
|
|
const communityUrl = computed(() => {
|
|
const currentLocale = locale.value || 'ko'
|
|
const localeData = (webInspectionData.value as any)?.[currentLocale]
|
|
return localeData?.url_json?.community
|
|
})
|
|
|
|
const handleCommunityClick = () => {
|
|
window.open(communityUrl.value, '_blank')
|
|
}
|
|
// 버튼 클래스 결정 함수
|
|
const getButtonClass = (platform: string) => {
|
|
// pc가 있으면 pc만 flex-1, 나머지는 기본
|
|
|
|
// platform_type이 3일 때 조건 추가
|
|
if (Number(gameData.value.platform_type) !== 2 && platform === 'pc') {
|
|
return `flex-1 btn-platform-${platform}`
|
|
}
|
|
|
|
return `btn-platform-${platform}`
|
|
}
|
|
|
|
const getButtonText = (platform: string) => {
|
|
const platformKeyMap: Record<string, string> = {
|
|
pc: 'platform_pc',
|
|
google_play: 'platform_google_play',
|
|
app_store: 'platform_app_store',
|
|
}
|
|
|
|
const key = platformKeyMap[platform]
|
|
return key ? tm(key) : ''
|
|
}
|
|
|
|
const handleGameStart = () => {
|
|
const os = device.isAndroid
|
|
? 'google_play'
|
|
: device.isApple
|
|
? 'app_store'
|
|
: 'google_play'
|
|
|
|
//const os = device.isAndroid ? 'google_play' : device.isApple ? 'app_store' : 'pc'
|
|
|
|
// platform_type이 2이면서 device.isDesktop이면 window.open(gameData.value.market_json[os].url, '_blank')
|
|
|
|
window.open(gameData.value.market_json[os].url, '_blank')
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadingStore.stopFullLoading()
|
|
})
|
|
|
|
definePageMeta({
|
|
middleware: ['inspection'],
|
|
layout: 'only-stove',
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.inspection-section {
|
|
@apply flex flex-col items-center gap-10 px-10 py-[120px] pb-[200px] min-h-[calc(100vh-48px)];
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.inspection-logo {
|
|
@apply w-[944px] h-[50px] flex-shrink-0;
|
|
}
|
|
|
|
.inspection-logo img {
|
|
@apply w-full h-full object-contain;
|
|
}
|
|
|
|
.inspection-content {
|
|
@apply flex flex-col items-center gap-10 w-full max-w-[944px];
|
|
}
|
|
|
|
.inspection-title {
|
|
@apply text-center font-bold tracking-[-0.72px] text-[#1F1F1F];
|
|
}
|
|
|
|
.inspection-cards {
|
|
@apply flex flex-col gap-5 w-full;
|
|
}
|
|
|
|
.inspection-card {
|
|
@apply bg-white rounded-2xl px-4 py-6 md:p-8;
|
|
}
|
|
|
|
.inspection-time-card {
|
|
@apply flex flex-col items-center gap-4;
|
|
}
|
|
|
|
.card-title {
|
|
@apply text-center leading-[30px] font-bold tracking-[-0.6px] text-[#1F1F1F];
|
|
}
|
|
|
|
.inspection-time {
|
|
@apply flex flex-col items-center gap-0 md:gap-2;
|
|
}
|
|
|
|
.time-row {
|
|
@apply text-center leading-[26px] font-medium tracking-[-0.48px] text-[#1F1F1F];
|
|
}
|
|
|
|
.inspection-bottom-cards {
|
|
@apply flex flex-row gap-5 w-full;
|
|
}
|
|
|
|
.inspection-stove-card,
|
|
.inspection-download-card {
|
|
@apply flex flex-col justify-between gap-4 flex-1;
|
|
}
|
|
|
|
.inspection-stove-card .card-title {
|
|
@apply leading-[26px] font-bold tracking-[-0.54px] text-[#1F1F1F];
|
|
}
|
|
|
|
.inspection-download-card .card-title {
|
|
@apply text-left leading-[26px] font-bold tracking-[-0.54px] text-[#1F1F1F];
|
|
}
|
|
|
|
.inspection-content-text {
|
|
@apply text-left leading-[26px] font-medium tracking-[-0.48px] text-[#1F1F1F];
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.button-group {
|
|
@apply flex flex-row gap-3 w-full;
|
|
}
|
|
|
|
.inspection-btn {
|
|
@apply flex items-center justify-center gap-1 px-2 md:px-4 h-10 md:h-12 rounded-lg;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.inspection-btn span {
|
|
@apply text-[#1F1F1F];
|
|
}
|
|
|
|
.inspection-btn-outline {
|
|
@apply bg-white;
|
|
}
|
|
|
|
.inspection-btn-outline:hover {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
.inspection-btn-primary {
|
|
@apply bg-[var(--primary)] border-[var(--primary)] text-[#000];
|
|
}
|
|
|
|
.inspection-btn-primary span {
|
|
@apply text-black;
|
|
}
|
|
|
|
.inspection-btn-primary:hover {
|
|
@apply bg-[#B89D7A];
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.inspection-section {
|
|
@apply px-5 py-20 pb-32;
|
|
}
|
|
|
|
.inspection-logo {
|
|
@apply w-full max-w-[944px];
|
|
}
|
|
|
|
.inspection-time-card {
|
|
@apply w-full;
|
|
}
|
|
|
|
.inspection-bottom-cards {
|
|
@apply flex-col;
|
|
}
|
|
|
|
.inspection-stove-card,
|
|
.inspection-download-card {
|
|
@apply w-full;
|
|
}
|
|
}
|
|
.inspection-btn-community {
|
|
@apply rounded-lg;
|
|
}
|
|
.inspection-btn-community.inspection-btn-outline {
|
|
@apply bg-white border-none;
|
|
}
|
|
|
|
.inspection-btn-community.inspection-btn-outline:hover {
|
|
@apply bg-gray-50;
|
|
}
|
|
.inspection-download-card .btn-platform-pc {
|
|
@apply w-auto flex-1;
|
|
}
|
|
.inspection-download-card.platform-type-3 .btn-platform-pc {
|
|
@apply w-full flex-none hidden md:flex md:flex-1;
|
|
}
|
|
|
|
.inspection-download-card .btn-platform-app_store {
|
|
@apply flex-1 px-2 md:px-4;
|
|
}
|
|
.inspection-download-card.platform-type-3 .btn-platform-app_store,
|
|
.inspection-download-card.platform-type-3 .btn-platform-google_play {
|
|
@apply flex-1 px-2 md:px-4 md:flex-none;
|
|
}
|
|
:deep(.inspection-download-card .btn-platform-app_store .text) {
|
|
@apply block md:hidden;
|
|
}
|
|
:deep(.inspection-download-card.platform-type-2 .btn-platform-app_store .text) {
|
|
@apply block md:block;
|
|
}
|
|
:deep(.inspection-download-card .btn-platform-google_play) {
|
|
@apply flex-1 px-2 md:px-4;
|
|
}
|
|
:deep(.inspection-download-card .btn-platform-google_play .text) {
|
|
@apply block md:hidden;
|
|
}
|
|
:deep(
|
|
.inspection-download-card.platform-type-2 .btn-platform-google_play .text
|
|
) {
|
|
@apply block md:block;
|
|
}
|
|
:deep(.inspection-download-card .btn-base.single .icon-platform) {
|
|
@apply mr-2 md:mr-0;
|
|
}
|
|
.inspection-btn-primary.btn-base {
|
|
@apply bg-[var(--primary)] border-[var(--primary)] text-[#000];
|
|
}
|
|
|
|
.inspection-btn-primary.btn-base:deep(.text) {
|
|
@apply flex flex-1 items-center justify-center gap-1;
|
|
}
|
|
.inspection-btn-primary.btn-base:deep(.icon-platform) {
|
|
@apply hidden;
|
|
}
|
|
|
|
.inspection-btn-primary.btn-base {
|
|
@apply bg-[var(--primary)] border-[var(--primary)] text-[#000];
|
|
}
|
|
|
|
.inspection-btn-primary.btn-base:deep(.text) {
|
|
@apply flex flex-1 items-center justify-center gap-1;
|
|
}
|
|
.inspection-btn-primary.btn-base:deep(.icon-platform) {
|
|
@apply hidden;
|
|
}
|
|
</style>
|