pile·
프론트엔드·oliveyoung올리브영 테크블로그·

마우스 드래그로 범위 지정과 리사이징 및 이동 구현하기

문제프로모션 콘텐츠 마크업이 매월 100건 넘게 수작업 하드코딩으로 처리되며 반복 작업과 자원 낭비를 유발했다. 드래그로 영역을 지정하고 자동으로 마크업을 생성하는 도구가 필요했다.
접근`onmousedown/onmousemove/onmouseup` 이벤트에서 `pageX/pageY` 좌표를 받아 박스를 그리고, `position:absolute` 위에 CSS `translate()`·`scale()`로 이동·리사이즈를 적용해 Repaint/Reflow를 피했다. `WebKitCSSMatrix`로 transform 문자열에서 값을 다시 꺼내 쓰고, 박스 모서리 20px 패딩 영역으로 리사이즈 핸들을 구분했다.
결과드래그 영역 지정·액션 타입 설정·마크업 자동 생성까지 한 화면에서 가능해져 프로모션 콘텐츠 제작 프로세스가 단순해지고 작업 속도와 효율이 올라갔다.
oliveyoung
올리브영 테크블로그 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2