Сделали стикер на корзину

db.json

@@ -1,52 +1,70 @@
 {
-	"products": [
+  "products": [
-		{
+    {
-			"id": 1,
+      "id": "1",
-			"name": "Breed Dry Dog Food",
+      "name": "Breed Dry Dog Food",
-			"price": 100,
+      "price": 100,
-			"imageUrl": "./src/assets/images/products/dog-food.svg"
+      "imageUrl": "./src/assets/images/products/dog-food.svg"
-		},
+    },
-		{
+    {
-			"id": 2,
+      "id": "2",
-			"name": "CANON EOS DSLR Camera",
+      "name": "CANON EOS DSLR Camera",
-			"price": 360,
+      "price": 360,
-			"imageUrl": "./src/assets/images/products/camera.svg"
+      "imageUrl": "./src/assets/images/products/camera.svg"
-		},
+    },
-		{
+    {
-			"id": 3,
+      "id": "3",
-			"name": "ASUS FHD Gaming Laptop",
+      "name": "ASUS FHD Gaming Laptop",
-			"price": 700,
+      "price": 700,
-			"imageUrl": "./src/assets/images/products/laptop.svg"
+      "imageUrl": "./src/assets/images/products/laptop.svg"
-		},
+    },
-		{
+    {
-			"id": 4,
+      "id": "4",
-			"name": "Curology Product Set ",
+      "name": "Curology Product Set ",
-			"price": 500,
+      "price": 500,
-			"imageUrl": "./src/assets/images/products/curoset.svg"
+      "imageUrl": "./src/assets/images/products/curoset.svg"
-		},
+    },
-		{
+    {
-			"id": 5,
+      "id": "5",
-			"name": "Kids Electric Car",
+      "name": "Kids Electric Car",
-			"price": 960,
+      "price": 960,
-			"imageUrl": "./src/assets/images/products/car.svg"
+      "imageUrl": "./src/assets/images/products/car.svg"
-		},
+    },
-		{
+    {
-			"id": 6,
+      "id": "6",
-			"name": "Jr. Zoom Soccer Cleats",
+      "name": "Jr. Zoom Soccer Cleats",
-			"price": 1160,
+      "price": 1160,
-			"imageUrl": "./src/assets/images/products/soccer.svg"
+      "imageUrl": "./src/assets/images/products/soccer.svg"
-		},
+    },
-		{
+    {
-			"id": 7,
+      "id": "7",
-			"name": "GP11 Shooter USB Gamepad",
+      "name": "GP11 Shooter USB Gamepad",
-			"price": 660,
+      "price": 660,
-			"imageUrl": "./src/assets/images/products/gamepad.svg"
+      "imageUrl": "./src/assets/images/products/gamepad.svg"
-		},
+    },
-		{
+    {
-			"id": 8,
+      "id": "8",
-			"name": "Quilted Satin Jacket",
+      "name": "Quilted Satin Jacket",
-			"price": 660,
+      "price": 660,
-			"imageUrl": "./src/assets/images/products/jacket.svg"
+      "imageUrl": "./src/assets/images/products/jacket.svg"
-		}
+    }
-	]
+  ],
-}
+  "cart": [
+    {
+      "id": "f7d5",
+      "productId": "1",
+      "name": "Breed Dry Dog Food",
+      "price": 100,
+      "imageUrl": "./src/assets/images/products/dog-food.svg",
+      "quantity": 3
+    },
+    {
+      "id": "bb06",
+      "productId": "2",
+      "name": "CANON EOS DSLR Camera",
+      "price": 360,
+      "imageUrl": "./src/assets/images/products/camera.svg",
+      "quantity": 1
+    }
+  ]
+}

package.json

@@ -11,9 +11,11 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"json-server": "^1.0.0-beta.3",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",
+		"react-router-dom": "^7.7.1",
 		"sass-embedded": "^1.89.2"
 	},
 	"devDependencies": {

src/App.jsx

@@ -1,16 +1,11 @@
-import styles from './App.module.scss'
+// удаляем все, оставляя лишь пустую функцию App ниже
 
-import Header from './components/header'
+function App() {
-import ProductList from './components/list'
-import Timer from './components/timer'
-
-const App = () => {
 	return (
-		<div className={styles.container}>
+		<>
-			<Header />
+			{/* Добавьте тестовый контент для проверки */}
-			<Timer />
+			<h1>Hello, React!</h1>
-			<ProductList />
+		</>
-		</div>
 	)
 }
 

src/components/OrderDetail.jsx

@@ -0,0 +1,41 @@
+import styles from './OrderDetail.module.scss'
+import { useCart } from '../hooks/useCart'
+
+const OrderDetail = () => {
+	const { cart } = useCart()
+
+	const subtotal = cart.reduce(
+		(acc, item) => acc + item.price * item.quantity,
+		0
+	)
+	const discount = subtotal * 0.2
+	const delivery = 15
+	const total = subtotal - discount + delivery
+
+	return (
+		<div className={styles.detail}>
+			<h2>Order Summary</h2>
+			<div className={styles.stats}>
+				<div>
+					<p>Subtotal</p>
+					<span>${subtotal}</span>
+				</div>
+				<div>
+					<p>Discount (-20%)</p>
+					<span>-${discount}</span>
+				</div>
+				<div>
+					<p>Delivery Fee</p>
+					<span>${delivery}</span>
+				</div>
+			</div>
+			<div className={styles.total}>
+				<p>Total</p>
+				<span>${total}</span>
+			</div>
+			<button>Go to Checkout</button>
+		</div>
+	)
+}
+
+export default OrderDetail

src/components/OrderDetail.module.scss

@@ -0,0 +1,67 @@
+@use '../assets/styles/variables' as *;
+
+.detail {
+	border: 1px solid gainsboro;
+	border-radius: 20px;
+
+	flex-basis: 50%;
+	margin-top: 24px;
+	padding: 20px;
+
+	display: flex;
+	flex-direction: column;
+
+	.stats {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		margin-top: 24px;
+		padding-bottom: 20px;
+
+		border-bottom: 1px solid gainsboro;
+		div {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			p {
+				color: gray;
+				font-size: 20px;
+			}
+
+			span {
+				font-size: 20px;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.total {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		p {
+			color: gray;
+			font-size: 20px;
+		}
+
+		span {
+			font-size: 20px;
+			font-weight: bold;
+			margin-top: 20px;
+		}
+	}
+
+	button {
+		outline: 0;
+		border: 0;
+		font-size: 16px;
+		padding: 20px;
+		border-radius: 62px;
+		background-color: $primary-color;
+		color: $white-color;
+		cursor: pointer;
+		margin-top: 24px;
+	}
+}

src/components/card/cart/index.jsx

@@ -0,0 +1,41 @@
+import styles from './index.module.scss'
+import TrashIcon from '../../../assets/icons/trash.svg'
+import { useCart } from '../../../hooks/useCart'
+
+const CartItem = ({ item }) => {
+	const { removeFromCart, updateQuantity } = useCart()
+
+	const handleIncrement = () => {
+		updateQuantity(item.id, item.quantity + 1)
+	}
+
+	const handleDecrement = () => {
+		if (item.quantity > 1) {
+			updateQuantity(item.id, item.quantity - 1)
+		}
+	}
+
+	return (
+		<div className={styles.item}>
+			<button className={styles.trash} onClick={() => removeFromCart(item.id)}>
+				<img src={TrashIcon} alt='Удалить' />
+			</button>
+			<div className={styles.image}>
+				<img src={item.imageUrl} alt={item.name} />
+			</div>
+			<div className={styles.content}>
+				<h2>{item.name}</h2>
+				<div className={styles.wrapper}>
+					<span className={styles.price}>${item.price}</span>
+					<div className={styles.buttons}>
+						<button onClick={handleDecrement}>-</button>
+						<span>{item.quantity}</span>
+						<button onClick={handleIncrement}>+</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default CartItem

src/components/card/cart/index.module.scss

@@ -0,0 +1,62 @@
+.item {
+	border-bottom: 1px solid #dcdcdc;
+	padding: 24px 0;
+	position: relative;
+
+	.trash {
+		outline: 0;
+		border: 0;
+		background-color: white;
+		position: absolute;
+
+		top: 20px;
+		right: 20px;
+
+		cursor: pointer;
+	}
+
+	.image {
+		background-color: #f5f5f5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 35px;
+		height: 124px;
+		width: 124px;
+
+		img {
+			width: 90px;
+			object-fit: contain;
+		}
+	}
+
+	.wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.price {
+			font-size: 24px;
+		}
+
+		.buttons {
+			display: flex;
+			background-color: #f0f0f0;
+			padding: 12px 20px;
+			gap: 20px;
+			border-radius: 62px;
+			align-items: center;
+
+			span {
+				font-size: 14px;
+			}
+
+			button {
+				outline: 0;
+				border: 0;
+				font-size: 16px;
+				cursor: pointer;
+			}
+		}
+	}
+}

src/components/card/index.jsx

@@ -1,26 +0,0 @@
-import styles from './index.module.scss'
-
-import WishIcon from '../../assets/icons/wish.svg'
-
-const ProductCard = ({ name, price, imageUrl }) => {
-	return (
-		<div className={styles.product}>
-			<div className={styles.image}>
-				<img src={imageUrl} alt='' />
-				<div className={styles.buttons}>
-					<button>
-						<img src={WishIcon} alt='' />
-					</button>
-				</div>
-			</div>
-			<div className={styles.content}>
-				<h4>{name}</h4>
-				<div className={styles.stats}>
-					<span>${price}</span>
-				</div>
-			</div>
-		</div>
-	)
-}
-
-export default ProductCard

src/components/card/product/index.jsx

@@ -0,0 +1,33 @@
+import styles from './index.module.scss'
+import WishIcon from '../../../assets/icons/wish.svg'
+import { useCart } from '../../../hooks/useCart'
+
+const ProductCard = ({ id, name, price, imageUrl }) => {
+	const { addToCart } = useCart()
+
+	const handleAdd = () => {
+		addToCart({ id, name, price, imageUrl })
+	}
+
+	return (
+		<div className={styles.product}>
+			<div className={styles.image}>
+				<img src={imageUrl} alt={name} />
+				<div className={styles.buttons}>
+					<button onClick={handleAdd}>В корзину</button>
+					<button>
+						<img src={WishIcon} alt='Избранное' />
+					</button>
+				</div>
+			</div>
+			<div className={styles.content}>
+				<h4>{name}</h4>
+				<div className={styles.stats}>
+					<span>${price}</span>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default ProductCard

src/components/card/product/index.module.scss

@@ -1,4 +1,4 @@
-@use '../../assets/styles/variables' as *;
+@use '../../../assets/styles/variables' as *;
 
 .product {
 	display: flex;

src/components/header/index.jsx

@@ -4,21 +4,24 @@ import CartIcon from '../../assets/icons/cart.svg'
 import UserIcon from '../../assets/icons/user.svg'
 import WishlistIcon from '../../assets/icons/wishlist.svg'
 import LoopIcon from '../../assets/icons/loop.svg'
+import { Link } from 'react-router-dom'
+import { useCart } from '../../hooks/useCart'
 
 const Header = () => {
+    const { cart, loading, error } = useCart()
 	return (
 		<header className={styles.header}>
 			<h2>Exclusive</h2>
 			<nav>
 				<ul>
 					<li>
-						<a href='#'>Home</a>
+						<Link to={{ pathname: '/' }}>Home</Link>
 					</li>
 					<li>
-						<a href='#'>Contact</a>
+						<Link to={{ pathname: '/contact' }}>Contact</Link>
 					</li>
 					<li>
-						<a href='#'>About</a>
+						<Link to={{ pathname: '/about' }}>About</Link>
 					</li>
 					<li>
 						<a href='#'>Sign Up</a>
@@ -31,10 +34,17 @@ const Header = () => {
 			</div>
 			<div className={styles.buttons}>
 				<button>
-					<img src={WishlistIcon} alt='' />
+					<Link to={{ pathname: '/wishlist' }}>
+						<img src={WishlistIcon} alt='' />
+					</Link>
 				</button>
 				<button>
-					<img src={CartIcon} alt='' />
+					<Link to={{ pathname: '/cart' }}>
+					    <div className={styles.cart}>
+						    <img src={CartIcon} alt='' className={styles.img} />
+                            {cart && cart.length > 0 ? <div className={styles.sticker}>{cart.length}</div> : ''}
+                        </div>
+					</Link>
 				</button>
 				<button>
 					<img src={UserIcon} alt='' />

src/components/header/index.module.scss

@@ -1,55 +1,85 @@
 .header {
-	display: flex;
+    display: flex;
-	justify-content: space-between;
+    justify-content: space-between;
-	align-items: center;
+    align-items: center;
-	border-bottom: 1px solid gainsboro;
+    border-bottom: 1px solid gainsboro;
-	padding: 30px 0;
+    padding: 30px 0;
 
-	h2 {
+    h2 {
-		font-size: 24px;
+        font-size: 24px;
-	}
+    }
 
-	ul {
+    ul {
-		list-style: none;
+        list-style: none;
-		display: flex;
+        display: flex;
-		gap: 48px;
+        gap: 48px;
 
-		a {
+        a {
-			color: black;
+            color: black;
-			text-decoration: none;
+            text-decoration: none;
-			font-size: 16px;
+            font-size: 16px;
-			cursor: pointer;
+            cursor: pointer;
-		}
+        }
-	}
+    }
 
-	.search {
+    .search {
-		display: flex;
+        display: flex;
-		align-items: center;
+        align-items: center;
-		background-color: #f5f5f5;
+        background-color: #f5f5f5;
-		padding: 7px 12px;
+        padding: 7px 12px;
-		gap: 35px;
+        gap: 35px;
 
-		input {
+        input {
-			outline: 0;
+            outline: 0;
-			border: 0;
+            border: 0;
-			background-color: #f5f5f5;
+            background-color: #f5f5f5;
-			font-size: 12px;
+            font-size: 12px;
-		}
+        }
 
-		img {
+        img {
-			cursor: pointer;
+            cursor: pointer;
-		}
+        }
-	}
+    }
 
-	.buttons {
+    .buttons {
-		display: flex;
+        display: flex;
-		gap: 16px;
+        gap: 16px;
 
-		button {
+        button {
-			background: none;
+            background: none;
-			outline: 0;
+            outline: 0;
-			border: 0;
+            border: 0;
-			cursor: pointer;
+            cursor: pointer;
-		}
+        }
-	}
+    }
+
+    .cart {
+        position: relative;
+        display: inline-block;
+        border-radius: 12px;
+        /*overflow: hidden;*/
+    }
+
+    .sticker {
+        position: absolute;
+        top: 15px;
+        /* отступ сверху */
+        left: 15px;
+        /* отступ слева */
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
+        /* Градиент стикера */
+        color: #ffffff;
+        padding: 6px 10px 6px 10px;
+        border-radius: 20px;
+        /* Округление стикера */
+        box-shadow: 0 4px 12px rgba(255, 65, 108, 0.4);
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.5px;
+        z-index: 10;
+    }
 }

src/components/list/cart/index.jsx

@@ -0,0 +1,22 @@
+import CartItem from '../../card/cart'
+import styles from './index.module.scss'
+import { useCart } from '../../../hooks/useCart'
+
+const CartList = () => {
+	const { cart, loading, error } = useCart()
+
+	if (loading) return <p>Загрузка корзины...</p>
+	if (error) return <p>Ошибка: {error}</p>
+
+	return (
+		<ul className={styles.list}>
+			{cart.map(item => (
+				<li key={item.id}>
+					<CartItem item={item} />
+				</li>
+			))}
+		</ul>
+	)
+}
+
+export default CartList

src/components/list/cart/index.module.scss

@@ -0,0 +1,13 @@
+.list {
+	display: flex;
+	border: 1px solid gainsboro;
+	border-radius: 20px;
+	padding: 20px;
+	margin-top: 24px;
+	list-style: none;
+
+	max-width: 715px;
+	flex-direction: column;
+
+	flex-basis: 80%;
+}

src/components/list/index.jsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import styles from './index.module.scss'
-
-import ProductCard from '../card'
-
-const ProductList = () => {
-	const [products, setProducts] = React.useState([])
-	const [loading, setLoading] = React.useState(true)
-	const [error, setError] = React.useState(null)
-
-	React.useEffect(() => {
-		let cancelled = false
-
-		const getProducts = async () => {
-			try {
-				setLoading(true)
-				setError(null)
-
-				const response = await fetch('http://localhost:8000/products')
-
-				if (!response.ok) {
-					throw new Error(`HTTP error! status: ${response.status}`)
-				}
-
-				const data = await response.json()
-
-				if (!cancelled) {
-					setProducts(data)
-				}
-			} catch (err) {
-				if (!cancelled) {
-					setError(err.message)
-					setProducts([])
-				}
-			} finally {
-				if (!cancelled) {
-					setLoading(false)
-				}
-			}
-		}
-
-		getProducts()
-
-		return () => {
-			cancelled = true
-		}
-	}, [])
-
-	if (loading) {
-		return <div className={styles.loading}>Загрузка продуктов...</div>
-	}
-
-	if (error) {
-		return (
-			<div className={styles.error}>
-				<p>Ошибка при загрузке продуктов: {error}</p>
-				<button onClick={() => window.location.reload()}>
-					Попробовать снова
-				</button>
-			</div>
-		)
-	}
-
-	return (
-		<ul className={styles.list}>
-			{products.map(product => (
-				<li key={product.id}>
-					<ProductCard {...product} />
-				</li>
-			))}
-		</ul>
-	)
-}
-
-export default ProductList

src/components/list/product/index.jsx

@@ -0,0 +1,34 @@
+import styles from './index.module.scss'
+import ProductCard from '../../card/product'
+import { useProducts } from '../../../hooks/useProducts'
+
+const ProductList = () => {
+	const { products, loading, error } = useProducts()
+
+	if (loading) {
+		return <div className={styles.loading}>Загрузка продуктов...</div>
+	}
+
+	if (error) {
+		return (
+			<div className={styles.error}>
+				<p>Ошибка при загрузке продуктов: {error}</p>
+				<button onClick={() => window.location.reload()}>
+					Попробовать снова
+				</button>
+			</div>
+		)
+	}
+
+	return (
+		<ul className={styles.list}>
+			{products.map(product => (
+				<li key={product.id}>
+					<ProductCard {...product} />
+				</li>
+			))}
+		</ul>
+	)
+}
+
+export default ProductList

src/components/timer/index.jsx

@@ -1,21 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import styles from './index.module.scss'
-
-const Timer = () => {
-    const [seconds, setSeconds] = useState(0);
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setSeconds(prev => prev + 1);
-        }, 1000);
-        return () => {
-            clearInterval(interval);
-        };
-    }, []);
-    return (
-        <div>
-            <h2>Прошло секунд: {seconds}</h2>
-        </div>
-    );
-}
-
-export default Timer

src/hooks/useCart.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { CartService } from '../services/CartService'
+
+export function useCart() {
+	const [cart, setCart] = React.useState([])
+	const [loading, setLoading] = React.useState(true)
+	const [error, setError] = React.useState(null)
+
+	const fetchCart = React.useCallback(async () => {
+		try {
+			setLoading(true)
+			const data = await CartService.getCart()
+			setCart(data)
+		} catch (err) {
+			setError(err.message)
+		} finally {
+			setLoading(false)
+		}
+	}, [])
+
+	const addToCart = async product => {
+		await CartService.addToCart(product)
+		await fetchCart()
+	}
+
+	const removeFromCart = async id => {
+		await CartService.removeFromCart(id)
+		await fetchCart()
+	}
+
+	const updateQuantity = async (id, quantity) => {
+		await CartService.updateQuantity(id, quantity)
+		await fetchCart()
+	}
+
+	React.useEffect(() => {
+		fetchCart()
+	}, [fetchCart])
+
+	return {
+		cart,
+		loading,
+		error,
+		addToCart,
+		removeFromCart,
+		updateQuantity,
+	}
+}

src/hooks/useProducts.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { fetchProducts } from '../services/ProductService'
+
+export function useProducts() {
+	const [products, setProducts] = React.useState([])
+	const [loading, setLoading] = React.useState(true)
+	const [error, setError] = React.useState(null)
+
+	React.useEffect(() => {
+		let cancelled = false
+
+		const loadProducts = async () => {
+			try {
+				setLoading(true)
+				setError(null)
+
+				const data = await fetchProducts()
+
+				if (!cancelled) {
+					setProducts(data)
+				}
+			} catch (err) {
+				if (!cancelled) {
+					setError(err.message)
+					setProducts([])
+				}
+			} finally {
+				if (!cancelled) {
+					setLoading(false)
+				}
+			}
+		}
+
+		loadProducts()
+
+		return () => {
+			cancelled = true
+		}
+	}, [])
+
+	return { products, loading, error }
+}

src/main.jsx

@@ -1,9 +1,20 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
+import {
+	BrowserRouter as Router,
+	Routes,
+	Route,
+	Navigate,
+} from 'react-router-dom'
+
+import Catalog from './pages/catalog'
+import Cart from './pages/cart'
 
 createRoot(document.getElementById('root')).render(
-	<StrictMode>
+	<Router>
-		<App />
+		<Routes>
-	</StrictMode>
+			<Route path='/' element={<Navigate to='/catalog' replace />} />
+			<Route path='/catalog' element={<Catalog />} />
+			<Route path='/cart' element={<Cart />} />
+		</Routes>
+	</Router>
 )

src/pages/cart/index.jsx

@@ -0,0 +1,20 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header'
+import CartList from '../../components/list/cart'
+import OrderDetail from '../../components/OrderDetail'
+
+const Cart = () => {
+	return (
+		<div className={styles.container}>
+			<Header />
+			<h1 style={{ marginTop: 24 }}>Your Cart</h1>
+			<div style={{ display: 'flex', gap: 20 }}>
+				<CartList />
+				<OrderDetail />
+			</div>
+		</div>
+	)
+}
+
+export default Cart

src/pages/cart/index.module.scss

@@ -1,5 +1,3 @@
-@use './assets/styles/variables' as *;
-
 .container {
 	max-width: 1170px;
 	margin: 0 auto;

src/pages/catalog/index.jsx

@@ -0,0 +1,15 @@
+import styles from './index.module.scss'
+
+import Header from '../../components/header/index'
+import ProductList from '../../components/list/product/index'
+
+const Catalog = () => {
+	return (
+		<div className={styles.container}>
+			<Header />
+			<ProductList />
+		</div>
+	)
+}
+
+export default Catalog

src/pages/catalog/index.module.scss

@@ -0,0 +1,4 @@
+.container {
+	max-width: 1170px;
+	margin: 0 auto;
+}

src/services/CartService.js

@@ -0,0 +1,53 @@
+const BASE_URL = 'http://localhost:8000/cart'
+
+export const CartService = {
+	async getCart() {
+		const response = await fetch(BASE_URL)
+		if (!response.ok) throw new Error('Ошибка при получении корзины')
+		return response.json()
+	},
+    async getCartCount() {
+		const response = await fetch(BASE_URL)
+		if (!response.ok) throw new Error('Ошибка при получении корзины')
+		return response.json().length
+	},
+	async addToCart(product) {
+		const existing = await fetch(`${BASE_URL}?productId=${product.id}`)
+		const data = await existing.json()
+
+		if (data.length > 0) {
+			const current = data[0]
+			return fetch(`${BASE_URL}/${current.id}`, {
+				method: 'PATCH',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ quantity: current.quantity + 1 }),
+			})
+		} else {
+			return fetch(BASE_URL, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					productId: product.id,
+					name: product.name,
+					price: product.price,
+					imageUrl: product.imageUrl,
+					quantity: 1,
+				}),
+			})
+		}
+	},
+
+	async updateQuantity(id, quantity) {
+		return fetch(`${BASE_URL}/${id}`, {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ quantity }),
+		})
+	},
+
+	async removeFromCart(id) {
+		return fetch(`${BASE_URL}/${id}`, {
+			method: 'DELETE',
+		})
+	},
+}

src/services/ProductService.js

@@ -0,0 +1,15 @@
+const API_URL = 'http://localhost:8000/products'
+
+export async function fetchProducts() {
+	try {
+		const response = await fetch(API_URL)
+
+		if (!response.ok) {
+			throw new Error(`HTTP error! status: ${response.status}`)
+		}
+
+		return await response.json()
+	} catch (error) {
+		throw new Error(error.message || 'Ошибка при загрузке продуктов')
+	}
+}