[React-BookStore] 마이페이지- 관심도서에서 장바구니로 이동

 

 

마이페이지 - 관심도서 디자인 바꿈

 

 

그리고 장바구니에 바로 넣을 수 있도록 버튼 추가함

 

                <div

                  onClick={() => {

                    AddCart(book);

                  }}

                  className="interestBtn"

                >

                  장바구니

                </div>

 

그리고 이 버튼은 book의 정보(db에서 받아온)가 들어있음

 이 정보들을 그대로 장바구니에 넣어줄거라서 

검색 결과에서 관심 도서로 DB저장할 때 필드를 더 추가함 

 

 

 

 

  //장바구니에 추가

  const AddCart = async (book) => {

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

      alert("취소");

      return;

    }

    if (!user) {

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

      navigate("/user/login"); // Redirect to login page

      return;

    }

    //DB에 저장한다.

    try {

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

        //컬렉션명 -interestBooks

        interestBook: book.interestBook, //book id

        bookTitle: book.bookTitle, //book title

        bookCover: book.bookCover, //book cover

        bookLink: book.bookLink, //book link

        bookAuthor: book.bookAuthor, //book author

        bookPublisher: book.bookPublisher, //book publisher

        salesPrice: book.salesPrice, // book sales Price

        amount: 1,

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

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

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

      });

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

      if (confirm("장바구니로 이동하시겠습니까?")) {

        navigate("/user/cart");

      }

      try {

        //쿼리문 작성

        const q = query(

          collection(db, "interestBooks"), // 삭제할 컬렉션 지정

          where("userId", "==", user.uid), // 현재 로그인되어있는 유저와 같은 것

          where("interestBook", "==", book.interestBook) //book.isbn 으로 찾음

        );

        const querySnapshot = await getDocs(q);

        querySnapshot.forEach(async (doc) => {

          try {

            await deleteDoc(doc.ref); //삭제한다.

            setAddedCart(false);

          } catch (error) {

            console.error("Error deleting document:", error);

          }

        });

      } catch (error) {

        console.error("Error querying document:", error);

      }

    } catch (error) {

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

    }

  };

 

삭제 다하면 장바구니로 이동 할건지 여부 물어보고 

 

확인 누르면 

 

navigate로 장바구니로 이동함  

 

취소 눌러도 장바구니로 이동하지는 않지만 관심 목록에서는 삭제가 된 것을 확인할 수 있다.