[작품] - 메뉴 별로 가게 리스트 띄우기

1. 개요

저번에는 지역 선택별로 가게 리스트를 띄웠다면 이제는 메뉴별로 가게를 띄우게 할 예정이다. 사이트 구조상 지역을 선택하고 메뉴 선택을 할 수 있게 만들었기 때문에 지역 필터가 적용된 가운데 메뉴필터도 적용이 되어야 했다. 물론 아무 지역을 선택하지 않아도 메뉴 필터는 적용이 되어야 한다는 점도 적용해야 했다. 

 

구현한 영상

잘 작동하는 모습을 볼 수 있다. ㅎㅎ

 

2. 구현하기(지역 필터 안했을 때)

2-1 각각의 메뉴들을 클릭했을 때의 이벤트 주기

const sortedMenu = document.querySelectorAll("#sortedMenu");
  sortedMenu.forEach((el) => {
    el.addEventListener("click", function () {
    
    )};
  )};

querySelectorAll를 사용하여 모든 메뉴들을 가져오고 forEach를 써서 각각의 메뉴가 클릭되었을 때 이벤트를 주는 모습이다.

 

2-2 클릭된 메뉴들만 화면에 띄우기

 Store_Zone.innerHTML = "";
      let menus = el.parentElement.lastElementChild.innerHTML; // 클릭된 메뉴의 이름을 추출
      data.forEach((item) => {
        if (item.foodType === menus) {
          // DOM 요소 생성
      });

먼저 기존에 생성된 가게 리스트들을 innerHTML로 지우고 클릭된 메뉴의 이름을 추출한다. 

데이터베이스의 foodType

fetch를 통해 가져온 데이터중 foodType이랑 비교해서 메뉴의 이름과 같으면 DOM요소를 생성한다.

function menuClick(data) {
  const sortedMenu = document.querySelectorAll("#sortedMenu");
  sortedMenu.forEach((el) => {
    el.addEventListener("click", function () {
      Store_Zone.innerHTML = "";
      let menus = el.parentElement.lastElementChild.innerHTML; //한식
      data.forEach((item) => {
        if (item.foodType === menus) {
          //DOM 요소
        }
      });
    });
  });
}

 

2-3 함수의 위치 지정하기

fetch를 통해서 모든 가게의 리스트를 가져오는 함수 뒤에 추가해주면 된다.

// db의 데이터를 가져와서 가게 리스트들을 나열
fetch("http://localhost:4000/mainpage")
  .then((res) => {
    return res.json();
  })
  .then((data) => {
    storeList(data);
    menuClick(data);
  })

  .catch((error) => {
    console.log(error);
  });

 

이렇게 지역을 선택하지 않고 메뉴필터를 사용할 때는 바로 가게 리스트를 띄어주는 함수 뒤에 위치시키면 되었지만 지역선택을 하고 메뉴를 선택할 때는 어디에 이 함수를 붙여야 할지 감이 잘 안왔다.

하지만 의외로 간단하게 생각하니 바로 해결 되었다. 

지역 필터가 적용이 되고 나서 메뉴 필터가 적용이 되어야 하니 이전과 같은 원리로 지역 필터의 함수 뒤에 위치시키면 될 것같다고 판단되었다.

 

2. 구현하기(지역 필터 했을 때)

기존 지역 필터와는 다른 점은 매개변수로 클릭된 지역들이 담긴 배열을 가져와야 했다.

따라서  가게들이 나오는 조건이 살짝 달라졌다.

지역필터의 조건을 만족하면서 메뉴조건도 만족할 수 있도록 조건문을 바꾸면 해결된다. 

이렇게 총 3개의 함수를 만들었다.

function menuClick_Mul(data,array){		//여러 지역 선택한 경우
 	if (item.foodType === menus && array.includes(item.addressName.split(" ")[1]))
}

function menuClick_Sol(data,array){		// 한 지역만 선택한 경우
     if (item.foodType === menus &&item.addressName.split(" ")[1] === array[0])
}
function menuClick(data){			// 아무 지역도 선택 안한 경우
 	if (item.foodType === menus)	
}

그리고나서 지역필터가 적용되는 가장 마지막 부분에 이 함수들을 각각 넣어주었다.