feat. 게임시작 로직 적용

2025-10-16 17:09:07 +09:00
parent 6dff3787b6
commit 7b72319377
34 changed files with 334 additions and 282 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -145,7 +145,7 @@ onBeforeUnmount(() => {
    v-model:is-open="youtube.storeIsOpen"
    :youtube-url="youtube.storeYoutubeUrl"
    :is-outside-close="youtube.storeIsOutsideClose"
-    :class-name="youtube.storeClassName"
+    :modal-name="youtube.storeModalName"
    @close-button-event="handleResetYoutube"
  />
  <BlocksModalConfirm
@@ -155,7 +155,7 @@ onBeforeUnmount(() => {
    :confirm-button-text="confirm.storeConfirmButtonText"
    :cancel-button-text="confirm.storeCancelButtonText"
    :is-outside-close="confirm.storeIsOutsideClose"
-    :class-name="confirm.storeClassName"
+    :modal-name="confirm.storeModalName"
    @confirm-button-event="confirm.storeConfirmButtonEvent"
    @cancel-button-event="confirm.storeCancelButtonEvent"
  />
@@ -165,7 +165,7 @@ onBeforeUnmount(() => {
    :content-text="alert.storeContentText"
    :confirm-button-text="alert.storeConfirmButtonText"
    :is-outside-close="alert.storeIsOutsideClose"
-    :class-name="alert.storeClassName"
+    :modal-name="alert.storeModalName"
    @confirm-button-event="alert.storeConfirmButtonEvent"
  />

--- a/layers/assets/css/app.css
+++ b/layers/assets/css/app.css
@@ -1,5 +1,6 @@
@import './base/_theme.css';
@import './base/_reset.css';
+@import './base/_transition.css';

@import './components/_button.css';
@import './components/_layout.css';
--- a/layers/assets/css/base/_transition.css
+++ b/layers/assets/css/base/_transition.css
@@ -0,0 +1,19 @@
+/* page-fade */
+.page-fade-enter-active,
+.page-fade-leave-active {
+  transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1);
+}
+.page-fade-enter-from,
+.page-fade-leave-to {
+  opacity: 0;
+}
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
--- a/layers/assets/css/components/_modal.css
+++ b/layers/assets/css/components/_modal.css
@@ -9,7 +9,7 @@
  }

  .modal-area {
-    @apply relative w-full max-w-[312px] m-auto p-6 bg-white rounded-[20px];
+    @apply relative w-full m-auto bg-white;
  }

  .content-btns {
--- a/layers/assets/css/components/_splide.css
+++ b/layers/assets/css/components/_splide.css
@@ -10,11 +10,11 @@

  .splide-pagination-bullet {
    @apply relative w-2 h-2 rounded-full bg-[var(--primary)] opacity-100 md:w-3 md:h-3
-    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-[rgba(0,0,0,0.5)] after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0;
+    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-[rgba(0,0,0,0.5)] after:transition-opacity after:duration-300 after:ease-in-out after:opacity-100;
  }

  .splide-pagination-bullet.is-active {
-    @apply after:opacity-100;
+    @apply after:opacity-0;
  }
  .splide-arrow {
    @apply hidden absolute top-1/2 w-[48px] h-[48px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5] md:block
--- a/layers/components/atoms/icons/ArrowDownFill.vue
+++ b/layers/components/atoms/icons/ArrowDownFill.vue
@@ -2,13 +2,11 @@
 interface Props {
  size?: number | string
  color?: string
-  className?: string
 }

 withDefaults(defineProps<Props>(), {
  size: 12,
  color: 'var(--foreground-gray-500)',
-  className: '',
 })
 </script>

@@ -19,7 +17,6 @@ withDefaults(defineProps<Props>(), {
    :height="size"
    viewBox="0 0 12 12"
    :fill="color"
-    :class="className"
  >
    <path
      d="M5.29499 7.715L2.39999 4.875C2.07499 4.555 2.29999 4 2.75999 4L9.23499 4C9.69499 4 9.91999 4.555 9.59499 4.875L6.69999 7.715C6.30999 8.095 5.68999 8.095 5.29999 7.715H5.29499Z"
--- a/layers/components/atoms/icons/CloseLine.vue
+++ b/layers/components/atoms/icons/CloseLine.vue
@@ -2,13 +2,11 @@
 interface Props {
  size?: number | string
  color?: string
-  className?: string
 }

 withDefaults(defineProps<Props>(), {
  size: 32,
  color: '#EBEBEB',
-  className: '',
 })
 </script>

@@ -19,7 +17,6 @@ withDefaults(defineProps<Props>(), {
    :height="size"
    viewBox="0 0 32 32"
    fill="none"
-    :class="className"
  >
    <path
      d="M26.2768 8.10947C26.7975 7.58877 26.7975 6.74455 26.2768 6.22385C25.7561 5.70315 24.9119 5.70315 24.3912 6.22385L16.0007 14.6144L7.61013 6.22385C7.08943 5.70315 6.24521 5.70315 5.72451 6.22385C5.20381 6.74455 5.20381 7.58877 5.72451 8.10947L14.115 16.5L5.72451 24.8905C5.20381 25.4112 5.20381 26.2554 5.72451 26.7761C6.24521 27.2968 7.08943 27.2968 7.61013 26.7761L16.0007 18.3856L24.3912 26.7761C24.9119 27.2968 25.7561 27.2968 26.2768 26.7761C26.7975 26.2554 26.7975 25.4112 26.2768 24.8905L17.8863 16.5L26.2768 8.10947Z"
--- a/layers/components/atoms/icons/DownloadLine.vue
+++ b/layers/components/atoms/icons/DownloadLine.vue
@@ -2,13 +2,11 @@
 interface Props {
  size?: number | string
  color?: string
-  className?: string
 }

 withDefaults(defineProps<Props>(), {
  size: 24,
  color: '#EBEBEB',
-  className: '',
 })
 </script>

@@ -19,7 +17,6 @@ withDefaults(defineProps<Props>(), {
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
-    :class="className"
  >
    <path
      d="M10.75 3.25L10.75 12.2322L6.88391 8.36611C6.39576 7.87796 5.6043 7.87796 5.11615 8.36611C4.62799 8.85427 4.62799 9.64573 5.11615 10.1339L11.1161 16.1339C11.3506 16.3683 11.6685 16.5 12 16.5C12.3316 16.5 12.6495 16.3683 12.8839 16.1339L18.8839 10.1339C19.3721 9.64573 19.3721 8.85427 18.8839 8.36611C18.3958 7.87796 17.6043 7.87796 17.1161 8.36611L13.25 12.2322L13.25 3.25C13.25 2.55964 12.6904 2 12 2C11.3097 2 10.75 2.55964 10.75 3.25Z"
--- a/layers/components/atoms/icons/LongArrowRightLine.vue
+++ b/layers/components/atoms/icons/LongArrowRightLine.vue
@@ -2,13 +2,11 @@
 interface Props {
  size?: number | string
  color?: string
-  className?: string
 }

 withDefaults(defineProps<Props>(), {
  size: 24,
  color: '#EBEBEB',
-  className: '',
 })
 </script>

@@ -19,7 +17,6 @@ withDefaults(defineProps<Props>(), {
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
-    :class="className"
  >
    <path
      d="M11.7929 18.2929C11.4024 18.6834 11.4024 19.3166 11.7929 19.7071C12.1834 20.0976 12.8166 20.0976 13.2071 19.7071L20.2071 12.7071C20.5976 12.3166 20.5976 11.6834 20.2071 11.2929L13.2071 4.29289C12.8166 3.90237 12.1834 3.90237 11.7929 4.29289C11.4024 4.68342 11.4024 5.31658 11.7929 5.70711L17.0858 11L4.5 11C3.94771 11 3.5 11.4477 3.5 12C3.5 12.5523 3.94771 13 4.5 13L17.0858 13L11.7929 18.2929Z"
--- a/layers/components/atoms/icons/MenuBoldLine.vue
+++ b/layers/components/atoms/icons/MenuBoldLine.vue
@@ -2,13 +2,11 @@
 interface Props {
  size?: number | string
  color?: string
-  className?: string
 }

 withDefaults(defineProps<Props>(), {
  size: 24,
  color: 'var(--foreground-reversal)',
-  className: '',
 })
 </script>

@@ -19,7 +17,6 @@ withDefaults(defineProps<Props>(), {
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
-    :class="className"
  >
    <path
      d="M20 16C20.7594 16 21.375 16.6156 21.375 17.375C21.375 18.1344 20.7594 18.75 20 18.75H4C3.24061 18.75 2.625 18.1344 2.625 17.375C2.625 16.6156 3.24061 16 4 16H20ZM20 10.5C20.7594 10.5 21.375 11.1156 21.375 11.875C21.375 12.6344 20.7594 13.25 20 13.25H4C3.24061 13.25 2.625 12.6344 2.625 11.875C2.625 11.1156 3.24061 10.5 4 10.5H20ZM20 5C20.7594 5 21.375 5.61561 21.375 6.375C21.375 7.13439 20.7594 7.75 20 7.75H4C3.24061 7.75 2.625 7.13439 2.625 6.375C2.625 5.61561 3.24061 5 4 5H20Z"
--- a/layers/components/atoms/icons/MenuCloseLine.vue
+++ b/layers/components/atoms/icons/MenuCloseLine.vue
@@ -2,13 +2,11 @@
 interface Props {
  size?: number | string
  color?: string
-  className?: string
 }

 withDefaults(defineProps<Props>(), {
  size: 16,
  color: 'var(--foreground-reversal)',
-  className: '',
 })
 </script>

@@ -19,7 +17,6 @@ withDefaults(defineProps<Props>(), {
    :height="size"
    viewBox="0 0 16 16"
    fill="none"
-    :class="className"
  >
    <path
      d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L8 6.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292894 0.292893C-0.0976304 0.683417 -0.0976304 1.31658 0.292894 1.70711L6.58579 8L0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L8 9.41421L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L9.41421 8L15.7071 1.70711Z"
--- a/layers/components/atoms/icons/OptionHorizontalFill.vue
+++ b/layers/components/atoms/icons/OptionHorizontalFill.vue
@@ -2,13 +2,11 @@
 interface Props {
  size?: number | string
  color?: string
-  className?: string
 }

 withDefaults(defineProps<Props>(), {
  size: 24,
  color: 'var(--foreground-reversal)',
-  className: '',
 })
 </script>

@@ -19,7 +17,6 @@ withDefaults(defineProps<Props>(), {
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
-    :class="className"
  >
    <path
      d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z"
--- a/layers/components/atoms/icons/StarFill.vue
+++ b/layers/components/atoms/icons/StarFill.vue
@@ -2,13 +2,11 @@
 interface Props {
  size?: number | string
  color?: string
-  className?: string
 }

 withDefaults(defineProps<Props>(), {
  size: 12,
  color: '#FD3886',
-  className: '',
 })
 </script>

@@ -19,7 +17,6 @@ withDefaults(defineProps<Props>(), {
    :height="size"
    viewBox="0 0 12 12"
    fill="none"
-    :class="className"
  >
    <path
      d="M6.37364 3.24966C6.22658 2.91678 5.77344 2.91678 5.62638 3.24966L4.95508 4.76916L3.36352 4.96618C3.01484 5.00934 2.87482 5.4593 3.1326 5.7082L4.30928 6.84431L3.99693 8.48558C3.9285 8.84514 4.2951 9.12323 4.60148 8.94417L6.00001 8.12684L7.39853 8.94417C7.70491 9.12323 8.07151 8.84514 8.00308 8.48558L7.69074 6.84431L8.8674 5.70819C9.12518 5.4593 8.98515 5.00934 8.63648 4.96618L7.04492 4.76916L6.37364 3.24966Z"
--- a/layers/components/atoms/icons/WebLinkLine.vue
+++ b/layers/components/atoms/icons/WebLinkLine.vue
@@ -2,13 +2,11 @@
 interface Props {
  size?: number | string
  color?: string
-  className?: string
 }

 withDefaults(defineProps<Props>(), {
  size: 16,
  color: 'var(--foreground-gray-500)',
-  className: '',
 })
 </script>

@@ -19,7 +17,6 @@ withDefaults(defineProps<Props>(), {
    :height="size"
    viewBox="0 0 16 16"
    fill="none"
-    :class="className"
  >
    <path
      d="M3.63636 3.33333C3.469 3.33333 3.33333 3.469 3.33333 3.63636L3.33333 12.3636C3.33333 12.531 3.469 12.6667 3.63636 12.6667H12.3636C12.531 12.6667 12.6667 12.531 12.6667 12.3636V9.93939C12.6667 9.5712 12.9651 9.27273 13.3333 9.27273C13.7015 9.27273 14 9.5712 14 9.93939V12.3636C14 13.2674 13.2674 14 12.3636 14H3.63636C2.73262 14 2 13.2674 2 12.3636L2 3.63636C2 2.73263 2.73262 2 3.63636 2L6.06061 2C6.4288 2 6.72727 2.29848 6.72727 2.66667C6.72727 3.03486 6.4288 3.33333 6.06061 3.33333H3.63636Z"
--- a/layers/components/blocks/ButtonLuncher.vue
+++ b/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>
--- a/layers/components/blocks/modal/Alert.vue
+++ b/layers/components/blocks/modal/Alert.vue
@@ -4,12 +4,12 @@ interface props {
  contentText?: string
  confirmButtonText?: string
  isOutsideClose?: boolean
-  className?: string
+  modalName?: string
 }

 const props = withDefaults(defineProps<props>(), {
  isShowDimmed: false,
-  isOutsideClose: true,
+  isOutsideClose: false,
 })

 const emit = defineEmits(['confirmButtonEvent'])
@@ -31,10 +31,10 @@ const handleOutsideClick = () => {
 </script>

 <template>
-  <Transition name="opacity-on">
+  <Transition name="fade">
    <div
      v-if="isOpen"
-      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.className]"
+      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.modalName]"
      @click="handleOutsideClick"
    >
      <div class="modal-area" @click.stop>
@@ -57,3 +57,9 @@ const handleOutsideClick = () => {
    </div>
  </Transition>
 </template>
+
+<style scoped>
+.modal-area {
+  @apply max-w-[312px] p-6 bg-white rounded-[20px];
+}
+</style>
--- a/layers/components/blocks/modal/Confirm.vue
+++ b/layers/components/blocks/modal/Confirm.vue
@@ -5,21 +5,21 @@ interface props {
  confirmButtonText?: string
  cancelButtonText?: string
  isOutsideClose?: boolean
-  className?: string
+  modalName?: string
 }

 const props = withDefaults(defineProps<props>(), {
  isShowDimmed: false,
-  isOutsideClose: true,
+  isOutsideClose: false,
 })

 const emit = defineEmits(['cancelButtonEvent', 'confirmButtonEvent'])

 const isOpen = defineModel<boolean>('isOpen', { default: false })

-const setButtonEvent = (event: () => void | void) => {
+const setButtonEvent = (event?: () => void) => {
  if (event) {
-    return event()
+    event()
  }
  isOpen.value = false
 }
@@ -32,10 +32,10 @@ const handleOutsideClick = () => {
 </script>

 <template>
-  <Transition name="opacity-on">
+  <Transition name="fade">
    <div
      v-if="isOpen"
-      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.className]"
+      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.modalName]"
      @click="handleOutsideClick"
    >
      <div class="modal-area" @click.stop>
@@ -64,3 +64,9 @@ const handleOutsideClick = () => {
    </div>
  </Transition>
 </template>
+
+<style scoped>
+.modal-area {
+  @apply max-w-[312px] p-6 bg-white rounded-[20px];
+}
+</style>
--- a/layers/components/blocks/modal/Layer.vue
+++ b/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>
--- a/layers/components/blocks/modal/YouTube.vue
+++ b/layers/components/blocks/modal/YouTube.vue
@@ -4,12 +4,12 @@ import { getYouTubeEmbedUrl } from '#layers/utils/youtube'
 interface Props {
  youtubeUrl: string
  isOutsideClose?: boolean
-  className?: string
+  modalName?: string
 }

 const props = withDefaults(defineProps<Props>(), {
  youtubeUrl: '',
-  isOutsideClose: true,
+  isOutsideClose: false,
 })

 const emit = defineEmits(['closeButtonEvent'])
@@ -48,18 +48,11 @@ onUnmounted(() => {
 </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"
-      :class="props.className"
+      :class="props.modalName"
      @click="handleOutsideClick"
    >
      <div
@@ -72,11 +65,7 @@ onUnmounted(() => {
      >
        <!-- 헤더 -->
        <div class="flex justify-end mb-3 md:mb-4">
-          <button
-            class="text-white rounded-full transition-colors"
-            aria-label="모달 닫기"
-            @click="handleCloseModal"
-          >
+          <button type="button" @click="handleCloseModal">
            <AtomsIconsCloseLine />
          </button>
        </div>
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -59,7 +59,7 @@ const handleMenuClose = () => (isMenuOpen.value = false)

 // navAreaRef의 넓이를 구하는 함수
 const calculateNavWidth = () => {
-  if (!navAreaRef.value) return 0
+  if (!navAreaRef.value || !gnbData) return 0

  const navAreaWidth = navAreaRef.value.offsetWidth
  const moreWidth = 72 // 더보기 버튼 넓이 + 마진
@@ -68,7 +68,7 @@ const calculateNavWidth = () => {

 // startRef의 넓이를 구하는 함수
 const calculateStartWidth = () => {
-  if (!startRef.value) return 0
+  if (!startRef.value || !gnbData) return 0

  const startWidth = startRef.value.offsetWidth
  const headerRightPadding = 40 // 헤더 오른쪽 마진
@@ -98,7 +98,7 @@ const calculateOfficialItemWidths = () => {

 // 오버플로우 계산 함수
 const calculateOverflow = () => {
-  if (!navAreaRef.value) return
+  if (!navAreaRef.value || !startRef.value) return

  const totalNavWidth = navWidth.value + startWidth.value
  const screenWidth = width.value
@@ -129,7 +129,10 @@ const calculateOverflow = () => {
  }
 }

-onClickOutside(navAreaRef, () => (isMenuOpen.value = false))
+const stopClickOutside = onClickOutside(
+  navAreaRef,
+  () => (isMenuOpen.value = false)
+)

 // 화면 크기 변경 시 오버플로우 재계산
 watch(width, () => {
@@ -147,6 +150,12 @@ onMounted(() => {
    }
  })
 })
+
+onBeforeUnmount(() => {
+  if (stopClickOutside) {
+    stopClickOutside()
+  }
+})
 </script>

 <template>
@@ -171,7 +180,7 @@ onMounted(() => {
      >
        <div ref="navAreaRef" class="nav-area">
          <div class="nav-logo">
-            <AtomsLocaleLink to="/brand">
+            <AtomsLocaleLink to="/brand" @click="handleMenuClose">
              <img
                :src="gnbData?.bi_path"
                :alt="gameData?.game_name"
@@ -283,9 +292,9 @@ onMounted(() => {
            </div>
          </nav>
          <div ref="startRef" class="btn-start">
-            <AtomsButton size="small" class="w-full md:w-auto">
+            <BlocksButtonLuncher class="w-full md:w-auto">
              게임 시작
-            </AtomsButton>
+            </BlocksButtonLuncher>
          </div>
          <button class="btn-close" @click="handleMenuClose">
            <AtomsIconsMenuCloseLine class="mx-auto" />
@@ -341,7 +350,7 @@ onMounted(() => {
 }

 .nav-area {
-  @apply flex flex-col w-[360px] bg-theme-foreground-10 translate-x-[-100%]
+  @apply flex flex-col w-[100vw] max-w-[360px] min-w-[320px] bg-theme-foreground-10 translate-x-[-100%]
  md:inline-flex md:flex-row md:w-auto md:h-full md:pl-[40px] md:items-center md:bg-transparent md:transform-none;
 }

--- a/layers/composables/useGameStart.ts
+++ b/layers/composables/useGameStart.ts
@@ -7,132 +7,45 @@ export const useCheckGameStart = () => {
  const modalStore = useModalStore()
  const runtimeConfig = useRuntimeConfig()

-  const disabledDoubleClick = ref(false) // 연속 호출 클릭 방지
-  const isCheckLauncher = ref(false) // 런처 실행 로딩 상태
+  const isProcessing = ref(false) // 연속 클릭 방지
+  const isShowCheckLauncher = ref(false) // 런처 실행 로딩 표시
  const isShowDownloadLauncher = ref(false) // 런처 다운로드 표시
  const customerService = { title: '확인', link: 'https://www.google.com' } //[TODO] 고객센터 링크

  // 로그인 모달 표시
  const showLoginModal = () => {
-    modalStore.handleOpenAlert({
+    modalStore.handleOpenConfirm({
      contentText: '로그인이 필요합니다.',
      confirmButtonText: '스토브 로그인',
-      className: 'modal-login',
-
+      modalName: 'modal-login',
      confirmButtonEvent: () => {
        csrGoStoveLogin()
      },
-
-      closeButtonEvent: () => {
-        disabledDoubleClick.value = false
-      },
    })
  }

-  // 모든 런처 버튼 비활성화
-  const setLauncherButtonDisabled = (disabled: boolean) => {
-    const launcherButton = document.querySelectorAll(
-      '#btn-launcher'
-    ) as NodeListOf<HTMLButtonElement>
-    launcherButton.forEach(button => {
-      button.disabled = disabled
-    })
-  }
-
-  // 런처 실행 로딩 시작 UI 처리
-  const startLoadingForLauncher = () => {
-    if (import.meta.client) {
-      setLauncherButtonDisabled(true)
-      isCheckLauncher.value = true
-
-      setTimeout(() => {
-        if (isCheckLauncher.value) {
-          isShowDownloadLauncher.value = true
-        }
-      }, 5000)
-    }
-  }
-
-  // 런처 실행 로딩 종료 UI 처리
-  const stopLoadingForLauncher = () => {
-    if (import.meta.client) {
-      setLauncherButtonDisabled(false)
-      isCheckLauncher.value = false
-      isShowDownloadLauncher.value = false
-    }
-  }
-
-  // 런처 호출
-  const runLauncher = async () => {
-    // 클라이언트에서만 실행
-    if (!import.meta.client) return
-
-    const gameDataStore = useGameDataStore()
-    const { gameData } = storeToRefs(gameDataStore)
-
-    const stoveGameId = gameData.value?.game_id || ''
-    const accessTokenSub = useCookie('SUAT')
-    const nationCookie = useCookie('NNTO').value
-    const localeCookie = useCookie('LOCALE').value
-    const isAgent = true
-
-    disabledDoubleClick.value = true
-    window.stoveJsService = window.stoveJsService || {}
-
-    // 토큰 유효성 체크
-    const { validateToken } = useTokenValidation()
-    const validateTokenResult = await validateToken(accessTokenSub.value || '')
-
-    if (validateTokenResult) {
-      startLoadingForLauncher()
-      window.stoveJsService.launcher
-        .run({
-          gameId: stoveGameId,
-          nation: nationCookie,
-          lang: localeCookie,
-          isSkipMaintenance: isAgent,
-        })
-        .then(() => {
-          // 런처 실행 성공 시 처리
-          stopLoadingForLauncher()
-        })
-        .catch((error: any) => {
-          // 런처 실행 실패시 처리
-          if (error.code !== 601) {
-            stopLoadingForLauncher()
-          }
-          errorHandler(error.code)
-        })
-        .finally(() => {
-          disabledDoubleClick.value = false
-        })
-    } else {
-      showLoginModal()
-    }
-  }
-
-  // PC 클라이언트 설치 전 (에러 처리)
+  // 에러 처리
  const errorHandler = (errorCode: number) => {
    switch (errorCode) {
      case 601: // PC 클라이언트 미설치
        break
      case 40101: // 로그인 정보 확인 중 오류가 발생했습니다. 재로그인 후 다시 이용해 주세요.
-        modalStore.handleOpenAlert({
+        modalStore.handleOpenConfirm({
          contentText:
            '로그인 정보 확인 중 오류가 발생했습니다. 재로그인 후 다시 이용해 주세요.',
          confirmButtonText: '스토브 로그인',
-          className: 'modal-login',
+          modalName: 'modal-login',
          confirmButtonEvent: () => {
            csrGoStoveLogin()
          },
        })
        break
      case 40103: // 로그인 정보가 만료되었습니다. 재로그인 후 다시 이용해 주세요.
-        modalStore.handleOpenAlert({
+        modalStore.handleOpenConfirm({
          contentText:
            '로그인 정보가 만료되었습니다. 재로그인 후 다시 이용해 주세요.',
          confirmButtonText: '스토브 로그인',
-          className: 'modal-login',
+          modalName: 'modal-login',
          confirmButtonEvent: () => {
            csrGoStoveLogin()
          },
@@ -159,29 +72,102 @@ export const useCheckGameStart = () => {
    }
  }

+  // 런처 실행 로딩 시작 UI 처리
+  const startLoadingForLauncher = () => {
+    if (import.meta.client) {
+      isShowCheckLauncher.value = true
+      isShowDownloadLauncher.value = false
+
+      setTimeout(() => {
+        if (isShowCheckLauncher.value) {
+          isShowDownloadLauncher.value = true
+        }
+      }, 5000)
+    }
+  }
+
+  // 런처 실행 로딩 종료 UI 처리
+  const stopLoadingForLauncher = () => {
+    if (import.meta.client) {
+      isShowCheckLauncher.value = false
+      isShowDownloadLauncher.value = false
+    }
+  }
+
+  // 런처 호출
+  const runLauncher = async () => {
+    // 클라이언트에서만 실행
+    if (!import.meta.client) return
+
+    const gameDataStore = useGameDataStore()
+    const { gameData } = storeToRefs(gameDataStore)
+
+    const accessTokenSub = useCookie('SUAT')
+    const stoveGameId = gameData.value?.game_id || ''
+    const nationCookie = useCookie('NNTO').value
+    const localeCookie = useCookie('LOCALE').value
+
+    window.stoveJsService = window.stoveJsService || {}
+
+    // 토큰 유효성 체크
+    const { validateToken } = useTokenValidation()
+    const validateTokenResult = await validateToken(accessTokenSub.value || '')
+
+    // 토큰 유효성 체크 실패 시 로그인 모달 표시
+    if (!validateTokenResult) {
+      showLoginModal()
+      isProcessing.value = false
+      return
+    }
+
+    // 런처 실행 로딩 시작
+    startLoadingForLauncher()
+    window.stoveJsService.launcher
+      .run({
+        gameId: stoveGameId,
+        nation: nationCookie,
+        lang: localeCookie,
+        isSkipMaintenance: true,
+      })
+      .then(() => {
+        // 런처 실행 성공 시 처리
+        stopLoadingForLauncher()
+      })
+      .catch((error: any) => {
+        // 런처 실행 실패시 처리
+        if (error.code !== 601) {
+          stopLoadingForLauncher()
+        }
+        errorHandler(error.code)
+      })
+      .finally(() => {
+        isProcessing.value = false
+      })
+  }
+
  // 디바운스 설정
  const debounceHandler = useDebounceFn(runLauncher, 500)

  // 런처 상태 검사
  const validateLauncher = () => {
-    if (!disabledDoubleClick.value) {
-      debounceHandler()
-    }
+    if (isProcessing.value) return
+
+    isProcessing.value = true
+    debounceHandler()
  }

  // 런처 다운로드 함수
  const downloadLauncher = () => {
    const stoveClientDownloadUrl = runtimeConfig.public.stoveClientDownloadUrl
    location.href = stoveClientDownloadUrl
-    disabledDoubleClick.value = false
+    isProcessing.value = false
  }

  return {
-    disabledDoubleClick, // 연속 클릭 방지
-    isCheckLauncher, // 런처 실행 로딩 상태
+    isProcessing, // 연속 클릭 방지
+    isShowCheckLauncher, // 런처 실행 로딩 표시
    isShowDownloadLauncher, // 런처 다운로드 표시
    validateLauncher, // 런처 검사 함수
    downloadLauncher, // 런처 실행 함수
-    stopLoadingForLauncher, // 런처 실행 로딩 종료 함수
  }
 }
--- a/layers/stores/useModalStore.ts
+++ b/layers/stores/useModalStore.ts
@@ -7,11 +7,11 @@ import type {
 const createModalState = () => ({
  storeIsOpen: ref(false),
  storeIsShowDimmed: ref(false),
-  storeClassName: ref(''),
-  storeIsOutsideClose: ref(true),
+  storeModalName: ref(''),
+  storeIsOutsideClose: ref(false),
  storeContentText: ref(''),
  storeConfirmButtonText: ref(''),
-  storeConfirmButtonEvent: skipHydrate(ref<() => void>(() => {})),
+  storeConfirmButtonEvent: skipHydrate(ref<() => void>(undefined)),
 })

 export const useModalStore = defineStore('modalStore', () => {
@@ -24,15 +24,15 @@ export const useModalStore = defineStore('modalStore', () => {

  const handleOpenAlert = ({
    isShowDimmed = false,
-    className = '',
-    isOutsideClose = true,
+    modalName = '',
+    isOutsideClose = false,
    contentText,
    confirmButtonText = '',
-    confirmButtonEvent = () => {},
+    confirmButtonEvent = undefined,
  }: DialogParams) => {
    alert.storeIsOpen.value = true
    alert.storeIsShowDimmed.value = isShowDimmed
-    alert.storeClassName.value = className
+    alert.storeModalName.value = modalName
    alert.storeContentText.value = contentText
    alert.storeConfirmButtonText.value = confirmButtonText
    alert.storeIsOutsideClose.value = isOutsideClose
@@ -43,22 +43,22 @@ export const useModalStore = defineStore('modalStore', () => {
  const confirm = {
    ...createModalState(),
    storeCancelButtonText: ref(''),
-    storeCancelButtonEvent: skipHydrate(ref<() => void>(() => {})),
+    storeCancelButtonEvent: skipHydrate(ref<() => void>(undefined)),
  }

  const handleOpenConfirm = ({
    isShowDimmed = false,
-    className = '',
-    isOutsideClose = true,
+    modalName = '',
+    isOutsideClose = false,
    contentText,
    confirmButtonText = '',
    cancelButtonText = '',
-    confirmButtonEvent = () => {},
-    cancelButtonEvent = () => {},
+    confirmButtonEvent = undefined,
+    cancelButtonEvent = undefined,
  }: DialogParams) => {
    confirm.storeIsOpen.value = true
    confirm.storeIsShowDimmed.value = isShowDimmed
-    confirm.storeClassName.value = className
+    confirm.storeModalName.value = modalName
    confirm.storeContentText.value = contentText
    confirm.storeConfirmButtonText.value = confirmButtonText
    confirm.storeCancelButtonText.value = cancelButtonText
@@ -71,27 +71,27 @@ export const useModalStore = defineStore('modalStore', () => {
  const youtube = {
    storeIsOpen: ref(false),
    storeYoutubeUrl: ref(''),
-    storeIsOutsideClose: ref(true),
-    storeClassName: ref(''),
+    storeIsOutsideClose: ref(false),
+    storeModalName: ref(''),
  }

  const handleOpenYoutube = ({
    youtubeUrl,
-    isOutsideClose = true,
-    className = '',
+    isOutsideClose = false,
+    modalName = '',
  }: YoutubeParams) => {
    youtube.storeIsOpen.value = true
    youtube.storeYoutubeUrl.value = youtubeUrl
    youtube.storeIsOutsideClose.value = isOutsideClose
-    youtube.storeClassName.value = className
+    youtube.storeModalName.value = modalName
    scrollStore.controlScrollLock(true)
  }

  const handleResetYoutube = () => {
    youtube.storeIsOpen.value = false
    youtube.storeYoutubeUrl.value = ''
-    youtube.storeIsOutsideClose.value = true
-    youtube.storeClassName.value = ''
+    youtube.storeIsOutsideClose.value = false
+    youtube.storeModalName.value = ''
    scrollStore.controlScrollLock(false)
  }

--- a/layers/types/components/modal.ts
+++ b/layers/types/components/modal.ts
@@ -1,6 +1,6 @@
 export interface DialogParams {
  isShowDimmed?: boolean
-  className?: string
+  modalName?: string
  isOutsideClose?: boolean
  contentText: string
  confirmButtonText?: string
@@ -13,5 +13,5 @@ export interface DialogParams {
 export interface YoutubeParams {
  youtubeUrl: string
  isOutsideClose?: boolean
-  className?: string
+  modalName?: string
 }
--- a/public/images/common/btn_system_chevron_next.svg
+++ b/public/images/common/btn_system_chevron_next.svg
@@ -1,20 +0,0 @@
-<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<foreignObject x="-26" y="-28" width="108" height="108"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_3300_15070_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3300_15070)" data-figma-bg-blur-radius="30">
-<path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z" fill="white" fill-opacity="0.1" shape-rendering="crispEdges"/>
-<path d="M28 2.5C40.9787 2.5 51.5 13.0213 51.5 26C51.5 38.9787 40.9787 49.5 28 49.5C15.0213 49.5 4.5 38.9787 4.5 26C4.5 13.0213 15.0213 2.5 28 2.5Z" stroke="white" stroke-opacity="0.06" shape-rendering="crispEdges"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2929 18.2929C23.9024 18.6834 23.9024 19.3166 24.2929 19.7071L30.5858 26L24.2929 32.2929C23.9024 32.6834 23.9024 33.3166 24.2929 33.7071C24.6834 34.0976 25.3166 34.0976 25.7071 33.7071L32.7071 26.7071C33.0976 26.3166 33.0976 25.6834 32.7071 25.2929L25.7071 18.2929C25.3166 17.9024 24.6834 17.9024 24.2929 18.2929Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_d_3300_15070" x="-26" y="-28" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_15070"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_15070" result="shape"/>
-</filter>
-<clipPath id="bgblur_0_3300_15070_clip_path" transform="translate(26 28)"><path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z"/>
-</clipPath></defs>
-</svg>
--- a/public/images/common/btn_system_chevron_prev.svg
+++ b/public/images/common/btn_system_chevron_prev.svg
@@ -1,20 +0,0 @@
-<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<foreignObject x="-26" y="-28" width="108" height="108"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_3300_15069_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3300_15069)" data-figma-bg-blur-radius="30">
-<path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z" fill="white" fill-opacity="0.1" shape-rendering="crispEdges"/>
-<path d="M28 2.5C40.9787 2.5 51.5 13.0213 51.5 26C51.5 38.9787 40.9787 49.5 28 49.5C15.0213 49.5 4.5 38.9787 4.5 26C4.5 13.0213 15.0213 2.5 28 2.5Z" stroke="white" stroke-opacity="0.06" shape-rendering="crispEdges"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M31.7071 18.2929C32.0976 18.6834 32.0976 19.3166 31.7071 19.7071L25.4142 26L31.7071 32.2929C32.0976 32.6834 32.0976 33.3166 31.7071 33.7071C31.3166 34.0976 30.6834 34.0976 30.2929 33.7071L23.2929 26.7071C22.9024 26.3166 22.9024 25.6834 23.2929 25.2929L30.2929 18.2929C30.6834 17.9024 31.3166 17.9024 31.7071 18.2929Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_d_3300_15069" x="-26" y="-28" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_15069"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_15069" result="shape"/>
-</filter>
-<clipPath id="bgblur_0_3300_15069_clip_path" transform="translate(26 28)"><path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z"/>
-</clipPath></defs>
-</svg>
--- a/public/images/common/btn_system_top.svg
+++ b/public/images/common/btn_system_top.svg
@@ -1,21 +0,0 @@
-<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<foreignObject x="-26" y="-28" width="108" height="108"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_3300_15073_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3300_15073)" data-figma-bg-blur-radius="30">
-<path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z" fill="white" fill-opacity="0.1" shape-rendering="crispEdges"/>
-<path d="M28 2.5C40.9787 2.5 51.5 13.0213 51.5 26C51.5 38.9787 40.9787 49.5 28 49.5C15.0213 49.5 4.5 38.9787 4.5 26C4.5 13.0213 15.0213 2.5 28 2.5Z" stroke="white" stroke-opacity="0.06" shape-rendering="crispEdges"/>
-<path d="M29 23.4142L33.2929 27.7071C33.6834 28.0976 34.3166 28.0976 34.7071 27.7071C35.0976 27.3166 35.0976 26.6834 34.7071 26.2929L28.7078 20.2936C28.5289 20.1143 28.2822 20.0026 28.0094 20C28.0063 20 28.0032 20 28 20C27.9968 20 27.9937 20 27.9906 20C27.7269 20.0025 27.4877 20.1069 27.3104 20.2758C27.3045 20.2815 27.2987 20.2871 27.2929 20.2929L21.2929 26.2929C20.9024 26.6834 20.9024 27.3166 21.2929 27.7071C21.6834 28.0976 22.3166 28.0976 22.7071 27.7071L27 23.4142L27 34C27 34.5523 27.4477 35 28 35C28.5523 35 29 34.5523 29 34L29 23.4142Z" fill="white" fill-opacity="0.5"/>
-<path d="M35.5 18C35.5 18.5523 35.0523 19 34.5 19L21.5 19C20.9477 19 20.5 18.5523 20.5 18C20.5 17.4477 20.9477 17 21.5 17L34.5 17C35.0523 17 35.5 17.4477 35.5 18Z" fill="white" fill-opacity="0.5"/>
-</g>
-<defs>
-<filter id="filter0_d_3300_15073" x="-26" y="-28" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_15073"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_15073" result="shape"/>
-</filter>
-<clipPath id="bgblur_0_3300_15073_clip_path" transform="translate(26 28)"><path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z"/>
-</clipPath></defs>
-</svg>
--- a/public/images/common/ic-v2-control-long-arrow-right-line.svg
+++ b/public/images/common/ic-v2-control-long-arrow-right-line.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.7929 18.2929C11.4024 18.6834 11.4024 19.3166 11.7929 19.7071C12.1834 20.0976 12.8166 20.0976 13.2071 19.7071L20.2071 12.7071C20.5976 12.3166 20.5976 11.6834 20.2071 11.2929L13.2071 4.29289C12.8166 3.90237 12.1834 3.90237 11.7929 4.29289C11.4024 4.68342 11.4024 5.31658 11.7929 5.70711L17.0858 11L4.5 11C3.94771 11 3.5 11.4477 3.5 12C3.5 12.5523 3.94771 13 4.5 13L17.0858 13L11.7929 18.2929Z" fill="#EBEBEB"/>
-</svg>
--- a/public/images/common/ic-v2-control-web-link-line.svg
+++ b/public/images/common/ic-v2-control-web-link-line.svg
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.45455 5C5.20351 5 5 5.20351 5 5.45455V18.5455C5 18.7965 5.20351 19 5.45455 19H18.5455C18.7965 19 19 18.7965 19 18.5455V14.9091C19 14.3568 19.4477 13.9091 20 13.9091C20.5523 13.9091 21 14.3568 21 14.9091V18.5455C21 19.9011 19.9011 21 18.5455 21H5.45455C4.09894 21 3 19.9011 3 18.5455L3 5.45455C3 4.09894 4.09894 3 5.45455 3L9.09091 3C9.64319 3 10.0909 3.44772 10.0909 4C10.0909 4.55228 9.64319 5 9.09091 5H5.45455Z" fill="#EBEBEB"/>
-<path d="M19 6.41421V9.81818C19 10.3705 19.4477 10.8182 20 10.8182C20.5523 10.8182 21 10.3705 21 9.81818V4C21 3.44772 20.5523 3 20 3H14.1818C13.6295 3 13.1818 3.44772 13.1818 4C13.1818 4.55228 13.6295 5 14.1818 5L17.5858 5L10.9292 11.6565C10.5387 12.0471 10.5387 12.6802 10.9292 13.0708C11.3198 13.4613 11.9529 13.4613 12.3435 13.0708L19 6.41421Z" fill="#EBEBEB"/>
-</svg>
--- a/public/images/common/ic-v2-object-download-line.svg
+++ b/public/images/common/ic-v2-object-download-line.svg
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.75 3.25L10.75 12.2322L6.88391 8.36611C6.39576 7.87796 5.6043 7.87796 5.11615 8.36611C4.62799 8.85427 4.62799 9.64573 5.11615 10.1339L11.1161 16.1339C11.3506 16.3683 11.6685 16.5 12 16.5C12.3316 16.5 12.6495 16.3683 12.8839 16.1339L18.8839 10.1339C19.3721 9.64573 19.3721 8.85427 18.8839 8.36611C18.3958 7.87796 17.6043 7.87796 17.1161 8.36611L13.25 12.2322L13.25 3.25C13.25 2.55964 12.6904 2 12 2C11.3097 2 10.75 2.55964 10.75 3.25Z" fill="#EBEBEB"/>
-<path d="M20 21C20.6904 21 21.25 20.4404 21.25 19.75L21.25 17.75C21.25 17.0596 20.6904 16.5 20 16.5C19.3097 16.5 18.75 17.0596 18.75 17.75L18.75 18.5L5.25003 18.5L5.25003 17.75C5.25003 17.0596 4.69039 16.5 4.00003 16.5C3.30967 16.5 2.75003 17.0596 2.75003 17.75L2.75003 19.75C2.75003 20.4404 3.30967 21 4.00003 21L20 21Z" fill="#EBEBEB"/>
-</svg>
--- a/public/images/common/stove_loading_light.png
+++ b/public/images/common/stove_loading_light.png
--- a/public/images/sample/l9_common/btn_system_chevron_next.svg
+++ b/public/images/sample/l9_common/btn_system_chevron_next.svg
@@ -1,20 +1,20 @@
 <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<foreignObject x="-26" y="-28" width="108" height="108"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_3300_15076_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3300_15076)" data-figma-bg-blur-radius="30">
-<path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z" fill="black" fill-opacity="0.2" shape-rendering="crispEdges"/>
+<foreignObject x="-26" y="-28" width="108" height="108"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_3300_15070_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3300_15070)" data-figma-bg-blur-radius="30">
+<path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z" fill="white" fill-opacity="0.1" shape-rendering="crispEdges"/>
 <path d="M28 2.5C40.9787 2.5 51.5 13.0213 51.5 26C51.5 38.9787 40.9787 49.5 28 49.5C15.0213 49.5 4.5 38.9787 4.5 26C4.5 13.0213 15.0213 2.5 28 2.5Z" stroke="white" stroke-opacity="0.06" shape-rendering="crispEdges"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2929 18.2929C23.9024 18.6834 23.9024 19.3166 24.2929 19.7071L30.5858 26L24.2929 32.2929C23.9024 32.6834 23.9024 33.3166 24.2929 33.7071C24.6834 34.0976 25.3166 34.0976 25.7071 33.7071L32.7071 26.7071C33.0976 26.3166 33.0976 25.6834 32.7071 25.2929L25.7071 18.2929C25.3166 17.9024 24.6834 17.9024 24.2929 18.2929Z" fill="white"/>
 </g>
 <defs>
-<filter id="filter0_d_3300_15076" x="-26" y="-28" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_d_3300_15070" x="-26" y="-28" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="2"/>
 <feGaussianBlur stdDeviation="2"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_15076"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_15076" result="shape"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_15070"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_15070" result="shape"/>
 </filter>
-<clipPath id="bgblur_0_3300_15076_clip_path" transform="translate(26 28)"><path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z"/>
+<clipPath id="bgblur_0_3300_15070_clip_path" transform="translate(26 28)"><path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z"/>
 </clipPath></defs>
 </svg>
--- a/public/images/sample/l9_common/btn_system_chevron_prev.svg
+++ b/public/images/sample/l9_common/btn_system_chevron_prev.svg
@@ -1,20 +1,20 @@
 <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<foreignObject x="-26" y="-28" width="108" height="108"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_3300_15075_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3300_15075)" data-figma-bg-blur-radius="30">
-<path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z" fill="black" fill-opacity="0.2" shape-rendering="crispEdges"/>
+<foreignObject x="-26" y="-28" width="108" height="108"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_3300_15069_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3300_15069)" data-figma-bg-blur-radius="30">
+<path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z" fill="white" fill-opacity="0.1" shape-rendering="crispEdges"/>
 <path d="M28 2.5C40.9787 2.5 51.5 13.0213 51.5 26C51.5 38.9787 40.9787 49.5 28 49.5C15.0213 49.5 4.5 38.9787 4.5 26C4.5 13.0213 15.0213 2.5 28 2.5Z" stroke="white" stroke-opacity="0.06" shape-rendering="crispEdges"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M31.7071 18.2929C32.0976 18.6834 32.0976 19.3166 31.7071 19.7071L25.4142 26L31.7071 32.2929C32.0976 32.6834 32.0976 33.3166 31.7071 33.7071C31.3166 34.0976 30.6834 34.0976 30.2929 33.7071L23.2929 26.7071C22.9024 26.3166 22.9024 25.6834 23.2929 25.2929L30.2929 18.2929C30.6834 17.9024 31.3166 17.9024 31.7071 18.2929Z" fill="white"/>
 </g>
 <defs>
-<filter id="filter0_d_3300_15075" x="-26" y="-28" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_d_3300_15069" x="-26" y="-28" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="2"/>
 <feGaussianBlur stdDeviation="2"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_15075"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_15075" result="shape"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_15069"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_15069" result="shape"/>
 </filter>
-<clipPath id="bgblur_0_3300_15075_clip_path" transform="translate(26 28)"><path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z"/>
+<clipPath id="bgblur_0_3300_15069_clip_path" transform="translate(26 28)"><path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z"/>
 </clipPath></defs>
 </svg>
--- a/public/images/sample/l9_common/btn_system_top.png
+++ b/public/images/sample/l9_common/btn_system_top.png
--- a/public/images/sample/l9_common/btn_system_top.svg
+++ b/public/images/sample/l9_common/btn_system_top.svg
@@ -1,21 +1,21 @@
 <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<foreignObject x="-26" y="-28" width="108" height="108"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_3300_15079_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3300_15079)" data-figma-bg-blur-radius="30">
-<path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z" fill="black" fill-opacity="0.2" shape-rendering="crispEdges"/>
+<foreignObject x="-26" y="-28" width="108" height="108"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(15px);clip-path:url(#bgblur_0_3300_15073_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_3300_15073)" data-figma-bg-blur-radius="30">
+<path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z" fill="white" fill-opacity="0.1" shape-rendering="crispEdges"/>
 <path d="M28 2.5C40.9787 2.5 51.5 13.0213 51.5 26C51.5 38.9787 40.9787 49.5 28 49.5C15.0213 49.5 4.5 38.9787 4.5 26C4.5 13.0213 15.0213 2.5 28 2.5Z" stroke="white" stroke-opacity="0.06" shape-rendering="crispEdges"/>
 <path d="M29 23.4142L33.2929 27.7071C33.6834 28.0976 34.3166 28.0976 34.7071 27.7071C35.0976 27.3166 35.0976 26.6834 34.7071 26.2929L28.7078 20.2936C28.5289 20.1143 28.2822 20.0026 28.0094 20C28.0063 20 28.0032 20 28 20C27.9968 20 27.9937 20 27.9906 20C27.7269 20.0025 27.4877 20.1069 27.3104 20.2758C27.3045 20.2815 27.2987 20.2871 27.2929 20.2929L21.2929 26.2929C20.9024 26.6834 20.9024 27.3166 21.2929 27.7071C21.6834 28.0976 22.3166 28.0976 22.7071 27.7071L27 23.4142L27 34C27 34.5523 27.4477 35 28 35C28.5523 35 29 34.5523 29 34L29 23.4142Z" fill="white" fill-opacity="0.5"/>
 <path d="M35.5 18C35.5 18.5523 35.0523 19 34.5 19L21.5 19C20.9477 19 20.5 18.5523 20.5 18C20.5 17.4477 20.9477 17 21.5 17L34.5 17C35.0523 17 35.5 17.4477 35.5 18Z" fill="white" fill-opacity="0.5"/>
 </g>
 <defs>
-<filter id="filter0_d_3300_15079" x="-26" y="-28" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_d_3300_15073" x="-26" y="-28" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="2"/>
 <feGaussianBlur stdDeviation="2"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_15079"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_15079" result="shape"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3300_15073"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3300_15073" result="shape"/>
 </filter>
-<clipPath id="bgblur_0_3300_15079_clip_path" transform="translate(26 28)"><path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z"/>
+<clipPath id="bgblur_0_3300_15073_clip_path" transform="translate(26 28)"><path d="M4 26C4 12.7452 14.7452 2 28 2C41.2548 2 52 12.7452 52 26C52 39.2548 41.2548 50 28 50C14.7452 50 4 39.2548 4 26Z"/>
 </clipPath></defs>
 </svg>