feat. alert, confirm 모달 추가

layers/components/atoms/Button/Modal.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ButtonVariant } from '#layers/types/components/button'
+
+interface props {
+  variant?: ButtonVariant
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<props>(), {
+  variant: 'filled',
+  disabled: false,
+})
+</script>
+
+<template>
+  <button :class="['btn-modal', props.variant]" :disabled="props.disabled">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.btn-modal {
+  @apply relative w-full py-[14px] px-5 text-sm font-medium rounded-lg
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-black/10 before:rounded-lg before:transition-all before:duration-300 before:ease-in-out;
+}
+
+.btn-modal.filled {
+  @apply bg-[var(--primary)] text-[var(--text-secondary)]
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-lg after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
+  hover:after:opacity-20;
+}
+
+.btn-modal.outlined {
+  @apply bg-white text-[#333333]
+  hover:before:border-[#999];
+}
+
+.btn-modal:disabled {
+  @apply cursor-default bg-[#EBEBEB] text-[#999]
+  before:border-[#D9D9D9]
+  after:hidden
+  hover:before:border-[#D9D9D9];
+}
+</style>

layers/components/blocks/modal/Alert.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+interface props {
+  isShowDimmed?: boolean
+  contentText?: string
+  confirmButtonText?: string
+  isOutsideClose?: boolean
+  className?: string
+}
+
+const props = withDefaults(defineProps<props>(), {
+  isShowDimmed: false,
+  isOutsideClose: true,
+})
+
+const emit = defineEmits(['confirmButtonEvent'])
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const setButtonEvent = (event?: () => void | void) => {
+  if (typeof event === 'function') {
+    return event()
+  }
+  isOpen.value = false
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <Transition name="opacity-on">
+    <div
+      v-if="isOpen"
+      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.className]"
+      @click="handleOutsideClick"
+    >
+      <div class="modal-area" @click.stop>
+        <div class="modal-content">
+          <p
+            v-if="props.contentText"
+            v-dompurify-html="props.contentText"
+            class="content-text"
+          ></p>
+          <slot></slot>
+          <div class="content-btns">
+            <AtomsButtonModal
+              @click="setButtonEvent(() => emit('confirmButtonEvent'))"
+            >
+              {{ props.confirmButtonText || '확인' }}
+            </AtomsButtonModal>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>

layers/components/blocks/modal/Confirm.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+interface props {
+  isShowDimmed?: boolean
+  contentText?: string
+  confirmButtonText?: string
+  cancelButtonText?: string
+  isOutsideClose?: boolean
+  className?: string
+}
+
+const props = withDefaults(defineProps<props>(), {
+  isShowDimmed: false,
+  isOutsideClose: true,
+})
+
+const emit = defineEmits(['cancelButtonEvent', 'confirmButtonEvent'])
+
+const isOpen = defineModel<boolean>('isOpen', { default: false })
+
+const setButtonEvent = (event: () => void | void) => {
+  if (event) {
+    return event()
+  }
+  isOpen.value = false
+}
+
+const handleOutsideClick = () => {
+  if (props.isOutsideClose) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <Transition name="opacity-on">
+    <div
+      v-if="isOpen"
+      :class="['modal-wrap', { dimmed: props.isShowDimmed }, props.className]"
+      @click="handleOutsideClick"
+    >
+      <div class="modal-area" @click.stop>
+        <div class="modal-content">
+          <p
+            v-if="props.contentText"
+            v-dompurify-html="props.contentText"
+            class="content-text"
+          ></p>
+          <slot></slot>
+          <div class="content-btns">
+            <AtomsButtonModal
+              variant="outlined"
+              @click="setButtonEvent(() => emit('cancelButtonEvent'))"
+            >
+              {{ props.cancelButtonText || '취소' }}
+            </AtomsButtonModal>
+            <AtomsButtonModal
+              @click="setButtonEvent(() => emit('confirmButtonEvent'))"
+            >
+              {{ props.confirmButtonText || '확인' }}
+            </AtomsButtonModal>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>

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>