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

ProductCard.jsx 현재 상품 목록에서 상품 하나를 클릭하면 상세페이지로 넘어간다. 라우팅에 아래와 같이 id가 들어가면 아래의 페이지(상세페이지)로 이동 SingleProductPage.jsx import { useState } from "react"; import "./SingleProductPage.css"; import QuantityInput from "./QuantityInput"; import { useParams } from "react-router-dom"; import useData from "../../Hook/useData"; const SingleProductPage = () => { //처음 시작 이미지 번호는 0임 -> product.images[0] = image1 ..

ProductsList.jsx 파라미터에서 page가져와서 useData에 파라미터로 추가한다., const ProductsList = () => { //sidebar에서 카테고리 쿼리스트링을 받아온다. const [search, setSearch] = useSearchParams(); const category = search.get("category"); //모든 쿼리스트링 중 카테고리 const page = search.get("page"); //useDate(url)이 들어가야함 //결과(res)는 categories와, error에 담는다. const { data, error, isLoading } = useData( "/products", { params: { category, //카테고리 파..