useScrollY Intersection Observer로 리팩토링

[TK-moon]

Intersection Observer의 threshold 기능으로 최적화 가능해 보임.
IOS Safari에서 스크롤 시 주소창 높이가 변경되는데, 높이가 변경될 경우 Intersection Observer의 callback이 실행되지 않는 버그 존재
위 버그 해결되면 아래 로직으로 실행 가능

// initialScrollAnimation: function () {
//   let thresholdSets = []
//   for (let i = 0; i <= 1.0; i += 0.01) thresholdSets.push(i)

//   useIntersectionObserver(this.section_ref, { threshold: thresholdSets }, (entries) => {
//     entries.forEach((entry) => {
//       if (!this.animatorRef || !this.active) return

//       if (this.RAF_timeout) {
//         cancelAnimationFrame(this.RAF_timeout)
//         this.RAF_timeout = undefined
//       }

//       const animatorRef = this.animatorRef
//       if (!this.section_ref || !animatorRef) return

//       this.RAF_timeout = requestAnimationFrame(() => {
//         const scroll_percentage = entry.intersectionRatio * 100

//         const is_out_of_scroll_range = 0 >= scroll_percentage || scroll_percentage >= 100
//         if (is_out_of_scroll_range) {
//           this.in_range = false
//           if (scroll_percentage <= 0) {
//             return this.initializeStartAnimation()
//           } else if (scroll_percentage >= 100) {
//             return this.initializeEndAnimation()
//           }
//         }
//         this.in_range = true

//         this.animation_timeline_data.animation_functions.forEach((v) => {
//           v(scroll_percentage, animatorRef)
//         })
//       })
//     })
//   })
// },