[intersection-observer] deprecated된 intersection-observer 패키지를 제거합니다.

packages/tds-ui/package.json

@@ -46,13 +46,12 @@
     "@emotion/is-prop-valid": "^1.3.1",
     "@floating-ui/react": "^0.27.4",
     "@titicaca/content-utilities": "9.16.0",
-    "@titicaca/intersection-observer": "workspace:*",
-    "@titicaca/tds-ui": "workspace:*",
     "@titicaca/triple-fallback-action": "workspace:*",
     "@titicaca/view-utilities": "workspace:*",
     "@types/react-input-mask": "2.0.5",
     "react-compound-slider": "^3.4.0",
     "react-input-mask": "^2.0.4",
+    "react-intersection-observer": "^9.13.1",
     "react-roving-tabindex": "^3.2.0"
   },
   "devDependencies": {

packages/tds-ui/src/components/carousel/carousel-item.tsx

@@ -1,6 +1,6 @@
 import { MouseEventHandler, PropsWithChildren } from 'react'
 import { styled } from 'styled-components'
-import { StaticIntersectionObserver } from '@titicaca/intersection-observer'
+import { InView } from 'react-intersection-observer'
 
 import { CarouselSizes } from '../../commons'
 
@@ -47,16 +47,16 @@ export function CarouselItem({
   if (onImpress) {
     return (
       <Item onClick={onClick} size={size} {...props}>
-        <StaticIntersectionObserver
+        <InView
           threshold={threshold || 0.5}
-          onChange={({ isIntersecting }: { isIntersecting: boolean }) => {
-            if (isIntersecting) {
+          onChange={(inView) => {
+            if (inView) {
               onImpress()
             }
           }}
         >
-          <div>{children}</div>
-        </StaticIntersectionObserver>
+          {children}
+        </InView>
       </Item>
     )
   }

packages/tds-ui/src/components/image/optimized-img.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import { styled } from 'styled-components'
-import { StaticIntersectionObserver } from '@titicaca/intersection-observer'
+import { InView } from 'react-intersection-observer'
 import { generateImageUrl, Version, Quality } from '@titicaca/content-utilities'
 
 import { useImageState } from './context'
@@ -76,10 +76,8 @@ export function ImageOptimizedImg({
   const absolute = useContentAbsolute()
 
   const handleLazyLoad = useCallback(
-    (event: IntersectionObserverEntry, unobserve: () => void) => {
-      if (event.isIntersecting) {
-        unobserve()
-
+    (inView: boolean) => {
+      if (inView) {
         const srcSet = deviceSizes
           .sort((a, b) => a - b)
           .map(
@@ -97,7 +95,7 @@ export function ImageOptimizedImg({
           )
           .join(', ')
 
-        setIsLoad(event.isIntersecting)
+        setIsLoad(true)
 
         setImgAttributes((prev) => ({
           ...prev,
@@ -118,7 +116,7 @@ export function ImageOptimizedImg({
   )
 
   return (
-    <StaticIntersectionObserver rootMargin="200px" onChange={handleLazyLoad}>
+    <InView rootMargin="200px" triggerOnce onChange={handleLazyLoad}>
       {!isLoad ? (
         <Placeholder absolute={absolute} />
       ) : (
@@ -129,6 +127,6 @@ export function ImageOptimizedImg({
           absolute={absolute}
         />
       )}
-    </StaticIntersectionObserver>
+    </InView>
   )
 }

packages/tds-widget/package.json

@@ -46,7 +46,6 @@
     "@floating-ui/react": "^0.27.4",
     "@react-google-maps/api": "^2.20.6",
     "@titicaca/fetcher": "workspace:*",
-    "@titicaca/intersection-observer": "workspace:*",
     "@titicaca/react-hooks": "workspace:*",
     "@titicaca/router": "workspace:*",
     "@titicaca/tds-ui": "workspace:*",

packages/tds-widget/src/ad-banners/horizontal-list-view.tsx

@@ -1,6 +1,6 @@
 import { FC, useRef, useEffect, useState } from 'react'
 import { formatMarginPadding, MarginPadding } from '@titicaca/tds-ui'
-import { StaticIntersectionObserver as IntersectionObserver } from '@titicaca/intersection-observer'
+import { InView } from 'react-intersection-observer'
 import { FlickingOptions } from '@egjs/flicking'
 import Flicking from '@egjs/react-flicking'
 import { css } from 'styled-components'
@@ -78,49 +78,47 @@ export const HorizontalListView: FC<HorizontalListViewProps> = ({
   }
 
   return (
-    <IntersectionObserver
-      onChange={({ isIntersecting }: { isIntersecting: boolean }) => {
-        if (isIntersecting && banners.length > 0) {
+    <InView
+      onChange={(inView) => {
+        if (inView && banners.length > 0) {
           onBannerIntersect(true, banners[visibleIndex], visibleIndex)
         }
       }}
     >
-      <div>
-        <ListSection
-          css={css(
-            {
-              minWidth: 0,
-              paddingTop: padding.top,
-              paddingBottom: padding.bottom,
-            },
-            formatMarginPadding(margin, 'margin'),
-          )}
-        >
-          <Flicking
-            {...FLICKING_CONFIG}
-            ref={flickingRef}
-            onMoveEnd={(e) => {
-              const newIndex = e.index
+      <ListSection
+        css={css(
+          {
+            minWidth: 0,
+            paddingTop: padding.top,
+            paddingBottom: padding.bottom,
+          },
+          formatMarginPadding(margin, 'margin'),
+        )}
+      >
+        <Flicking
+          {...FLICKING_CONFIG}
+          ref={flickingRef}
+          onMoveEnd={(e) => {
+            const newIndex = e.index
 
-              onBannerIntersect(false, banners[visibleIndex], visibleIndex)
-              onBannerIntersect(true, banners[newIndex], newIndex)
-              setVisibleIndex(newIndex)
-            }}
-          >
-            {banners.map((banner, index) => {
-              return (
-                <HorizontalEntity
-                  key={banner.id}
-                  banner={banner}
-                  onClick={makeBannerClickHandler(index)}
-                  onLoad={resizeFlicking}
-                  widthOffset={Number(padding.left || padding.right || 25) * 2}
-                />
-              )
-            })}
-          </Flicking>
-        </ListSection>
-      </div>
-    </IntersectionObserver>
+            onBannerIntersect(false, banners[visibleIndex], visibleIndex)
+            onBannerIntersect(true, banners[newIndex], newIndex)
+            setVisibleIndex(newIndex)
+          }}
+        >
+          {banners.map((banner, index) => {
+            return (
+              <HorizontalEntity
+                key={banner.id}
+                banner={banner}
+                onClick={makeBannerClickHandler(index)}
+                onLoad={resizeFlicking}
+                widthOffset={Number(padding.left || padding.right || 25) * 2}
+              />
+            )
+          })}
+        </Flicking>
+      </ListSection>
+    </InView>
   )
 }