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

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

처음에 시도했을 때는 alert도 뜨고 firebase에 문서 생성이랑 필드 생성은 되었지만 필드값이 생성이 안 되었었는데 조금 더 고치니 alert도 뜨지 않고 firebaes에 문서 생성, 필드 생성도 되지 않습니다 ㅠㅠ 어디가 잘못된 걸까요?

작성한 코드 및 에러 메세지

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

Tip 1) </><script type="module">

        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";

        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        const firebaseConfig = {

            // https://firebase.google.com/?hl=ko

            // 파이어베이스에 접속한 후 프로젝트 설정에 들어갑니다.

            // 본인 firebaseConfig 내용으로 설정해 줍니다.

            // js 파일이 없어서 질문 올렸는데 "html 파일에서 script 태그 부분에 작성하시면 됩니다"라고 답변을 받아서 html에서 작업했습니다.

            // For Firebase JS SDK v7.20.0 and later, measurementId is optional

            apiKey: "AIzaSyATzJjBQ6wsGPVS06-XwRtDPYPvqJ9gWeQ",

            authDomain: "sparta-54b54.firebaseapp.com",

            projectId: "sparta-54b54",

            storageBucket: "sparta-54b54.appspot.com",

            messagingSenderId: "338817730977",

            appId: "1:338817730977:web:a69e3469e4340e518323e0",

            measurementId: "G-HRCPH6DJ74"

        };

        const app = initializeApp(firebaseConfig);

        const db = getFirestore(app);

        // 데이터 추가

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

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

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

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

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

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

            try {

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

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

                image:image,

                title:title,

                star:star,

                comment:comment

                });

                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;

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

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

            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>`;

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

        });

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

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