시간 내에 기능 구현하는데 바빠서 코드들이 엉망진창이라 코드 정리를 시작하였다.
일단 제일 먼저 중복적으로 자주 사용되는 캐러셀 슬라이드를 재사용 가능한 컴포넌트로 만들어서 중복코드를 없애주기로 하였다.

캐러셀 슬라이드의 구성

보드픽에 있는 캐러셀 슬라이드는 아래와 같이 구성되어 있다.

따라서 이 하나를 컴포넌트로 만들어주었다.

컴포넌트 코드

변경되어야하는 값들 props로 보내기

• classNameBox : 제목과 슬라이드 부모 className
• classNameTit : 슬라이드 제목 className
• title : 슬라이드 제목
• games : 적용시킬 api
  슬라이드마다 변경되어야하는 사항들을 props하여 이와 같은 재사용 가능한 컴포넌트 코드로 변경하였다.

const GameSlide = ({ classNameBox, classNameTit, title, games }) => {
  const navigate = useNavigate();
  const gameTabRef = useRef({});
  const slidesPerView = useSlidesPerView(gameTabRef);
  return (
    <article className={classNameBox} ref={gameTabRef}>
      <h1 className={classNameTit}>{title}</h1>
      <Swiper slidesPerView={slidesPerView} spaceBetween={8}>
        {games.map((game, i) => (
          <SwiperSlide key={i} onClick={() => navigate(`/category/${game.id}`)}>
            <ThumbNail
              type="small"
              id={game.id}
              img={game.imageUrl}
              name={game.name}
              info={game.description}
              tags={game.tags}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </article>
  );
};

export default GameSlide;

슬라이더 적용

슬라이더가 들어가야하는 자리에 이와 같이 컴포넌트를 불러와 값들을 지정해주어 중복코드이 각 슬라이더마다 다른 스타일과 데이터가 보일 수 있도록 수정완료!!

 <GameSlide
    classNameBox={"suggestGame"}
    classNameTit={"contentTit"}
    title={"이런 보드게임은 어떠세요?"}
    slidesPerView={slidesPerView}
    games={suggestData}
  />