feat. alert, confirm 모달 추가

layers/components/blocks/modal/YouTube.vue

@@ -1,3 +1,52 @@
+<script setup lang="ts">
+import { getYouTubeEmbedUrl } from '#layers/utils/youtube'
+
+interface Props {
+  youtubeUrl: string
+  isOutsideClose?: boolean
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  youtubeUrl: '',
+  isOutsideClose: true,
+})
+
+const emit = defineEmits(['closeButtonEvent'])
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const embedUrl = computed(() => {
+  return getYouTubeEmbedUrl(props.youtubeUrl)
+})
+
+const handleCloseModal = () => {
+  isOpen.value = false
+  emit('closeButtonEvent')
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isOpen.value) {
+    handleCloseModal()
+  }
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    handleCloseModal()
+  }
+}
+
+// 키보드 이벤트 리스너 등록/해제
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
 <template>
   <Transition
     enter-active-class="transition duration-300 ease-out"
@@ -10,10 +59,10 @@
     <div
       v-if="isOpen"
       class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
-      @click="handleBackdropClick"
+      :class="props.className"
+      @click="handleOutsideClick"
     >
       <div
-        v-if="isOpen"
         class="relative mx-4 my-4"
         style="
           width: min(896px, 90vw, calc((90vh - 2rem) * 16 / 9));
@@ -26,7 +75,7 @@
           <button
             class="text-white rounded-full transition-colors"
             aria-label="모달 닫기"
-            @click="closeModal"
+            @click="handleCloseModal"
           >
             <AtomsIconsCloseLine />
           </button>
@@ -48,61 +97,3 @@
     </div>
   </Transition>
 </template>
-
-<script setup lang="ts">
-import { getYouTubeEmbedUrl } from '#layers/utils/youtube'
-
-interface Props {
-  isOpen: boolean
-  youtubeUrl: string
-  title?: string
-  description?: string
-  closeOnBackdrop?: boolean
-}
-
-interface Emits {
-  (e: 'closeButtonEvent'): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isOpen: false,
-  youtubeUrl: '',
-  title: '',
-  description: '',
-  closeOnBackdrop: true,
-})
-
-const emit = defineEmits<Emits>()
-
-const embedUrl = computed(() => {
-  return getYouTubeEmbedUrl(props.youtubeUrl)
-})
-
-// ESC 키로 모달 닫기
-const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Escape' && props.isOpen) {
-    closeModal()
-  }
-}
-
-// 배경 클릭으로 모달 닫기
-const handleBackdropClick = () => {
-  if (props.closeOnBackdrop) {
-    closeModal()
-  }
-}
-
-// 모달 닫기 함수
-const closeModal = () => {
-  emit('closeButtonEvent')
-}
-
-// 키보드 이벤트 리스너 등록/해제
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
-})
-</script>