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

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

기록하기 버튼을 누를때마다 기록한 정보 + undefined 이렇게 두 영역이 계속 추가되는데요

문제가 뭔지 모르겠어서 질문 드립니다 :)

script 코드는

//데이터 추가

부분부터 복사하여 첨부드립니다!

작성한 코드 및 에러 메세지

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!   

// 데이터 추가

    $("#addBtn").click(async function () {

      let title = $('#foodTitle').val();

      let comment = $('#floatingTextarea').val();

      let image = $('#floatingInput').val();

      let star = $('#inputGroupSelect03').val();

      let doc = {

        'title': title,

        'comment': comment,

        'image': image,

        'star': star

      };

      await addDoc(collection(db, "foods"), doc);

      // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.

      try {

        const docRef = await addDoc(collection(db, "foods"), {

          // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.

        });

        alert("음식이 추가 되었습니다!");

        window.location.reload();

      } catch (e) {

        console.error("Error adding document: ", e);

      }

    });

    // 데이터 읽기 및 카드 생성

    $(".row-cols-3").empty();

    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}</h4>

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

            <p>${star}</p>

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

          </div>

        </div>

      </div>`;

      // 문서의 title, comment, image, star 필드에서 데이터를 추출한 변수명을 갖고,

      // tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.

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

    });