승섭 8/5

진행중인 프로젝트에 캐러셀 적용하기

캐러셀이란??

캐러셀은 여러개의 이미지나 동영상을 슬라이드 형태로 만드는 것이다.

캐러셀의 유명한 라이브러리로는 swiper, react/slick 와 Embla-Carousel 정도가 있는데 이 중 나는 Embla-Carousel 쓰기로 결정했는데 그 이유로는

1. 공식문서의 친절함
2. 예제코드의 존재
3. 커뮤니티
4. 캐러셀 라이브러리라면, 커스텀의 자유도

가 있다.

우선 시작하기 위해서

$ npm install embla-carousel-react --save

를 터미널에 입력한다.

그 후에

import useEmblaCarousel, { EmblaOptionsType } from "embla-carousel-react";

이 코드를 입력해야지 라이브러리를 사용할 수 있다.

import React, { ReactNode, useCallback, useEffect, useState } from "react";
import useEmblaCarousel, { EmblaOptionsType } from "embla-carousel-react";

type PropType = {
  options?: EmblaOptionsType;
  slides: ReactNode[];
};

export const EmblaCarousel = (props: PropType) => {
  const { options, slides } = props; // props로 가져온 옵션과 슬라이드 리스트
  const [emblaRef, embla] = useEmblaCarousel(options); // 슬라이더 구현에 필요한 요소들을 useEmblaCarousel 에서 가져온다.
  const [selectedIndex, setSelectedindex] = useState(0); // 현재 보여지는 인덱스를 설정
  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]); // 스크롤 스냅 Point 를 설정할 때 사용할 state

  // 이 코드는 구현할 때 사용하지 않았다. 하지만 나중에 혹시 쓰일 수 있을 것 같아서 남겨뒀다.
  const scrollTo = useCallback(
    (index: number) => embla && embla.scrollTo(index),
    [embla]
  );

  // 현재 선택된 슬라이더의 순서(인덱스)를 저장을 위한 함수
  const onSelect = useCallback(() => {
    if (!embla) return;
    setSelectedindex(embla.selectedScrollSnap()); 
    // selectedScrollSnap:  선택한 스냅 Point의 인덱스를 가져온다.
  }, [embla, setSelectedindex]);

  useEffect(() => {
    if (!embla) return;
    onSelect();
    setScrollSnaps(embla.scrollSnapList());
    embla.on("select", onSelect);
  }, [embla, setScrollSnaps, onSelect]);

  return (
    <div className="w-full relative rounded-md ">
      <div className="overflow-hidden relative rounded-md" ref={emblaRef}>
        <div className="flex flex-col flex-wrap h-44 flex-none">
          {slides.map((slide, index) => (
            <div className="w-full h-44 relative mx-1" key={index}>
              {slide}
            </div>
          ))}
        </div>
        <div className="absolute right-2 bottom-2 bg-[#0e0e0e72] rounded-full">
          <div className="flex justify-evenly items-center text-xs w-9 font-semibold">
            <span className="text-white">{selectedIndex + 1}</span>
            <div className="w-[2.05px] h-[2.05px] rounded-full bg-[#ffffffb2]" />
            <span className="text-[#ffffffb2]">{slides.length}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default EmblaCarousel;

위의 코드는 https://velog.io/@pjj186/Next.js%EC%97%90%EC%84%9C-Embla-Carousel-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-Carousel-Slider-%EB%A7%8C%EB%93%A4%EA%B8%B0
여기에 나와있는 예제코드인데 해당 코드와 공식문서를 참고하여 내 프로젝트에 적용할 예정이다.
중요한 것은 리스트에 관한 전체 코드를 하나 작성하고 해당 item에 적용해야하는 코드 하나 총 2개의 코드를 작성해야하며, 스타일을 적용할 css 파일 또한 있어야 한다.


다음 게시물은 내 프로젝트에 직접 적용한 코드를 올릴 에정이다.

참고 문헌

• https://velog.io/@igun0423/%EC%BA%90%EB%9F%AC%EC%85%80-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%B6%94%EC%B2%9C-Embla-Carousel#%EC%99%84%EC%84%B1
• https://velog.io/@pjj186/Next.js%EC%97%90%EC%84%9C-Embla-Carousel-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-Carousel-Slider-%EB%A7%8C%EB%93%A4%EA%B8%B0