feat: apply intersectionObserver for lazy rendering to improve CLS an…

…d Speed Index
DDD-Community · Dec 29, 2024 · a8cc347 · a8cc347
1 parent 3f46e02
commit a8cc347
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 16 deletions.
diff --git a/src/app/board/[boardId]/_components/PolaroidList/PolaroidListItem.tsx b/src/app/board/[boardId]/_components/PolaroidList/PolaroidListItem.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Polaroid } from '@/types'
 import PolaroidCard from '@/components/Polaroid/PolaroidCard'
 import { BoardTutorial } from '@/components/Tutorial'
@@ -20,6 +20,26 @@ const PolaroidListItem = ({
 }: PolaroidListItemProps) => {
   const [rotate, setRotate] = useState<number>(0)
   const { data: session } = useSession()
+  const [isVisible, setIsVisible] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true)
+          observer.disconnect()
+        }
+      },
+      { threshold: 0.05 },
+    )
+
+    if (ref.current) observer.observe(ref.current)
+
+    return () => {
+      if (ref.current) observer.disconnect()
+    }
+  }, [])
 
   useEffect(() => {
     const randomRotate =
@@ -40,18 +60,26 @@ const PolaroidListItem = ({
     </div>
   )
 
-  return isFirstItem ? (
-    <BoardTutorial
-      step={session ? 3 : 2}
-      tooltip={<Step3Tooltip />}
-      hasNext={false}
-      targetStyle="FIT"
-      targetStyleProperites={{ rotate: `${rotate}deg`, borderRadius: '2px' }}
-    >
-      {renderItem}
-    </BoardTutorial>
-  ) : (
-    renderItem
+  return (
+    <div ref={ref}>
+      {isVisible &&
+        (isFirstItem ? (
+          <BoardTutorial
+            step={session ? 3 : 2}
+            tooltip={<Step3Tooltip />}
+            hasNext={false}
+            targetStyle="FIT"
+            targetStyleProperites={{
+              rotate: `${rotate}deg`,
+              borderRadius: '2px',
+            }}
+          >
+            {renderItem}
+          </BoardTutorial>
+        ) : (
+          renderItem
+        ))}
+    </div>
   )
 }
 

diff --git a/src/components/Polaroid/Base/PolaroidImage.tsx b/src/components/Polaroid/Base/PolaroidImage.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { FILTERS } from '@/lib'
-import { useEffect, useState } from 'react'
 import { getImageWidthHeight } from '@/lib/utils/image'
 import Image from 'next/image'
+import { useEffect, useState } from 'react'
 
 interface PolaroidImageProps {
   imageUrl: string
@@ -40,9 +40,10 @@ const PolaroidImage = ({ imageUrl }: PolaroidImageProps) => {
       <Image
         src={imageUrl}
         alt="폴라로이드 이미지"
-        width={1000}
-        height={1000}
+        width={500}
+        height={500}
         quality={100}
+        priority
         className={`${aspectRatio} object-cover`}
         style={{
           filter: FILTERS.POLAROID,