DotButton이 작동하지 않는 문제

이벤트 버블링 문제는 아니였고

버튼의 정 가운데를 클릭하면 작동을 하지만 조금 외곽을 클릭하면 버튼이 작동을 하지않았다.

export const Carousel2DotButton = styled.button`
  border-radius: 50%;
  width: 12px;
  height: 12px;
  border: none;
  background-color: white;
  cursor: pointer;
  :active {
    transform: scale(0.7);
  }
`;

transform: scale(0.7);은 요소의 크기를 0.7배로 축소하는 CSS 속성입니다. 이 속성을 사용하면 요소의 크기가 변경되므로, 버튼 동작에 영향을 줄 수 있습니다.

버튼의 동작에 대한 영향은 요소의 크기가 변경됨에 따라 다를 수 있습니다. 작은 크기로 축소된 버튼은 클릭 영역이 작아지기 때문에 사용자가 버튼을 정확하게 클릭하기 어려울 수 있습니다. 또한, 클릭 이벤트 핸들러의 동작이 예상과 다르게 작동할 수 있습니다.

따라서, transform: scale(0.7);을 사용할 때는 버튼 동작에 대한 영향을 고려해야 합니다. 사용자 경험과 버튼의 동작을 원활하게 유지하기 위해서는 축소된 크기에도 적절한 클릭 영역을 유지하는 것이 중요합니다. 이를 위해 버튼 요소에 적절한 패딩(padding) 또는 마진(margin) 값을 설정하여 축소된 크기에서도 클릭 가능한 영역을 확보하는 것이 좋습니다.

즉, transform: scale(0.7);을 사용할 때는 버튼의 동작과 사용자 경험에 대한 영향을 고려하고, 축소된 크기에서도 적절한 클릭 영역을 유지할 수 있는 방법을 고려해야 합니다.

scale이 작동하는 시기가 setTransX의 상태값이 변경되는 시기가 다르기 때문에 발생하는 거라고 추측하고 있다. 버튼을 클릭하지만 비동기 함수인 setTransX는 나중에 실행되고 버튼의 크기가 0.7로 줄어들기 때문에 0.7~ 1.0의 부분을 클릭했을 때에는 어떠한 이유? 에서 작동하지 않는 거 아닐까?

🔵 padding: 9px; 정도 주었더니 쾌적하게 작동하였지만 버튼이 작아지는 애니메이션이 현저히 감소하였다.

🔵 margin은 어떤 영향도 확인할 수 없었다.

🔵 scale을 0.9로 바꾸었더니 버튼이 잘 작동 하였다.