feat. 게임시작 로직 적용

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>