feat: 캐스퍼 봇 개수에 따른 UI 분기처리

softeerbootcamp4th · Aug 16, 2024 · 964223e · 964223e
1 parent 15d8c6c
commit 964223e
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 26 deletions.
diff --git a/client/src/features/CasperShowCase/CasperCards.tsx b/client/src/features/CasperShowCase/CasperCards.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { CASPER_CARD_SIZE, CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper";
 import { CasperCardType, TransitionCasperCards } from "./TransitionCasperCards";
 
@@ -8,8 +9,16 @@ interface CasperCardsProps {
 export function CasperCards({ cardList }: CasperCardsProps) {
     const cardLength = cardList.length;
     const cardLengthHalf = Math.floor(cardLength / 2);
-    const topCardList = cardList.slice(0, cardLengthHalf);
-    const bottomCardList = cardList.slice(cardLengthHalf, cardLength);
+    const visibleCardCount = useMemo(() => {
+        const width = window.innerWidth;
+        const cardWidth = CASPER_CARD_SIZE[CASPER_SIZE_OPTION.SM].CARD_WIDTH;
+
+        return Math.ceil(width / cardWidth);
+    }, []);
+    const isMultipleLine = visibleCardCount * 2 <= cardLength;
+
+    const topCardList = cardList.slice(0, isMultipleLine ? cardLengthHalf : cardLength);
+    const bottomCardList = isMultipleLine ? cardList.slice(cardLengthHalf, cardLength) : [];
 
     const itemWidth = CASPER_CARD_SIZE[CASPER_SIZE_OPTION.SM].CARD_WIDTH;
     const gap = 40;

diff --git a/client/src/features/CasperShowCase/TransitionCasperCards.tsx b/client/src/features/CasperShowCase/TransitionCasperCards.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { AnimatePresence, motion, useAnimation } from "framer-motion";
 import { CASPER_CARD_SIZE, CASPER_SIZE_OPTION } from "@/constants/CasperCustom/casper";
 import { CARD_TRANSITION } from "@/constants/CasperShowCase/showCase";
@@ -29,6 +29,14 @@ export function TransitionCasperCards({
     gap,
     isEndCard,
 }: TransitionCasperCardsProps) {
+    const visibleCardCount = useMemo(() => {
+        const width = window.innerWidth;
+        const cardWidth = CASPER_CARD_SIZE[CASPER_SIZE_OPTION.SM].CARD_WIDTH;
+
+        return Math.ceil(width / cardWidth);
+    }, []);
+    const isAnimated = visibleCardCount <= cardList.length;
+
     const containerRef = useRef<HTMLUListElement>(null);
     const transitionControls = useAnimation();
 
@@ -54,6 +62,14 @@ export function TransitionCasperCards({
         startAnimation(x);
     }, [transitionControls, totalWidth]);
 
+    const expandedCardList = useMemo(() => {
+        if (isAnimated) {
+            return [...cardList, ...cardList.slice(0, visibleCardCount)];
+        }
+
+        return cardList;
+    }, [cardList]);
+
     const renderCardItem = (cardItem: CasperCardType, id: string) => {
         const [isFlipped, setIsFlipped] = useState<boolean>(false);
         const { isInView, cardRef } = useLazyLoading<HTMLLIElement>();
@@ -92,20 +108,25 @@ export function TransitionCasperCards({
 
     return (
         <AnimatePresence>
-            <motion.ul
-                ref={containerRef}
-                className="flex"
-                animate={transitionControls}
-                style={{ gap: `${gap}px` }}
-                onUpdate={(latest) => {
-                    if (isEndCard(parseInt(String(latest.x)))) {
-                        startAnimation(initialX);
-                    }
-                }}
-            >
-                {cardList.map((card) => renderCardItem(card, `${card.id}`))}
-                {cardList.map((card) => renderCardItem(card, `${card.id}-clone`))}
-            </motion.ul>
+            {isAnimated ? (
+                <motion.ul
+                    ref={containerRef}
+                    className="flex"
+                    animate={transitionControls}
+                    style={{ gap: `${gap}px` }}
+                    onUpdate={(latest) => {
+                        if (isEndCard(parseInt(String(latest.x)))) {
+                            startAnimation(initialX);
+                        }
+                    }}
+                >
+                    {expandedCardList.map((card, idx) => renderCardItem(card, `${card.id}-${idx}`))}
+                </motion.ul>
+            ) : (
+                <ul className="flex w-screen justify-center" style={{ gap: `${gap}px` }}>
+                    {expandedCardList.map((card, idx) => renderCardItem(card, `${card.id}-${idx}`))}
+                </ul>
+            )}
         </AnimatePresence>
     );
 }
diff --git a/client/src/pages/CasperShowCase/index.tsx b/client/src/pages/CasperShowCase/index.tsx
@@ -79,16 +79,32 @@ export default function CasperShowCase() {
                 id={CASPER_SHOWCASE_SECTIONS.SHOWCASE}
                 className="flex flex-col justify-center items-center gap-800 w-full h-screen bg-n-neutral-950 overflow-hidden pt-1000"
             >
-                <motion.div
-                    className="flex flex-col justify-center items-center gap-800 w-full"
-                    {...SCROLL_MOTION(DISSOLVE)}
-                >
-                    <p className="h-body-1-regular text-n-white">
-                        카드 위에 커서를 올리면 기대평을 볼 수 있어요
-                    </p>
+                {cardListData.length === 0 ? (
+                    <motion.div
+                        className="flex flex-col items-center gap-1000"
+                        {...SCROLL_MOTION(DISSOLVE)}
+                    >
+                        <h3 className="h-heading-3-bold text-n-neutral-50">
+                            나만의 캐스퍼 일렉트릭 봇을 만들어주세요!
+                        </h3>
+                        <img
+                            alt="캐스퍼 봇 아이콘"
+                            src="/assets/common/casper.webp"
+                            className="w-[300px] h-[300px]"
+                        />
+                    </motion.div>
+                ) : (
+                    <motion.div
+                        className="flex flex-col justify-center items-center gap-800 w-full"
+                        {...SCROLL_MOTION(DISSOLVE)}
+                    >
+                        <p className="h-body-1-regular text-n-white">
+                            카드 위에 커서를 올리면 기대평을 볼 수 있어요
+                        </p>
 
-                    <CasperCards cardList={cardListData} />
-                </motion.div>
+                        <CasperCards cardList={cardListData} />
+                    </motion.div>
+                )}
 
                 <motion.div className="flex gap-500" {...SCROLL_MOTION(ASCEND)}>
                     <CTAButton label="이벤트 링크 공유" onClick={handleClickShareButton} />