시작..

저번 글에선 카드 형태로 게시물을 표시하는 과정을 기록했습니다. 이번 글에선 카드 형태의 게시물 목록을 캐러셀 형식으로 보여주는 기능을 어떻게 적용했는지 기록해보려합니다.

react-multi-carousel

제가 사용한 라이브러리는 react-multi-carousel입니다. swiper, react-slick 등 여러 라이브러리가 있었으나, SSR 적용이 쉽고, 번들 사이즈가 2.5KB밖에 안되는 이유로 선택하게 되었습니다….근데 SSR로 안 함

Npm 사이트 내에 사용 방법은 자세히 나와있습니다. react-multi-carousel - npm (npmjs.com)

"use client";

import React from "react";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 4,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

type Props = {
  children: React.ReactNode;
};

export default function CarouselProvider({ children }: Props) {
  return (
    <Carousel 
			infinite
			autoPlay
			removeArrowOnDeviceType={["tablet", "mobile"]}
			responsive={responsive}
			itemClass='md:m-2'>
      {children}
    </Carousel>
  );
}

사용 방법은 아주 간단합니다. 우선 저는 CarouselProvider 컴포넌트를 만들었습니다. 이렇게 만든 컴포넌트를 사용하고 싶은 페이지에서 작성해 내부에 아이템만 넣어주면 끝입니다.

responsive 객체를 만들어 화면 크기에 따라 보여줄 아이템의 개수를 정할 수 있습니다. 사용자가 원하는 사이즈를 breakpoint에 설정하면 됩니다. 아 그리고 responsive 객체 내에 각 반응형 객체별로 slidesToSlide: n 옵션을 통해 넘길 때 몇개씩 넘길지도 정할 수 있습니다만, 저는 default로 1개만 넘어가도록 건들지 않았습니다.

infinite 옵션은 아이템이 마지막에 다다랐을 때 첫번째 아이템을 다시 보여주기 위한 옵션입니다. autoPlay 옵션을 통해 자동으로 포스트가 넘어갈 수 있도록 설정한 옵션입니다. removeArrowOnDeviceType을 통해 좌우로 넘길 수 있는 Arrow 버튼을 제거할 deviceType을 지정할 수 있습니다.

설정할 수 있는 옵션은 굉장히 많습니다 swipeable, draggable 등 사용자가 원하는대로 설정할 수 있도록 많은 커스터마이징을 지원합니다. 더 자세한 옵션과 기능은

react-multi-carousel - npm (npmjs.com) npm에 작성된 메뉴얼 혹은 Storybook (surge.sh) 스토리북을 통해 확인해보시는 것도 좋습니다.

사용은요??

export default async function CarouselPosts() {
  const posts = await getLatestPosts();

  return (
    <section className='mt-10 px-6'>
      <h1 className='font-bold text-2xl mb-2 md:mb-6'>Latest Posts</h1>
      <CarouselProvider>
        {posts.map((post) => (
          <PostCard key={post.path} post={post} />
        ))}
      </CarouselProvider>
    </section>
  );
}

이렇게 사용하고자 하는 컴포넌트에서 사용하시면 끝입니다.. 아주 간단해서 그다지 할 말이 없습니다..

마치며..

사실 이번 포스팅에 해당 게시물을 클릭했을 때 작성한 md 파일을 불러와 표시하는 과정도 기록해보려 했으나.. 너무 길어질 거 같아 나누기로 결심했습니다…

고로 다음 포스팅은 md 파일을 읽어와 표시하는 과정을 기록해보려 합니다.