From 6004dbd88bf36b66ccba5b9abeb04088bf459366 Mon Sep 17 00:00:00 2001
From: KimKyuHoi <k546kh@gmail.com>
Date: Thu, 5 Dec 2024 13:34:46 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20react-lazy-observer=20=ED=8C=A8?=
 =?UTF-8?q?=ED=82=A4=EC=A7=80=20=EB=8C=80=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/View/LazyLoad.tsx       | 52 -------------------
 .../team/components/content/TeamContent.tsx   |  5 +-
 2 files changed, 3 insertions(+), 54 deletions(-)
 delete mode 100644 src/components/common/View/LazyLoad.tsx

diff --git a/src/components/common/View/LazyLoad.tsx b/src/components/common/View/LazyLoad.tsx
deleted file mode 100644
index 201860c..0000000
--- 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 ed6601e..6fa9b51 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>