원하는 도서에서 장바구니를 누르면
장바구니에 담겠습니까? 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");
}
}
};
'FRONTEND > React' 카테고리의 다른 글
| [React-BookStore] 마이페이지- 관심도서에서 장바구니로 이동 (0) | 2023.12.14 |
|---|---|
| [React-BookStore] 장바구니 완성 (0) | 2023.12.14 |
| [React-BookStore] 마이페이지 - 관심 도서 (0) | 2023.12.13 |
| [React-BookStore] 도서 검색 후 관심 도서 추가하기 / 삭제하기 (0) | 2023.12.13 |
| [React-BookStore] 비회원 유저의 경우 마이페이지 접근 불가능처리 (0) | 2023.12.12 |