feat. 게임시작 로직 적용

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>