357 lines
9.9 KiB
Vue
357 lines
9.9 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">
|
|
<AtomsButton
|
|
variant="outlined"
|
|
class="flex-1 size-extra-small md:size-small"
|
|
@click="handleCommunityClick"
|
|
>
|
|
<span class="text">{{ tm('Inspection_Community_Btn') }}</span>
|
|
<AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
|
|
</AtomsButton>
|
|
<BlocksButtonLauncher
|
|
v-if="launchingStatus"
|
|
type="single"
|
|
platform="pc"
|
|
class="inspection-launcher"
|
|
:icon-component="AtomsIconsPlayRoundFill"
|
|
:icon-props="{ size: 16, color: '#332C2A' }"
|
|
>
|
|
{{ tm('Txt_Game_Start') }}
|
|
</BlocksButtonLauncher>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 다운로드 카드 -->
|
|
<div
|
|
v-if="launchingStatus"
|
|
class="inspection-card inspection-download-card"
|
|
>
|
|
<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">
|
|
<template
|
|
v-for="(market, index) in enabledMarkets"
|
|
:key="index"
|
|
>
|
|
<BlocksButtonLauncher
|
|
:type="market === 'pc' ? 'default' : 'single'"
|
|
variant="outlined"
|
|
:platform="market"
|
|
:class="[
|
|
{ 'flex-1': market === 'pc' },
|
|
{ 'flex-1': market !== 'pc' && !device.isDesktop },
|
|
'size-extra-small md:size-small',
|
|
]"
|
|
>
|
|
{{ getButtonText(market) }}
|
|
</BlocksButtonLauncher>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</clientOnly>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { globalDateFormat } from '@seed-next/date'
|
|
import AtomsIconsPlayRoundFill from '#layers/components/atoms/icons/PlayRoundFill.vue'
|
|
import type { Platform } from '#layers/types/components/button'
|
|
|
|
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 enabledMarkets = computed(() => {
|
|
const markets = getSupportedPlatforms(
|
|
gameData.value.platform_type,
|
|
gameData.value.os_type
|
|
) as Platform[]
|
|
|
|
if (device.isMobile) {
|
|
// markets에 pc가 있다면 지우기
|
|
markets.splice(markets.indexOf('pc'), 1)
|
|
|
|
if (device.isAndroid) {
|
|
markets.splice(markets.indexOf('app_store'), 1)
|
|
}
|
|
if (device.isApple) {
|
|
markets.splice(markets.indexOf('google_play'), 1)
|
|
}
|
|
}
|
|
|
|
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 getButtonText = (platform: string) => {
|
|
const platformKeyMap: Record<string, string> = {
|
|
pc: 'platform_pc',
|
|
google_play: 'platform_google_play',
|
|
app_store: 'platform_app_store',
|
|
}
|
|
|
|
if (platform !== 'pc' && device.isDesktop) {
|
|
return ''
|
|
}
|
|
|
|
const key = platformKeyMap[platform]
|
|
return key ? tm(key) : ''
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
@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-download-card .btn-platform-pc {
|
|
@apply w-auto flex-1;
|
|
}
|
|
|
|
.button-group:deep(.btn-base .text) {
|
|
@apply mr-[2px] md:mr-[4px] text-[#1F1F1F];
|
|
}
|
|
|
|
.button-group:deep(.inspection-launcher.btn-base) {
|
|
@apply flex-1 bg-[var(--primary)] px-[20px];
|
|
}
|
|
.button-group:deep(.inspection-launcher.btn-base .icon-platform) {
|
|
@apply hidden;
|
|
}
|
|
</style>
|