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...

SingleProductPage.jsx 에서 수량을 기본값 1로 준다. const [quantity, setQuantity] = useState(1); 그리고 구매 개수에 props로 수량과 수량을 저장할 set함수 그리고 재고를 내려준다. 구매개수: QuantityInput.jsx 에서 import "./QuantityInput.css"; const QuantityInput = ({ quantity, setQuantity, stock }) => { return ( setQuantity((prev) => quantity - 1)} className="quantity_input_button" disabled={quantity - {quantity} setQuantity((prev) => quantity +..

Loader.jsx import "./Loader.css"; const Loader = () => { return ( ); }; export default Loader; Loader.css .lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #cdcdcd; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds-ellipsis div:nth-child(1)..