[쿠킹레시피] 파이어 베이스 연결하기 (레시피 상세화면, 레시피 추가 DB연결)

 

현재는 홈화면만 파이어 베이스로 DB연결이 되어있어서 

 

요리하기를 클릭해서 상세보기를 눌러도 출력되지 않는다. 

 

 

 

Recipe.jsx도 Home.jsx와 동일하게 파이어베이스를 연결한다. 

import { useParams } from "react-router-dom";
import "./Recipe.css";
import { useContext, useEffect, useState } from "react";
import { ThemeContext } from "../../context/ThemeContext";
import { firedb } from "../../firebase/config";

export default function Recipe() {
  const { mode } = useContext(ThemeContext);
  const { id } = useParams();
  // JSON 서버 DB
  // const url = "http://localhost:3030/recipes/" + id;
  // const { error, isPending, data: recipe } = useFetch(url);

  // 파이어 베이스 DB
  const [recipe, setRecipe] = useState(null); //한 개의 레시피 객체
  const [isPending, setIsPending] = useState(false); //로딩 상태
  const [error, setError] = useState(""); //에러메세지

  useEffect(() => {
    setIsPending(true);
    firedb
      .collection("recipes") //레시피 중
      .doc(id) //id로
      .get() //가져온다
      .then((doc) => {
        //console.log(doc.data()); //콘솔로 확인하기
        if (doc.exists) {
          setIsPending(false);
          setRecipe(doc.data());
        } else {
          setIsPending(false);
          setError("레시피를 찾을 수 없습니다.");
        }
      });
  }, [id]);

  return (
    <div className={`recipe ${mode}`}>
      {error && <p className="error">{error}</p>}
      {isPending && <p className="loading">로딩중...</p>}
      {recipe && (
        <>
          <h2 className={`page-title ${mode}`}>{recipe.title}</h2>
          <p className="time">요리시간 {recipe.cookingTime} 완성</p>
          <ul>
            {recipe.ingredients.map((ing) => (
              <li className={`page-li ${mode}`} key={ing}>
                {ing}
              </li>
            ))}
          </ul>
          <p className="method">{recipe.method}</p>
        </>
      )}
    </div>
  );
}

 

 

 

만약 없는 id를 요청하면 에러가 잘 발생하는지도 체크함

 

 

 

이제 레시피 추가하는 Create.jsx만 수정하면됨

 

기존 json서버 db를 사용했을 때 썼던, useFetch와 effect를 주석처리하고 

handlesubmit 함수에 아래의 코드를 추가한다. 

 

 

 

바나나 통밀 팬케이크 추가해봄

잘 출력된다.