* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

카드가 추가가 되질 않습니다.

보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

    const querySnapshot = await getDocs(collection(db, "foods"));

    querySnapshot.forEach((doc) => {

      let title = doc.data().title;

      let comment = doc.data().comment;

      let star = "⭐".repeat(doc.data().star);

      let image = doc.data().image;

      let temphtml = `      

      <div class="col">

        <div class="card h-100">

          <img src="${image}"

            class="card-img-top" alt="...">

          <div class="card-body">

            <h4 class="card-title">${title}</h5>

            <p class="card-text">${comment}</p>

            <p>${star}</p> 

            <button class="card-button">주문하기</button>        

          </div>

        </div>

      </div>`;

      $(".row-cols-3").append(tempHtml);

    });