|
|
|
|
@@ -40,24 +40,31 @@
|
|
|
|
|
<div class="inspection-bottom-cards">
|
|
|
|
|
<!-- 온스토브 카드 -->
|
|
|
|
|
<div class="inspection-card inspection-stove-card">
|
|
|
|
|
<h3 v-dompurify-html="tm('Inspection_Game_During_Maintenance') || '홈페이지 점검 중에도 게임과 공식 커뮤니티는 그대로 이용할 수 있어요!'" class="card-title"></h3>
|
|
|
|
|
<div class="button-group">
|
|
|
|
|
<h3 v-dompurify-html="tm('Inspection_Game_During_Maintenance') || '홈페이지 점검 중에도 게임과 공식 커뮤니티는 그대로 이용할 수 있어요!'" :class="{ 'text-center': !launchingStatus }" class="card-title"></h3>
|
|
|
|
|
<div class="button-group justify-center">
|
|
|
|
|
<a
|
|
|
|
|
:href="communityUrl"
|
|
|
|
|
target="_blank"
|
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
|
class="inspection-btn inspection-btn-outline"
|
|
|
|
|
class="inspection-btn inspection-btn-outline inspection-btn-community"
|
|
|
|
|
>
|
|
|
|
|
<span>{{ tm('Inspection_Community_Btn') || '공식 커뮤니티' }}</span>
|
|
|
|
|
<AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
|
|
|
|
|
</a>
|
|
|
|
|
<button
|
|
|
|
|
class="inspection-btn inspection-btn-primary"
|
|
|
|
|
<AtomsButtonVariant
|
|
|
|
|
v-if="launchingStatus"
|
|
|
|
|
type="custom"
|
|
|
|
|
platform="pc"
|
|
|
|
|
class="inspection-btn inspection-btn-primary w-full md:w-auto color-black"
|
|
|
|
|
@click="handleGameStart"
|
|
|
|
|
>
|
|
|
|
|
<span>{{ tm('game_start_btn') || '게임 실행' }}</span>
|
|
|
|
|
<AtomsIconsLongArrowRightLine :size="16" color="#FFFFFF" />
|
|
|
|
|
</button>
|
|
|
|
|
<span>게임 시작</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>
|
|
|
|
|
|
|
|
|
|
@@ -66,8 +73,18 @@
|
|
|
|
|
<h3 class="card-title">
|
|
|
|
|
{{ tm('Inspection_Txt_Download') || '게임 다운로드' }}
|
|
|
|
|
</h3>
|
|
|
|
|
<div v-if="webInspectionData?.inspection_content" class="inspection-content-text">
|
|
|
|
|
{{ webInspectionData.inspection_content }}
|
|
|
|
|
<div v-if="enabledMarkets.length > 1" class="flex flex-row gap-3">
|
|
|
|
|
<template v-for="btn in enabledMarkets" :key="btn.platform">
|
|
|
|
|
<BlocksButtonDownload
|
|
|
|
|
:class="getButtonClass(btn.platform)"
|
|
|
|
|
:platform="btn.platform as any"
|
|
|
|
|
:url="btn.url"
|
|
|
|
|
type="single"
|
|
|
|
|
variant="outlined"
|
|
|
|
|
>
|
|
|
|
|
{{ getButtonText(btn.platform) }}
|
|
|
|
|
</BlocksButtonDownload>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -77,7 +94,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import {globalDateFormat} from '@seed-next/date';
|
|
|
|
|
import { globalDateFormat } from '@seed-next/date';
|
|
|
|
|
import { formatDateOffset } from '#layers/utils/dataUtil'
|
|
|
|
|
import { useCheckGameStart } from '#layers/composables/useGameStart'
|
|
|
|
|
|
|
|
|
|
@@ -90,7 +107,8 @@ const isClient = import.meta.client
|
|
|
|
|
|
|
|
|
|
const inspectionStore = useInspectionStore()
|
|
|
|
|
const { webInspectionData } = storeToRefs(inspectionStore)
|
|
|
|
|
|
|
|
|
|
const gameDataStore = useGameDataStore()
|
|
|
|
|
const { gameData } = storeToRefs(gameDataStore)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const resultGetMultilingual = await useGetMultilingual({
|
|
|
|
|
@@ -128,33 +146,28 @@ const getLocaleTimezone = (localeType: string, region) => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const launchingStatus = computed(() => {
|
|
|
|
|
return !!(webInspectionData.value?.launching_status)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// market_json에서 use_yn === 1 인 항목만 배열로 변환
|
|
|
|
|
|
|
|
|
|
// market_json:
|
|
|
|
|
// { pc: { url: 'https://apps.apple.com/app/id1234567890', use_yn: 0 },
|
|
|
|
|
// app_store: { url: 'https://apps.apple.com/app/id1234567890', use_yn: 1 },
|
|
|
|
|
// 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(() => {
|
|
|
|
|
return Object.entries(gameData.value.market_json)
|
|
|
|
|
.filter(([, info]: [string, any]) => info && info.use_yn === 1)
|
|
|
|
|
.map(([platform, info]: [string, any]) => ({ platform, url: info.url as string }))
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 날짜 포맷팅 함수 (CSR에서만 실행)
|
|
|
|
|
const formatInspectionTime = (timestamp: number, isKST: boolean): string => {
|
|
|
|
|
if (!import.meta.client || !timestamp) return ''
|
|
|
|
|
|
|
|
|
|
const lang = locale.value || 'ko'
|
|
|
|
|
const formatted = formatDateOffset({
|
|
|
|
|
ts: timestamp,
|
|
|
|
|
lang: isKST ? lang : 'en',
|
|
|
|
|
useSeconds: true,
|
|
|
|
|
useTimezone: true
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// formatDateOffset의 결과를 YYYY.MM.DD, HH:MM:SS 형식으로 변환
|
|
|
|
|
// KST의 경우: YYYY-MM-DD HH:MM:SS (KST) -> YYYY.MM.DD, HH:MM:SS (KST)
|
|
|
|
|
// UTC의 경우: MM/DD/YYYY HH:MM:SS (UTC) -> YYYY.MM.DD, HH:MM:SS (UTC)
|
|
|
|
|
if (isKST) {
|
|
|
|
|
return formatted.replace(/-/g, '.').replace(' ', ', ')
|
|
|
|
|
} else {
|
|
|
|
|
// UTC 형식 변환: MM/DD/YYYY HH:MM:SS (UTC) -> YYYY.MM.DD, HH:MM:SS (UTC)
|
|
|
|
|
const parts = formatted.match(/(\d{2})\/(\d{2})\/(\d{4}) (.+)/)
|
|
|
|
|
if (parts) {
|
|
|
|
|
return `${parts[3]}.${parts[1]}.${parts[2]}, ${parts[4]}`
|
|
|
|
|
}
|
|
|
|
|
return formatted
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const logoImgUrl = computed(() => {
|
|
|
|
|
// CSR에서만 처리
|
|
|
|
|
@@ -168,12 +181,39 @@ const logoImgUrl = computed(() => {
|
|
|
|
|
return webInspectionData.value.back_ground_image_url || ''
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 커뮤니티 URL
|
|
|
|
|
const communityUrl = computed(() => {
|
|
|
|
|
return '#'
|
|
|
|
|
})
|
|
|
|
|
// 버튼 클래스 결정 함수
|
|
|
|
|
const getButtonClass = (platform: string) => {
|
|
|
|
|
const hasPc = enabledMarkets.value.some(btn => btn.platform === 'pc')
|
|
|
|
|
|
|
|
|
|
// pc가 있으면 pc만 flex-1, 나머지는 기본
|
|
|
|
|
if (hasPc) {
|
|
|
|
|
return platform === 'pc' ? 'flex-1' : ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// pc가 없으면 모든 버튼에 flex-1
|
|
|
|
|
return 'flex-1'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const getButtonText = (platform: string) => {
|
|
|
|
|
const hasPc = enabledMarkets.value.some(btn => btn.platform === 'pc')
|
|
|
|
|
|
|
|
|
|
// pc가 있으면 pc만 텍스트 노출
|
|
|
|
|
if (hasPc) {
|
|
|
|
|
return platform === 'pc' ? tm('platform_pc') : ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// pc가 없으면 google_play와 app_store만 텍스트 노출
|
|
|
|
|
if (platform === 'google_play') {
|
|
|
|
|
return tm('platform_google_play')
|
|
|
|
|
}
|
|
|
|
|
if (platform === 'app_store') {
|
|
|
|
|
return tm('platform_app_store')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 게임 시작
|
|
|
|
|
const { validateLauncher } = useCheckGameStart()
|
|
|
|
|
const handleGameStart = () => {
|
|
|
|
|
validateLauncher()
|
|
|
|
|
@@ -184,16 +224,17 @@ definePageMeta({
|
|
|
|
|
layout: 'inspection',
|
|
|
|
|
showLoading: false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.inspection-section {
|
|
|
|
|
@apply flex flex-col items-center gap-8 px-10 py-[120px] pb-[200px] min-h-screen;
|
|
|
|
|
@apply flex flex-col items-center gap-10 px-10 py-[120px] pb-[200px] min-h-screen;
|
|
|
|
|
background-color: #F0F0F0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inspection-logo {
|
|
|
|
|
@apply w-[944px] h-[150px] flex-shrink-0;
|
|
|
|
|
@apply w-[944px] h-[50px] flex-shrink-0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inspection-logo img {
|
|
|
|
|
@@ -289,11 +330,11 @@ definePageMeta({
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inspection-btn-primary {
|
|
|
|
|
@apply bg-[#C7AE8B] border-[#C7AE8B];
|
|
|
|
|
@apply bg-[var(--primary)] border-[var(--primary)] text-[#000];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inspection-btn-primary span {
|
|
|
|
|
@apply text-white;
|
|
|
|
|
@apply text-black;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inspection-btn-primary:hover {
|
|
|
|
|
@@ -322,4 +363,7 @@ definePageMeta({
|
|
|
|
|
@apply w-full;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.inspection-btn-community {
|
|
|
|
|
@apply min-w-[170px] px-4 rounded-lg flex-none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|