커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
어느부분이 오류인지 모르겠습니다
[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0
5주차
북마크
장*조
댓글
4
・
추천
0
・
조회수
10
조회수
10
답변 완료



<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>푸드파이터</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&display=swap');

    * {
      font-family: 'Gowun Dodum', sans-serif;
    }

    body {
      background-color: white;
      color: black;
    }

    .header {
      background-size: cover;
      background-image:
        url('https://images.unsplash.com/photo-1531697218799-ed0ae884c6c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80');
      background-position: right;
      height: 650px;
      display: flex;
      flex-direction: column;
    }

    .header>h1 {
      margin: 0;
      font-size: 40px;
    }

    .header>div {
      font-size: 18px;
      margin-top: 10px;
    }

    .form-button {
      width: 150px;
      height: 40px;
      background-color: transparent;
      border: 1px solid tr;
      color: black;
      font-size: 15px;
      margin: 20px 10px 0px 0px;
    }

    .form-button:hover {
      border: 2px solid black;
    }

    .info-button {
      margin: 20px 0 0 15px;
      height: 40px;
      font-size: 14px;
    }

    .post {
      width: 500px;
      margin: 20px 0px 1px 20px;
      padding: 20px;
      box-shadow: 0px 0px 3px 0px transparent;
      background-color: wheat;
    }

    .form-floating input,
    .form-floating textarea {
      color: black;
      background-color: white;
    }

    .button2 {
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
    }

    .button2>button {
      margin-right: 10px;
    }

    .mycards {
      width: 1600px;
      margin: 30px auto;

      flex-direction: row;
      align-items: center;
    }

    .card {
      border-radius: 30px;
      background-color: white;
      border: none;
      color: black;
      margin-left: 50px;
    }

    .card-img-top {
      object-fit: cover;
      height: 250px;
      border-radius: 20px;
    }

    .card-title {
      margin-top: 10px;
      font-size: 18px;
    }

    .card-body {
      border: blanchedalmond 2px solid;
      border-radius: 20px;
    }

    .card-text {
      color: black;
    }

    .comment {
      color: black;
    }

    .play-button {
      display: flex;
      justify-content: flex-start;
      margin-top: 15px;
    }

    a.nav-link {
      color: #F17228;
      font-size: large;
    }

    .icon {
      height: 50px;
    }

    .card-button {
      background-color: orange;
      color: white;
      text-align: center;
      padding: 10px 15px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    .card-title {
      font-weight: bold;
    }

    .card-button> :hover {
      background-color: darkorange;
    }

    #input-card {
      width: 500px;
      margin: 0px 0px 0px 135px;
      padding: 20px;
      background-color: #f9f9f9;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      float: left;
    }

    .form-floating input,
    .form-floating textarea {
      color: black;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
      padding: 10px;
      width: 100%;
    }

    .form-floating label {
      color: #333;
    }

    .input-group button,
    .input-group select {
      background-color: rgb(168, 161, 161);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 10px;
    }

    .input-group button:hover,
    .input-group select:hover {
      background-color: gray;
    }

    .button2 {
      text-align: right;
    }

    .button2 button {
      background-color: #F17228;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .button2 button:hover {
      background-color: #f3620f;
    }

    .jumbotron-message {
      margin-left: 150px;
      font-size: 1500px;
    }
  </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";

    const firebaseConfig = {
      apiKey: "AIzaSyDWoqJp4zC6405trmFLNw__mXSbWs54ePo",
      authDomain: "sparta-80de6.firebaseapp.com",
      projectId: "sparta-80de6",
      storageBucket: "sparta-80de6.appspot.com",
      messagingSenderId: "109867226262",
      appId: "1:109867226262:web:a2122e1402d13a61d79eb7",
      measurementId: "G-2LJ66E6LZP"
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    // 데이터 추가
    $("#addBtn").click(async function () {
      let image = $('#floatingInput').val();
      let title = $('#foodTitle').val();
      let comment = $('#floatingTextarea').val();
      let star = $('#inputGroupSelect03').val();
      
      let doc = {
        'image': floatingInput,
        'title': foodTitle,
        'comment': floatingTextarea,
        'star': inputGroupSelect03
      };
      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 row = doc.data();
      console.log(row);
      let image = row['floatingInput'];
      let title = row['foodTitle'];
      let comment = row['floatingTextarea'];
      let star = row['inputGroupSelect03'];

      let temp_html = `
      <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">${star}}</p>
            <p class="card-text">${comment}}</p>
            <p>⭐⭐⭐</p>
            <button class="card-button">주문하기</button>
          </div>`;
      $(".row-cols-3").append(temp_html);
    });

  </script>
</head>

<body>
  <!-- Navbar -->
  <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>

  <!-- 점보 트론 적용 jumbotron -->
  <div class="header">
    <div class="p-5 mb-4 bg-body-tertiary rounded-3">
      <div class="container-fluid py-5">
        <div class="jumbotron-message">
          <h1 class="display-5 fw-bold" style="font-family: 'Black Han Sans', sans-serif; ">스파르타 푸드파이터
          </h1>
          <p class="col-md-8 fs-4"> 본인만의 맛집을 소개하는 사이트입니다.
            <br>맛집을 소개해 주세요!
          </p>
        </div>

        <!-- 부트스트랩 인풋 박스 적용-->
        <div class="post" id="input-card">
          <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">음식 이미지 주소</label>
          </div>
          <div class="form-floating mb-3">
            <input type="text" class="form-control" id="foodTitle" 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="inputGroupSelect03"
              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="floatingTextarea"></textarea>
            <label for="floatingTextarea">추천 이유</label>
          </div>
          <div class="button2">
            <button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- 부트스트랩 카드 적용-->
  <div class="mycards">
    <div class="row row-cols-3 row-cols-md-3">
      <div class="col">
        <div class="card h-100">
          <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2162&q=80"
            class="card-img-top" alt="...">
          <div class="card-body">
            <h4 class="card-title">하와이안 피자</h4>
            <p class="card-text">이건 꼭 먹어봐야 해요</p>
            <p>⭐⭐⭐⭐</p>
            <button class="card-button">주문하기</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://images.unsplash.com/photo-1481070555726-e2fe8357725c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2235&q=80"
            class="card-img-top" alt="...">
          <div class="card-body">
            <h4 class="card-title">크리스피 버거</h4>
            <p class="card-text">너무 달콤해요!</p>
            <p>⭐⭐⭐</p>
            <button class="card-button">주문하기</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80"
            class="card-img-top" alt="...">
          <div class="card-body">
            <h4 class="card-title">해물 라면</h4>
            <p class="card-text">국물이 끝내줘요!</p>
            <p>⭐⭐⭐⭐⭐</p>
            <button class="card-button">주문하기</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

  <div class="container2">
    <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
      <div class="col mb-3">
        <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
        </a>
        <p class="text-body-secondary">©Teamsparta 2024</p>
      </div>
      <div class="col mb-3">
      </div>
      <div class="col mb-3">
        <h5>Section</h5>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
        </ul>
      </div>

      <div class="col mb-3">
        <h5>Section</h5>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
        </ul>
      </div>

      <div class="col mb-3">
        <h5>Section</h5>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
        </ul>
      </div>
    </footer>
  </div>
</body>

</html>




카드는 생성이되지만 firebase에 저장되지않고 제대로입력 되지않습니다

mycard로 class를 바꾸면 기존 카드는 나오는데 새로등록되는카드는 노출되지않고 어디서 문제인지 모르겠습니다 ㅠㅠ




취소
 공유
취소
댓글 0
댓글 알림
나의얼굴