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:
“hyeonggkim”
2025-12-09 20:56:22 +09:00
parent cf2bc35d39
commit cda8e2e3b8
1 changed files with 120 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -69,7 +69,7 @@
<AtomsButtonVariant
type="custom"
class="inspection-btn inspection-btn-community color-black text-sm md:text-base px-6"
class="inspection-btn inspection-btn-community color-black text-sm px-4 md:text-base"
:class="{ 'inspection-btn-outline flex-1': launchingStatus }"
@click="handleCommunityClick"
>
@@ -77,29 +77,57 @@
<AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
</AtomsButtonVariant>
<BlocksButtonLauncher
v-if="launchingStatus"
type="custom"
platform="pc"
class="inspection-btn inspection-btn-primary w-auto color-black text-sm md:text-base flex-1"
>
<span>게임 시작</span>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
<div v-if="launchingStatus" class="flex flex-1">
<BlocksButtonLauncher
v-if="Number(gameData?.platform_type) !== 2 && device.isDesktop"
type="custom"
platform="pc"
class="inspection-btn inspection-btn-primary w-full color-black text-sm md:text-base flex-1"
>
<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>
<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>
@@ -108,16 +136,17 @@
<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">
<div class="flex flex-row gap-3 flex-wrap">
<BlocksButtonLauncher
v-for="(btn, index) in enabledMarkets"
:key="index"
:class="getButtonClass(btn.platform)"
class="h-[48px] flex-1 md:flex-none"
class="h-[40px] md:h-[48px]"
:platform="btn.platform as any"
:url="btn.url"
:type="btn.platform === 'pc' ? 'default' : 'single'"
@@ -136,7 +165,6 @@
<script setup lang="ts">
import { globalDateFormat } from '@seed-next/date'
import { useCheckGameStart } from '#layers/composables/useGameStart'
const config = useRuntimeConfig()
@@ -208,6 +236,7 @@ const launchingStatus = computed(() => {
//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)
@@ -216,8 +245,26 @@ const enabledMarkets = computed(() => {
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 (Number(gameData.value.platform_type) === 3) {
if (platformType === 3) {
const hasPc = markets.some(m => m.platform === 'pc')
if (!hasPc) {
markets.unshift({
@@ -248,7 +295,13 @@ const handleCommunityClick = () => {
// 버튼 클래스 결정 함수
const getButtonClass = (platform: string) => {
// pc가 있으면 pc만 flex-1, 나머지는 기본
return `flex-1 btn-platform-${platform}`
// 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) => {
@@ -262,21 +315,21 @@ const getButtonText = (platform: string) => {
return key ? tm(key) : ''
}
const { validateLauncher } = useCheckGameStart()
const handleGameStart = () => {
if (device.isDesktop) {
validateLauncher()
} else if (device.isIos) {
window.open(gameData.value.market_json.app_store.url, '_blank')
} else if (device.isAndroid) {
window.open(gameData.value.market_json.google_play.url, '_blank')
}
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()
console.log("🚀 ~ 3333 onMounted ~ device:", device)
console.log("🚀 ~ 3333 onMounted ~ enabledMarkets:", enabledMarkets.value)
})
@@ -359,7 +412,7 @@ definePageMeta({
}
.inspection-btn {
@apply flex items-center justify-center gap-1 px-2 md:px-8 w-auto h-10 md:h-12 rounded-lg;
@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;
}
@@ -421,20 +474,34 @@ definePageMeta({
@apply bg-gray-50;
}
.inspection-download-card .btn-platform-pc {
@apply w-auto hidden md:block flex-1;
@apply w-auto flex-1;
}
:deep(.inspection-download-card .btn-platform-app_store) {
@apply px-2 md:px-4;
.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 px-2 md:px-4;
@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;
}
@@ -442,6 +509,17 @@ definePageMeta({
@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;
}