fix: 게임 시작 버튼에 OS 및 지원 플랫폼 검사 로직 추가 (미지원 시 얼럿 표시)

layers/components/atoms/Button/Circle.vue

@@ -45,6 +45,6 @@ const componentProps = computed(() => {
     w-[40px] h-[40px] md:w-[48px] md:h-[48px]
     before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full
     after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-full after:opacity-0 after:transition-all after:duration-300 after:ease-in-out
-hover:after:opacity-10;
+    hover:after:opacity-10;
 }
 </style>

layers/components/layouts/Header.vue

@@ -6,12 +6,17 @@ import type {
   GameDataMenuChildren,
   GameDataResourceGroup,
   GameDataResourceGroupSet,
+  PlatformTransformType,
 } from '#layers/types/api/gameData'
 
 const route = useRoute()
+const { tm } = useI18n()
 const { width } = useWindowSize()
+const device = useDevice()
 const gameDataStore = useGameDataStore()
 const scrollStore = useScrollStore()
+const breakpoints = useResponsiveBreakpoints()
+const modalStore = useModalStore()
 
 const { gameData } = storeToRefs(gameDataStore)
 const { isPassedStoveGnb } = storeToRefs(scrollStore)
@@ -33,6 +38,12 @@ const gnb2depthButtonData = computed(
   () => gnbData?.buttons[1]?.button_json as GameDataResourceGroupSet
 )
 const currentPath = computed(() => formatPathWithoutLocale(route.path))
+const supportedPlatforms = computed(
+  () =>
+    getSupportedPlatforms(gameData.value?.os_type, {
+      platformType: gameData.value?.platform_type,
+    }) as PlatformTransformType[]
+)
 
 const pathMatches = (base: string, current: string) => {
   if (!base || base === '/') return current === '/'
@@ -151,6 +162,57 @@ const has2depthButton = (gnbItem: GameDataMenu) => {
   return gnbItem.children && Object.keys(gnbItem.children).length > 0
 }
 
+const highlight = (text: string) => `<span class="highlight">${text}</span>`
+
+const PLATFORM_LABEL_KEY: Record<PlatformTransformType, string> = {
+  pc: 'PC',
+  google_play: 'Google Play',
+  app_store: 'App Store',
+}
+
+const tmWithGameName = (key: string): string => {
+  const raw = tm(key)
+  if (typeof raw !== 'string') return ''
+
+  const withName = raw.replace(
+    /%게임명%/g,
+    highlight(gameData.value?.game_name || '')
+  )
+
+  const platformLines = supportedPlatforms.value
+    .map(platform => highlight(PLATFORM_LABEL_KEY[platform] as string))
+    .filter(Boolean)
+
+  return platformLines.length
+    ? `${withName}<br><br>${platformLines.join('<br>')}`
+    : withName
+}
+
+const showNotSupportedOSAlert = () => {
+  return modalStore.handleOpenAlert({
+    contentText: tmWithGameName('Alert_Not_SupportedOS'),
+  })
+}
+
+const handleStartClick = () => {
+  if (breakpoints.value.isDesktop) return
+
+  const target = device.isAndroid
+    ? 'google_play'
+    : device.isApple
+      ? 'app_store'
+      : null
+
+  if (!target || !supportedPlatforms.value.includes(target)) {
+    return showNotSupportedOSAlert()
+  }
+
+  const url = gameData.value?.market_json?.[target]?.url || ''
+  if (!url) return showNotSupportedOSAlert()
+
+  window.open(url, '_blank')
+}
+
 const stopClickOutside = onClickOutside(navAreaRef, () => handleMenuClose())
 
 // 화면 크기 변경 시 오버플로우 재계산
@@ -319,33 +381,37 @@ onBeforeUnmount(() => {
             </div>
           </nav>
           <div ref="startRef" class="btn-start">
-            <BlocksButtonLauncher
-              type="custom"
-              platform="pc"
-              :background-color="
-                getColorCode({
-                  colorName: gnb1depthButtonData?.btn_info?.color_name_btn,
-                  colorCode: gnb1depthButtonData?.btn_info?.color_code_btn,
-                })
-              "
-              :text-color="
-                getColorCode({
-                  colorName: gnb1depthButtonData?.btn_info?.color_name_txt,
-                  colorCode: gnb1depthButtonData?.btn_info?.color_code_txt,
-                })
-              "
-            >
-              {{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
-            </BlocksButtonLauncher>
-            <div v-if="gnb2depthButtonData" class="nav-2depth hidden md:block">
-              <ul>
-                <li v-for="(item, key) in gnb2depthButtonData" :key="key">
-                  <BlocksButtonLauncher type="custom" :platform="key">
-                    {{ item.btn_info?.txt_btn_name }}
-                  </BlocksButtonLauncher>
-                </li>
-              </ul>
-            </div>
+            <ClientOnly>
+              <component
+                :is="
+                  breakpoints.isDesktop ? 'BlocksButtonLauncher' : 'AtomsButton'
+                "
+                type="custom"
+                platform="pc"
+                :background-color="
+                  getColorCodeFromData(gnb1depthButtonData?.btn_info, 'btn')
+                "
+                :text-color="
+                  getColorCodeFromData(gnb1depthButtonData?.btn_info, 'txt')
+                "
+                @click="handleStartClick"
+              >
+                {{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
+              </component>
+
+              <div
+                v-if="breakpoints.isDesktop && gnb2depthButtonData"
+                class="nav-2depth"
+              >
+                <ul>
+                  <li v-for="(item, key) in gnb2depthButtonData" :key="key">
+                    <BlocksButtonLauncher type="custom" :platform="key">
+                      {{ item.btn_info?.txt_btn_name }}
+                    </BlocksButtonLauncher>
+                  </li>
+                </ul>
+              </div>
+            </ClientOnly>
           </div>
           <button class="btn-close" @click="handleMenuClose">
             <AtomsIconsCloseLine

layers/components/widgets/ButtonList.vue

@@ -24,18 +24,6 @@ const getBtnType = (item?: PageDataResourceGroupBtnInfo): ButtonType => {
   return 'action'
 }
 
-const getBgColor = (item?: PageDataResourceGroupBtnInfo): string =>
-  getColorCode({
-    colorName: item?.color_name_btn,
-    colorCode: item?.color_code_btn,
-  })
-
-const getTextColor = (item?: PageDataResourceGroupBtnInfo): string =>
-  getColorCode({
-    colorName: item?.color_name_txt,
-    colorCode: item?.color_code_txt,
-  })
-
 const handleLogClick = (button: PageDataResourceGroup) => {
   sendLog(locale.value, useAnalyticsLogDataDirect(button, props.pageVerTmplSeq))
   if (button.btn_info?.detail?.btn_type === 'POP') {
@@ -62,8 +50,8 @@ const buttonList = computed(() => props.resourcesData || [])
         v-if="button.btn_info?.detail?.btn_type === 'RUN'"
         type="duplication"
         :platform="button.btn_info?.detail?.market_type"
-        :background-color="getBgColor(button.btn_info)"
-        :text-color="getTextColor(button.btn_info)"
+        :background-color="getColorCodeFromData(button.btn_info, 'btn')"
+        :text-color="getColorCodeFromData(button.btn_info, 'txt')"
         :disabled="button?.btn_info?.disabled"
         @click="handleLogClick(button)"
       >
@@ -75,8 +63,8 @@ const buttonList = computed(() => props.resourcesData || [])
         :href="button.btn_info?.detail?.action?.url"
         :target="button.btn_info?.detail?.action?.link_target"
         :rel="button.btn_info?.detail?.action?.rel"
-        :background-color="getBgColor(button.btn_info)"
-        :text-color="getTextColor(button.btn_info)"
+        :background-color="getColorCodeFromData(button.btn_info, 'btn')"
+        :text-color="getColorCodeFromData(button.btn_info, 'txt')"
         :disabled="button?.btn_info?.disabled"
         @click="handleLogClick(button)"
       >