TouchScroll 개발 시 발생한 이슈

최근 스와이퍼(캐러셀)을 사용해야하는 경우가 있었지만 인덱싱 기능이나 화살표 기능, 오토 플레이 등과 같은 스와이퍼 옵션 기능을 사용할 필요가 없었기에 오버 엔지니어링이라고 판단하여 그냥 드래그 가능한 리스트를 직접 개발했다.

문제

이 때 발생한 문제가 리스트에 스타일링한 overflow : hidden 속성 때문에 자식 컴포넌트에서 보여지는 네비게이션 컴포넌트가 저렇게 짤리는 경우가 발생했다.

해결방안

1. 네비게이션 계층을 전역으로 두고 관리하기
2. 자식 컴포넌트에서 마우스 hover시 네비게이션 위치 판단하기
3. CSS 선택자로 해결하기

1. 네비게이션 계층을 전역으로 두고 관리하기

네비게이션 계층을 전역으로 두고 관리하면 overflow : hidden 의 영향을 받지 않기 때문에 좋은 방법인 것 같다 하지만 컴포넌트 구조를 다시 설계해야하는 번거로움 때문에 깔끔하게 포기하기로 했다.

2. 자식 컴포넌트에서 마우스 hover시 네비게이션 위치 판단하기

컴포넌트에 마우스 hover 이벤트를 등록하고 target의 offset 값을 계산하여 네비게이션의 translate 속성을 지정해주려고 했다.

  const onMouseOver = (e: React.MouseEvent<HTMLButtonElement>) => {
    const target = e.target as Element;
    if (target.localName === "button") {
      const rect = target.getBoundingClientRect();
      console.log(rect);
    }
  };

하지만 이렇게 되었을 시 컴포넌트 내부에 있는 target이 잡힐 때도 있어 정확한 박스의 위치를 계산하지 못했다.

부모 컴포넌트(리스트) 에서 이벤트리스너를 등록한 뒤 사용하면 더 좋은 해결방안이 생길수도 있겠다. 나중에 리팩토링할 때 참고해야겠다.

3. CSS 선택자로 해결하기

저렇게 2번째 컴포넌트 부터 범위를 벗어나지 않는걸 감안해 안전하게 5번째 인덱스 까지 네비게이션 컴포넌트를 left:0 속성을 주고 그 이후의 모든 컴포넌트는 right:0을 주면 어떨 까 해서 시도해보았다.