랭킹 화면2

랭킹 화면에서 난이도 별 데이터 출력 하기

등수 출력

 <ul>
    {rank.slice(0, 5).map((item, index) => (
     <li key={index}>
      {imgUrl.map((imgItem, imIdx) => (
        <div className="img_txt">
         <img key={imIdx} src={imgItem} alt="메달 이미지" />
         <div>
          {item.nicName} - {item.scoreCount} - {item.step}
         </div>
        </div>
      ))}
     </li>
   ))}
</ul>

rank(파이어베이스 데이터)에 map사용 후
imgUrl(파이어베이스의 이미지 데이터)에 map를 사용 했는데 이미지 데이터의 길이 만큼 반복이 되고 원하는 데이터의 형태가 아님
imgUrl 데이터 길이 만큼 반복 후 rank 데이터 길이 만큼 반복

수정 후의 화면

<ul>
              {rank.slice(0, 5).map((item, index) => (
                <li key={index}>
                  <div className="img_txt">
                    {index < 3 && <img src={imgUrl[index]} alt="메달 이미지" />}
                    <div>
                      {item.nicName} - {item.scoreCount} - {item.step}
                    </div>
                  </div>
                </li>
              ))}
            </ul>

rank 데이터 길이 만큼 반복 후 인덱스 3미만 까지 imgUrl의 이미지를 출력 하는 형태로 수정

난이도별 등수

 const handlescoreDataList = async (x: string) => {
    console.log(x);
    try {
      const loginUserList = await getDocs(userCollection);

      // Promise.all을 사용하여 모든 프로미스가 해결될 때까지 기다림
      const updatedRank = await Promise.all(
        loginUserList.docs.map(async (item) => {
          const data = item.data();
          const loginUserDoc = doc(userCollection, data.uid);
          const loginUserScore = query(
            collection(loginUserDoc, x),
            orderBy("scoreCount")
          );

          const loginUserScoreDoc = await getDocs(loginUserScore);

          // 프로미스 해결 후 반환하는 데이터
          return loginUserScoreDoc.docs.map((it) => it.data() as ScoreType);
        })
      );

      // updatedRank는 이제 Promise 배열이 아닌 ScoreType 배열
      setRank(updatedRank.flat());
    } catch (error) {
      console.error("Error fetching and updating data:", error);
    }
  };
  
  
   <ul className="rank_tab">
              <li onClick={() => handlescoreDataList("easy")}>Easy</li>
              <li onClick={() => handlescoreDataList("normal")}>Normal</li>
              <li onClick={() => handlescoreDataList("hard")}>Hard</li>
            </ul>

Promise.all 사용 하여 모든 비동기 끝난 후 데이터 출력
파라미터 값에 따라 파이어베이스의 데이터 값이 달라짐