[LAB-8] 상품상세페이지 표시 상품 중복안되게 하는 방법을 잘 모르겠습니다.

[zerocalorie1226]

질문 작성자

조성찬

문제 상황

위쪽에 나오는 상품의 정보가 아래 당근마켓 인기중고 부분에서 중복되지 않고 다른 상품이 보이게 하고 싶어서 저번 멘토링 때 질문을 했는데 그때 야무쌤께서 파이어베이스의 Query를 사용하시면 된다고해서 도전해보고 있었는데 잘 안되서 질문 올립니다..ㅠ

프로젝트 저장소 URL

• https://github.com/zerocalorie1226/likelion-saja

• feature/soungchan/Home 브랜치에 있습니다.

  환경 정보

• Window

[yamoo9]

문제 해결

메인 페이지, 제품 상세 페이지 모두 동일한 useProducts 훅을 사용 하므로 productsAtom 외에도 productsExcludeIdAtom을 추가합니다.

const productsAtom = atom({
  key: "products",
  default: [],
});

const productsExcludeIdAtom = atom({
  key: "productsExcludeId",
  default: [],
});

useProducts 훅은 다음과 같이 수정 합니다. 제한 개수 및 제외할 ID를 매개변수로 설정합니다. query, where, limit 사용 설정은 코드를 살펴보세요.

export function useProducts(excludeId, limitCount = 8) {
  const [productsState, setProductsState] = useRecoilState(!excludeId ? productsAtom : productsExcludeIdAtom);
  const isLoading = useRecoilValue(isLoadingSelector);
  const error = useRecoilValue(errorSelector);

  useEffect(() => {
    const db = getFirestore(app);
    const productsRef = collection(db, "Products");

    let q = query(productsRef, limit(limitCount));

    if (excludeId) {
      q = query(productsRef, where("id", "!=", excludeId), limit(limitCount));
    }

    getDocs(q).then((querySnapshot) => {
      const products = [];

      querySnapshot.forEach((doc) => {
        const product = {id: doc.id, ...doc.data()};
        products.push(product);
      });
      console.log({products});
      setProductsState(products);
    });
  }, [setProductsState, excludeId, limitCount]);

  return {isLoading, error, productsState};
}

그 외 아래 파일 코드가 수정되었습니다.

• UseProductList.jsx
• ProductDetailBody.jsx

가이드 파일

첨부된 가이드 파일을 열어 참고해보세요.

src.zip

결과 확인

아래 영상은 문제가 해결 됨을 보여 줍니다. 😃 "무트 코인 팝니다." 아이템이 중복되지 않고 Firestore에서 필터링 된 데이터를 반환합니다.