[React/CSS] instagram 스토리처럼 드래그로 요소 넘기기

🤔 서론

현재 나만무 프로젝트를 진행 중인데, 최근 게시물을 어떻게 보여줄 수 있을까 고민을 하다가 인스타그램의 스토리 기능이 생각났고 해당 부분의 인터랙션을 차용하려 한다.

🥅 목표

인스타그램 상단에는 최근 스토리를 올린 사람의 프로필이 뜬다. 터치해서 좌우를 자유롭게 움직일 수 있다.(모바일 기준) 해당 인터랙션처럼 드래그로 프로필을 움직이는 것을 구현하려 했다.

👩🏻‍💻 구현

전체 코드

const getFriends = async () => {
  ...
  const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
  const [startX, setStartX] = useState<number>(0);
  const [scrollLeft, setScrollLeft] = useState<number>(0);
  ...
  
  const handleMouseDown = (
    e: React.MouseEvent<HTMLUListElement, MouseEvent>
  ) => {
    setIsMouseDown(true);
    setStartX(e.clientX - (listRef.current?.offsetLeft || 0));
    setScrollLeft(listRef.current?.scrollLeft || 0);
  };

  const handleMouseLeave = () => {
    setIsMouseDown(false);
  };

  const handleMouseMove = (
    e: React.MouseEvent<HTMLUListElement, MouseEvent>
  ) => {
    if (!isMouseDown) return;
    e.preventDefault();
    const x = e.clientX - (listRef.current?.offsetLeft || 0);
    const walk = x - startX; // 여기서 walk 값으로 스크롤 양을 조절합니다
    if (listRef.current) {
      listRef.current.scrollLeft = scrollLeft - walk;
    }
  };

  ...

  return (
    <div>
      <p className="text-3xl font-semibold">친구</p>
      <ul
        ref={listRef}
        className="flex justify-start py-5 overflow-x-hidden overflow-y-hidden scrolling-touch select-none w-full cursor-grab"
        onMouseDown={handleMouseDown}
        onMouseLeave={handleMouseLeave}
        onMouseUp={handleMouseLeave}
        onMouseMove={handleMouseMove}
      >
        {friends &&
          friends.map((f) => {
            return (
              <li
                key={f.id}
                className="m-3 p-1 flex-shrink-0 bg-gradient-to-tr from-violet-600 to-yellow-300 rounded-full"
              >
                <img
                  src={f.image}
                  className="w-20 h-20 rounded-full transform transition hover:-rotate-6 cursor-pointer"
                  alt="profile"
                />
              </li>
            );
          })}
      </ul>
	 ...
    </div>
  );
}

부가 설명

  const handleMouseDown = (
    e: React.MouseEvent<HTMLUListElement, MouseEvent>
  ) => {
    setIsMouseDown(true);
    setStartX(e.clientX - (listRef.current?.offsetLeft || 0));
    setScrollLeft(listRef.current?.scrollLeft || 0);
  };

  const handleMouseLeave = () => {
    setIsMouseDown(false);
  };

  const handleMouseMove = (
    e: React.MouseEvent<HTMLUListElement, MouseEvent>
  ) => {
    if (!isMouseDown) return;
    e.preventDefault();
    const x = e.clientX - (listRef.current?.offsetLeft || 0);
    const walk = x - startX;
    if (listRef.current) {
      listRef.current.scrollLeft = scrollLeft - walk;
    }
  };

• handleMouseDown
  사용자가 마우스 버튼을 누르고 있을 때 호출되는 함수로, setIsMouseDown(true)를 사용하여 사용자가 마우스를 누르고 있음을 나타낸다. e.clientX는 브라우저 뷰포트를 기준으로 마우스 포인터의 수평 위치(x좌표)를 가져오고, listRef.current?.offsetLeft는 ul 요소의 왼쪽 경계가 뷰포트의 왼쪽 경계로부터 얼마나 떨어져있는지(픽셀 수)를 나타낸다.
• || 0은 값이 존재하지 않을 때 발생할 수 있는 오류를 방지한다.

🤔 브라우저 뷰포트(viewport)란?
웹 브라우저 창 내에서 실제로 웹 페이지의 내용이 표시되는 영역

• handleMouseMove
  마우스가 ul 요소 위에서 움직일 때 호출되는 함수이다. e.preventDefault()는 기본 마우스 이벤트를 막아 사용자 정의 드래그 동작만 발생한다. 처음 마우스를 클릭했을 때 저장한 마우스 위치인 startX로부터 떨어진 거리를 계산해 walk에 저장한다. 마지막으로 listRef.current.scrollLeft를 업데이트하여 ul 요소를 스크롤한다. scrollleft는 처음 마우스를 눌렀을 때 스크롤이 어디에 있었는지를 나타내고, walk는 마우스를 움직인 거리를 나타내어, scrollLeft-walk는 새로운 스크롤 위치를 계산하고 listRef.current.scrollLeft를 설정하여 스크롤이 움직이게 된다.

🤔 Element.scrollLeft
요소의 콘텐츠가 왼쪽 가장자리에서 스크롤되는 픽셀 수를 가져오거나 설정하는 속성

🤔 왜 마지막 줄이 scrollLeft + walk이 아니라 scrollLeft - walk인가?
scrollLeft는 요소의 스크롤 위치를 나타내며 왼쪽 끝에서 시작하여 오른쪽으로 갈수록 증가한다. walk은 마우스를 누른 위치와 현재 마우스의 위치 사이의 차이를 나타낸다. 만약 사용자가 마우스를 오른쪽으로 드래그하면 walk는 양수가 된다. 하지만 마우스를 오른쪽으로 드래그하면 스크롤이 왼쪽으로 이동해야 하기 때문에 scrollLeft값을 감소시켜야 한다. 즉, 스크롤 방향과 마우스 드래그 방향이 반대이기 때문이다.

<ul
  ref={listRef}
  className="flex justify-start py-5 overflow-x-hidden overflow-y-hidden scrolling-touch w-full cursor-grab"
  onMouseDown={handleMouseDown}
  onMouseLeave={handleMouseLeave}
  onMouseUp={handleMouseLeave}
  onMouseMove={handleMouseMove}
>

• w-full로 가로 길이를 정하고 overflow-x-hidden으로 정해진 가로 길이보다 내용이 넘치면 숨깁니다. 그리고 요소의 경계 안에 들어올 경우에 커서 모양을 grab으로 설정한다.
• onMouseDown, onMouseLeave, onMouseUp, onMouseMove는 웹 브라우저에서 기본적으로 제공하는 마우스 이벤트이다.

<img
  src={f.image}
  className="w-20 h-20 rounded-full transform transition hover:-rotate-6 cursor-pointer"
  alt="profile"
/>

• hover:-rotate-6으로 이미지에 hover(커서를 가져다 댔을 때)했을 때 이미지가 회전한다.
• cursor-pointer를 설정하여 img의 경계 안에 들어올 경우 커서 모양이 pointer가 된다.

✨ 결과

참고자료

• https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft