🎨 styles: FeaturedProductCard shape common, img common

:%s

pages/test.tsx

@@ -1,102 +1,84 @@
 import {
-  CartDrawer,
+  FeaturedProductCard,
   Layout
 } from 'src/components/common';
-import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
 // import { RecipeListPage } from 'src/components/modules/recipes';
 import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
-import { useModalCommon } from 'src/components/hooks';
+import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data';
 
 const CATEGORY = [
   {
-      name: 'All',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+    name: 'All',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
   },
   {
-      name: 'Veggie',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    name: 'Veggie',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
   },
   {
-      name: 'Seafood',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    name: 'Seafood',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
   },
   {
-      name: 'Frozen',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+    name: 'Frozen',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
   },
   {
-      name: 'Coffee Bean',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+    name: 'Coffee Bean',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
   },
   {
-      name: 'Sauce',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+    name: 'Sauce',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
   },
 ]
 const BRAND = [
   {
-      name: 'Maggi',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+    name: 'Maggi',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
   },
   {
-      name: 'Cholimes',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+    name: 'Cholimes',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
   },
   {
-      name: 'Chinsu',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+    name: 'Chinsu',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
   }
 ];
 
 const FEATURED = [
 
-    {
-        name: 'Best Sellers',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
-    },
-    {
-        name: 'Sales',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
-    },
-    {
-        name: 'New Item',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-    },
-    {
-        name: 'Viewed',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
-    }
-  ];
+  {
+    name: 'Best Sellers',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+    name: 'Sales',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+    name: 'New Item',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+    name: 'Viewed',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
+  }
+];
 
 
-import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess'
-import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
-import SkeletonParagraph from 'src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph'
-import SkeletonImage from 'src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage'
 
+const data = PRODUCT_DATA_TEST[0]
 export default function Test() {
   return (
     <>
-    <div className="shape-common-border">
-      <div className="inner">
-        Lorem ipsum dolor sit amet.
-      </div>
-    </div>
-      {/* <BlogDetailPage /> */}
-      
-      {/* <RecipeListPage/> */}
-        {/*<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>*/}
-        {/* <button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
-           <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/>  */}
-           {/* <CartDrawer  /> */}
-           <div className="shape-common-lg">
-              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit maiores aut, delectus assumenda explicabo, dolore facilis, quasi quae sed obcaecati doloribus dolorum architecto aperiam nisi dignissimos consequuntur amet neque possimus.
-           </div>
-           <div className="shape-common-lg-border">
-              <div className="inner">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, porro aut. Quas, consequuntur! Officiis magni cum placeat magnam ut hic beatae error facere obcaecati. Labore eius explicabo fugit minus veritatis.
-              </div>
-           </div>
+      <FeaturedProductCard
+        imageSrc={data.imageSrc}
+        title="Sale 25% coffee bean"
+        subTitle="50 first orders within a day"
+        price={data.price}
+        originPrice="$20.00" />
     </>
   )
 }

src/components/common/ButtonIconBuy/ButtonIconBuy.tsx

@@ -3,7 +3,7 @@ import { IconBuy } from 'src/components/icons'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
 
 interface Props {
-    type?: 'primary' | 'light' | 'ghost',
+    type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
     size?: 'default' | 'large' | 'small',
     loading?: boolean,
     disabled?: boolean,

src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss

@@ -3,7 +3,7 @@
     width: 59.8rem;
     height: 28.8rem;
     padding: 2.4rem;
-    @apply bg-primary-light inline-flex justify-start items-center custom-border-radius ;
+    @apply bg-primary-light inline-flex justify-start items-center shape-common;
     .left{
         width: 24rem;
         height: 24rem;
@@ -30,18 +30,15 @@
                 line-height: 2.4rem;
             }
             .priceWrapper{
-                @apply flex justify-start;
+                @apply flex justify-start sm-headline;
                 .price{
-                    @apply font-bold;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
-                    letter-spacing: -0.01em;
+                    @apply font-bold sm-headline;
                     color: var(--text-active);
                 }
                 .originPrice{
+                    @apply sm-headline;
+                    font-weight: normal;
                     margin-left: 0.8rem;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
                     color: var(--text-label);
                     text-decoration-line: line-through;
                 }
@@ -50,11 +47,18 @@
         .buttonWarpper{
             @apply flex;
             .icon{
-                width: 5.6rem;
+                button {
+                    >div {
+                        @apply bg-primary-light;
+                    }
+                }
             }
             .button{
                 margin-left: 0.8rem;
-                width: 20.6rem;
+                flex: 1;
+                button {
+                    @apply w-full;
+                }
             }
         }
     }

src/components/common/FeaturedProductCard/FeaturedProductCard.tsx

@@ -4,6 +4,7 @@ import s from './FeaturedProductCard.module.scss'
 import { LANGUAGE } from '../../../utils/language.utils'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import { ImgWithLink } from '..'
 interface FeaturedProductCardProps extends FeaturedProductProps {
   buttonText?: string
 }
@@ -19,7 +20,7 @@ const FeaturedProductCard = ({
   return (
     <div className={s.featuredProductCardWarpper}>
       <div className={s.left}>
-        <img src={imageSrc} alt="image" />
+        <ImgWithLink src={imageSrc} alt={title}/>
       </div>
       <div className={s.right}>
         <div className={s.rightTop}>
@@ -32,7 +33,7 @@ const FeaturedProductCard = ({
         </div>
         <div className={s.buttonWarpper}>
           <div className={s.icon}>
-            <ButtonIconBuy />
+            <ButtonIconBuy size='default'/>
           </div>
           <div className={s.button}>
             <ButtonCommon>{buttonText}</ButtonCommon>

src/styles/_base.scss

@@ -3,7 +3,7 @@
 
 :root {
   --primary: #5b9a74;
-  --primary-light: #e0f6e8;
+  --primary-light: #e3f2e9;
   --primary-lightest: #effaf4;
 
   --info-dark: #00317a;