라이브러리 없이 슬라이드 구현하기

라이브러리 없이 슬라이드 구현하기

입사 후에 회사일에 바빠서 이제야 예전에 혼자 했던 프로젝트를 조금씩 손보고 있는데

오늘 개인 프로젝트하면서 게시글을 슬라이드처럼 볼 수 있는 방식이 필요해서 구현하는 방법을 담았다.

리액트에서 해당 기능을 react-slick라는 라이브러리로 쉽게 구현할 수 있다.

그런데 이번 프로젝트에서 목표한 내용은 간단하게 버튼을 누르면 게시물이 넘어가는 방식을 이용할 것이기에

굳이 큰 어려움이 없을 것이라 예상되며 의존성을 추가하면서까지 구현할 필요 없다고 느껴 직접 구현하기로 결정했다.

목표

크게 작동하는 방식으로는

  1. 리스트에 처음과 끝은 비활성화 되는 이동 버튼이 존재하며

  2. 이동 버튼을 눌러 앞뒤로 넘어가고,

  3. 이동할 때 게시물이 부드럽게 넘어간다. (애니메이션 존재)

이 때 이미 컴포넌트들은 이미 불러와져있으며 화면에 벗어난 요소들은 overflow : hidden로 가리게 된다.

구현

export default function 구현함수({ data }: { data: QuestionFetchData }) {
  const [current, setCurrent] = useState(1);
  const movePercentage = -(current * 100) / 3;
  const prevHandler = () => {
    setCurrent(() => {
      if (current === -1) {
        return current;
      } else {
        return current - 1;
      }
    });
  };
  const nextHandler = () => {
    setCurrent(() => {
      if (current === 1) {
        return current;
      } else {
        return current + 1;
      }
    });
  };

  return (
    <div className="flex flex-col items-center w-full overflow-hidden">
      <div className="flex w-full justify-end">
        <button onClick={prevHandler} className="w-4 opacity-50">
          {'<'}
        </button>
        <button onClick={nextHandler} className="w-4 opacity-50">
          {'>'}
        </button>
      </div>
      <div
        className="flex relative right-0 w-[300%]"
        style={{
          transform: `translateX(${movePercentage}%)`,
          transition: 'transform 0.5s ease-in-out',
        }}
      >
        {data?.data.map((question: QuestionData) => {
          return (
            <div key={question.questionId} className="w-1/3 ml-2 mr-2">
              <QuestionCard data={question} />
            </div>
          );
        })}
      </div>
    </div>
  );
}