feat: 점검 페이지 추가, external gamedata 호출 추가

This commit is contained in:
“hyeonggkim”
2025-11-03 13:06:58 +09:00
parent 9062e45fff
commit 33aece1011
8 changed files with 114 additions and 47 deletions

View File

@@ -1,6 +1,9 @@
<template>
<header class="header">
<BlocksStoveGnbNew class="min-h-[48px]" />
</header>
<section class="inspection-section">
<clientOnly>
<!-- 로고 -->
<div class="inspection-logo">
@@ -19,10 +22,7 @@
<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('ko', '')" class="time-row"></div>
<div v-dompurify-html="getLocaleTimezone('en', 'US')" class="time-row"></div>
<div v-dompurify-html="getLocaleTimezone('zh-tw', '')" class="time-row"></div>
<div v-dompurify-html="getLocaleTimezone('ja', '')" class="time-row"></div>
<div v-dompurify-html="getLocaleTimezone('', '')" class="time-row"></div>
</div>
</div>
@@ -109,7 +109,7 @@ const rootPath = config.public.staticUrl
const runType = config.public.runType
const translationApi = `${rootPath}/${runType}/test`
const isClient = import.meta.client
// const isClient = import.meta.client
const inspectionStore = useInspectionStore()
const { webInspectionData } = storeToRefs(inspectionStore)
@@ -133,19 +133,32 @@ const { tm, locale } = useI18n({
// ja: (JST)
// 나머지: (KST)
const getLocaleTimezone = (localeType: string, region) => {
const tsStartDate = webInspectionData.value?.start_date || 0
const tsEndDate = webInspectionData.value?.end_date || 0
switch (localeType) {
const tsStartDate = webInspectionData.value?.ts_start_date || 0
const tsEndDate = webInspectionData.value?.ts_end_date || 0
const currentLocale = localeType ? localeType : locale.value
switch (currentLocale) {
case 'ko':
return `${globalDateFormat(new Date(tsStartDate), localeType, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), localeType, region || 'KR', {useFullDate: true})} (KST)`
return `
${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || 'KR', {useFullDate: true})} (KST)<br>
${globalDateFormat(new Date(tsStartDate), 'en', region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), 'en', region || '', {useFullDate: true})} (UTC)
`
case 'en':
return `${globalDateFormat(new Date(tsStartDate), localeType, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), localeType, region || '', {useFullDate: true})} (UTC)`
return `${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || '', {useFullDate: true})} (UTC)`
case 'zh-tw':
return `${globalDateFormat(new Date(tsStartDate), localeType, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), localeType, region || '', {useFullDate: true})} (台灣時間)`
return `
${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || '', {useFullDate: true})} (台灣時間)<br>
${globalDateFormat(new Date(tsStartDate), 'en', region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), 'en', region || '', {useFullDate: true})} (UTC)
`
case 'ja':
return `${globalDateFormat(new Date(tsStartDate), localeType, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), localeType, region || '', {useFullDate: true})} (JST)`
return `
${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || '', {useFullDate: true})} (JST)<br>
${globalDateFormat(new Date(tsStartDate), 'en', region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), 'en', region || '', {useFullDate: true})} (UTC)
`
default:
return `${globalDateFormat(new Date(tsStartDate), localeType, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), localeType, region || '', {useFullDate: true})} (KST)`
return `
${globalDateFormat(new Date(tsStartDate), currentLocale, region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), currentLocale, region || '', {useFullDate: true})} (KST)<br>
${globalDateFormat(new Date(tsStartDate), 'en', region || '', {useFullDate: true})} <br class="md:hidden">~ ${globalDateFormat(new Date(tsEndDate), 'en', region || '', {useFullDate: true})} (UTC)
`
}
}
@@ -222,7 +235,7 @@ const handleGameStart = () => {
definePageMeta({
middleware: ['inspection'],
layout: 'inspection',
layout: 'only-stove',
showLoading: false
})
@@ -230,7 +243,7 @@ definePageMeta({
<style scoped>
.inspection-section {
@apply flex flex-col items-center gap-10 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-[calc(100vh-48px)];
background-color: #F0F0F0;
}