[’집중력’, ‘오메가3’, ‘지방산’, ‘20대’] 과 같은 형태로 카테고리가 저장되어 있음. [‘집중력’, ‘20대’] 와 같이 2개 이상의 카테고리를 모두 포함하는 상품 리스트를 필터링하여 보여주고싶은데 firebase에서 배열의 요소 and 검색은 1가지만 지원한다고 함.

고민한 방법

1. ✅ or 조건으로 하나라도 해당되는 데이터를 가지고 온 후 출력시에 필터링 해서 보여주기

2. 데이터를 객체로 저장하기 https://stackoverflow.com/questions/52837711/firestore-multiple-array-contains

   카테고리 = {
   	"집중력": true,
   	"오메가3": true,
   	"지방산": true
   }
   

1번 방법을 선택한 이유 적어주기

or 조건으로 하나라도 해당되는 데이터를 가지고 온 후 출력시에 필터링 해서 보여주기

예상되는 문제점 : 한페이지에 10개의 아이템을 보여줘야하는데 필터링 후 데이터가 5개라면 남은 공간이 비어있게 됨

해결 방법

필터링된 데이터가 보여줘야할 데이터보다 적을 경우 다음 페이지를 추가로 호출

const { id } = useParams();
const { data, isLoading, error, fetchNextPage, hasNextPage, isFetchingNextPage } = useProducts(filters);
let products = data?.pages.flatMap((page: any) => page.products);

/* ===== 필터링 조건 =====
1. 필터 요소를 모두 포함
2. 기준 아이템이 있다면 제외
3. 최대 길이 = pageSize 
======================== */
if (products) {
  products = products.filter((product: Product) =>
    categories && containsAllCategories(product.productCategory, categories) && product.id != id
  ).slice(0, pageSize);
}

// 데이터가 변경되었을 때 필터링된 데이터가 inView가 true거나 (화면에 보이거나) 
// 보여줘야할 데이터 개수보다 적을 경우 다음 페이지를 호출
useEffect(() => {
  if (data && data.pages) {
    if (products && products.length < pageSize && inView && hasNextPage) {
      fetchNextPage();
    }
  }
}, [data, inView, fetchNextPage, hasNextPage]);

추가 구현사항

or 조건으로 하나라도 해당되는 데이터를 불러온 후 일치하는 개수가 많은 순서대로 정렬

예상 되는 문제점 : 일치하는 개수가 가장 많은 것이 뒷순서에 있을 경우 정렬이 정상적으로 이뤄지지 않음…