feat. alert, confirm 모달 추가

layers/stores/useModalStore.ts

@@ -4,7 +4,6 @@ import type {
   YoutubeParams,
 } from '#layers/types/components/modal'
 
-// [TODO] 모달 상태 관리 개선
 const createModalState = () => ({
   storeIsOpen: ref(false),
   storeIsShowDimmed: ref(false),
@@ -13,20 +12,8 @@ const createModalState = () => ({
   storeContentText: ref(''),
   storeConfirmButtonText: ref(''),
   storeConfirmButtonEvent: skipHydrate(ref<() => void>(() => {})),
-  storeCloseButtonEvent: skipHydrate(ref<() => void>(() => {})),
 })
 
-const resetModalState = (type: ReturnType<typeof createModalState>) => {
-  type.storeIsOpen.value = false
-  type.storeIsShowDimmed.value = false
-  type.storeClassName.value = ''
-  type.storeIsOutsideClose.value = true
-  type.storeContentText.value = ''
-  type.storeConfirmButtonText.value = ''
-  type.storeConfirmButtonEvent.value = () => {}
-  type.storeCloseButtonEvent.value = () => {}
-}
-
 export const useModalStore = defineStore('modalStore', () => {
   const scrollStore = useScrollStore()
 
@@ -41,8 +28,7 @@ export const useModalStore = defineStore('modalStore', () => {
     isOutsideClose = true,
     contentText,
     confirmButtonText = '',
-    confirmButtonEvent,
-    closeButtonEvent,
+    confirmButtonEvent = () => {},
   }: DialogParams) => {
     alert.storeIsOpen.value = true
     alert.storeIsShowDimmed.value = isShowDimmed
@@ -50,12 +36,7 @@ export const useModalStore = defineStore('modalStore', () => {
     alert.storeContentText.value = contentText
     alert.storeConfirmButtonText.value = confirmButtonText
     alert.storeIsOutsideClose.value = isOutsideClose
-    alert.storeConfirmButtonEvent.value = confirmButtonEvent ?? handleResetAlert
-    alert.storeCloseButtonEvent.value = closeButtonEvent ?? handleResetAlert
-  }
-
-  const handleResetAlert = () => {
-    resetModalState(alert)
+    alert.storeConfirmButtonEvent.value = confirmButtonEvent
   }
 
   // confirm ------------------
@@ -72,9 +53,8 @@ export const useModalStore = defineStore('modalStore', () => {
     contentText,
     confirmButtonText = '',
     cancelButtonText = '',
-    confirmButtonEvent,
-    cancelButtonEvent,
-    closeButtonEvent,
+    confirmButtonEvent = () => {},
+    cancelButtonEvent = () => {},
   }: DialogParams) => {
     confirm.storeIsOpen.value = true
     confirm.storeIsShowDimmed.value = isShowDimmed
@@ -83,29 +63,26 @@ export const useModalStore = defineStore('modalStore', () => {
     confirm.storeConfirmButtonText.value = confirmButtonText
     confirm.storeCancelButtonText.value = cancelButtonText
     confirm.storeIsOutsideClose.value = isOutsideClose
-    confirm.storeConfirmButtonEvent.value =
-      confirmButtonEvent ?? handleResetConfirm
-    confirm.storeCancelButtonEvent.value =
-      cancelButtonEvent ?? handleResetConfirm
-    confirm.storeCloseButtonEvent.value = closeButtonEvent ?? handleResetConfirm
-  }
-
-  const handleResetConfirm = () => {
-    resetModalState(confirm)
-    confirm.storeCancelButtonText.value = ''
-    confirm.storeCancelButtonEvent.value = () => {}
+    confirm.storeConfirmButtonEvent.value = confirmButtonEvent
+    confirm.storeCancelButtonEvent.value = cancelButtonEvent
   }
 
   // youtube ------------------
   const youtube = {
     storeIsOpen: ref(false),
     storeYoutubeUrl: ref(''),
+    storeIsOutsideClose: ref(true),
     storeClassName: ref(''),
   }
 
-  const handleOpenYoutube = ({ youtubeUrl, className = '' }: YoutubeParams) => {
+  const handleOpenYoutube = ({
+    youtubeUrl,
+    isOutsideClose = true,
+    className = '',
+  }: YoutubeParams) => {
     youtube.storeIsOpen.value = true
     youtube.storeYoutubeUrl.value = youtubeUrl
+    youtube.storeIsOutsideClose.value = isOutsideClose
     youtube.storeClassName.value = className
     scrollStore.controlScrollLock(true)
   }
@@ -113,6 +90,7 @@ export const useModalStore = defineStore('modalStore', () => {
   const handleResetYoutube = () => {
     youtube.storeIsOpen.value = false
     youtube.storeYoutubeUrl.value = ''
+    youtube.storeIsOutsideClose.value = true
     youtube.storeClassName.value = ''
     scrollStore.controlScrollLock(false)
   }
@@ -123,8 +101,6 @@ export const useModalStore = defineStore('modalStore', () => {
     youtube,
     handleOpenAlert,
     handleOpenConfirm,
-    handleResetAlert,
-    handleResetConfirm,
     handleOpenYoutube,
     handleResetYoutube,
   }