[TIL] 0220

WaffleCard Refactoring

카드 리스트 애니메이션

css keyFrame 사용

• data를 3번 복사해서 3세트의 카드리스트 컴포넌트들을 생성
• 처음 렌더링 시 1세트의 카드리스트 너비만큼 스크롤을 당김(그래야 역방향으로 스크롤 가능)
• keyFrame을 이용해 2세트~3세트 반복하며(순환) 카드들이 왼쪽으로 이동하도록 애니메이션 설정

     const { current } = containerRef;
        useEffect(() => {
          if (current) {
            setTimeout(() => {
              containerRef.current.scrollLeft =
                CardsWrapperRef.current?.offsetWidth / 3;
            }, 1000);
          }
        }, [containerRef, current]);
      
     ... 

     return (
              <CardsWrapper
                isOverflow={isOverflow}
                maxLength={maxLength}
                ref={CardsWrapperRef}
              >
                {[...waffleCards, ...waffleCards, ...waffleCards]?.map(
                  (waffleCard, index) => (
                    <StyledWaffleCard
                      index={index}
                      type={type}
                      key={waffleCard.id + index}
                      waffleCardData={waffleCard}
                      onClickWaffleCard={handleClickWaffleCard}
                      onClickLikeToggle={handleClickLikeToggle}
                      onClickEdit={handleClickWaffleCardEdit}
                      onClickDelete={handleClickWaffleCardDelete}
                    />
                  ),
                )}
              </CardsWrapper>
            );
     
     ...       
     
     const translate = keyframes`
         0% {
          transform:translateX(-33.3333%)
          }
          100% {
            transform:translateX(-66.6666%)
          }
       `;
     
     const CardsWrapper = styled.ul`
          ...

          ${({ isOverflow, maxLength }) => {
            if (isOverflow) {
              return css`
                justify-content: left;
                animation-name: ${translate};
                animation-duration: ${maxLength / 0.8}s;
                animation-delay: 1s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                animation-direction: normal;
                &:hover {
                  animation-play-state: paused;
                }
              `;
            } else {
              return css`
                justify-content: center;
              `;
            }
          }};
	     `;

문제점

• 3세트 카드들이 나올 때 화면에 늦게 그려진다 (Html상에는 존재한다)
• 카드 리스트가 애니메이션으로 이동한 만큼(translate로 이동)이 미리 당긴 스크롤에서 제외된다