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

fix. 코드 리팩토링

Browse Source
This commit is contained in:
clkim
2026-01-16 14:55:02 +09:00
parent c8cd7f780e
commit 40dc7f0e40
34 changed files with 238 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/app.vue
View File

@@ -80,7 +80,7 @@ const createMetaTags = (metaTag: Partial<GameDataMetaTag> = {}) => {
}
// CSS 변수 생성 헬퍼
const createCssVariable = (keyColorJson: GameDataKeyColors) => {
const createStyleCss = (keyColorJson: GameDataKeyColors) => {
const colorVariables = Object.entries(keyColorJson)
.filter(([key, value]) => key && value != null)
.map(([key, value]) => `--${key}: ${value};`)
@@ -95,9 +95,10 @@ const setupGameHead = (data: GameDataValue) => {
const metaTag: Partial<GameDataMetaTag> = data.meta_tag_json ?? {}
const designTheme = data.design_theme === 1 ? 'light' : 'dark'
const styleLinks = createStyleLinks(
data.favicon_json
// data?.game_font?.font_path
data.favicon_json,
data?.game_font?.font_path
)
const styleCss = createStyleCss(data.key_color_json)
useHead({
title: metaTag.page_title ?? '',
@@ -110,7 +111,7 @@ const setupGameHead = (data: GameDataValue) => {
link: styleLinks,
style: [
{
innerHTML: createCssVariable(data.key_color_json),
innerHTML: styleCss,
id: 'game-css-variables',
},
],

294
app/pages/inspection/index.vue
View File

@@ -56,80 +56,24 @@
></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 }"
<AtomsButton
variant="outlined"
class="flex-1 size-extra-small md:size-small"
@click="handleCommunityClick"
>
<span>{{ tm('Inspection_Community_Btn') }}</span>
<span class="text">{{ 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>
</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>
@@ -137,7 +81,6 @@
<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">
{{
@@ -147,18 +90,23 @@
}}
</h3>
<div class="flex flex-row gap-3 flex-wrap">
<BlocksButtonLauncher
v-for="(btn, index) in enabledMarkets"
<template
v-for="(market, 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>
<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>
@@ -170,6 +118,8 @@
<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
@@ -233,51 +183,21 @@ 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,
}))
const markets = getSupportedPlatforms(
gameData.value.platform_type,
gameData.value.os_type
) as Platform[]
// 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: '',
})
if (device.isMobile) {
// markets에 pc가 있다면 지우기
markets.splice(markets.indexOf('pc'), 1)
if (device.isAndroid) {
markets.splice(markets.indexOf('app_store'), 1)
}
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: '',
})
if (device.isApple) {
markets.splice(markets.indexOf('google_play'), 1)
}
}
@@ -287,7 +207,7 @@ const enabledMarkets = computed(() => {
const logoImgUrl = computed(() => {
const currentLocale = locale.value || 'ko'
const localeData = (webInspectionData.value as any)?.[currentLocale]
return formatPathHost(localeData.img_json.bi_large)
return formatPathHost(localeData?.img_json.bi_large)
})
const communityUrl = computed(() => {
@@ -299,17 +219,6 @@ const communityUrl = computed(() => {
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> = {
@@ -318,24 +227,14 @@ const getButtonText = (platform: string) => {
app_store: 'platform_app_store',
}
if (platform !== 'pc' && device.isDesktop) {
return ''
}
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()
})
@@ -415,37 +314,7 @@ definePageMeta({
}
.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];
@apply flex flex-row gap-3;
}
@media (max-width: 1024px) {
@@ -470,69 +339,18 @@ definePageMeta({
@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;
.button-group:deep(.btn-base .text) {
@apply mr-[2px] md:mr-[4px] text-[#1F1F1F];
}
.inspection-download-card .btn-platform-app_store {
@apply flex-1 px-2 md:px-4;
.button-group:deep(.inspection-launcher.btn-base) {
@apply flex-1 bg-[var(--primary)] px-[20px];
}
.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) {
.button-group:deep(.inspection-launcher.btn-base .icon-platform) {
@apply hidden;
}
</style>