observeMutations로 HTML Element의 변화를 감지하자..

import { onMounted, onUnmounted, ref, type Ref } from 'vue'

const useBottomScroll = (nodeId: string): Ref<boolean> => {
  const isBottom = ref<boolean>(false)
  let observer: MutationObserver

  const checkScroll = (): void => {
    const currentScrollVal = window.scrollY + window.innerHeight
    const bottomScrollVal = document.body.offsetHeight

    if (currentScrollVal >= bottomScrollVal) {
      isBottom.value = true
    } else {
      isBottom.value = false
    }

    console.log('isBottom', isBottom.value)
  }

  const observeMutations = (nodeId: string): void => {
    const targetNode: HTMLElement | null = document.getElementById(nodeId)
    if (targetNode === null) return

    observer = new MutationObserver(checkScroll)
    observer.observe(targetNode, { childList: true, subtree: true })
  }

  onMounted(() => {
    window.addEventListener('resize', checkScroll)
    window.addEventListener('scroll', checkScroll)
    setTimeout(() => {
      checkScroll()
      observeMutations(nodeId)
    }, 100)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', checkScroll)
    window.removeEventListener('scroll', checkScroll)
    observer.disconnect()
  })

  return isBottom
}

export default useBottomScroll