feat. 게임시작 로직 적용

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>

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>

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>

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>