refactor: Creator Image Lazy loading 적용 (#795)

* feat: fallback src도 lazy loading을 지원하도록 변경 * feat: fallback src 적용 * feat: lazy loading을 적용하여 초기 로딩 시 아바타 이미지 불러오지 않게 설정 * style: 이미지 url 유틸 함수 사용
woowacourse-teams · Oct 24, 2024 · 312a1c1 · 312a1c1
1 parent 9e97796
commit 312a1c1
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 42 deletions.
diff --git a/client/src/hooks/useImageLazyLoading.ts b/client/src/hooks/useImageLazyLoading.ts
@@ -3,22 +3,28 @@ import {useEffect, useState} from 'react';
 type UseImageLazyLoadingProps<T extends HTMLElement> = {
   targetRef: React.RefObject<T>;
   src: string;
+  fallbackSrc?: string;
   threshold?: number;
 };
 
+type ImgTagSrcType = string | undefined;
+
 const useImageLazyLoading = <T extends HTMLElement>({
   targetRef,
   src,
+  fallbackSrc,
   threshold = 0.05,
 }: UseImageLazyLoadingProps<T>) => {
-  const [imageSrc, setImageSrc] = useState<string | undefined>(undefined);
+  const [imageSrc, setImageSrc] = useState<ImgTagSrcType>(undefined);
+  const [fallbackImageSrc, setFallbackImageSrc] = useState<ImgTagSrcType>(undefined);
 
   useEffect(() => {
     if (targetRef && !imageSrc) {
       const observer = new IntersectionObserver(
         ([entry]) => {
           if (entry.isIntersecting) {
             setImageSrc(src);
+            setFallbackImageSrc(fallbackSrc);
             if (targetRef.current) {
               observer.unobserve(targetRef.current);
             }
@@ -39,10 +45,11 @@ const useImageLazyLoading = <T extends HTMLElement>({
     }
 
     return;
-  }, [targetRef, src]);
+  }, [targetRef, src, fallbackSrc]);
 
   return {
     imageSrc,
+    fallbackImageSrc,
   };
 };
 

diff --git a/client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx b/client/src/pages/MainPage/Section/CreatorSection/Avatar.tsx
@@ -15,7 +15,12 @@ interface Props {
 const Avatar = ({imagePath, name, navigateUrl}: Props) => {
   return (
     <a href={navigateUrl} target="_blank" css={avatarStyle}>
-      <Image src={getImageUrl(imagePath, 'webp')} fallbackSrc={getImageUrl(imagePath, 'png')} css={avatarImageStyle} />
+      <Image
+        src={getImageUrl(imagePath, 'webp')}
+        fallbackSrc={getImageUrl(imagePath, 'png')}
+        loading="lazy"
+        css={avatarImageStyle}
+      />
       <Text size="bodyBold" textColor="white" responsive={true}>
         {name}
       </Text>

diff --git a/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx
@@ -12,20 +12,16 @@ import {descriptionSectionStyle, imgStyle} from './DescriptionSection.style';
 const DescriptionSection = () => {
   const descriptionRef = useRef<HTMLDivElement>(null);
 
-  const {imageSrc} = useImageLazyLoading({
+  const {imageSrc, fallbackImageSrc} = useImageLazyLoading({
     targetRef: descriptionRef,
-    src: `${process.env.IMAGE_URL}/standingDog.webp`,
+    src: getImageUrl('standingDog', 'webp'),
+    fallbackSrc: getImageUrl('standingDog', 'png'),
     threshold: 0.05,
   });
 
   return (
     <div css={descriptionSectionStyle} ref={descriptionRef}>
-      <Image
-        css={imgStyle}
-        src={imageSrc!}
-        alt="행댕이 - 행동대장 마스코트"
-        fallbackSrc={getImageUrl('standingDog', 'png')}
-      />
+      <Image css={imgStyle} src={imageSrc!} alt="행댕이 - 행동대장 마스코트" fallbackSrc={fallbackImageSrc} />
       <img css={imgStyle} />
       <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`행동대장들을 위해
         행동대장을 준비했어요

diff --git a/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx
@@ -6,21 +6,24 @@ import useImageLazyLoading from '@hooks/useImageLazyLoading';
 
 import {Text} from '@components/Design';
 
+import getImageUrl from '@utils/getImageUrl';
+
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './AutoCalculate.style';
 
 const AutoCalculate = () => {
   const sectionRef = useRef<HTMLElement>(null);
 
-  const {imageSrc} = useImageLazyLoading({
+  const {imageSrc, fallbackImageSrc} = useImageLazyLoading({
     targetRef: sectionRef,
-    src: `${process.env.IMAGE_URL}/feature2.webp`,
+    src: getImageUrl('feature2', 'webp'),
+    fallbackSrc: getImageUrl('feature2', 'png'),
     threshold: 0.05,
   });
 
   return (
     <section css={sectionStyle} ref={sectionRef}>
       <article css={articleStyle}>
-        <Image src={imageSrc!} fallbackSrc={imageSrc} css={imageStyle} />
+        <Image src={imageSrc!} fallbackSrc={fallbackImageSrc} css={imageStyle} />
         <div css={textContainerStyle}>
           <Text size="subTitle" responsive={true}>
             계산은 저희가 알아서 해드려요

diff --git a/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx
@@ -6,14 +6,17 @@ import useImageLazyLoading from '@hooks/useImageLazyLoading';
 
 import {Text} from '@components/Design';
 
+import getImageUrl from '@utils/getImageUrl';
+
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './CheckDeposit.style';
 
 const CheckDeposit = () => {
   const sectionRef = useRef<HTMLElement>(null);
 
-  const {imageSrc} = useImageLazyLoading({
+  const {imageSrc, fallbackImageSrc} = useImageLazyLoading({
     targetRef: sectionRef,
-    src: `${process.env.IMAGE_URL}/feature3.webp`,
+    src: getImageUrl('feature3', 'webp'),
+    fallbackSrc: getImageUrl('feature3', 'png'),
     threshold: 0.05,
   });
 
@@ -30,7 +33,7 @@ const CheckDeposit = () => {
             간편하게 관리할 수 있어요.`}
           </Text>
         </div>
-        <Image src={imageSrc!} fallbackSrc={imageSrc} css={imageStyle} />
+        <Image src={imageSrc!} fallbackSrc={fallbackImageSrc} css={imageStyle} />
       </article>
     </section>
   );

diff --git a/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx b/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx
@@ -1,5 +1,4 @@
 import {css} from '@emotion/react';
-import {useRef} from 'react';
 
 import useMainPageYScroll from '@hooks/useMainPageYScroll';
 
@@ -11,7 +10,6 @@ import {RecordMemoryWithPhoto} from './RecordMemoryWithPhoto';
 
 const FeatureSection = () => {
   const {featureSectionRef} = useMainPageYScroll();
-  const simpleTransferRef = useRef<HTMLElement>(null);
 
   return (
     <div
@@ -27,8 +25,8 @@ const FeatureSection = () => {
       <SimpleShare />
       <AutoCalculate />
       <CheckDeposit />
-      <SimpleTransfer targetRef={simpleTransferRef} />
-      <RecordMemoryWithPhoto targetRef={simpleTransferRef} />
+      <SimpleTransfer />
+      <RecordMemoryWithPhoto />
     </div>
   );
 };

diff --git a/...src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx b/...src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx
@@ -1,24 +1,27 @@
+import {useRef} from 'react';
+
 import Image from '@components/Design/components/Image/Image';
 
 import useImageLazyLoading from '@hooks/useImageLazyLoading';
 
 import {Text} from '@components/Design';
 
+import getImageUrl from '@utils/getImageUrl';
+
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './RecordMemoryWithPhoto.style';
 
-type RecordMemoryWithPhotoProps = {
-  targetRef: React.RefObject<HTMLElement>;
-};
+const RecordMemoryWithPhoto = () => {
+  const sectionRef = useRef<HTMLElement>(null);
 
-const RecordMemoryWithPhoto = ({targetRef}: RecordMemoryWithPhotoProps) => {
-  const {imageSrc} = useImageLazyLoading({
-    targetRef,
-    src: `${process.env.IMAGE_URL}/feature5.webp`,
+  const {imageSrc, fallbackImageSrc} = useImageLazyLoading({
+    targetRef: sectionRef,
+    src: getImageUrl('feature5', 'webp'),
+    fallbackSrc: getImageUrl('feature5', 'png'),
     threshold: 0.05,
   });
 
   return (
-    <section css={sectionStyle}>
+    <section css={sectionStyle} ref={sectionRef}>
       <article css={articleStyle}>
         <div css={textContainerStyle}>
           <Text size="subTitle" responsive={true}>
@@ -30,7 +33,7 @@ const RecordMemoryWithPhoto = ({targetRef}: RecordMemoryWithPhotoProps) => {
         정산은 투명하게, 추억은 오래오래 간직할 수 있어요.`}
           </Text>
         </div>
-        <Image src={imageSrc!} fallbackSrc={imageSrc} css={imageStyle} />
+        <Image src={imageSrc!} fallbackSrc={fallbackImageSrc} css={imageStyle} />
       </article>
     </section>
   );

diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx
@@ -6,14 +6,17 @@ import useImageLazyLoading from '@hooks/useImageLazyLoading';
 
 import {Text} from '@components/Design';
 
+import getImageUrl from '@utils/getImageUrl';
+
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './SimpleShare.style';
 
 const SimpleAccount = () => {
   const sectionRef = useRef<HTMLElement>(null);
 
-  const {imageSrc} = useImageLazyLoading({
+  const {imageSrc, fallbackImageSrc} = useImageLazyLoading({
     targetRef: sectionRef,
-    src: `${process.env.IMAGE_URL}/feature1.webp`,
+    src: getImageUrl('feature1', 'webp'),
+    fallbackSrc: getImageUrl('feature1', 'png'),
     threshold: 0.05,
   });
 
@@ -30,7 +33,7 @@ const SimpleAccount = () => {
           복잡한 절차 없이, 빠르게 정산을 마치세요.`}
           </Text>
         </div>
-        <Image src={imageSrc!} fallbackSrc={imageSrc} css={imageStyle} />
+        <Image src={imageSrc!} fallbackSrc={fallbackImageSrc} css={imageStyle} />
       </article>
     </section>
   );

diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx
@@ -1,26 +1,29 @@
+import {useRef} from 'react';
+
 import Image from '@components/Design/components/Image/Image';
 
 import useImageLazyLoading from '@hooks/useImageLazyLoading';
 
 import {Text} from '@components/Design';
 
+import getImageUrl from '@utils/getImageUrl';
+
 import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './SimpleTransfer.style';
 
-type SimpleTransferProps = {
-  targetRef: React.RefObject<HTMLElement>;
-};
+const SimpleTransfer = () => {
+  const simpleTransferRef = useRef<HTMLElement>(null);
 
-const SimpleTransfer = ({targetRef}: SimpleTransferProps) => {
-  const {imageSrc} = useImageLazyLoading({
-    targetRef,
-    src: `${process.env.IMAGE_URL}/feature4.webp`,
+  const {imageSrc, fallbackImageSrc} = useImageLazyLoading({
+    targetRef: simpleTransferRef,
+    src: getImageUrl('feature4', 'webp'),
+    fallbackSrc: getImageUrl('feature4', 'png'),
     threshold: 0.05,
   });
 
   return (
-    <section css={sectionStyle} ref={targetRef}>
+    <section css={sectionStyle} ref={simpleTransferRef}>
       <article css={articleStyle}>
-        <Image src={imageSrc!} fallbackSrc={imageSrc} css={imageStyle} />
+        <Image src={imageSrc!} fallbackSrc={fallbackImageSrc} css={imageStyle} />
         <div css={textContainerStyle}>
           <Text size="subTitle" responsive={true}>
             몇 번의 클릭으로 송금 완료!