우아한 테크캠프 4주차 코드리뷰 시간에 크롱님께서 언급하신 쇼핑사이트 메뉴 UX 개선에 대해 흥미가 생겼습니다.

우아한형제들에서도 배민상회(https://mart.baemin.com/)라는 자영업자 분들을 위한 쇼핑사이트를 운영하고 있는데요.

상위 메뉴에서 하위 메뉴로 갈때 다음과 같은 움직임을 볼 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3b7eea5c-81b2-41d0-af10-3bae23d81e00/1.gif

가공식품 → 밀가루/라면/믹스류. 다이렉트로 가고싶다.

이런 상황에서 메뉴 상위 메뉴가 바뀌지 않게 만들고 싶은데 어떻게 하면 좋을까요?

크롬 확장 프로그램을 사용해서 직접 만든 코드를 실행시켜 봅시다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/411f8d60-9d8b-44f8-a5b9-b59cd2077d42/Untitled.png

폴더 구조

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7e1f1f23-44e6-4a6b-8b06-94392e96ab7b/3.png

크롬에서 확장 프로그램 개발자 모드를 켜고 manifest.json이 있는 폴더를 로드하면 직접 만든 확장프로그램을 사용할 수 있습니다.

전체 카테고리가 활성화 되는 순간 카테고리 div 태그의 클래스가 'eubhXB'에서 'gAuTok'로 바뀌는 것을 확인할 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/53520c80-c515-447b-b4d9-abe8e3fa799a/2.gif

querySelector로 'gAuTok' 클래스를 찾아서 이 클래스가 있을때만 이벤트를 처리하면 될 것 같은 느낌이 듭니다.

그리고 어떤 이벤트를 막아야 메뉴가 바뀌지 않는지 알아야합니다.