From 89c400b0bd135ab97d9f478116d51afa89ac80c3 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Mon, 5 Aug 2024 16:37:21 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20CasperFlipCard=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/features/CasperCustom/CasperFlipCard.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/features/CasperCustom/CasperFlipCard.tsx b/client/src/features/CasperCustom/CasperFlipCard.tsx index e89d04df..4b7f23b7 100644 --- a/client/src/features/CasperCustom/CasperFlipCard.tsx +++ b/client/src/features/CasperCustom/CasperFlipCard.tsx @@ -1,3 +1,4 @@ +import { memo } from "react"; import { motion } from "framer-motion"; import { CASPER_CARD_SIZE, CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper"; import { CasperCardType } from "../CasperShowCase/TransitionCasperCards"; @@ -10,7 +11,7 @@ interface CasperFlipCardProps { isFlipped: boolean; } -export default function CasperFlipCard({ size, card, isFlipped }: CasperFlipCardProps) { +function CasperFlipCard({ size, card, isFlipped }: CasperFlipCardProps) { return (
); } + +export default memo(CasperFlipCard); From ec4f74cf0fef33a6e56c135ca6cd2f012dbbbf60 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Mon, 5 Aug 2024 17:27:06 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=ED=83=9C=EA=B7=B8=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CasperShowCase/TransitionCasperCards.tsx | 10 +++---- client/src/hooks/useLazyLoading.ts | 30 +++++++++++++++++++ 2 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 client/src/hooks/useLazyLoading.ts diff --git a/client/src/features/CasperShowCase/TransitionCasperCards.tsx b/client/src/features/CasperShowCase/TransitionCasperCards.tsx index 294cd41c..5f0b2fd6 100644 --- a/client/src/features/CasperShowCase/TransitionCasperCards.tsx +++ b/client/src/features/CasperShowCase/TransitionCasperCards.tsx @@ -28,7 +28,7 @@ export default function TransitionCasperCards({ gap, isEndCard, }: TransitionCasperCardsProps) { - const containerRef = useRef(null); + const containerRef = useRef(null); const transitionControls = useAnimation(); const [x, setX] = useState(initialX); @@ -67,18 +67,18 @@ export default function TransitionCasperCards({ }; return ( -
+
  • -
    • + ); }; return ( - {cardList.map((card) => renderCardItem(card, card.id))} {cardList.map((card) => renderCardItem(card, `${card.id}-clone`))} - + ); } diff --git a/client/src/hooks/useLazyLoading.ts b/client/src/hooks/useLazyLoading.ts new file mode 100644 index 00000000..a1a6e0c2 --- /dev/null +++ b/client/src/hooks/useLazyLoading.ts @@ -0,0 +1,30 @@ +import { useEffect, useRef, useState } from "react"; + +export default function useLazyLoading() { + const [isInView, setIsInView] = useState(false); + const cardRef = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + setIsInView(true); + observer.disconnect(); + } + }, + { threshold: 0.1, root: document.body } + ); + + if (cardRef.current) { + observer.observe(cardRef.current); + } + + return () => { + if (cardRef.current) { + observer.unobserve(cardRef.current); + } + }; + }, [cardRef]); + + return { isInView, cardRef }; +} From b59482cf75209969e60576daf9086fe6b6f587b6 Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Mon, 5 Aug 2024 17:48:56 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EB=A1=9C=EB=94=A9=20=EC=98=A4?= =?UTF-8?q?=EB=9E=98=20=EA=B1=B8=EB=A6=AC=EB=8A=94=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CasperShowCase/TransitionCasperCards.tsx | 27 ++++++++++++++----- client/src/hooks/useLazyLoading.ts | 6 ++--- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/client/src/features/CasperShowCase/TransitionCasperCards.tsx b/client/src/features/CasperShowCase/TransitionCasperCards.tsx index 5f0b2fd6..4a0ee465 100644 --- a/client/src/features/CasperShowCase/TransitionCasperCards.tsx +++ b/client/src/features/CasperShowCase/TransitionCasperCards.tsx @@ -1,7 +1,8 @@ import { useEffect, useRef, useState } from "react"; import { motion, useAnimation } from "framer-motion"; -import { CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper"; +import { CASPER_CARD_SIZE, CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper"; import { CARD_TRANSITION } from "@/constants/CasperShowCase/showCase"; +import useLazyLoading from "@/hooks/useLazyLoading"; import { SelectedCasperIdxType } from "@/types/casperCustom"; import CasperFlipCard from "../CasperCustom/CasperFlipCard"; @@ -55,6 +56,7 @@ export default function TransitionCasperCards({ const renderCardItem = (cardItem: CasperCardType, id: string) => { const [isFlipped, setIsFlipped] = useState(false); + const { isInView, cardRef } = useLazyLoading(); const handleMouseEnter = () => { stopAnimation(); @@ -67,12 +69,23 @@ export default function TransitionCasperCards({ }; return ( -
  • - +
  • + {isInView && ( + + )}
    • ); }; diff --git a/client/src/hooks/useLazyLoading.ts b/client/src/hooks/useLazyLoading.ts index a1a6e0c2..6d612e41 100644 --- a/client/src/hooks/useLazyLoading.ts +++ b/client/src/hooks/useLazyLoading.ts @@ -1,8 +1,8 @@ import { useEffect, useRef, useState } from "react"; -export default function useLazyLoading() { +export default function useLazyLoading() { const [isInView, setIsInView] = useState(false); - const cardRef = useRef(null); + const cardRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver( @@ -12,7 +12,7 @@ export default function useLazyLoading() { observer.disconnect(); } }, - { threshold: 0.1, root: document.body } + { threshold: 0, root: document.body } ); if (cardRef.current) {