Merge branch 'master' of github.com:Studio-Yandex-Practicum/maxboom_f…

…rontend into development_291_add-to-cart
Studio-Yandex-Practicum · Apr 19, 2024 · 3f8f28c · 3f8f28c
2 parents 44cc92a + b77d99f
commit 3f8f28c
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 35 deletions.
diff --git a/src/pages/ProductPage/ProductPage.module.scss b/src/pages/ProductPage/ProductPage.module.scss
@@ -0,0 +1,6 @@
+.pageDescriptor {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
@@ -3,16 +3,18 @@ import { useSelector } from 'react-redux'
 import { useParams } from 'react-router'
 
 import { StateSchema } from '@/app/providers/StoreProvider'
-import { PageDescription } from '@/components/PageDescription/PageDescription'
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
+import Heading from '@/shared/ui/Heading/Heading'
 import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages'
 import { Product } from '@/widgets/Product/Product'
 import { ProductInfo } from '@/widgets/ProductInfo/ProductInfo'
 import { ViewedProducts } from '@/widgets/ViewedProducts/ViewedProducts'
 
 import { addToViewedProducts } from './model/functions/functions'
 import { getProduct } from './model/slice/productSlice'
+import styles from './ProductPage.module.scss'
 
 /**
  * Страница с выбранным товаром.
@@ -23,6 +25,11 @@ export const ProductPage = () => {
   const productStore = useSelector((store: StateSchema) => store.product)
   const { slug } = useParams()
 
+  const links = [
+    { heading: 'Главная', href: '/' },
+    { heading: productStore.product.name, href: '' }
+  ]
+
   useEffect(() => {
     if (slug) dispatch(getProduct(slug))
   }, [slug])
@@ -34,7 +41,10 @@ export const ProductPage = () => {
   return (
     <>
       <WrapperForMainContent>
-        <PageDescription count={-1} heading={productStore.product.name} />
+        <div className={styles.pageDescriptor}>
+          <Heading>{productStore.product.name}</Heading>
+          <Breadcrumbs links={links} />
+        </div>
         <Product product={productStore.product} />
         <ProductInfo description={productStore.product.description} />
         <Advantages />

diff --git a/src/pages/RootPage/RootPage.tsx b/src/pages/RootPage/RootPage.tsx
@@ -9,14 +9,14 @@ import styles from './root.module.scss'
 
 const RootPage = () => {
   return (
-    <>
+    <div className={styles.rootPageWrapper}>
       <Header />
       <main className={styles.main}>
         <Outlet />
       </main>
       <Footer />
       <Contact messenger={messengerArray} />
-    </>
+    </div>
   )
 }
 

diff --git a/src/pages/RootPage/root.module.scss b/src/pages/RootPage/root.module.scss
@@ -1,3 +1,10 @@
+.rootPageWrapper {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+  margin: 0;
+}
+
 .main {
   display: flex;
   flex-direction: column;

diff --git a/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss b/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss
@@ -1,9 +1,14 @@
 @use '../../styles/utils/variables' as var;
 
 .breadcrumbs {
-    display: flex;
+  display: flex;
 }
 
 .link {
-    color: var.$subtitle-color;
-}
+  color: var.$subtitle-color;
+  transition: color 0.3s;
+
+  &:hover {
+    color: var.$theme-secondary-color;
+  }
+}
diff --git a/src/shared/ui/Breadcrumbs/Breadcrumbs.tsx b/src/shared/ui/Breadcrumbs/Breadcrumbs.tsx
@@ -28,9 +28,9 @@ const Breadcrumbs: FC<TBreadcrumbsProps> = ({ links }) => {
           (index !== links.length - 1 && (
             <Subheading>
               <Link key={link.href} to={link.href} className={styles.link}>
-                {link.heading}{' '}
+                {link.heading}
               </Link>
-              <span>{` / `}</span>
+              <span>&nbsp;&#47;&nbsp;</span>
             </Subheading>
           )) || <Subheading key={link.href}>{link.heading}</Subheading>
         )

diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx
@@ -1,29 +1,26 @@
 import { type FC } from 'react'
 
+import { Routes } from '@/shared/config/routerConfig/routes'
 import Link from '@/shared/ui/Link/Link'
 
 import styles from './logo.module.scss'
 
 type TLogoProps = {
   image: string
-  title: string
-  url: string
   width: string
   height: string
 }
 /**
  * @param {string} image - путь к логотипу на сервере
- * @param {string} title - лейбл логотипа (и альт)
- * @param {string} url - путь ссылки по нажатию на логотип
  * @param {string} width - ширина логотипа
  * @param {string} height  - высота логотипа
  */
 
-const Logo: FC<TLogoProps> = ({ image, title, url, width, height }) => {
+const Logo: FC<TLogoProps> = ({ image, width, height }) => {
   return (
     <div className={styles.container}>
-      <Link to={url} className={styles.link}>
-        <img src={image} title={title} alt={title} style={{ width, height }} />
+      <Link to={Routes.HOME} className={styles.link}>
+        <img src={image} alt="Logo" style={{ width, height }} />
       </Link>
     </div>
   )

diff --git a/src/widgets/Footer/Footer.tsx b/src/widgets/Footer/Footer.tsx
@@ -45,13 +45,7 @@ function Footer() {
         <div className={styles.footer__container}>
           <div className={styles.footer__middle}>
             <div className={styles['footer__col-one']}>
-              <Logo
-                image={coreBaseData.footer.main_logo.image}
-                title={coreBaseData.footer.main_logo.title}
-                url={coreBaseData.footer.main_logo.url}
-                width="114px"
-                height="38px"
-              />
+              <Logo image={coreBaseData.footer.main_logo.image} width="114px" height="38px" />
               <Paragraph className={styles.footer__caption}>{coreBaseData.footer.company_info}</Paragraph>
             </div>
             <div className={styles['footer__col-two']}>

diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx
@@ -147,13 +147,7 @@ function Header() {
           </div>
 
           <div className={styles['header__row-two']}>
-            <Logo
-              image={coreBaseData.header.main_logo.image}
-              title={coreBaseData.header.main_logo.title}
-              url={coreBaseData.header.main_logo.url}
-              width="138px"
-              height="46px"
-            />
+            <Logo image={coreBaseData.header.main_logo.image} width="138px" height="46px" />
             <SearchProduct />
             <HeaderAccount {...headerAccountData} />
           </div>

diff --git a/src/widgets/Header/model/slice/headerSlice.tsx b/src/widgets/Header/model/slice/headerSlice.tsx
@@ -9,9 +9,7 @@ const initialState: CoreBaseHeaderSchema = {
   isLoading: false,
   header: {
     main_logo: {
-      image: '',
-      url: '',
-      title: ''
+      image: ''
     },
     support: {
       callback: '',

diff --git a/src/widgets/Header/model/types/types.tsx b/src/widgets/Header/model/types/types.tsx
@@ -1,7 +1,5 @@
 interface Logo {
   image: string
-  url: string
-  title: string
 }
 
 interface Support {