fix. 버튼 클래스 및 텍스트 로직 개선, 다운로드 카드 스타일 수정

app/pages/inspection/index.vue

@@ -69,7 +69,7 @@
 
                 <AtomsButtonVariant
                   type="custom"
-                  class="inspection-btn inspection-btn-community color-black text-sm md:text-base"
+                  class="inspection-btn inspection-btn-community color-black text-sm md:text-base px-6"
                   :class="{ 'inspection-btn-outline flex-1': launchingStatus }"
                   @click="handleCommunityClick"
                 >
@@ -77,12 +77,11 @@
                   <AtomsIconsLongArrowRightLine :size="16" color="#1F1F1F" />
                 </AtomsButtonVariant>
 
-                <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"
-                  @click="handleGameStart"
                 >
                   <span>게임 시작</span>
 
@@ -100,7 +99,8 @@
                       fill="#332C2A"
                     />
                   </svg>
-                </AtomsButtonVariant>
+                </BlocksButtonLauncher>
+
               </div>
             </div>
 
@@ -110,14 +110,14 @@
               class="inspection-card inspection-download-card"
             >
               <h3 class="card-title text-base md:text-lg">
-                {{ tm('Inspection_Txt_Download') || '게임 다운로드' }}
+                {{ t('Inspection_Txt_Download', { gameName: gameData?.game_name }) }}
               </h3>
               <div class="flex flex-row gap-3">
                 <BlocksButtonLauncher
                   v-for="(btn, index) in enabledMarkets"
                   :key="index"
                   :class="getButtonClass(btn.platform)"
-                  class="h-[48px]"
+                  class="h-[48px] flex-1 md:flex-none"
                   :platform="btn.platform as any"
                   :url="btn.url"
                   :type="btn.platform === 'pc' ? 'default' : 'single'"
@@ -138,6 +138,7 @@
 import { globalDateFormat } from '@seed-next/date'
 import { useCheckGameStart } from '#layers/composables/useGameStart'
 
+
 const config = useRuntimeConfig()
 const stoveApiUrl = config.public.stoveApiUrl as string
 
@@ -149,11 +150,12 @@ const resultGetMultilingual = await useGetMultilingual({
   fileName: multilingualFileName,
 })
 
-const { tm, locale }: any = useI18n({
+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()
@@ -206,15 +208,26 @@ const launchingStatus = computed(() => {
 
 //gameData.value.market_json 값 중 use_yn === 1 인 항목만 배열로 변환
 const enabledMarkets = computed(() => {
-  return (
-    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 = 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,
+    }))
+  
+  // platform_type이 3이면 pc 항목 추가
+  if (Number(gameData.value.platform_type) === 3) {
+    const hasPc = markets.some(m => m.platform === 'pc')
+    if (!hasPc) {
+      markets.unshift({
+        platform: 'pc',
+        url: '',
+      })
+    }
+  }
+  
+  return markets
 })
 
 const logoImgUrl = computed(() => {
@@ -235,41 +248,35 @@ const handleCommunityClick = () => {
 // 버튼 클래스 결정 함수
 const getButtonClass = (platform: string) => {
   // pc가 있으면 pc만 flex-1, 나머지는 기본
-  const hasPc = enabledMarkets.value.some(btn => btn.platform === 'pc')
-  if (hasPc) {
-    return platform === 'pc' ? `flex-1 btn-platform-pc` : ``
-  }
-  //pc가 없으면서 하나만 있으면 ''
-  if (enabledMarkets.value.length === 1) {
-    return ``
-  }
-  return `flex-1`
+  return `flex-1 btn-platform-${platform}`
 }
 
 const getButtonText = (platform: string) => {
-  const hasPc = enabledMarkets.value.some(btn => btn.platform === 'pc')
-  // pc가 있으면 pc만 텍스트 노출
-  if (hasPc) {
-    return platform === 'pc' ? tm('platform_pc') : ''
+  const platformKeyMap: Record<string, string> = {
+    pc: 'platform_pc',
+    google_play: 'platform_google_play',
+    app_store: 'platform_app_store',
   }
-  // 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 key = platformKeyMap[platform]
+  return key ? tm(key) : ''
 }
 
 const { validateLauncher } = useCheckGameStart()
 const handleGameStart = () => {
-  validateLauncher()
+  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')
+  }
 }
 
 onMounted(() => {
   loadingStore.stopFullLoading()
+
+  console.log("🚀 ~ 3333 onMounted ~ device:", device)
 })
 
 
@@ -306,7 +313,7 @@ definePageMeta({
 }
 
 .inspection-card {
-  @apply bg-white rounded-2xl p-6 md:p-8;
+  @apply bg-white rounded-2xl px-4 py-6 md:p-8;
 }
 
 .inspection-time-card {
@@ -352,7 +359,7 @@ definePageMeta({
 }
 
 .inspection-btn {
-  @apply flex items-center justify-center gap-1 px-6 md:px-8 w-auto h-10 md:h-12 rounded-lg;
+  @apply flex items-center justify-center gap-1 px-2 md:px-8 w-auto h-10 md:h-12 rounded-lg;
   cursor: pointer;
   transition: all 0.2s;
 }
@@ -413,4 +420,32 @@ definePageMeta({
 .inspection-btn-community.inspection-btn-outline:hover {
   @apply bg-gray-50;
 }
+.inspection-download-card .btn-platform-pc {
+  @apply w-auto hidden md:block flex-1;
+}
+:deep(.inspection-download-card .btn-platform-app_store) {
+  @apply px-2 md:px-4;
+}
+:deep(.inspection-download-card .btn-platform-app_store .text) {
+  @apply block md:hidden;
+}
+:deep(.inspection-download-card .btn-platform-google_play) {
+  @apply px-2 md:px-4;
+}
+:deep(.inspection-download-card .btn-platform-google_play .text) {
+  @apply block md:hidden;
+}
+: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;
+}
 </style>

layers/composables/useAnalytics.ts

@@ -190,7 +190,7 @@ const sendSA = (
         click_area: clickArea,
         click_sarea: clickSarea,
         click_item: {
-          click_item: analytics.clickItem,
+          pwt_click_item: analytics.clickItem,
           game_no: gameNo,
           lang_cd: eventLocale,
           ...options?.clickItem,