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>