[동적라우팅]다중필터 처리하기 (3편: 카테고리 depth별 서로다른 queryString 만들기)

지난시간까지 했던 다중필터는 의류의 TYPE이라는 카테고리가 지닌 top, bottom, acc라는 속성안에서는 잘 돌아가지만,
카테고리가 바뀌어버리면 백엔드에 올바른 쿼리스트링을 줄 수 없다는 문제가 생겼다.
이에 신박한 접근을 떠올리게 되는데,,,

클릭의 대상이 되는 속성버튼의 id 자체를 쿼리로 입력하면되잖아?

그리하여 상수데이터를 위와같이 변경하게 되는데, 이는 추후에 대카테고리별로 서버에서 카테고리 속성을 달리 가져오는 경우에는 무용지물이 되는 단점이 있고. PR을 올리면 가차없이 철퇴를 맞기에 부족함이 없는 로직이라고 할 수 있겠다...

잠시나마 미쳤었던 마음을 추스리고, 각각의 카테고리속성과 카테고리의 이름을 모두 받아서 switch로 분리하고 처리하는 로직으로 재구현했다.

Step 1 : 버튼의 id를 받을 때 카테고리명과 속성을 모두 받아온다

Step 2 : TYPE, SIZE, CHARACTER 각각으로 들어왔을때 각각 다른 쿼리스트링 제작 로직을 세팅했다.

  const setQueryStrings = () => {
    let queryString = '';
    let addParamFilters = [];
    if (filters) {
      filters.forEach(filter => {
        const splittedFilter = filter.split(`,`);
        switch (splittedFilter[0]) {
          case 'TYPE':
            addParamFilters.push(`&sub=${param}-${splittedFilter[1]}`);
            break;

          case 'SIZE':
            addParamFilters.push(`&size=${splittedFilter[1]}`);
            break;

          case 'CHARACTER':
            addParamFilters.push(`&character=${splittedFilter[1]}`);
            break;

          default:
        }
      });
      queryString = `${API.productList}${param}${addParamFilters.join('')}`;
    } else {
      queryString = `${API.productList}${param}`;
    }
    setUrl(queryString);
  };

아아...돌아간다 잘돌아간다...
하지만 혹여나 정성스레 작성한 PR에 또다른 철퇴가 꽂힌다면..

나는 또 4부를 쓰게 될것이다... 과연 다중필터는 몇부작까지 도달할것인가...거의뭐..대하드라마..