fix. YouTube, Content 컴포넌트 수정

layers/components/blocks/modal/Content.vue

@@ -1,38 +1,30 @@
 <script setup lang="ts">
-import type { ContentParams } from '#layers/types/components/modal'
-
 interface TabItem {
   title: string
   desc: string
 }
 
-const props = withDefaults(defineProps<ContentParams>(), {
-  isOutsideClose: false,
-  contentTitle: '',
-  tabActiveIndex: 0,
-  tabInfo: () => [],
-})
-
 const modalStore = useModalStore()
 const breakpoints = useResponsiveBreakpoints()
 
-const isOpen = defineModel<boolean>('isOpen', { default: false })
-const currentTab = ref<number>(props.tabActiveIndex)
+const { content } = modalStore
+
+const currentTab = ref<number>(content.storeTabActiveIndex)
 
 const responsiveTransition = computed(() =>
   breakpoints.value.isXs ? 'slide-up' : 'fade'
 )
-const tabInfo = computed<TabItem[]>(() => props.tabInfo ?? [])
+const tabInfo = computed<TabItem[]>(() => content.storeTabInfo ?? [])
 const isTab = computed(() => tabInfo.value.length >= 2)
 
 const isVisible = (index: number) => currentTab.value === index
 
 const handleCloseModal = () => {
-  isOpen.value = false
+  content.storeIsOpen = false
 }
 
 const handleOutsideClick = () => {
-  if (props.isOutsideClose) handleCloseModal()
+  if (content.storeIsOutsideClose) handleCloseModal()
 }
 
 const handleUpdateTab = (tabNumber: number) => {
@@ -41,25 +33,33 @@ const handleUpdateTab = (tabNumber: number) => {
   }
 }
 
-watch(isOpen, newVal => {
-  if (newVal) {
-    modalStore.handleControlDimmed(true)
-  } else {
-    modalStore.handleControlDimmed(false)
+watch(
+  () => content.storeIsOpen,
+  (newVal: boolean) => {
+    if (newVal) {
+      modalStore.handleControlDimmed(true)
+    } else {
+      modalStore.handleControlDimmed(false)
+      currentTab.value = 0
+    }
   }
-})
+)
 </script>
 
 <template>
   <Transition :name="responsiveTransition">
     <div
-      v-if="isOpen"
-      :class="['modal-wrap', { 'is-open': isOpen }, props.modalName]"
+      v-if="content.storeIsOpen"
+      :class="[
+        'modal-wrap',
+        { 'is-open': content.storeIsOpen },
+        content.storeModalName,
+      ]"
       @click="handleOutsideClick"
     >
       <div class="modal-area" @click.stop>
         <div class="modal-header">
-          <strong class="title">{{ props.contentTitle }}</strong>
+          <strong class="title">{{ content.storeContentTitle }}</strong>
 
           <button type="button" class="modal-close" @click="handleCloseModal">
             <span class="sr-only">close</span>

layers/components/blocks/modal/YouTube.vue

@@ -1,35 +1,28 @@
 <script setup lang="ts">
 import { getYouTubeEmbedUrl } from '@/layers/utils/youtubeUtil'
-import type { YoutubeParams } from '#layers/types/components/modal'
 
-const props = withDefaults(defineProps<YoutubeParams>(), {
-  youtubeUrl: '',
-  isOutsideClose: false,
-})
+const modalStore = useModalStore()
+const scrollStore = useScrollStore()
 
-const emit = defineEmits(['closeButtonEvent'])
-
-const isOpen = defineModel<boolean>('isOpen', { default: false })
+const { youtube } = modalStore
 
 const embedUrl = computed(() => {
-  return getYouTubeEmbedUrl(props.youtubeUrl)
+  return getYouTubeEmbedUrl(youtube.storeYoutubeUrl)
 })
 
-const handleCloseModal = () => {
-  isOpen.value = false
-  emit('closeButtonEvent')
+const handleClose = () => {
+  youtube.storeIsOpen = false
+  scrollStore.controlScrollLock(false)
 }
 
 const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Escape' && isOpen.value) {
-    handleCloseModal()
+  if (event.key === 'Escape' && youtube.storeIsOpen) {
+    handleClose()
   }
 }
 
 const handleOutsideClick = () => {
-  if (props.isOutsideClose) {
-    handleCloseModal()
-  }
+  if (youtube.storeIsOutsideClose) handleClose()
 }
 
 // 키보드 이벤트 리스너 등록/해제
@@ -45,9 +38,8 @@ onUnmounted(() => {
 <template>
   <Transition name="fade">
     <div
-      v-if="isOpen"
-      class="modal-wrap dimmed overflow-hidden flex items-center justify-center"
-      :class="props.modalName"
+      v-if="youtube.storeIsOpen"
+      :class="['modal-wrap', 'dimmed', youtube.storeModalName]"
       @click="handleOutsideClick"
     >
       <div
@@ -60,7 +52,7 @@ onUnmounted(() => {
       >
         <!-- 헤더 -->
         <div class="flex justify-end mb-3 md:mb-4">
-          <button type="button" @click="handleCloseModal">
+          <button type="button" @click="handleClose">
             <AtomsIconsCloseLine />
           </button>
         </div>
@@ -81,3 +73,9 @@ onUnmounted(() => {
     </div>
   </Transition>
 </template>
+
+<style scoped>
+.modal-wrap {
+  @apply overflow-hidden flex items-center justify-center;
+}
+</style>

layers/stores/useModalStore.ts

@@ -104,14 +104,6 @@ export const useModalStore = defineStore('modalStore', () => {
     scrollStore.controlScrollLock(true)
   }
 
-  const handleResetYoutube = () => {
-    youtube.storeIsOpen.value = false
-    youtube.storeYoutubeUrl.value = ''
-    youtube.storeIsOutsideClose.value = false
-    youtube.storeModalName.value = ''
-    scrollStore.controlScrollLock(false)
-  }
-
   // toast ------------------
   const toast = {
     storeIsOpen: ref(false),
@@ -152,7 +144,7 @@ export const useModalStore = defineStore('modalStore', () => {
     modalName = '',
     contentTitle,
     tabInfo,
-    tabActiveIndex,
+    tabActiveIndex = 0,
   }: ContentParams) => {
     content.storeIsOpen.value = true
     content.storeModalName.value = modalName
@@ -171,7 +163,6 @@ export const useModalStore = defineStore('modalStore', () => {
     handleOpenAlert,
     handleOpenConfirm,
     handleOpenYoutube,
-    handleResetYoutube,
     handleOpenToast,
     handleOpenContent,
     handleControlDimmed,