fix. YouTube, Content 컴포넌트 수정

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>