웹 개발 포트폴리오 | 예적금 상품 비교 플랫폼

• 예금, 적금의 정보를 가져오는 함수를 각 2개씩 총 4개 생성(적금base, option / 예금base, option)
✅ 해결
→ Promiss.all() 메서드로 함수를 병렬실행
→ 전체 실행이 완료되면 한번에 모든 결과를 처리하도록 하여 최적화

• 2. 종류가 다른 3개의 배열로 선택된 금융상품의 상태 값을 각각 관리
✅ 해결
선택된 상품들의 정보를 하나의 배열에 순서대로 push함

//* 금융상품 리스트 가져오기
  const handleButtonClick = async () => {
    const baseListPromises = [
      getDocs(collection(db, "DEPOSIT_BASE_LIST")),
      getDocs(collection(db, "SAVING_BASE_LIST")),
    ];
    const optionListPromises = [
      getDocs(collection(db, "DEPOSIT_OPTION_LIST")),
      getDocs(collection(db, "SAVING_OPTION_LIST")),
    ];

    const [baseListSnapshots, optionListSnapshots] = await Promise.all([
      Promise.all(baseListPromises),
      Promise.all(optionListPromises),
    ]);

    const products = [];
    const depositOptionalList = [];
    const savingbaseList = [];
    const savingoptionalList = [];

    baseListSnapshots.forEach((snapshot, index) => {
      snapshot.forEach((doc) => {
        const newProduct = {
          id: doc.id,
          ...doc.data(),
        };
        if (index === 0) {
          products.push(newProduct);
        } else {
          savingbaseList.push(newProduct);
        }
      });
    });

    optionListSnapshots.forEach((snapshot, index) => {
      snapshot.forEach((doc) => {
        const newProduct = {
          id: doc.id,
          ...doc.data(),
        };
        if (index === 0) {
          depositOptionalList.push(newProduct);
        } else {
          savingoptionalList.push(newProduct);
        }
      });
    });

    setProducts(products);
    setdepositOptionalList(depositOptionalList);
    setSavingbaseList(savingbaseList);
    setSavingoptionalList(savingoptionalList);
  };

  useEffect(() => {
    handleButtonClick();
  }, []);