[React-BookStore] 장바구니에 데이터 추가

 

 

원하는 도서에서 장바구니를 누르면 

 

장바구니에 담겠습니까? confirm 창 뜨고 , 확인을 누르면 db에 장바구니 컬렉션을 만들어서 새로 추가하고싶다. 

 

//장바구니에 추가

  const AddCart = async () => {

    if (confirm("장바구니에 추가하겠습니까?")) {

      if (!user) {

        //유저가 없으면(로그인 되어있지 않을 경우)

        alert("로그인이 필요한 서비스입니다.");

        navigate("/user/login"); //로그인 페이지로 이동

      } else {

        //DB에 저장한다.

        try {

          await addDoc(collection(db, "cart"), {

            //컬렉션명 -interestBooks

            interestBook: book.isbn, //book id

            bookTitle: book.title, //book title

            bookCover: book.cover, //book cover

            bookLink: book.link, //book link

            bookAuthor: book.author, //book author

            bookPublisher: book.publisher, //book publisher

            salesPrice: book.priceSales, // book sales Price

            priceStandard: book.priceStandard,

            createdAt: Date.now(), // 생성일자 오늘

            username: user.displayName, // 유저 이름

            userId: user.uid, // 유저 아이디

          });

        } catch (error) {

          console.log(error); //에러는 콘솔에 출력

        }

      }

      alert("장바구니에 추가되었습니다!");

      // 1-2) 취소 클릭 - 리턴

    } else {

      alert("취소");

      return;

    }

  };

 

    <button onClick={AddCart}>장바구니</button>

 

테스트

 

 

파이어 스토어에는 cart 컬렉션이 생성되고 아래와 같이 데이터가 잘 들어갔다.

.

 

 

이제 마이페이지에서 가져오면 될 듯?

 

근데 만약에 여러번 눌러서 개수가 올라가게되면

 

그거 파이어 스토어에서 개수 count 가능한가...?

 

 

 

 

 

 

 

 

---

위 코드에서 수정했음.

 

 

1. 검색 결과에서 수량을 추가 할 때는 기본값 1으로 db에 추가한다.

-> DB 필드 amount 생성

 

 

 

 

 

2. 실시간 업데이트를 하여 이미 장바구니에 있는 도서를 다시 장바구니를 클릭하면 

 

이미 추가되어있다. 장바구니로 이동하겠습니까? 라는 confirm 창 출력

 

여기서 확인을 누르면 장바구니로 이동하고 취소면 return 

 

  const [onCart, setOnCart] = useState(false); // 장바구니 여부

 

 

관심 도서 불러오는 useEffect에 추가했다. 

 //장바구니 목록 가져오기

    const fetchCart = async () => {

      if (user) {

        //유저가 있을 경우

        const q = query(

          collection(db, "cart"),

          where("userId", "==", user.uid)

        );

        onSnapshot(q, (snapshot) => {

          const userCart = snapshot.docs.map((doc) => doc.data().interestBook);

          //가져온 장바구니의 도서에 해당되는 경우 true로 리턴

          const isCartAdded = userCart.includes(book.isbn);

          setOnCart(isCartAdded);

        });

      }

    };

    fetchInterestBooks();

    fetchCart();

  }, [book.isbn, user]); // 로그인 유저와 book.isbn 변경될 때 마다 실행

 

 //장바구니에 추가

  const AddCart = async () => {

    if (!onCart) {

      //장바구니에 추가되어있지 않으면

      if (confirm("장바구니에 추가하겠습니까?")) {

        if (!user) {

          //유저가 없으면(로그인 되어있지 않을 경우)

          alert("로그인이 필요한 서비스입니다.");

          navigate("/user/login"); //로그인 페이지로 이동

        } else {

          //DB에 저장한다.

          try {

            await addDoc(collection(db, "cart"), {

              //컬렉션명 -interestBooks

              interestBook: book.isbn, //book id

              bookTitle: book.title, //book title

              bookCover: book.cover, //book cover

              bookLink: book.link, //book link

              bookAuthor: book.author, //book author

              bookPublisher: book.publisher, //book publisher

              salesPrice: book.priceSales, // book sales Price

              amount: 1,

              priceStandard: book.priceStandard,

              createdAt: Date.now(), // 생성일자 오늘

              username: user.displayName, // 유저 이름

              userId: user.uid, // 유저 아이디

            });

          } catch (error) {

            console.log(error); //에러는 콘솔에 출력

          }

        }

        alert("장바구니에 추가되었습니다!");

        // 1-2) 취소 클릭 - 리턴

      } else {

        alert("취소");

        return;

      }

    } else if (onCart) {

      //이미 추가되어있으면

      const ok = confirm(

        "이미 장바구니에 추가되어 있습니다. 장바구니로 이동하시겠습니까?"

      );

      if (ok) {

        navigate("/user/cart");

      }

    }

  };