문제가 발생한 배경

프로젝트에 DnD + Carousel을 같이 사용할 때 문제가 없는지 테스트하는 과정에서 항목을 드래그하면서 옆으로 이동하는게 안되는 상황

• 문제 상황
  

---

문제의 원인 알아보기

여러가지 테스트를 해보면서 원인을 파악하였는데 Carousel의 스냅 기능을 사용하지 않으면 정상적으로 동작하는 것을 확인하였다.

• 스냅 기능이란?
  사용자가 캐러셀을 슬라이드할 때, 각 슬라이드가 화면에 정확히 맞춰져 보이도록 하는 기능을 말한다.

• CSS 코드

.wrap {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-behavior: smooth; // 스크롤 부드럽게 설정
  scroll-snap-type: x mandatory; // 가로 스크롤 동작 스냅 설정
  scrollbar-width: none;
}

.box {
  width: 780px;
  min-height: 800px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-snap-align: start; // 스크롤 지점 정렬
}

스냅 기능을 제거 해주면 이제 옆으로 이동을 할 수는 있지만 굉장히 답답한 속도로 이동을 한다.

이 문제도 스크롤을 부드럽게 해주는 설정을 제거 해주면 정상적으로 이동할 수 있다!

---

문제 해결 방법

사실 위에 방법으로 스냅 기능, 스크롤 부드럽게 해주는 설정을 제거하여 옆으로 이동하지 못하는 이슈는 해결하였지만 스냅 기능 CSS 코드를 제거해주었기 때문에 내가 직접 스크롤 이벤트로 스냅 기능을 구현해주어야 한다...

현재 상황

• 유저가 마우스로 스와이프 한 만큼만 이동할 수 있다.
• 스냅 기능이 사라져 딱 맞게 스와이프 되지 않는다.
  

사실 팀원분이 지금 방식도 괜찮다고 말씀해주셨지만 옆으로 항목이 많고 모니터가 작으면 그만큼 유저가 동작시켜야 할 이벤트가 많아져 마음에 들지않아 스크롤 이벤트로 스냅 기능을 비슷하게 구현해보려고 한다!

박스 크기를 계산해서 좌/우 스와이프만 구분해서 그만큼 스크롤을 이동시켜주면 스냅 기능과 같은 동작을 할 수 있을 것 같다.

• 구현 코드

  const handlePrevCard = () => {
    cardContainer.current.scrollBy({
      left: -820, // 박스 크기 계산
      top: 0,
      behavior: "smooth",
    });
  };

  const handleNextCard = () => {
    cardContainer.current.scrollBy({
      left: 820, // 박스 크기 계산
      top: 0,
      behavior: "smooth",
    });
  };

const handleSwipeAction = (xDiff: any) => {
    if (xDiff > 0) { //우측 이동
      handleNextCard();
      return;
    }
    // 좌측 이동
    handlePrevCard();
  };

  const handleMove = () => {
    if (!xDown.current) {
      return;
    }
    const xDiff = xDown.current - xUp.current;
    if (xDiff !== 0) {
      handleSwipeAction(xDiff);
    }
    // 좌표 초기화
    xDown.current = null;
    xUp.current = null;
  };

  // 마우스 누를 때 동작
  const handleMouseDown = (e: MouseEvent) => {
    const target = e.target as HTMLElement;
    if (target.dataset.status === "item") {
      return;
    }

    xDown.current = e.clientX;
    document.body.style.userSelect = "none";
  };

  // 마우스 뗄 때 동작
  const handleMouseUp = (e: MouseEvent) => {
    xUp.current = e.clientX;
    handleMove();
    document.body.style.userSelect = "";
  };

• 구현 영상
  

이전 방식에 비해 스와이프 했을 때 일관성있는 UI를 볼 수 있다.

---

최종 동작 영상

조금 더 유저에게 좋은 환경을 제공하여 UX를 개선하고 싶어서 좌/우 버튼도 추가해 주었다!