ProductsList.jsx를 {/* products가 있을 경우 반복문으로 출력 */} {data.products && data.products.map((product) => ( ))} 아래와 같이 수정한다. {/* products가 있을 경우 반복문으로 출력 */} {data.products && data.products.map((product) => ( ))} ProductCard.jsx에서는 const ProductCard = ({ product }) => { 로 수정하고 아래의 출력할 데이터들의 앞에 . product?.를 붙여서 수정한다. import "./ProductCard.css"; import star from "../../assets/white-star.png"; import bas..

App.jsx에 장바구니 개수 증감 할 함수를 추가한다 // 장바구니 상품 개수 증감( type : 감소,증가 ) const updateCart = (type, id) => { const updatedCart = [...cart]; const productIndex = updatedCart.findIndex( //findIndex:update 할 제품의 id의 idnex를 찾는다. (item) => item.product._id === id ); //만약 타입이 increase 이면 기존의 수량에서 증가한다. if (type === "increase") { updatedCart[productIndex].quantity += 1; setCart(updatedCart); } //만약 타입이 decrease ..

App.jsx 에 장바구니의 상품을 삭제하는 함수를 추가한다. //장바구니 상품 삭제 const removeFromCart = (id) => { const oldCart = [...cart]; //기존의 장바구니 const newCart = oldCart.filter((item) => item.product._id !== id); //매개변수로 받아오는 id와 같지 않은 것만 newCart에 담는다 setCart(newCart); //장바구니에 저장한다. }; 그리고 Cart 프로바이더에 removeFromCart함수를 전달한다. CartPage.jsx에 가서 useContext에 위의 함수를 추가하고 const { cart, removeFromCart } = useContext(CartContext);..

유저 데이터의 경우에는 이곳 저곳에서 사용이 많이 될 것으로 컨텍스트로 만들어서 관리하면 사용하기 쉽다. import { createContext } from "react"; const UserContext = createContext(null); export default UserContext; App.jsx에서 유저 컨텍스트를 가져온다. // user context import UserContext from "./contexts/UserContext"; return ( ); CartPage.jsx로 이동해서 useContext로 user 객체를 받는다. 그래서 src 에 백엔드 프로필 주로를 직접 입력하는데, user가 있을 경우에 프로필을 출력하게한다. import { useEffect, useSt..

$ npm i react-toastify App.jsx // toastify import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; 상품 추가 및 에러 시 토스트 메세지 출력 addToCartAPI(product._id, quantity) .then((res) => { toast.success("상품 추가 성공!"); //toast메세지출력 }) .catch((err) => { toast.error("상품 추가에 실패했습니다."); //toast메세지출력 }); 테스트 cartServices에 카트 정보를 가져오는 함수를 추가한다. import apiClient from "...

App.jsx const [cart, setCart] = useState([]); //장바구니 App.jsx에서 장바구니 개수를 표시할 cart useState를 생성한다. 그리고 Navbar컴포넌트에 cartCount로 cart 배열안의 개수를 props로 전달한다. Navbar.jsx const Navbar = ({ user, cartCount }) => { App.jsx에서 전달받은 props로 장바구니에 표시한다. 장바구니 {cartCount} 그리고 장바구니에 상품을 담을 수 있는 함수를 추가한다. //장바구니에 상품 추가 const addToCart = (product, quantity) => { //기존의 카트 데이터 뒤에 새로운 데이터 추가 setCart([...cart, { product..

현재 로그인 / 회원가입 토큰은 로컬스토리지에 저장되어있다. App.jsx에서 토큰을 가져와서 useState로 관리하면됨 import { useState } from "react"; import "./App.css"; import Navbar from "./components/Navbar/Navbar"; import Routing from "./components/Routing/Routing"; function App() { const [user, setUser] = useState(null); //실행 시 로컬 스토리지에서 토큰 가져온다 useEffect(() => { const jwt = localStorage.getItem("token"); }, []); return ( ); } export de..

http://localhost:5000/api/user/login 없는 비번일때 로그인 성공 시 services에 로그인 함수 추가한다. export async function login(user) { const body = new FormData(); body.append("email", user.email); body.append("password", user.password); await apiClient.post("/user/login", body); } LoginPage.jsx에 추가한다. const [formError, setFormError] = useState(""); //로그인 실행 const submitData = async (formData) => { try { await login(..

const [formError, setFormError] = useState(""); //가입하기 //폼 입력창에 작성한 데이터 객체 formData와 이미지파일을 signup 함수에 전달한다. const submitData = async (formData) => { try { await signup(formData, profilePic); } catch (err) { console.log(err.response.data.message); } }; 에러를 출력해본다. 같은 이메일로 가입시도를 해봤다. 이 에러를 state에 저장한다. //가입하기 //폼 입력창에 작성한 데이터 객체 formData와 이미지파일을 signup 함수에 전달한다. const submitData = async (formData)..

http://localhost:5000/api/user/signup 입력 후 send 누르면 토큰 발급 후 mongoDB에 확인하면 user가 추가된게 확인된다. src 폴더 내에 services 폴더 생성 후 userService.js 생성 import apiClient from "../utils/api-client"; export async function signup(user, profile) { const body = new FormData(); body.append("name", user.name); body.append("email", user.email); body.append("password", user.password); body.append("deliveryAddress", user...