[Fix] 캐스퍼 쇼케이스 화면 로딩 오래 걸리는 오류 수정

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 (
         <div style={{ perspective: "1000px" }}>
             <motion.div
@@ -54,3 +55,5 @@ export default function CasperFlipCard({ size, card, isFlipped }: CasperFlipCard
         </div>
     );
 }
+
+export default memo(CasperFlipCard);

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";
 
@@ -28,7 +29,7 @@ export default function TransitionCasperCards({
     gap,
     isEndCard,
 }: TransitionCasperCardsProps) {
-    const containerRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLUListElement>(null);
     const transitionControls = useAnimation();
 
     const [x, setX] = useState<number>(initialX);
@@ -55,6 +56,7 @@ export default function TransitionCasperCards({
 
     const renderCardItem = (cardItem: CasperCardType, id: string) => {
         const [isFlipped, setIsFlipped] = useState<boolean>(false);
+        const { isInView, cardRef } = useLazyLoading<HTMLLIElement>();
 
         const handleMouseEnter = () => {
             stopAnimation();
@@ -67,18 +69,29 @@ export default function TransitionCasperCards({
         };
 
         return (
-            <div key={id} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-                <CasperFlipCard
-                    card={cardItem}
-                    size={CASPER_SIZE_OPTION.SM}
-                    isFlipped={isFlipped}
-                />
-            </div>
+            <li
+                ref={cardRef}
+                key={id}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                style={{
+                    width: CASPER_CARD_SIZE[CASPER_SIZE_OPTION.SM].CARD_WIDTH,
+                    height: CASPER_CARD_SIZE[CASPER_SIZE_OPTION.SM].CARD_HEIGHT,
+                }}
+            >
+                {isInView && (
+                    <CasperFlipCard
+                        card={cardItem}
+                        size={CASPER_SIZE_OPTION.SM}
+                        isFlipped={isFlipped}
+                    />
+                )}
+            </li>
         );
     };
 
     return (
-        <motion.div
+        <motion.ul
             ref={containerRef}
             className="flex"
             animate={transitionControls}
@@ -91,6 +104,6 @@ export default function TransitionCasperCards({
         >
             {cardList.map((card) => renderCardItem(card, card.id))}
             {cardList.map((card) => renderCardItem(card, `${card.id}-clone`))}
-        </motion.div>
+        </motion.ul>
     );
 }

client/src/hooks/useLazyLoading.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function useLazyLoading<T extends HTMLElement>() {
+    const [isInView, setIsInView] = useState<boolean>(false);
+    const cardRef = useRef<T>(null);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsInView(true);
+                    observer.disconnect();
+                }
+            },
+            { threshold: 0, root: document.body }
+        );
+
+        if (cardRef.current) {
+            observer.observe(cardRef.current);
+        }
+
+        return () => {
+            if (cardRef.current) {
+                observer.unobserve(cardRef.current);
+            }
+        };
+    }, [cardRef]);
+
+    return { isInView, cardRef };
+}