observer-lazy-loading-package적용하기 (#175)

* Chore: react-lazy-observer 패키지 설치 * feat: react-lazy-observer 패키지 대체
GDG-on-Campus-KNU · Dec 5, 2024 · 7405c2d · 7405c2d
1 parent 214a27e
commit 7405c2d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 54 deletions.
diff --git 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
diff --git a/src/components/common/View/LazyLoad.tsx b/src/components/common/View/LazyLoad.tsx
diff --git 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>