Resolve merge conflicts in ButtonList.vue and pageData.ts

layers/components/blocks/ButtonLuncher.vue

@@ -0,0 +1,85 @@
+<script setup>
+const {
+  isProcessing,
+  isShowCheckLauncher,
+  isShowDownloadLauncher,
+  validateLauncher,
+  downloadLauncher,
+} = useCheckGameStart()
+</script>
+
+<template>
+  <AtomsButton
+    :class="$attrs?.class"
+    :disabled="isProcessing"
+    @click="validateLauncher"
+  >
+    <slot />
+  </AtomsButton>
+
+  <ClientOnly>
+    <Teleport to="#teleports">
+      <BlocksModalLayer
+        v-model:is-open="isShowCheckLauncher"
+        :is-show-dimmed="true"
+        :is-outside-close="false"
+        :modal-name="'launcher'"
+        area-class="max-w-[480px] pt-[56px] px-[24px] pb-[24px] rounded-[8px]"
+        close-class="absolute top-[16px] right-[24px]"
+      >
+        <span class="ico-loading"></span>
+        <!-- [TODO] i18n 적용 -->
+        <!-- <p class="text-check">{{ tm('Common_Message_Check_Client').txt }}</p> -->
+        <p class="text-check">pc 클라이언트 실행 중...</p>
+        <Transition name="fade">
+          <div v-if="isShowDownloadLauncher" class="client-area">
+            <!-- <p
+              v-dompurify-html="tm('Common_Message_Download_Client').txt"
+              class="text-info"
+            ></p>
+            <button type="button" class="btn-download" @click="downloadLauncher">
+              {{ tm('Common_Message_Install').txt }}
+            </button>
+            <p
+              v-dompurify-html="tm('Common_Message_Download_Close').txt"
+              class="text-tip"
+            ></p> -->
+            <p class="text-info">
+              PC 클라이언트가 실행되지 않나요?
+              <br />
+              다운로드 전이라면 다운로드 후 진행해주세요
+            </p>
+            <AtomsButtonVariant class="max-w-[300px]" @click="downloadLauncher">
+              다운로드
+            </AtomsButtonVariant>
+            <p
+              v-dompurify-html="
+                '*PC 클라이언트가 정상 실행되었다면 팝업을 닫아 주세요.'
+              "
+              class="text-tip"
+            ></p>
+          </div>
+        </Transition>
+      </BlocksModalLayer>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<style scoped>
+.ico-loading {
+  @apply block mx-auto mb-4 w-[80px] h-[80px] bg-[url('/images/common/stove_loading_light.png')] bg-contain bg-center bg-no-repeat;
+}
+.text-check {
+  @apply mb-6 text-center text-[20px] font-bold leading-[30px] tracking-[-0.6px] text-[#333333];
+}
+
+.client-area {
+  @apply pt-4 border-t border-[rgba(0,0,0,0.08)] text-center;
+}
+.text-info {
+  @apply mb-3 text-[14px] font-medium leading-[24px] tracking-[-0.42px] text-[#333333];
+}
+.text-tip {
+  @apply mt-4 text-[14px] leading-[20px] tracking-[-0.42px] text-[#999999];
+}
+</style>

layers/components/blocks/HybridLink.vue

@@ -33,7 +33,7 @@ const componentProps = computed(() => {
 </script>
 
 <template>
-  <component :is="componentTag" v-bind="{ ...$attrs, ...componentProps }">
+  <component :is="componentTag" v-bind="{ ...componentProps }">
     <slot />
   </component>
 </template>

layers/components/blocks/StoveGnb.vue

@@ -1,10 +1,8 @@
-<template>
-  <div id="stove-wrapper" class="relative z-[5]" />
-</template>
-
 <script setup lang="ts">
 import { useGameDataStore } from '#layers/stores/useGameDataStore'
 
+let cpHeader: any = null
+
 const runtimeConfig = useRuntimeConfig()
 const { locale, availableLocales } = useI18n()
 const { gameData } = useGameDataStore()
@@ -22,7 +20,7 @@ const languageCodes = computed(() => {
   return [locale]
 })
 
-function loadGnb(locale: string) {
+const loadGnb = (locale: string) => {
   locale = locale.toLowerCase()
 
   const gnbOption = {
@@ -51,11 +49,22 @@ function loadGnb(locale: string) {
     },
   }
 
-  const cpHeader = new (window as any).cp.Header(gnbOption)
+  cpHeader = new (window as any).cp.Header(gnbOption)
   cpHeader.render()
 }
 
 onMounted(() => {
   loadGnb(locale.value)
 })
+
+onBeforeUnmount(() => {
+  if (cpHeader && typeof cpHeader.destroy === 'function') {
+    cpHeader.destroy()
+  }
+  cpHeader = null
+})
 </script>
+
+<template>
+  <div id="stove-wrapper" class="relative z-[5]" />
+</template>

layers/components/blocks/modal/Alert.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+interface props {
+  isShowDimmed?: boolean
+  contentText?: string
+  confirmButtonText?: string
+  isOutsideClose?: boolean
+  modalName?: string
+}
+
+const props = withDefaults(defineProps<props>(), {
+  isShowDimmed: false,
+  isOutsideClose: false,
+})
+
+const emit = defineEmits(['confirmButtonEvent'])
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const setButtonEvent = (event?: () => void | void) => {
+  if (typeof event === 'function') {
+    return event()
+  }
+  isOpen.value = false
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="isOpen"
+      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.modalName]"
+      @click="handleOutsideClick"
+    >
+      <div class="modal-area" @click.stop>
+        <div class="modal-content">
+          <p
+            v-if="props.contentText"
+            v-dompurify-html="props.contentText"
+            class="content-text"
+          ></p>
+          <slot></slot>
+          <div class="content-btns">
+            <AtomsButtonVariant
+              @click="setButtonEvent(() => emit('confirmButtonEvent'))"
+            >
+              {{ props.confirmButtonText || '확인' }}
+            </AtomsButtonVariant>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.modal-area {
+  @apply max-w-[312px] p-6 bg-white rounded-[20px];
+}
+</style>

layers/components/blocks/modal/Confirm.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+interface props {
+  isShowDimmed?: boolean
+  contentText?: string
+  confirmButtonText?: string
+  cancelButtonText?: string
+  isOutsideClose?: boolean
+  modalName?: string
+}
+
+const props = withDefaults(defineProps<props>(), {
+  isShowDimmed: false,
+  isOutsideClose: false,
+})
+
+const emit = defineEmits(['cancelButtonEvent', 'confirmButtonEvent'])
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const setButtonEvent = (event?: () => void) => {
+  if (event) {
+    event()
+  }
+  isOpen.value = false
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="isOpen"
+      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.modalName]"
+      @click="handleOutsideClick"
+    >
+      <div class="modal-area" @click.stop>
+        <div class="modal-content">
+          <p
+            v-if="props.contentText"
+            v-dompurify-html="props.contentText"
+            class="content-text"
+          ></p>
+          <slot></slot>
+          <div class="content-btns">
+            <AtomsButtonVariant
+              variant="outlined"
+              @click="setButtonEvent(() => emit('cancelButtonEvent'))"
+            >
+              {{ props.cancelButtonText || '취소' }}
+            </AtomsButtonVariant>
+            <AtomsButtonVariant
+              @click="setButtonEvent(() => emit('confirmButtonEvent'))"
+            >
+              {{ props.confirmButtonText || '확인' }}
+            </AtomsButtonVariant>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.modal-area {
+  @apply max-w-[312px] p-6 bg-white rounded-[20px];
+}
+</style>

layers/components/blocks/modal/Layer.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface props {
+  isShowDimmed?: boolean
+  isOutsideClose?: boolean
+  modalName?: string
+  areaClass?: string
+  closeClass?: string
+}
+
+const props = withDefaults(defineProps<props>(), {
+  isShowDimmed: false,
+  isOutsideClose: false,
+})
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const handleCloseModal = () => {
+  isOpen.value = false
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    handleCloseModal()
+  }
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="isOpen"
+      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.modalName]"
+      @click="handleOutsideClick"
+    >
+      <div :class="['modal-area', props.areaClass]" @click.stop>
+        <div class="modal-content">
+          <slot></slot>
+        </div>
+        <button
+          type="button"
+          :class="['modal-close', props.closeClass]"
+          @click="handleCloseModal"
+        >
+          <span class="sr-only">close</span>
+          <AtomsIconsCloseLine size="24" color="#333333" />
+        </button>
+      </div>
+    </div>
+  </Transition>
+</template>

layers/components/blocks/modal/YouTube.vue

@@ -1,19 +1,61 @@
+<script setup lang="ts">
+import { getYouTubeEmbedUrl } from '#layers/utils/youtube'
+
+interface Props {
+  youtubeUrl: string
+  isOutsideClose?: boolean
+  modalName?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  youtubeUrl: '',
+  isOutsideClose: false,
+})
+
+const emit = defineEmits(['closeButtonEvent'])
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const embedUrl = computed(() => {
+  return getYouTubeEmbedUrl(props.youtubeUrl)
+})
+
+const handleCloseModal = () => {
+  isOpen.value = false
+  emit('closeButtonEvent')
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isOpen.value) {
+    handleCloseModal()
+  }
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    handleCloseModal()
+  }
+}
+
+// 키보드 이벤트 리스너 등록/해제
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
 <template>
-  <Transition
-    enter-active-class="transition duration-300 ease-out"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="transition duration-200 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
+  <Transition name="fade">
     <div
       v-if="isOpen"
       class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
-      @click="handleBackdropClick"
+      :class="props.modalName"
+      @click="handleOutsideClick"
     >
       <div
-        v-if="isOpen"
         class="relative mx-4 my-4"
         style="
           width: min(896px, 90vw, calc((90vh - 2rem) * 16 / 9));
@@ -23,11 +65,7 @@
       >
         <!-- 헤더 -->
         <div class="flex justify-end mb-3 md:mb-4">
-          <button
-            class="text-white rounded-full transition-colors"
-            aria-label="모달 닫기"
-            @click="closeModal"
-          >
+          <button type="button" @click="handleCloseModal">
             <AtomsIconsCloseLine />
           </button>
         </div>
@@ -48,61 +86,3 @@
     </div>
   </Transition>
 </template>
-
-<script setup lang="ts">
-import { getYouTubeEmbedUrl } from '#layers/utils/youtube'
-
-interface Props {
-  isOpen: boolean
-  youtubeUrl: string
-  title?: string
-  description?: string
-  closeOnBackdrop?: boolean
-}
-
-interface Emits {
-  (e: 'closeButtonEvent'): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isOpen: false,
-  youtubeUrl: '',
-  title: '',
-  description: '',
-  closeOnBackdrop: true,
-})
-
-const emit = defineEmits<Emits>()
-
-const embedUrl = computed(() => {
-  return getYouTubeEmbedUrl(props.youtubeUrl)
-})
-
-// ESC 키로 모달 닫기
-const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Escape' && props.isOpen) {
-    closeModal()
-  }
-}
-
-// 배경 클릭으로 모달 닫기
-const handleBackdropClick = () => {
-  if (props.closeOnBackdrop) {
-    closeModal()
-  }
-}
-
-// 모달 닫기 함수
-const closeModal = () => {
-  emit('closeButtonEvent')
-}
-
-// 키보드 이벤트 리스너 등록/해제
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
-})
-</script>

layers/components/blocks/slide/CenterFocus.vue

@@ -125,19 +125,27 @@ const handleMoved = (
   width: var(--banner-width-mo);
   height: var(--banner-height-mo-active);
   margin-right: var(--banner-gap-mo);
+  opacity: 0.5;
 }
 .center-highlight:deep(.splide__slide) .slide-inner {
   width: var(--banner-width-mo);
   height: var(--banner-height-mo);
+  opacity: 0.5;
 }
 .center-highlight:deep(.splide__slide.is-active) {
   width: var(--banner-width-mo-container);
+  opacity: 1;
 }
 .center-highlight:deep(.splide__slide.is-active) .slide-inner {
   width: var(--banner-width-mo-active);
   height: var(--banner-height-mo-active);
+  opacity: 1;
   transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }
+.center-highlight:deep(.splide__slide.is-next),
+.center-highlight:deep(.splide__slide.is-prev) {
+  opacity: 1;
+}
 
 /* PC 스타일 */
 @media (min-width: 1024px) {

layers/components/blocks/slide/Thumbnail.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { Splide, SplideSlide } from '@splidejs/vue-splide'
-import { getFirstGroup, isTypeVideo } from '#layers/utils/dataUtil'
-import { getMediaSrc, getYouTubeEmbedUrl } from '#layers/utils/youtube'
+import { getComponentGroup, isTypeVideo } from '#layers/utils/dataUtil'
+import {
+  getMediaSrc,
+  getYouTubeEmbedUrl,
+  getMediaImgSrc,
+} from '#layers/utils/youtube'
 import type { Splide as SplideType, Options } from '@splidejs/splide'
 import type {
-  PageDataResourceGroups,
+  PageDataTemplateComponentSet,
   PageDataResourceGroup,
 } from '#layers/types/api/pageData'
 
 interface Props {
-  slideData: { media: PageDataResourceGroups; set_order: number }[]
+  slideData: PageDataTemplateComponentSet[]
   videoPlay?: PageDataResourceGroup
   arrows?: boolean
   pagination?: boolean
@@ -19,6 +23,9 @@ interface Props {
 
 const props = defineProps<Props>()
 
+let mainInst: SplideType | null = null
+let thumbsInst: SplideType | null = null
+
 const mainRef = ref<InstanceType<typeof Splide> | null>(null)
 const thumbsRef = ref<InstanceType<typeof Splide> | null>(null)
 const playingSlideIndex = ref<number | null>(null)
@@ -33,6 +40,7 @@ const mainOptions = computed<Options>(() => ({
   pagination: false,
   drag: false,
 }))
+
 const thumbOptions = computed<Options>(() => ({
   type: 'slide',
   rewind: true,
@@ -51,39 +59,46 @@ const thumbOptions = computed<Options>(() => ({
   },
 }))
 
-const isPassVideo = (groups: PageDataResourceGroups, index: number) => {
-  const firstGroup = getFirstGroup(groups)
-  return (
-    firstGroup &&
-    isTypeVideo(firstGroup?.resource_type) &&
-    index !== playingSlideIndex.value
-  )
+const getMediaComponent = (item: PageDataTemplateComponentSet) => {
+  return getComponentGroup(item, 'media')
+}
+
+const getMediaImgSrcFromItem = (item: PageDataTemplateComponentSet) => {
+  const mediaComponent = getMediaComponent(item)
+  return mediaComponent ? getMediaImgSrc(mediaComponent) : ''
+}
+
+const getYouTubeEmbedUrlFromMedia = (item: PageDataTemplateComponentSet) => {
+  const mediaComponent = getMediaComponent(item)
+  if (!mediaComponent) return ''
+  const mediaSrc = getMediaSrc(mediaComponent)
+  return mediaSrc ? getYouTubeEmbedUrl(mediaSrc, true) : ''
+}
+
+const isPassVideo = (item: PageDataTemplateComponentSet, index: number) => {
+  const mediaComponent = getMediaComponent(item)
+  const isNotPlaying = index !== playingSlideIndex.value
+  const isVideoType =
+    mediaComponent && isTypeVideo(mediaComponent?.resource_type)
+
+  return isVideoType && isNotPlaying
 }
 
 const handleVideoClick = (index: number) => {
   playingSlideIndex.value = index
 }
 
-const getYouTubeEmbedUrlFromMedia = (
-  resourceGroups: PageDataResourceGroup[]
-) => {
-  const resourceGroup = getFirstGroup(resourceGroups)
-  const mediaSrc = getMediaSrc(resourceGroup)
-  return mediaSrc ? getYouTubeEmbedUrl(mediaSrc, true) : ''
+const stopVideo = () => {
+  playingSlideIndex.value = null
 }
 
-let mainInst: SplideType | null = null
-let thumbsInst: SplideType | null = null
-
 onMounted(() => {
   mainInst = mainRef.value?.splide ?? null
   thumbsInst = thumbsRef.value?.splide ?? null
+
   if (mainInst && thumbsInst) {
     mainInst.sync(thumbsInst)
-
-    mainInst.on('moved', () => {
-      playingSlideIndex.value = null
-    })
+    mainInst.on('moved', stopVideo)
   }
 })
 
@@ -103,21 +118,21 @@ onBeforeUnmount(() => {
         class="main-slide"
       >
         <img
-          :src="getMediaImgSrc(item.media)"
+          :src="getMediaImgSrcFromItem(item)"
           alt="main image"
           class="slide-image"
           :class="{ 'opacity-0': playingSlideIndex === index }"
         />
         <AtomsButtonPlay
-          v-if="isPassVideo(item.media, index)"
+          v-if="isPassVideo(item, index)"
           :resources-data="videoPlay"
           class="btn-play"
           @click="handleVideoClick(index)"
         />
         <iframe
           v-if="playingSlideIndex === index"
-          :src="getYouTubeEmbedUrlFromMedia(item.media)"
-          class="absolute top-0 left-0 w-full h-full"
+          :src="getYouTubeEmbedUrlFromMedia(item)"
+          class="video-iframe"
           frameborder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowfullscreen
@@ -133,7 +148,7 @@ onBeforeUnmount(() => {
         class="thumbnail-slide"
       >
         <img
-          :src="getMediaImgSrc(item.media)"
+          :src="getMediaImgSrcFromItem(item)"
           alt="thumbnail image"
           class="slide-image"
         />
@@ -143,8 +158,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-/* 비디오 iframe 전환 애니메이션 */
-
 .thumbnail-carousel {
   @apply w-full md:max-w-[944px];
 }
@@ -161,6 +174,9 @@ onBeforeUnmount(() => {
 .btn-play {
   @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
 }
+.video-iframe {
+  @apply absolute top-0 left-0 w-full h-full;
+}
 
 .thumbnail-splide {
   @apply overflow-hidden flex justify-center w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:mx-0 md:px-[120px] md:mt-[28px];