마우스 드래그를 이용한 범위 지정, 리사이징 및 이동 기능 구현하기

올리브영은 매월 100건 이상의 기획전을 운영하며 발생하는 단순 반복적인 마크업 작업을 개선하기 위해 자체적인 기획전 제작 툴을 개발했다. 기존의 하드 코딩 방식에서 벗어나 작업 효율을 높이는 것이 핵심 목표다.

구현된 툴은 마우스 드래그를 통해 액션 영역을 지정하고, 해당 영역의 크기를 조절하거나 위치를 이동할 수 있는 기능을 제공한다. 지정된 영역에는 드롭박스 선택이나 텍스트 입력 등의 액션 유형을 설정할 수 있다.

기술적으로는 Repaint와 Reflow를 방지하기 위해 top, left 대신 transform 속성의 translate와 scale을 사용했다. 또한 pageX, pageY와 같은 마우스 이벤트 객체의 위치 프로퍼티를 활용하여 정밀한 좌표 계산을 수행한다.