마이페이지 - 관심도서 디자인 바꿈 그리고 장바구니에 바로 넣을 수 있도록 버튼 추가함 { 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. 검색 조회 및 정렬 ✔ - 포괄적으로 검색하고 싶을 경우 키워드를 검..

https://console.firebase.google.com/ 로그인 - Google 계정 이메일 또는 휴대전화 accounts.google.com 내가 추가하고자 하는 인증은 일단. 1. 이메일/비밀번호( 회원가입 시) 2. 구글 인증 3. 깃허브 인증 이렇게 추가할 예정이다. 그 중 이메일/비밀번호부터 해보겠음., 1. 이메일/ 비밀번호 인증 현재 작업하고 있는 프로젝트에 firebase.js 파일에서 파이어베이스 관련 설정을 할거임 이미 기본 설정은 되어있고 여기에 인증 관련 초기 설정만 추가하면됨 하단에 파이어베이스 인증 코드를 추가한다. getAuth 을 import한다. import { initializeApp } from "firebase/app"; import { getAuth } fr..

yes 선택 후 첫번째 호스팅 선택 use an existing project 선택 그리고 package.json에 에 추가한다. "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "predeploy": "npm run build", "deploy": "firebase deploy" }, Hosting url이 뜨면서 호스팅이 완료됨이 확인된다. Hosting URL: https://nwitter-5aa7d.web.app Nwitter nwitter-5aa7d.web..