hotfix: 드래그 이벤트와 클릭 이벤트 분리

[shackstack]

✨ 설명

useOnClickBlock 이라는 커스텀 훅을 생성하여 오류를 개선하였습니다.

interface UseOnClickBlockProps {
  callback: () => void;
}

const useOnClickBlock = ({ callback }: UseOnClickBlockProps) => {
  const [isDragging, setIsDragging] = useState<boolean>(false);

  const handleMouseDown = useCallback(() => {
    setIsDragging(false);
  }, []);

  const handleMouseMove = useCallback(() => {
    setIsDragging(true);
  }, []);

  const handleClick = () => {
    if (isDragging) return;
    callback();
  };

  return { onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onClick: handleClick };
};

isDragging : 드래그중인지 여부를 불리언 값의 상태로 관리합니다.
handleMouseDown : 마우스를 누르면 우선 isDragging을false로 초기화합니다.
handleMouseMove : 이후 마우스를 누른 상태로 움직인다면isDragging을�true로 상태를 업데이트합니다.
handleClick : 마우스를 올렸을 때 (손에서 때었을 때) 드래그 중이라면 early return을, 드래그 중이 아니라면 콜백을 실행시킵니다.

이 훅을 슬라이더가 적용된 컴포넌트에 적용시킴으로써 해결하였습니다.

사용 예시

function CelebProfile({ name, profileImageUrl, id }: Celeb) {
  const navigate = useNavigate();
  const register = useOnClickBlock({
    callback: () => navigate(`/celeb/${id}`),
  });

  return (
    <StyledCeleb {...register}>
      <ProfileImage name={name} imageUrl={profileImageUrl} size="64px" boxShadow />
      <span>{name}</span>
    </StyledCeleb>
  );
}

😎 해결한 이슈

• close [🐞 bug] 드래그 이벤트와 클릭 이벤트 분리 #686