19 이슈에 대한 작업 내용입니다.

개요

캐러셀전

후기가 여러 개 있을 때 한 번에 볼 수 있는 후기를 2개로 설정하고 나머지는 캐러셀 슬라이드로 넘길 수 있도록 기능을 추가할 필요가 있어서 진행했습니다.

작업 내용

캐러셀 적용

캐러셀적용후

재사용성과 Next 컨셉에 맞게 Carousel 기능을 하는 컴포넌트를 구현했습니다. 슬라이드 할 내용물을 children으로 받고 한 번에 보여줄 아이템을 옵션으로 itemsToShow로 받아서 사용합니다.

  const [currentIndex, setCurrentIndex] = useState(0);
  const totalChildren = children.length;

  const goToPrev = () =>
    setCurrentIndex(prevIndex =>
      prevIndex > 0 ? prevIndex - 1 : totalChildren - 1,
    );
  const goToNext = () =>
    setCurrentIndex(prevIndex =>
      prevIndex < totalChildren - 1 ? prevIndex + 1 : 0,
    );

 const activeItems = [];
  for (let i = 0; i < itemsToShow; i++) {
    const itemIndex = (currentIndex + i) % totalChildren;
    activeItems.push(children[itemIndex]);
  }

한 번에 보여질 아이템 수를 기준으로 좌 우 클릭 시 1개씩 이동해 순환할 수 있도록 구현했습니다.

SponsorsreviewItem의 후기부분 Star 추가

review.rating 으로 임의로 뒀던 부분을 SVG 이미지를 사용해서 구현했습니다. @svgr/webpack 모듈을 사용해 SVG 이미지를 컴포넌트로 사용해서 구현하려고 했는데 설치하고 공식문서대로 config를 설정했는데도 오류가 발생해서 next/image의 Image 컴포넌트에 SVG 이미지 경로를 넣는 방식으로 구현했습니다.

WonhyeongLee / lwh-membership-page

[Feat] 사용자 후기에 캐러셀 슬라이드 추가, 스타일 수정 #24

19 이슈에 대한 작업 내용입니다.

개요

작업 내용

캐러셀 적용

SponsorsreviewItem의 후기부분 Star 추가