web-temp/layers/stores/useModalStore.ts

import { skipHydrate } from 'pinia'
import type {
  DialogParams,
  YoutubeParams,
  ToastParams,
  ContentParams,
} from '#layers/types/components/modal'

const createModalState = () => ({
  storeIsOpen: ref(false),
  storeIsShowDimmed: ref(false),
  storeModalName: ref(''),
  storeIsOutsideClose: ref(false),
  storeContentText: ref(''),
  storeConfirmButtonText: ref(''),
  storeConfirmButtonEvent: skipHydrate(ref<() => void>(undefined)),
})

export const useModalStore = defineStore('modalStore', () => {
  // dimmed ------------------
  /**
   * @description 모달을 바디에서 컨트롤 필요 시 사용하는 함수입니다.
   * @param state - 모달 바디 상태
   */
  const handleControlDimmed = (state: boolean) => {
    if (!import.meta.client) return

    if (state) {
      document.body.classList.add('dimmed')
    } else {
      document.body.classList.remove('dimmed')
    }
  }

  // alert ------------------
  const alert = {
    ...createModalState(),
  }

  const handleOpenAlert = ({
    isShowDimmed = true,
    modalName = '',
    isOutsideClose = false,
    contentText,
    confirmButtonText = '',
    confirmButtonEvent = undefined,
  }: DialogParams) => {
    alert.storeIsOpen.value = true
    alert.storeIsShowDimmed.value = isShowDimmed
    alert.storeModalName.value = modalName
    alert.storeContentText.value = contentText
    alert.storeConfirmButtonText.value = confirmButtonText
    alert.storeIsOutsideClose.value = isOutsideClose
    alert.storeConfirmButtonEvent.value = confirmButtonEvent
  }

  // confirm ------------------
  const confirm = {
    ...createModalState(),
    storeCancelButtonText: ref(''),
    storeCancelButtonEvent: skipHydrate(ref<() => void>(undefined)),
  }

  const handleOpenConfirm = ({
    isShowDimmed = true,
    modalName = '',
    isOutsideClose = false,
    contentText,
    confirmButtonText = '',
    cancelButtonText = '',
    confirmButtonEvent = undefined,
    cancelButtonEvent = undefined,
  }: DialogParams) => {
    confirm.storeIsOpen.value = true
    confirm.storeIsShowDimmed.value = isShowDimmed
    confirm.storeModalName.value = modalName
    confirm.storeContentText.value = contentText
    confirm.storeConfirmButtonText.value = confirmButtonText
    confirm.storeCancelButtonText.value = cancelButtonText
    confirm.storeIsOutsideClose.value = isOutsideClose
    confirm.storeConfirmButtonEvent.value = confirmButtonEvent
    confirm.storeCancelButtonEvent.value = cancelButtonEvent
  }

  // youtube ------------------
  const youtube = {
    storeIsOpen: ref(false),
    storeYoutubeUrl: ref(''),
    storeIsOutsideClose: ref(false),
    storeModalName: ref(''),
  }

  const handleOpenYoutube = ({
    youtubeUrl,
    isOutsideClose = false,
    modalName = '',
  }: YoutubeParams) => {
    const scrollStore = useScrollStore()

    youtube.storeIsOpen.value = true
    youtube.storeYoutubeUrl.value = youtubeUrl
    youtube.storeIsOutsideClose.value = isOutsideClose
    youtube.storeModalName.value = modalName
    scrollStore.controlScrollLock(true)
  }

  // toast ------------------
  const toast = {
    storeIsOpen: ref(false),
    storeContentText: ref(''),
  }

  const toastTimeoutId = ref<ReturnType<typeof setTimeout> | null>(null)

  const handleOpenToast = ({ contentText, duration = 2000 }: ToastParams) => {
    // 이전 타이머가 있으면 정리
    if (toastTimeoutId.value) {
      clearTimeout(toastTimeoutId.value)
      toastTimeoutId.value = null
    }

    toast.storeIsOpen.value = true
    toast.storeContentText.value = contentText

    toastTimeoutId.value = setTimeout(() => {
      toast.storeIsOpen.value = false
      toast.storeContentText.value = ''
      toastTimeoutId.value = null
    }, duration)
  }

  // content ------------------
  const content = {
    storeIsOpen: ref(false),
    storeModalName: ref(''),
    storeIsOutsideClose: ref(false),
    storeContentTitle: ref(''),
    storeTabInfo: ref(null),
    storeTabActiveIndex: ref(0),
  }

  const handleOpenContent = ({
    isOutsideClose = false,
    modalName = '',
    contentTitle,
    tabInfo,
    tabActiveIndex = 0,
  }: ContentParams) => {
    content.storeIsOpen.value = true
    content.storeModalName.value = modalName
    content.storeIsOutsideClose.value = isOutsideClose
    content.storeContentTitle.value = contentTitle
    content.storeTabInfo.value = tabInfo
    content.storeTabActiveIndex.value = tabActiveIndex
  }

  const handleResetModalAll = () => {
    alert.storeIsOpen.value = false
    confirm.storeIsOpen.value = false
    youtube.storeIsOpen.value = false
    toast.storeIsOpen.value = false
    content.storeIsOpen.value = false
  }

  return {
    alert,
    confirm,
    youtube,
    toast,
    content,
    handleOpenAlert,
    handleOpenConfirm,
    handleOpenYoutube,
    handleOpenToast,
    handleOpenContent,
    handleControlDimmed,
    handleResetModalAll,
  }
})