![스크린샷 2024-09-04 오후 8 16 57](https://private-user-images.githubusercontent.com/79933417/364354848-c81096b2-3fc6-4f5e-948e-f8af77a86c36.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzc3ODc5MzMsIm5iZiI6MTczNzc4NzYzMywicGF0aCI6Ii83OTkzMzQxNy8zNjQzNTQ4NDgtYzgxMDk2YjItM2ZjNi00ZjVlLTk0OGUtZjhhZjc3YTg2YzM2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAxMjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMTI1VDA2NDcxM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE2NTEzNzhmODg3Y2YxNDg0ZTVhZGE0ZDY4MGIxOTI2YzUxZjRiZGM3YjlmZDRhOGMxZGM4ZWQ3OWE1NTkxZTUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.5rQn4yjUWmFEnC1I6VUnBRkh2SNs57S-FRgSNFnnwj0)
Amazon에서 구현된 컨텍스트 메뉴 접근 방식으로, 부모 메뉴와 하위 메뉴 하단에 보이지 않는 삼각형 영역을 구성해 부모 메뉴를 벗어나 대각선 형태로 마우스 커서를 옮겨도 하위 메뉴가 활성화될 수 있도록 하는 방식입니다.
구현은 총 2가지로 구성되어 있습니다.
- 부모 메뉴 내 커서 이동 시 가변하는 target area
- useMenu 훅을 통해 부모 메뉴 내 커서 좌표를 스타일로 전달
- 가상 선택자와 clip-path를 활용해 하위 영역 구성
- 최소 너비로 고정된 target area
- 커서 좌표 업데이트 함수 미전달, 초기값 설정으로 최소 너비 지정 (부모 메뉴의 1/3에 해당하는 너비)
자세한 구현 내용은 블로그에서 확인하실 수 있습니다.
- Git Clone
$ git clone https://github.com/sangseophwang/safe-triangle-target-area-practice.git
- 프로젝트 패키지 설치
$ npm install
- 프로젝트 실행
$ npm start