🎨 styles: FeaturedProductCard shape common, img common

:%s

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;