From 312a1c1c8b481956ed20a7a66d4656b81d86d721 Mon Sep 17 00:00:00 2001 From: JinHo Kim <81083461+jinhokim98@users.noreply.github.com> Date: Thu, 24 Oct 2024 18:11:47 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20Creator=20Image=20Lazy=20loading=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20(#795)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: fallback src도 lazy loading을 지원하도록 변경 * feat: fallback src 적용 * feat: lazy loading을 적용하여 초기 로딩 시 아바타 이미지 불러오지 않게 설정 * style: 이미지 url 유틸 함수 사용 --- client/src/hooks/useImageLazyLoading.ts | 11 ++++++++-- .../Section/CreatorSection/Avatar.tsx | 7 ++++++- .../DescriptionSection/DescriptionSection.tsx | 12 ++++------- .../AutoCalculate/AutoCalculate.tsx | 9 +++++--- .../CheckDeposit/CheckDeposit.tsx | 9 +++++--- .../Section/FeatureSection/FeatureSection.tsx | 6 ++---- .../RecordMemoryWithPhoto.tsx | 21 +++++++++++-------- .../SimpleShare/SimpleShare.tsx | 9 +++++--- .../SimpleTransfer/SimpleTransfer.tsx | 21 +++++++++++-------- 9 files changed, 63 insertions(+), 42 deletions(-) diff --git a/client/src/hooks/useImageLazyLoading.ts b/client/src/hooks/useImageLazyLoading.ts index 6b95c77a..407d60b7 100644 --- a/client/src/hooks/useImageLazyLoading.ts +++ b/client/src/hooks/useImageLazyLoading.ts @@ -3,15 +3,20 @@ import {useEffect, useState} from 'react'; type UseImageLazyLoadingProps = { targetRef: React.RefObject; src: string; + fallbackSrc?: string; threshold?: number; }; +type ImgTagSrcType = string | undefined; + const useImageLazyLoading = ({ targetRef, src, + fallbackSrc, threshold = 0.05, }: UseImageLazyLoadingProps) => { - const [imageSrc, setImageSrc] = useState(undefined); + const [imageSrc, setImageSrc] = useState(undefined); + const [fallbackImageSrc, setFallbackImageSrc] = useState(undefined); useEffect(() => { if (targetRef && !imageSrc) { @@ -19,6 +24,7 @@ const useImageLazyLoading = ({ ([entry]) => { if (entry.isIntersecting) { setImageSrc(src); + setFallbackImageSrc(fallbackSrc); if (targetRef.current) { observer.unobserve(targetRef.current); } @@ -39,10 +45,11 @@ const useImageLazyLoading = ({ } 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 index 6ad1a9ea..37f536c4 100644 --- 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 ( - + {name} diff --git a/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx index a962e7cb..928caa75 100644 --- 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(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 (
- 행댕이 - 행동대장 마스코트 + 행댕이 - 행동대장 마스코트 {`행동대장들을 위해 행동대장을 준비했어요 diff --git a/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx index 7ad8a56e..c101d9f3 100644 --- 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(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 (
- +
계산은 저희가 알아서 해드려요 diff --git a/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx index d687eef5..286625df 100644 --- 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(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 = () => { 간편하게 관리할 수 있어요.`}
- +
); diff --git a/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx b/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx index b31f4baf..218feb4c 100644 --- 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(null); return (
{ - - + +
); }; diff --git a/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx b/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx index 8da16c93..77e5afc7 100644 --- a/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx +++ b/client/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; -}; +const RecordMemoryWithPhoto = () => { + const sectionRef = useRef(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 ( -
+
@@ -30,7 +33,7 @@ const RecordMemoryWithPhoto = ({targetRef}: RecordMemoryWithPhotoProps) => { 정산은 투명하게, 추억은 오래오래 간직할 수 있어요.`}
- +
); diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx index 6c7922d5..465e0cdf 100644 --- 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(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 = () => { 복잡한 절차 없이, 빠르게 정산을 마치세요.`}
- + ); diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx index 10303702..ea08f972 100644 --- 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; -}; +const SimpleTransfer = () => { + const simpleTransferRef = useRef(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 ( -
+
- +
몇 번의 클릭으로 송금 완료!