From 7405c2d7b9c0505bf1ced9d41866f0e3b9b4d1c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EA=B7=9C=ED=9A=8C?=
 <48755156+KimKyuHoi@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:56:38 +0900
Subject: [PATCH] =?UTF-8?q?observer-lazy-loading-package=EC=A0=81=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20(#175)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Chore: react-lazy-observer 패키지 설치

* feat: react-lazy-observer 패키지 대체
---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 14 +++++
 src/components/common/View/LazyLoad.tsx       | 52 -------------------
 .../team/components/content/TeamContent.tsx   |  5 +-
 4 files changed, 18 insertions(+), 54 deletions(-)
 delete mode 100644 src/components/common/View/LazyLoad.tsx

diff --git a/package.json b/package.json
index fb99084b..10e4b544 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react-hot-toast": "^2.4.1",
     "react-image-file-resizer": "^0.4.8",
     "react-lazy-load-image-component": "^1.6.2",
+    "react-lazy-observer": "^1.2.0",
     "react-loader-spinner": "^6.1.6",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.28.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ecb1f8e..33e509ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,6 +107,9 @@ importers:
       react-lazy-load-image-component:
         specifier: ^1.6.2
         version: 1.6.2(react@18.3.1)
+      react-lazy-observer:
+        specifier: ^1.2.0
+        version: 1.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-loader-spinner:
         specifier: ^6.1.6
         version: 6.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -3633,6 +3636,12 @@ packages:
     peerDependencies:
       react: ^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x
 
+  react-lazy-observer@1.2.0:
+    resolution: {integrity: sha512-LGgii+wgTVW6UKSNyXFRdOecZ/zR5FpRnLZbHg1xwouYQasIp3CPb727mwT60dFIjAhUfo1kn7fggRSOy9X0uA==}
+    peerDependencies:
+      react: ^18.3.1
+      react-dom: ^18.3.1
+
   react-lifecycles-compat@3.0.4:
     resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
 
@@ -8564,6 +8573,11 @@ snapshots:
       lodash.throttle: 4.1.1
       react: 18.3.1
 
+  react-lazy-observer@1.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-lifecycles-compat@3.0.4: {}
 
   react-loader-spinner@6.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
diff --git a/src/components/common/View/LazyLoad.tsx b/src/components/common/View/LazyLoad.tsx
deleted file mode 100644
index 201860c2..00000000
--- a/src/components/common/View/LazyLoad.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Suspense, useEffect, useRef, useState } from 'react';
-
-import { LoadingView } from './LoadingView';
-
-type LazyLoadProps = {
-  children: React.ReactNode;
-};
-
-const LazyLoad = ({ children }: LazyLoadProps) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const observerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isVisible) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setIsVisible(true);
-            observer.disconnect();
-          }
-        });
-      },
-      {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.3,
-      }
-    );
-
-    if (observerRef.current) {
-      observer.observe(observerRef.current);
-    }
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [isVisible]);
-
-  return (
-    <div ref={observerRef}>
-      {isVisible ? (
-        <Suspense fallback={<LoadingView />}>{children}</Suspense>
-      ) : (
-        <LoadingView />
-      )}
-    </div>
-  );
-};
-
-export default LazyLoad;
diff --git a/src/pages/team/components/content/TeamContent.tsx b/src/pages/team/components/content/TeamContent.tsx
index ed6601eb..6fa9b51b 100644
--- a/src/pages/team/components/content/TeamContent.tsx
+++ b/src/pages/team/components/content/TeamContent.tsx
@@ -1,15 +1,16 @@
 import styled from '@emotion/styled';
 import { useState, lazy } from 'react';
 import { useMediaQuery } from 'react-responsive';
+import { LazyLoad } from 'react-lazy-observer';
 
 import { TeamList } from '@gdg/apis/hooks/team/useGetTeamList';
-import LazyLoad from '@gdg/components/common/View/LazyLoad';
 import {
   TeamMember,
   TeamCalendar,
   TeamTitle,
   TeamTitleMobile,
 } from '@gdg/pages/team/components';
+import { LoadingView } from '@gdg/components/common/View/LoadingView';
 const TeamBlogList = lazy(() => import('../blog/TeamBlogList'));
 
 const TeamContent = ({ data }: { data: TeamList[] }) => {
@@ -42,7 +43,7 @@ const TeamContent = ({ data }: { data: TeamList[] }) => {
 
       <TeamCalendar selectedTeamName={selectedTeamName} />
 
-      <LazyLoad>
+      <LazyLoad fallback={<LoadingView />}>
         <TeamBlogList selectedTeamName={selectedTeamName} />
       </LazyLoad>
     </TeamContainer>