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

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

변수를 지정하고 컬렉션 필드에 값을 넣었는데 기존에 있던 카드도 없어지고 아예 카드가 생성이 안되네요..

food_5주차_실습.html:262 Error adding document: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined (found in field title in document foods/eVJYmwg4bWSTRBIg6svi) 이렇게 에러가 떠요ㅠㅠ

작성한 코드 및 에러 메세지

          // 데이터 추가
        $("#addBtn").click(async function () {
            let title = $('#title').val();
            let comment = $('#comment').val();
            let image = $('#image').val();
            // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.


            try {
                const docRef = await addDoc(collection(db, "foods"), {
                        'title' : title,
                        'comment' : comment,
                        'image' : image
                    // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
                });


                alert("음식이 추가 되었습니다!");
                window.location.reload();
            } catch (e) {
                console.error("Error adding document: ", e);
            }
        });

food_5주차_실습.html:262 Error adding document:  FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined (found in field title in document foods/eVJYmwg4bWSTRBIg6svi)

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

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