간단한 캐로셀 만들기

아주아주 간단한 방법으로 캐로셀을 만들 수 있었다.
아니 난..이때동안 바보였나보다.
이렇게 간단한 방법인데 못만들었다니!!!!ㅠㅠㅠㅠ
우선 간단한 방법을 여러분에게 소개합니다~ 너무간단하고쉬운방법입니다.

1. 간단하게 틀 제작하기

<ul>
	{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
		<li className={styles.in} key={item}>
			{item}
		</li>
	))}
</ul>

저는 마땅한 이미지를 아직 찾지 못했기 때문에 간단하게 숫자를 넣어주었습니다.
여기서 반성 하나!
저는 이때동안 div나 ul-li를 쓸 때, 가로로 정렬을 할 때마다 flex를 사용했습니다.
그러다보니 처음에 ul의 크기보다 li의 크기를 크게 했을 때, ul의 크기에 맞춰 줄어드는 현상이 발생했습니다.
당시에는 도대체 무슨 부분이 잘못되었는지 이해하지 못했습니다 흑흑
그래서 왓챠피디아의 캐로셀을 한 번 뜯어보았습니다.

여기서는 display : flex를 쓰지 않고, li에 display : inline-block를 사용했다는 것을 확인할 수 있었습니다. 으악
li는 display 속성이 list-item이기 때문에 width가 지정되지 않는 것 같습니다.
(이 부분은..혹시나 제 글을 보시는 분이 계시다면 정정 부탁드립니다)
block으로 width를 고정시켜줘야 하는데, block으로 설정 시 세로로 정렬이 됩니다.
그러므로 우리가 원하는 가로 정렬 모양으로 사용하기 위해서 display : inline-block으로 설정해야 합니다.

현재 상태에서 화면 크기가 작을 경우, 위와 같이 줄바꿈 현상이 일어납니다.
이를 해결하기 위해 white-space: nowrap; 를 적용해서 줄바꿈을 하지 않도록 합니다.
그리고 외부에 비해 길이가 길기 때문에 뒷 부분을 숨기기 위해 overflow: hidden; 를 적용하면 캐로셀의 틀이 완성됩니다.

2. 움직이기

캐로셀을 움직이기 위해 translate을 이용했습니다.

이렇게 ul 태그에 transform : translateX()을 적용하고 안에 li 태그 크기인 200px만큼 값을 넣어주면 움직이는 모습을 볼 수 있습니다.
이제 버튼을 클릭할 때 움직이도록 구현해봅시다.

3. 버튼 적용하고 움직이기

우선 캐로셀을 좌, 우로 움직일 버튼을 먼저 만들어봅시다.

<button
	type='button'
	className={cs(styles.moveBtn, styles.left, { [styles.hide]: carouselCount === 0 })}
	data-value='left'
	onClick={handleClickBtn}
>
	<div className={cs(styles.arrow, styles.iconLeft)} />
</button>

저는 classnames라이브러리를 사용하기 때문에 위와 같이 버튼 태그를 이용하여 버튼을 구현했습니다.
dataset을 이용해서 버튼이 왼쪽인지 오른쪽인지 구분할 수 있도록 했습니다.
classname에 hide를 추가해서 캐로셀이 오른쪽 끝이나 왼쪽 끝일 경우 버튼을 클릭할 수 없게 사라지도록 구현했습니다.

const [carouselCount, setCarouselCount] = useState(0);

const handleClickBtn = (e: MouseEvent<HTMLButtonElement>) => {
    const { value } = e.currentTarget.dataset;

    if (value === 'left') {
      setCarouselCount((prev) => prev + 200);
    } else {
      setCarouselCount((prev) => prev - 200);
    }
  };

버튼 기능은 위와 같이 작동합니다.
오른쪽 버튼을 클릭하면 현재값 - 200, 왼쪽 버튼을 클릭하면 현재값 + 200이 되도록 구현했습니다.
물론 if문을 사용하지 않고도 아래와 같이 삼항 연산자를 이용해서 간단하게 나타낼 수 있습니다.

setCarouselCount((prev) => (value === 'left' ? prev + 200 : prev - 200));

삼항 연산자로 코드 줄 수를 줄였습니다 굳굳

부가 : 애니메이션

너무 딱딱한 느낌이고 캐로셀의 그 슉슉 넘어가는 느낌이 나지 않아 아주 간단한 애니메이션 효과를 적용해봅시다.
딱 한 줄만 추가하면 됩니다.

transition: 0.3s;

짠 이 트랜지션만 ul태그에 적용해주면 아래와 같이 부드럽게 넘어가는 캐로셀을 완성할 수 있습니다.

---

이렇게 해서 간단하게 캐로셀을 완성했습니다.
코드는 제 깃허브에 있고, main 브랜치에 코드가 없을 경우 dev 브랜치에 있습니다.
끝!