feat. 이벤트 네비게이션 추가

layers/components/blocks/StoveGnbNew.vue

@@ -46,10 +46,12 @@ onMounted(() => {
         mini: true,
         layout: 'wide',
         fixed: false,
-      }
+      },
     }
-    mountedInstance = (window as any).StoveGnb.mount('#stove-wrap', stoveGnbOptions)
-
+    mountedInstance = (window as any).StoveGnb.mount(
+      '#stove-wrap',
+      stoveGnbOptions
+    )
   }
 })
 
@@ -61,22 +63,17 @@ onBeforeUnmount(() => {
 })
 </script>
 <template>
-  <div class="stove-gnb-new">
-    <div id="stove-wrap" class="relative z-[5]" />
-  </div>
+  <div id="stove-wrap" class="relative h-[48px] z-[5]" />
 </template>
 
 <style scoped>
-.stove-gnb-new {
-  @apply h-[48px];
-}
 [data-theme='light'] {
-  .stove-gnb-new {
+  #stove-wrap {
     @apply bg-white;
   }
 }
 [data-theme='dark'] {
-  .stove-gnb-new {
+  #stove-wrap {
     @apply bg-black;
   }
 }

layers/components/blocks/UtileContainer.vue

@@ -1,29 +1,20 @@
 <script setup lang="ts">
 interface Props {
-  parentRef: HTMLElement | null
   isShowTopBtn: boolean
   isShowSnsBtn: boolean
 }
 
-const { height: viewportH } = useWindowSize()
-
 const props = withDefaults(defineProps<Props>(), {
   isShowTopBtn: false,
   isShowSnsBtn: false,
 })
 
-const parentEl = toRef(props, 'parentRef')
-const { bottom: parentBottom } = useElementBounding(parentEl)
-
-const pinToParent = computed(() => {
-  if (!parentBottom.value) return false
-  return parentBottom.value <= viewportH.value
-})
+const pinToMain = inject('pinToMain')
 </script>
 
 <template>
   <ClientOnly>
-    <div :class="['utile-container', { 'is-fixed': pinToParent }]">
+    <div :class="['utile-container', { 'is-stop': pinToMain }]">
       <AtomsButtonScrollTop v-if="props.isShowTopBtn" />
       <AtomsButtonSns v-if="props.isShowSnsBtn" />
     </div>
@@ -35,7 +26,7 @@ const pinToParent = computed(() => {
   @apply fixed flex flex-col z-[100]
   bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
 }
-.utile-container.is-fixed {
+.utile-container.is-stop {
   @apply absolute;
 }
 </style>

layers/components/blocks/modal/Toast.vue

@@ -1,39 +1,13 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-
-interface Props {
-  isOpen: boolean
-  contentText: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isOpen: false,
-})
-
-const emit = defineEmits(['close'])
-
-const isVisible = ref(false)
-
-watch(
-  () => props.isOpen,
-  newVal => {
-    if (newVal) {
-      isVisible.value = true
-
-      setTimeout(() => {
-        isVisible.value = false
-        emit('close')
-      }, 2000)
-    }
-  }
-)
+const modalStore = useModalStore()
+const { toast } = modalStore
 </script>
 
 <template>
   <Transition name="fade">
-    <div v-if="isVisible" class="toast-container">
+    <div v-if="toast.storeIsOpen" class="toast-container">
       <p class="toast-text">
-        {{ contentText }}
+        {{ toast.storeContentText }}
       </p>
     </div>
   </Transition>