fix: lazy 로딩 로직 변경

woowacourse-teams · Sep 25, 2023 · a31339f · a31339f
1 parent 47176ad
commit a31339f
Show file tree

Hide file tree

Showing 4 changed files with 1 addition and 71 deletions.
diff --git a/client/src/components/_common/lazyImage/lazyImage.tsx b/client/src/components/_common/lazyImage/lazyImage.tsx
diff --git a/client/src/components/roadmapDetailPage/roadmapNodeList/RoadmapNodeList.tsx b/client/src/components/roadmapDetailPage/roadmapNodeList/RoadmapNodeList.tsx
@@ -1,4 +1,3 @@
-// import LazyImage from '@/components/_common/lazyImage/lazyImage';
 import { NodeType } from '@/myTypes/roadmap/internal';
 import * as S from './roadmapNodeList.styles';
 
@@ -23,7 +22,7 @@ const RoadmapNodeList = ({ roadmapTitle, nodeInfo }: RoadmapNodeListProps) => {
               {node.imageUrls.map((nodeImage) => {
                 return (
                   <S.ImageWrapper>
-                    <S.LazyImageImg src={nodeImage} />
+                    <img src={nodeImage} alt='노드 이미지' loading='lazy' />
                   </S.ImageWrapper>
                 );
               })}

diff --git a/client/src/components/roadmapDetailPage/roadmapNodeList/roadmapNodeList.styles.ts b/client/src/components/roadmapDetailPage/roadmapNodeList/roadmapNodeList.styles.ts
@@ -1,4 +1,3 @@
-import LazyImage from '@/components/_common/lazyImage/lazyImage';
 import { styled } from 'styled-components';
 
 export const RoadmapNodeList = styled.div`
@@ -90,8 +89,3 @@ export const NodeImage = styled.img`
   height: 20rem;
   object-fit: cover;
 `;
-
-export const LazyImageImg = styled(LazyImage)`
-  height: 30rem;
-  object-fit: cover;
-`;
diff --git a/client/src/hooks/_common/useIntersectionObserver.ts b/client/src/hooks/_common/useIntersectionObserver.ts