* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
파이어 베이스 코드 다 넣고 데이터 값도 넣고 했는데 몇번을 돌려보고 아이디 값도 다 변경하고 했는데 클릭해도 반응이 없고, 파이어베이스에 저장도 되지 않으며, 콘솔에서는 에러값이 뜹니다. 정말 모르겠어서 문의 남깁니다.
.button2>button {
margin-right: 10px;
}
</style>
<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";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyCFUqQruk_TQZqTjfY0OtsJ9WZSb8lU7To",
authDomain: "foodfighter-5253d.firebaseapp.com",
projectId: "foodfighter-5253d",
storageBucket: "foodfighter-5253d.appspot.com",
messagingSenderId: "765214976105",
appId: "1:765214976105:web:491b212f2ba04fd6e35af8",
measurementId: "G-G67L80XD5K"
};
// Firebase 인스턴스 초기화
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();
try {
const docRef = await addDoc(collection(db, "foods"), {
'image': image,
'title': title,
'star': star,
'comment': comment
});
await addDoc(collection(db, "foods"), doc);
alert("음식이 추가 되었습니다!");
window.location.reload();
} catch (e) {
console.error("Error adding document: ", e);
}
});
let docs = await getDocs(collection(db, "foods"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image'];
let title = row['title'];
let comment = row['comment'];
let star = row['star'];
let temp_html = `
<div class="col">
<div class="card">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${star}</p>
<p class="card-text">${comment}</p>
</div>
</div>
</div>`;
$(".row-cols-3").append(temp_html);
})
</script>
</head>
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/food.png"
class="icon"></li>
<li><a href="#" class="nav-link px-2 text-danger">Foodcourt</a></li>
<li><a href="#" class="nav-link px-2 ">홈</a></li>
<li><a href="#" class="nav-link px-2 ">한식</a></li>
<li><a href="#" class="nav-link px-2 ">일식</a></li>
<li><a href="#" class="nav-link px-2 ">중식</a></li>
<li><a href="#" class="nav-link px-2 ">양식</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-warning me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="main">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">스파르타 푸드파이터</h1>
<p class="col-md-8 fs-4">본인만의 맛집을 소개하는 사이트입니다. 맛집을 소개해 주세요
<!DOCTYPE html>
<html lang="en">
</div>
</div>
</div>
<div class="post" id="input-card">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="음식 이미지 주소">
<label for="floatingInput">음식 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="title" placeholder="음식명">
<label for="foodTitle">음식명</label>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">별점</button>
<select class="form-select" id="star" aria-label="Example select with button addon">
<option selected>별점 선택</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"></textarea>
<label for="floatingTextarea">추천 이유</label>
</div>
<div class="button2">
<button id="addbtn" type="button" class="btn btn-danger"> 기록하기 </button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card">
<img src="https://img.siksinhot.com/article/1604554441209246.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">한우</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
<p class="card-text">마블링의 향연 부드러운 한우</p>
<div class="card-button">
<button type="button" class="btn">주문하기</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">타코</h5>
<p class="card-text">⭐⭐⭐⭐</p>
<p class="card-text">멕시코 전통 음식</p>
<div class="card-button">
<button type="button" class="btn">주문하기</button>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://i.ytimg.com/vi/cqYrsgxVb00/maxresdefault.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">돈마호크</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
<p class="card-text">돈마호크 스테이크</p>
<div class="card-button">
<button type="button" class="btn">주문하기</button>
</div>
</div>
</div>
</div>
</div>
</div>
