여기 작업할 때 db를 수정이 좀 많이 들어감 처음에 설계한 DB는 장바구니에 있는 모든 항목들을 결제하기 페이지에서 다 가져왔었음. 근데 그렇게 하다보니 장바구니에 넣지않고 바로 결제하기를 클릭할 경우에는 장바구니에 있는 상품 + 결제하기 클릭한 상품이 결제하기 페이지로 넘어가게 됨. 그래서 이 단계를 구분하기 위해서 DB의 수정을 하기로 함 주문 준비를 나타내는 orderReady의 필드를 추가해서 1) 검색 결과에서 장바구니로 추가될 경우에는 orderReady를 false를 주고 2) 장바구니에서 를 클릭할 경우 orderReady 를 true로 업데이트한다. 그래서 결제하기 페이지에서 cart를 불러올 때 쿼리문에서 orderReady가 true인 상품들만 가져온다 3) 검색 결과에서 를 클릭할..

https://github.com/kmsbernard/react-daum-postcode GitHub - kmsbernard/react-daum-postcode: 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. Contribute to kmsbernard/react-daum-postcode development by creating an account on GitHub. github.com npm i react-daum-postcode 라이브러리 설치 후 import { useDaumPostcodePopup } from "react-daum-postcode"; import하여 사용하면 된당 const [userFullAddress,..

마이페이지 - 관심도서 디자인 바꿈 그리고 장바구니에 바로 넣을 수 있도록 버튼 추가함 { AddCart(book); }} className="interestBtn" > 장바구니 그리고 이 버튼은 book의 정보(db에서 받아온)가 들어있음 이 정보들을 그대로 장바구니에 넣어줄거라서 검색 결과에서 관심 도서로 DB저장할 때 필드를 더 추가함 //장바구니에 추가 const AddCart = async (book) => { if (!confirm("장바구니에 추가하겠습니까?")) { alert("취소"); return; } if (!user) { alert("로그인이 필요한 서비스입니다."); navigate("/user/login"); // Redirect to login page return; } //D..

고민해봤는데... 장바구니 페이지를 따로 만드는게 나을거 같음 ㅠ 틀은 대강 만들었고 파이어 베이스에서 장바구니 db불러서 안에 넣어주면 될 듯 1. 장바구니에 실시간으로 유저별 장바구니 항목 가져오기 useEffect(() => { //장바구니 가져오는 함수 const fetchUserCart = async () => { if (user) { //유저가 있을 경우 const q = query( collection(db, "cart"), where("userId", "==", user.uid) //로그인 한 유저와 동일한 데이터만 ); //실시간 가져오기 onSnapshot(q, (snapshot) => { const userCart = snapshot.docs.map((doc) => doc.data()..

원하는 도서에서 장바구니를 누르면 장바구니에 담겠습니까? 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: ..

현재 대강 마이페이지 틀은 잡아놨다. 요런 느낌인데, 관심 도서의 경우에는 아직 어케 꾸며야 할지 고민중 그래서 이번 포스팅은 관심도서 DB를 어떻게 가져와서 사용했는지 작성할거임 현재 상태는 검색창에서 마음에 드는 도서가 있으면 오른쪽 하트 아이콘으로 관심 목록에 추가할 수 있다. 그리고 저장된 DB는 이런식으로 저장된다. 그래서 관심 도서 목록에서는 위의 DB를 현재 로그인한 유저에 맞게 전체 가져와서 반복문으로 배치하면 되겠다. 1. 가져오기 const InterestedBook = () => { const user = auth.currentUser; const [getInterestBook, setGetInterestBook] = useState([]); useEffect(() => { //관심목..

구현 목표 인증된 유저에 따라 각자 관심 도서가 다를것이다. 그래서 로그인 한 유저만 관심 목록에 추가가 가능하게 할 것이고, 추가 된 도서의 ISBN번호는 firestore에 저장해서 관리한다. 그리고 아래와 같이 검색 하면 firebase db에서 관심 도서의 데이터를 불러와 이미 추가된 관심 도서의 경우 아이콘(하트)가 붉게 표시되게 만들것이다. 그리고, 이미 관심 도서에 추가되어있는 도서의 경우 아이콘을 한 번더 클릭 할 경우 DB에서 삭제하는 기능을 구현하고 싶다. 1. 하트아이콘 클릭 시 관심 목록( DB)에 추가하기 //관심 도서에 추가 및 제거 트리거 const handleClick = async () => { //일단 이미 관심 도서에 추가되어 있는지 확인한다. // 1. 관심도서에 없는..

비회원 유저의 마이페이지 접근 권한을 위해서 ProtectedRoute.jsx를 만들었음 import React from "react"; import { auth } from "../firebase"; import { Navigate } from "react-router-dom"; const ProtectedRoute = ({ children }) => { const user = auth.currentUser; //현재 접속유저 if (user === null) { //유저가 없으면 navigate로 login페이지로 이동 alert("로그인이 필요한 서비스입니다."); return ; } return children; //자식컴포넌트로 이동 }; export default ProtectedRoute; ..

2. 구글 인증 프로젝트 이름이랑 이메일 작성하고 추가하면 아래와 같이 제공업체가 추가된다. 파이어 스토어(db)도 사용하게끔 firebase에 저장한다. import { initializeApp } from "firebase/app"; import { GoogleAuthProvider, getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: import.meta.env.VITE_FIRE_API, authDomain: import.meta.env.VITE_FIRE_DOMAIN, projectId: import.meta.env.VITE_FIRE_PROJEC..

1. 로그인 / 회원가입 /로그아웃 - 이메일/비밀번호 ✔ - 구글 ✔ - 깃허브 ✔ 2. 검색창 실시간 조회 ✔ - 검색어를 입력할 경우 알라딘 API 상품 조회를 통해서 실시간으로 오른쪽에 검색결과가 출력 ✔ - 원래는 알라딘에서 권장하는 ISBN13의 값으로 검색해서 불러왔는데, 상품이나 오래된 도서의 경우에는 해당 값이 부여되지 않아 출력되지않는 현상이 일어남. - 그래서 ISBN 값으로 가져오게끔 바꾸고 상세설명이 없는 상품의 경우 상세 설명 없음 이라 표시 - 실시간 조회되는 책의 이미지나 제목을 클릭하면 해당 책의 상세보기 ( 알라딘) 홈페이지로 이동해야하는데 이동이 안됨. 해결 필요 ✔ (해결완료 -아래에 설명추가) 3. 검색 조회 및 정렬 ✔ - 포괄적으로 검색하고 싶을 경우 키워드를 검..