From c3a78e506ac60e6aee235ed8fa3ca822b49432de Mon Sep 17 00:00:00 2001 From: Laktionov Anton Date: Sun, 17 May 2026 12:46:44 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A7=D1=82=D0=BE=20=D0=B4=D0=BE=D0=B4=D0=B5?= =?UTF-8?q?=D0=BB=D0=B0=D0=BB=D0=B8=20=D0=BF=D0=BE=20=D1=83=D1=80=D0=BE?= =?UTF-8?q?=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 32 ++++++++++++++----------- package.json | 2 +- src/components/card/index.jsx | 8 +++++-- src/components/header/index.jsx | 26 +++++++++++++------- src/components/header/index.module.scss | 3 +++ src/components/list/index.jsx | 7 +++--- src/main.jsx | 8 +++++++ src/pages/about/index.jsx | 13 ++++++++++ src/pages/about/index.module.scss | 4 ++++ src/pages/cart/index.jsx | 10 +++++++- src/pages/cart/index.module.scss | 4 ++++ src/pages/item/index.jsx | 12 ++++++++++ src/pages/item/index.module.scss | 0 src/pages/login/index.jsx | 22 +++++++++++++++++ src/pages/login/index.module.scss | 0 src/pages/profile/index.jsx | 15 ++++++++++++ src/pages/profile/index.module.scss | 4 ++++ 17 files changed, 141 insertions(+), 29 deletions(-) create mode 100644 src/pages/about/index.jsx create mode 100644 src/pages/about/index.module.scss create mode 100644 src/pages/item/index.jsx create mode 100644 src/pages/item/index.module.scss create mode 100644 src/pages/login/index.jsx create mode 100644 src/pages/login/index.module.scss create mode 100644 src/pages/profile/index.jsx create mode 100644 src/pages/profile/index.module.scss diff --git a/package-lock.json b/package-lock.json index 67438c0..e3ba9d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "react": "^19.1.0", "react-dom": "^19.1.0", "react-icons": "^5.5.0", - "react-router-dom": "^7.6.3", + "react-router-dom": "^7.15.1", "sass-embedded": "^1.89.2" }, "devDependencies": { @@ -1622,12 +1622,16 @@ "license": "MIT" }, "node_modules/cookie": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", - "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", "license": "MIT", "engines": { "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/cross-spawn": { @@ -2516,9 +2520,9 @@ } }, "node_modules/react-router": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.3.tgz", - "integrity": "sha512-zf45LZp5skDC6I3jDLXQUu0u26jtuP4lEGbc7BbdyxenBN1vJSTA18czM2D+h5qyMBuMrD+9uB+mU37HIoKGRA==", + "version": "7.15.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.15.1.tgz", + "integrity": "sha512-R8rl9HhgikFYoPJymnUtPXWbnDb3oget6lQnfIoupbt61aT9aOhRkDsY2XRhZRyX1Z/8a5sL74fXmFNm3NRK5A==", "license": "MIT", "dependencies": { "cookie": "^1.0.1", @@ -2538,12 +2542,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.3.tgz", - "integrity": "sha512-DiWJm9qdUAmiJrVWaeJdu4TKu13+iB/8IEi0EW/XgaHCjW/vWGrwzup0GVvaMteuZjKnh5bEvJP/K0MDnzawHw==", + "version": "7.15.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.15.1.tgz", + "integrity": "sha512-AzF62gjY6U9rkMq4RfP/r2EVtQ7DMfNMjyOp/flLTCrtRylLiK4wT4pSq6O8rOXZ2eXdZYJPEYe+ifomiv+Igg==", "license": "MIT", "dependencies": { - "react-router": "7.6.3" + "react-router": "7.15.1" }, "engines": { "node": ">=20.0.0" @@ -2947,9 +2951,9 @@ } }, "node_modules/set-cookie-parser": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", - "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", "license": "MIT" }, "node_modules/shebang-command": { diff --git a/package.json b/package.json index 1c40363..4973a27 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "react": "^19.1.0", "react-dom": "^19.1.0", "react-icons": "^5.5.0", - "react-router-dom": "^7.6.3", + "react-router-dom": "^7.15.1", "sass-embedded": "^1.89.2" }, "devDependencies": { diff --git a/src/components/card/index.jsx b/src/components/card/index.jsx index f691e56..bdd1821 100644 --- a/src/components/card/index.jsx +++ b/src/components/card/index.jsx @@ -1,9 +1,11 @@ import styles from './index.module.scss' import WishIcon from '../../assets/icons/wish.svg' +import { Link } from 'react-router-dom' -const ProductCard = ({ name, price, imageUrl }) => { +const ProductCard = ({ id, name, price, imageUrl }) => { return ( +
@@ -14,7 +16,9 @@ const ProductCard = ({ name, price, imageUrl }) => {
-

{name}

+ +

{name}

+
${price}
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx index 772553a..cf6758c 100644 --- a/src/components/header/index.jsx +++ b/src/components/header/index.jsx @@ -4,7 +4,7 @@ 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 { Link, NavLink } from 'react-router-dom' const Header = () => { return ( @@ -13,16 +13,22 @@ const Header = () => { @@ -37,12 +43,16 @@ const Header = () => {
diff --git a/src/components/header/index.module.scss b/src/components/header/index.module.scss index dc9978a..d6a08b7 100644 --- a/src/components/header/index.module.scss +++ b/src/components/header/index.module.scss @@ -53,3 +53,6 @@ } } } + .active { + border-bottom: 1px solid red; + } diff --git a/src/components/list/index.jsx b/src/components/list/index.jsx index 2e6c0cf..2f2b4d6 100644 --- a/src/components/list/index.jsx +++ b/src/components/list/index.jsx @@ -7,10 +7,11 @@ const ProductList = () => { const [products, setProducts] = React.useState([]) const [loading, setLoading] = React.useState(true) const [error, setError] = React.useState(null) - + console.log("rendred"); + React.useEffect(() => { let cancelled = false - + console.log("useEffect"); const getProducts = async () => { try { setLoading(true) @@ -44,7 +45,7 @@ const ProductList = () => { return () => { cancelled = true } - }, []) + },[]) if (loading) { return
Загрузка продуктов...
diff --git a/src/main.jsx b/src/main.jsx index 33aada0..eed68f3 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -8,6 +8,10 @@ import { import Catalog from './pages/catalog' import Cart from './pages/cart' +import About from './pages/about' +import Login from './pages/login' +import UserProfile from './pages/profile' +import Item from './pages/item' createRoot(document.getElementById('root')).render( @@ -15,7 +19,11 @@ createRoot(document.getElementById('root')).render( {/* 2. Добавляем редирект с корневого пути */} } /> } /> + } /> } /> + } /> + } /> + } /> ) diff --git a/src/pages/about/index.jsx b/src/pages/about/index.jsx new file mode 100644 index 0000000..5a8aca4 --- /dev/null +++ b/src/pages/about/index.jsx @@ -0,0 +1,13 @@ +import styles from './index.module.scss' + +import Header from '../../components/header/index' + +const About = () => { + return ( +
+
+
+ ) +} + +export default About \ No newline at end of file diff --git a/src/pages/about/index.module.scss b/src/pages/about/index.module.scss new file mode 100644 index 0000000..837343f --- /dev/null +++ b/src/pages/about/index.module.scss @@ -0,0 +1,4 @@ +.container { + max-width: 1170px; + margin: 0 auto; +} \ No newline at end of file diff --git a/src/pages/cart/index.jsx b/src/pages/cart/index.jsx index 8b3acb5..da334d6 100644 --- a/src/pages/cart/index.jsx +++ b/src/pages/cart/index.jsx @@ -1,5 +1,13 @@ +import styles from './index.module.scss' + +import Header from '../../components/header/index' + const Cart = () => { - return <> + return ( +
+
+
+ ) } export default Cart diff --git a/src/pages/cart/index.module.scss b/src/pages/cart/index.module.scss index e69de29..837343f 100644 --- a/src/pages/cart/index.module.scss +++ b/src/pages/cart/index.module.scss @@ -0,0 +1,4 @@ +.container { + max-width: 1170px; + margin: 0 auto; +} \ No newline at end of file diff --git a/src/pages/item/index.jsx b/src/pages/item/index.jsx new file mode 100644 index 0000000..fbce020 --- /dev/null +++ b/src/pages/item/index.jsx @@ -0,0 +1,12 @@ +import styles from './index.module.scss' +import { useParams } from 'react-router-dom' + +const Product = ({ name, price }) => { + const { id } = useParams(); + return ( + <> +

Товар {id}. {name} по цене {price }

+ + ) +} +export default Product \ No newline at end of file diff --git a/src/pages/item/index.module.scss b/src/pages/item/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/login/index.jsx b/src/pages/login/index.jsx new file mode 100644 index 0000000..ea78b4b --- /dev/null +++ b/src/pages/login/index.jsx @@ -0,0 +1,22 @@ +import styles from './index.module.scss' +import { useNavigate } from 'react-router-dom' + +const Login = () => { + const navigate = useNavigate(); + + const handleSubmit = formData => { + //Какая то логика проверки авторизации + navigate('/catalog') + } + + return ( + <> +

Страница авторизации

+
+ +
+ + ) +} + +export default Login \ No newline at end of file diff --git a/src/pages/login/index.module.scss b/src/pages/login/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/profile/index.jsx b/src/pages/profile/index.jsx new file mode 100644 index 0000000..b29120a --- /dev/null +++ b/src/pages/profile/index.jsx @@ -0,0 +1,15 @@ +import styles from './index.module.scss' +import Header from '../../components/header/index' +import { useParams } from 'react-router-dom' + + +const UserProfile = ({ name }) => { + const { id } = useParams(); + return ( +
+
+

Профиль пользователя {id} {name}

+
+ ) +} +export default UserProfile \ No newline at end of file diff --git a/src/pages/profile/index.module.scss b/src/pages/profile/index.module.scss new file mode 100644 index 0000000..837343f --- /dev/null +++ b/src/pages/profile/index.module.scss @@ -0,0 +1,4 @@ +.container { + max-width: 1170px; + margin: 0 auto; +} \ No newline at end of file