우아한 테크캠프 4주차 코드리뷰 시간에 크롱님께서 언급하신 쇼핑사이트 메뉴 UX 개선에 대해 흥미가 생겼습니다.
우아한형제들에서도 배민상회(https://mart.baemin.com/)라는 자영업자 분들을 위한 쇼핑사이트를 운영하고 있는데요.
상위 메뉴에서 하위 메뉴로 갈때 다음과 같은 움직임을 볼 수 있습니다.
가공식품 → 밀가루/라면/믹스류. 다이렉트로 가고싶다.
이런 상황에서 메뉴 상위 메뉴가 바뀌지 않게 만들고 싶은데 어떻게 하면 좋을까요?
크롬 확장 프로그램을 사용해서 직접 만든 코드를 실행시켜 봅시다.
폴더 구조
크롬에서 확장 프로그램 개발자 모드를 켜고 manifest.json이 있는 폴더를 로드하면 직접 만든 확장프로그램을 사용할 수 있습니다.
전체 카테고리가 활성화 되는 순간 카테고리 div 태그의 클래스가 'eubhXB'에서 'gAuTok'로 바뀌는 것을 확인할 수 있습니다.
querySelector로 'gAuTok' 클래스를 찾아서 이 클래스가 있을때만 이벤트를 처리하면 될 것 같은 느낌이 듭니다.
그리고 어떤 이벤트를 막아야 메뉴가 바뀌지 않는지 알아야합니다.