feat: checkboxCommon

2025-07-04 12:11:22 +00:00 · 2021-08-25 17:06:48 +07:00 · 2021-08-25 17:06:48 +07:00 · 188232e5e3
commit 188232e5e3
parent bfec1e8a09
40 changed files with 2849 additions and 1518 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -74,11 +74,7 @@
    "prettier": "^2.3.0",
    "typescript": "4.3.4"
  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
+
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "prettier --write",
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,13 +1,25 @@

-import { ButtonCommon, Layout } from 'src/components/common'
+import { CarouselCommon, LabelCommon, Layout, QuanittyInput,CheckboxCommon } from 'src/components/common'
+
+const dataTest = [{
+  text: 1
+}, {
+  text: 2
+}, {
+  text: 3
+}, {
+  text: 4
+}, {
+  text: 5
+}, {
+  text: 6
+}]
+const test = (props: { text: string }) => <div className="h-64 bg-yellow-300">{props.text}</div>
 export default function Home() {
  return (
    <>
-      <div>This is home page</div>
-      <ButtonCommon />
-      <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
-      <p>Go to <code>src/components</code> to make your awesome component!</p>
-      <p>Go to <code>src/styles</code> to find global styles!</p>
+      
+      <CheckboxCommon defaultChecked={true}></CheckboxCommon>
    </>
  )
 }
--- a/public/assets/svg/checkmark.svg
+++ b/public/assets/svg/checkmark.svg
@ -0,0 +1 @@
+<svg width="10" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.194 1.006a.625.625 0 00-.888 0L3.65 5.67 1.694 3.706a.639.639 0 00-.888.919l2.4 2.4a.625.625 0 00.888 0l5.1-5.1a.625.625 0 000-.919z" fill="#FBFBFB"/></svg>
--- a/src/components/common/ButtonCommon/ButtonCommon.module.css
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.css
@ -1,5 +0,0 @@
-/* style demo here */
-
-.buttonCommon {
-  color: red;
-}
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@ -0,0 +1,96 @@
+@import "../../../styles/utilities";
+
+.buttonCommon {
+  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.6rem 3.2rem;
+  &:disabled {
+    filter: brightness(0.9);
+    cursor: not-allowed;
+    color: var(--disabled);
+  }
+  &.loading {
+    &::before {
+      content: "";
+      border-radius: 50%;
+      width: 1.6rem;
+      height: 1.6rem;
+      border: 3px solid rgba(170, 170, 170, 0.5);
+      border-top: 3px solid var(--white);
+      -webkit-animation: spin 2s linear infinite;
+      animation: spin 2s linear infinite;
+      margin-right: 0.8rem;
+    }
+  }
+  &:hover {
+    @apply shadow-md;
+    &:not(:disabled) {
+      filter: brightness(1.05);
+    }
+  }
+
+  &:focus {
+    outline: none;
+    filter: brightness(1.05);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--text-active);
+  }
+
+  &.light {
+    @apply text-base bg-white;
+    border: 1px solid var(--text-active);
+    &.loading {
+      &::before {
+        border-top-color: var(--primary);
+      }
+    }
+  }
+
+  &.ghost {
+    @apply bg-white;
+    color: var(--primary);
+    border: 1px solid var(--primary);
+    &.loading {
+      &::before {
+        border-top-color: var(--primary);
+      }
+    }
+  }
+
+  &.large {
+    padding: 3.2rem 4.8rem;
+    &.loading {
+      &::before {
+        width: 2.4rem;
+        height: 2.4rem;
+      }
+    }
+  }
+
+  &.preserve {
+    flex-direction: row-reverse;
+    .icon {
+      margin: 0 0 0 1.6rem;
+    }
+  }
+
+  .icon {
+    margin: 0 1.6rem 0 0;
+    svg path {
+      fill: currentColor;
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@ -1,15 +1,37 @@
-import { FC, useRef, useEffect } from 'react'
-import s from './ButtonCommon.module.css'
+import classNames from 'classnames'
+import React, { memo } from 'react'
+import s from './ButtonCommon.module.scss'

 interface Props {
-    className?: string
-    children?: any
+    children?: React.ReactNode,
+    type?: 'primary' | 'light' | 'ghost',
+    size?: 'default' | 'large',
+    icon?: any,
+    isIconSuffix?: boolean,
+    loading?: boolean,
+    disabled?: boolean,
+    onClick?: () => void,
 }

-const ButtonCommon: FC<Props> = ({ }) => {
+const ButtonCommon = memo(({ type = 'primary', size = 'default',
+    icon, loading, disabled, isIconSuffix, children, onClick }: Props) => {
    return (
-        <div className={s.buttonCommon}>This is button common</div>
-    )
+        <button className={classNames({
+            [s.buttonCommon]: true,
+            [s[type]]: !!type,
+            [s[size]]: !!size,
+            [s.loading]: loading,
+            [s.preserve]: isIconSuffix,
+        })}
+            disabled={disabled}
+            onClick={onClick}
+        >
+            {
+                icon && <span className={s.icon}>{icon}</span>
            }
+            <span className={s.label}>{children}</span>
+        </button>
+    )
+})

 export default ButtonCommon
--- a/src/components/common/CarouselCommon/CaroucelCommon.module.scss
+++ b/src/components/common/CarouselCommon/CaroucelCommon.module.scss
@ -0,0 +1,5 @@
+.navigation_wrapper{
+    @apply relative;
+    min-height: theme("caroucel.arrow-height") ;
+    
+}
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@ -0,0 +1,57 @@
+import { useKeenSlider } from 'keen-slider/react'
+import React from 'react'
+import 'keen-slider/keen-slider.min.css'
+import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow';
+import s from "./CaroucelCommon.module.scss"
+interface CarouselCommonProps {
+  children?: React.ReactNode
+  data?: any[]
+  Component: React.ComponentType<any>
+  isArrow?:Boolean
+  itemKey:String
+}
+
+const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => {
+  const [currentSlide, setCurrentSlide] = React.useState(0)
+  const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
+    slidesPerView: 1,
+    initial: 0,
+    slideChanged(s) {
+      setCurrentSlide(s.details().relativeSlide)
+    },
+  })
+  const handleRightArrowClick = () => {
+    slider.next()
+  }
+
+  const handleLeftArrowClick = () => {
+    slider.prev()
+  }
+  return (
+    <div className={s.navigation_wrapper}>
+      <div ref={sliderRef} className="keen-slider">
+        {data?.map((props,index) => (
+          <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
+            <Component {...props} />
+          </div>
+        ))}
+      </div>
+      {slider && (
+          <>
+            <CustomCarouselArrow
+              side="right"
+              onClick={handleRightArrowClick}
+              isDisabled={currentSlide === slider.details().size - 1}
+            />
+            <CustomCarouselArrow
+              side="left"
+              onClick={handleLeftArrowClick}
+              isDisabled={currentSlide === 0}
+            />
+          </>
+        )}
+    </div>
+  )
+}
+
+export default CarouselCommon
--- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
+++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
@ -0,0 +1,17 @@
+.custom_arrow{
+    width: 64px;
+    height:  64px;
+    &:focus{
+        outline: none;
+    }
+    @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
+    &.left{
+        @apply left-0;
+    }
+    &.right{
+        @apply right-0;
+    }
+    &.isDisabled{
+        @apply hidden ;
+    }
+}
--- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
+++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
@ -0,0 +1,24 @@
+import classNames from 'classnames'
+import React from 'react'
+import ArrowLeft from 'src/components/icons/ArrowLeft'
+import ArrowRight from 'src/components/icons/ArrowRight'
+import s from "./CustomCarouselArrow.module.scss"
+interface CustomCarouselArrowProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  side: 'left' | 'right'
+	isDisabled:Boolean
+}
+
+export const CustomCarouselArrow = ({
+  side,isDisabled,
+  ...props
+}: CustomCarouselArrowProps) => {
+  return (
+    <button
+      {...props}
+      className={classNames(`${s.custom_arrow}`, { [`${s[side]}`]: side,[`${s.isDisabled}`]:isDisabled })}
+    >
+			{side==='left'?(<ArrowLeft/>):(<ArrowRight/>)}
+		</button>
+  )
+}
--- a/src/components/common/CheckboxCommon/CheckboxCommon.module.scss
+++ b/src/components/common/CheckboxCommon/CheckboxCommon.module.scss
@ -0,0 +1,66 @@
+@import '../../../styles/utilities';
+.checkboxCommonWarper{
+    @apply flex flex-col;
+    margin-left:2rem;
+    .checkboxItem{
+        display: block;
+        position: relative;
+        cursor: pointer;
+        margin-top:2rem;
+        border-radius: 0.4rem;
+        width:50%;
+        &:hover .checkboxInput ~ .checkMark {
+            background-color: #ccc;
+        }
+
+        .checkboxInput{
+            position: absolute;
+            opacity: 0;
+            cursor: pointer;
+            height: 0;
+            width: 0;
+            &:checked ~ .checkMark:after {
+                display: block;
+            }
+        }
+        .checkMark {
+            border-radius: 0.4rem;
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 2rem;
+            width: 2rem;
+            background-color:var(--positive);
+            &:after {
+                left: 25%;
+                top: 27%;
+                width: 1rem;
+                height: 1rem;
+                color:white;
+                content: "";
+                background-image:url('/assets/svg/checkmark.svg');
+                background-repeat: no-repeat;
+                position: absolute;
+                display: none;
+            }
+        }
+        &~ .checkMark{
+            background-color: #ccc;
+            
+        }
+        &:checked ~ .checkMark {
+            background-color: #2196F3;
+        }
+        &:checked ~ .checkMark:after {
+            display: block;
+        }          
+        &:hover .checkboxInput ~ .checkMark {
+            background-color: #ccc;
+        }
+  
+
+    }
+    .checkboxText{
+        margin-left:3rem;
+    }
+}
--- a/src/components/common/CheckboxCommon/CheckboxCommon.tsx
+++ b/src/components/common/CheckboxCommon/CheckboxCommon.tsx
@ -0,0 +1,40 @@
+import React,{useState,useEffect} from 'react';
+import s from './CheckboxCommon.module.scss';
+import classNames from 'classnames';
+
+interface CheckboxProps extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'onChange' 
+    >{
+    onChange?: (value: boolean) => void,
+    defaultChecked?: boolean
+}
+
+const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps) =>{
+    
+    const [value, setValue] = useState<boolean>();
+
+    useEffect(()=>{
+        onChange && onChange(value)
+    },[value])
+
+
+    const onValueChange = (e: ChangeEvent<HTMLInputElement>)=>{
+        let value =e.target.checked;
+        setValue(value);
+    }
+
+    return (
+        <div className={classNames(s.checkboxCommonWarper)}>
+             <label className={classNames(s.checkboxItem)}>
+                <input id="check" defaultChecked={defaultChecked} className={s.checkboxInput} type="checkbox" onChange={onValueChange}/>
+                <span className={s.checkMark}></span>
+             </label>
+             <div className={classNames(s.checkboxText)}>
+                <label for="check"> Billing address is same as shipping </label>
+             </div>
+        </div>
+    )
+}
+
+export default CheckboxCommon;
--- a/src/components/common/Header/Header.module.scss
+++ b/src/components/common/Header/Header.module.scss
@ -1,21 +1,22 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";

 .header {
  .btn {
-    @apply font-bold py-2 px-4 rounded;
+    // @apply font-bold py-2 px-4 rounded;
  }
  .btnBlue {
    @apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius;
-    
  }
  .link {
    color: theme("colors.warning");
  }
  .heading {
-    @apply text-base;
+    @apply text-base font-heading;
  }
-
  .paragraph {
    @apply topline;
  }
+  .logo {
+    @apply font-logo;
+  }
 }
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@ -10,27 +10,8 @@ const Header: FC<Props> = ({ }: Props) => {
    return (
        <div className={s.header}>
            This is Header
-            <button className={s.btnBlue}>
-                Button
-            </button>
-            <button className={s.btn}>
-                Button
-            </button>
-            <div className={s.link}>
-                Test link style
-            </div>
-            <h1 className="heading-1">
-                HEADING 1
-            </h1>
-            <p className="spacing-horizontal">
-                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt delectus, atque aliquid repudiandae debitis dolor facere impedit alias nemo dolores voluptatum? Commodi, delectus. Dignissimos aspernatur nobis, distinctio delectus eligendi nisi illo tempore non nostrum, molestias excepturi dolor culpa fugiat rem perspiciatis. Repellendus numquam quisquam possimus natus vero recusandae, ipsam earum ratione quos ex consectetur cum nostrum modi amet odit fugiat fugit. Facere cum enim dignissimos molestias facilis error dicta exercitationem, delectus voluptates fuga laboriosam esse sunt odio, impedit modi veritatis, nisi nam? Voluptatum voluptas similique aspernatur. Soluta, accusamus! Mollitia praesentium adipisci perspiciatis iusto dolorum sint sit placeat, nesciunt id repellendus.
-            </p>
-            <p className="spacing-horizontal-left">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque doloremque quos excepturi laborum maiores laudantium hic iusto natus? Ipsa deleniti quas odit! Labore esse enim ipsam tempora tenetur beatae maxime officiis est, a illo! Soluta suscipit maxime odit eveniet laudantium, iure atque doloribus quaerat. Obcaecati tempore molestiae aliquid amet maiores suscipit, beatae repellat illum ipsam tenetur. Porro officiis omnis quam, iure quia necessitatibus consectetur culpa itaque, in tempora rem ex ad et iusto, hic commodi fuga quibusdam. Dolores exercitationem natus dolor pariatur voluptates non corporis, minus repellat! Quis distinctio esse, animi suscipit ducimus sequi obcaecati facere, perferendis ea omnis soluta.
-            </p>
-            <p className={s.paragraph}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, natus?
-            </p>
+            <h1 className={s.heading}>This is heading</h1>
+            <div className={s.logo}>This is logo text</div>
        </div>
    )
 }
--- a/src/components/common/InputCommon/InputCommon.module.scss
+++ b/src/components/common/InputCommon/InputCommon.module.scss
@ -0,0 +1,5 @@
+@import "../../../styles/utilities";
+
+.inputCommon {
+  @apply custom-border-radius transition-all duration-200;
+}
--- a/src/components/common/InputCommon/InputCommon.tsx
+++ b/src/components/common/InputCommon/InputCommon.tsx
@ -0,0 +1,52 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { KEY } from 'src/utils/constanst.utils';
+import s from './InputCommon.module.scss';
+
+type Ref = {
+    focus: () => void
+} | null;
+
+interface Props {
+    children?: React.ReactNode,
+    value?: string | number,
+    placeholder?: string,
+    type?: 'text' | 'number',
+    onChange?: (value: string | number) => void,
+    onEnter?: (value: string | number) => void,
+}
+
+const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange, onEnter }: Props, ref) => {
+    const inputElementRef = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            inputElementRef.current?.focus();
+        },
+    }));
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange && onChange(e.target.value)
+    }
+
+    const handleKeyDown = (e: any) => {
+        if (e.key === KEY.ENTER && onEnter) {
+            const value = inputElementRef.current?.value || ''
+            onEnter(value)
+        }
+    }
+
+    return (
+        <input
+            ref={inputElementRef}
+            value={value}
+            type={type}
+            placeholder={placeholder}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            className={s.inputCommon}
+        />
+    )
+
+})
+
+export default InputCommon
--- a/src/components/common/ItemWishList/ItemWishList.module.scss
+++ b/src/components/common/ItemWishList/ItemWishList.module.scss
@ -0,0 +1,10 @@
+@import '../../../styles/utilities';
+
+.heartToggle{
+    cursor: pointer;
+    width: 4.8rem;
+    height: 4.8rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
--- a/src/components/common/ItemWishList/ItemWishList.tsx
+++ b/src/components/common/ItemWishList/ItemWishList.tsx
@ -0,0 +1,19 @@
+import { Heart } from '@components/icons'
+import React, { useState } from 'react'
+import s from './ItemWishList.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const ItemWishList = ({}:Props) => {
+    const [isClick,setClick] = useState(false)
+    return(
+        <div className={s.heartToggle} onClick={() => setClick(!isClick)}>
+            <Heart color={isClick ? "#D1644D" : "#5B9A74"}/>
+        </div>
+    )
+}
+
+export default ItemWishList
--- a/src/components/common/LabelCommon/LabelCommon.module.scss
+++ b/src/components/common/LabelCommon/LabelCommon.module.scss
@ -0,0 +1,43 @@
+.labelCommonWarper{
+    display: inline-flex;
+    align-items: flex-start;
+    font-weight: bold;
+    letter-spacing: 0.01em;
+    @apply text-white text-right;
+    &.defaultSize{
+        min-height: 2rem;
+        line-height: 2rem;
+        font-size: 1.2rem;
+        padding: 0 0.8rem;
+    }
+    &.largeSize{
+        max-height: 2.4rem;
+        line-height: 2.4rem;
+        font-size: 1.6rem;
+        padding: 0 1.8rem;
+    }
+    &.defaultType{
+        @apply bg-positive-dark;
+    }
+    &.discountType{
+        @apply bg-negative;
+    }
+    &.waitingType{
+        @apply bg-warning;
+    }
+    &.deliveringType{
+        @apply bg-info;
+    }
+    &.deliveredType{
+        @apply bg-positive;
+    }
+    &.defaultShape{
+        border-radius: 0.4rem;
+    }
+    &.halfShape{
+        border-radius: 0px 1.4rem 1.4rem 0px;
+    }
+    &.roundShape{
+        border-radius: 1.4rem;
+    }
+}
--- a/src/components/common/LabelCommon/LabelCommon.tsx
+++ b/src/components/common/LabelCommon/LabelCommon.tsx
@ -0,0 +1,30 @@
+import classNames from 'classnames'
+import React from 'react'
+import s from './LabelCommon.module.scss'
+interface LabelCommonProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'default' | 'large'
+  shape?: 'half' | 'round' | 'default'
+  type?: 'default' | 'discount' | 'waiting' | 'delivering' | 'delivered'
+  color?: string
+}
+
+const LabelCommon = ({
+  size = 'default',
+  type = 'default',
+  shape = "default",
+  children,
+}: LabelCommonProps) => {
+  return (
+    <div
+      className={classNames(s.labelCommonWarper, {
+        [s[`${size}Size`]]: size,
+        [s[`${type}Type`]]: type,
+        [s[`${shape}Shape`]]: shape,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default LabelCommon
--- a/src/components/common/Logo/Logo.module.scss
+++ b/src/components/common/Logo/Logo.module.scss
@ -0,0 +1,20 @@
+@import '../../../styles/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
+
+
+.logo{
+    display: flex;
+    .eclipse{
+        width: 3.2rem;
+        height: 3.2rem;
+        background-color: theme("colors.primary");
+        border-radius: 50%;
+        margin-right: 1.2rem;
+    }
+    .conTent{
+        font-family: 'Poppins', sans-serif;
+        text-transform: uppercase;
+        line-height: 3.2rem;
+        letter-spacing: -0.02rem;
+    }
+}
--- a/src/components/common/Logo/Logo.tsx
+++ b/src/components/common/Logo/Logo.tsx
@ -0,0 +1,21 @@
+import s from './Logo.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const Logo = ({}: Props) => {
+    return(
+        <div className={s.logo}>
+            <div className={s.eclipse}>
+
+            </div>
+            <div className={s.conTent}>
+                ONLINE GROCERY
+            </div>
+        </div>
+    )
+}
+
+export default Logo
--- a/src/components/common/QuanittyInput/QuanittyInput.module.scss
+++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss
@ -0,0 +1,39 @@
+@import '../../../styles/utilities';
+.quanittyInputWarper{
+    border-color: theme("textColor.active");
+    @apply border border-solid inline-flex justify-between items-center custom-border-radius;
+    .plusIcon, .minusIcon{
+        &:hover{
+            cursor: pointer;
+        }
+    }
+    &.default{
+        max-width: 18.4rem;
+        min-height: 4rem;
+        .plusIcon, .minusIcon{
+            margin: 0.8rem;
+            width: 2.4rem;
+            height: 2.4rem;
+        }
+    }
+    &.small{
+        max-width: 10rem;
+        min-height: 2.8rem;
+        .plusIcon, .minusIcon{
+            margin: 0 0.6rem;
+            // width: 1rem;
+            // height: 1rem;
+        }
+    }
+    .quanittyInput{
+        @apply bg-background  outline-none w-1/2 text-center h-full font-bold;
+        font-size: 20px;
+        line-height: 28px;
+        color: theme("textColor.active");
+        &::-webkit-inner-spin-button, &::-webkit-inner-spin-button{
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+    
+}
--- a/src/components/common/QuanittyInput/QuanittyInput.tsx
+++ b/src/components/common/QuanittyInput/QuanittyInput.tsx
@ -0,0 +1,83 @@
+import React, { ChangeEvent, useEffect, useState } from 'react'
+import s from './QuanittyInput.module.scss'
+import classNames from 'classnames'
+import { Minus, Plus } from '@components/icons'
+interface QuanittyInputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'onChange' | 'min' | 'max' | 'step' | "type" | "size"
+  > {
+  size?: 'default' | 'small'
+  onChange?: (value: number) => void
+  initValue?: number
+  min?: number
+  max?: number
+  step?: number
+}
+
+const QuanittyInput = ({
+  size = 'default',
+  onChange,
+  initValue = 0,
+  min,
+  max,
+  step = 1,
+  ...props
+}: QuanittyInputProps) => {
+  const [value, setValue] = useState<number>(0)
+
+  useEffect(() => {
+    onChange && onChange(value)
+  }, [value])
+
+  useEffect(() => {
+    initValue && setValue(initValue)
+  }, [initValue])
+
+  const onPlusClick = () => {
+    if (max && value + step > max) {
+      setValue(max)
+    } else {
+      setValue(value + step)
+    }
+  }
+
+  const onMinusClick = () => {
+    if (min && value - step < min) {
+      setValue(min)
+    } else {
+      setValue(value - step)
+    }
+  }
+
+  const onValueChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let value = Number(e.target.value) || 0
+    if (min && value < min) {
+      setValue(min)
+    } else if (max && value > max) {
+      setValue(max)
+    } else {
+      setValue(value)
+    }
+  }
+
+  return (
+    <div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
+      <div className={s.minusIcon} onClick={onMinusClick}>
+        <Minus />
+      </div>
+      <input
+        {...props}
+        type="number"
+        value={value}
+        onChange={onValueChange}
+        className={s.quanittyInput}
+      />
+      <div className={s.plusIcon} onClick={onPlusClick}>
+        <Plus />
+      </div>
+    </div>
+  )
+}
+
+export default QuanittyInput
--- a/src/components/common/ViewAllItem/ViewAllItem.module.scss
+++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss
@ -0,0 +1,17 @@
+@import '../../../styles/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
+.viewAll{
+    display: flex;
+    color: theme("colors.primary");
+    .conTent{
+        margin: 0.8rem 0.8rem 0.8rem 1.6rem;
+        font-family: 'Nunito', sans-serif;
+        font-weight: bold;
+    }
+    .vecTor{
+        margin: 0.8rem 0rem 0.8rem 0rem;
+    }
+}
+
+
--- a/src/components/common/ViewAllItem/ViewAllItem.tsx
+++ b/src/components/common/ViewAllItem/ViewAllItem.tsx
@ -0,0 +1,26 @@
+import Vector from 'src/components/icons/Vector'
+import s from './ViewAllItem.module.scss'
+import Link from 'next/link'
+
+interface Props {
+    className?: string
+    children?: any
+    link?: string
+}
+
+const ViewAllItem = ({ link }: Props) => {
+    return(
+        <div className={s.viewAll}>
+            <Link href={"/all"}>
+                <a className={s.conTent}>
+                    View All
+                </a>
+            </Link>
+            <div className={s.vecTor}>
+                <Vector />
+            </div>
+        </div>
+    )
+}
+
+export default ViewAllItem
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@ -1,4 +1,11 @@
 export { default as ButtonCommon } from './ButtonCommon/ButtonCommon'
 export { default as Layout } from './Layout/Layout'
+export { default as CarouselCommon } from './CarouselCommon/CarouselCommon'
+export { default as QuanittyInput } from './QuanittyInput/QuanittyInput'
+export { default as LabelCommon } from './LabelCommon/LabelCommon'
 export { default as Head } from './Head/Head'
-
+export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
+export { default as ItemWishList} from './ItemWishList/ItemWishList'
+export { default as Logo} from './Logo/Logo'
+export { default as Inputcommon} from './InputCommon/InputCommon'
+export { default as CheckboxCommon} from './CheckboxCommon/CheckboxCommon'
--- a/src/components/icons/ArrowLeft.tsx
+++ b/src/components/icons/ArrowLeft.tsx
@ -0,0 +1,18 @@
+const ArrowLeft = ({ ...props }) => {
+  return (
+    <svg
+      width="12"
+      height="18"
+      viewBox="0 0 12 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.81637 8.99983L10.7164 3.09983C11.0268 2.78756 11.201 2.36514 11.201 1.92483C11.201 1.48452 11.0268 1.0621 10.7164 0.749833C10.5614 0.593619 10.3771 0.469628 10.174 0.385014C9.9709 0.300399 9.75306 0.256836 9.53304 0.256836C9.31302 0.256836 9.09517 0.300399 8.89207 0.385014C8.68898 0.469628 8.50464 0.593619 8.3497 0.749833L1.28304 7.8165C1.12682 7.97144 1.00283 8.15577 0.918218 8.35887C0.833603 8.56197 0.790039 8.77981 0.790039 8.99983C0.790039 9.21985 0.833603 9.43769 0.918218 9.64079C1.00283 9.84389 1.12682 10.0282 1.28304 10.1832L8.3497 17.3332C8.50544 17.4876 8.69013 17.6098 8.89319 17.6928C9.09626 17.7757 9.31369 17.8178 9.53304 17.8165C9.75238 17.8178 9.96982 17.7757 10.1729 17.6928C10.3759 17.6098 10.5606 17.4876 10.7164 17.3332C11.0268 17.0209 11.201 16.5985 11.201 16.1582C11.201 15.7179 11.0268 15.2954 10.7164 14.9832L4.81637 8.99983Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default ArrowLeft
--- a/src/components/icons/ArrowRight.tsx
+++ b/src/components/icons/ArrowRight.tsx
@ -0,0 +1,18 @@
+const ArrowRight = ({ ...props }) => {
+  return (
+    <svg
+      width="12"
+      height="18"
+      viewBox="0 0 12 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.7168 7.8165L3.65015 0.749833C3.49521 0.593619 3.31088 0.469628 3.10778 0.385014C2.90468 0.300399 2.68684 0.256836 2.46682 0.256836C2.2468 0.256836 2.02895 0.300399 1.82585 0.385014C1.62276 0.469628 1.43842 0.593619 1.28348 0.749833C0.973064 1.0621 0.798828 1.48452 0.798828 1.92483C0.798828 2.36514 0.973064 2.78756 1.28348 3.09983L7.18348 8.99983L1.28348 14.8998C0.973064 15.2121 0.798828 15.6345 0.798828 16.0748C0.798828 16.5151 0.973064 16.9376 1.28348 17.2498C1.43922 17.4043 1.62391 17.5265 1.82697 17.6095C2.03003 17.6924 2.24747 17.7344 2.46682 17.7332C2.68616 17.7344 2.9036 17.6924 3.10666 17.6095C3.30972 17.5265 3.49442 17.4043 3.65015 17.2498L10.7168 10.1832C10.873 10.0282 10.997 9.84389 11.0816 9.64079C11.1662 9.4377 11.2098 9.21985 11.2098 8.99983C11.2098 8.77981 11.1662 8.56197 11.0816 8.35887C10.997 8.15577 10.873 7.97144 10.7168 7.8165Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default ArrowRight
--- a/src/components/icons/Heart.tsx
+++ b/src/components/icons/Heart.tsx
@ -0,0 +1,20 @@
+
+const Vector = ({ ...props }) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+            d="M20.16 4.99992C19.1 3.93713 17.6948 3.28846 16.1984 3.17109C14.7019 3.05372 13.2128 3.47539 12 4.35992C10.7277 3.41356 9.14402 2.98443 7.56795 3.15896C5.99188 3.33348 4.54047 4.0987 3.506 5.30051C2.47154 6.50231 1.93085 8.05144 1.99283 9.63594C2.05481 11.2204 2.71485 12.7226 3.84003 13.8399L10.05 20.0599C10.57 20.5717 11.2704 20.8585 12 20.8585C12.7296 20.8585 13.43 20.5717 13.95 20.0599L20.16 13.8399C21.3276 12.6652 21.983 11.0762 21.983 9.41992C21.983 7.76365 21.3276 6.17465 20.16 4.99992ZM18.75 12.4599L12.54 18.6699C12.4694 18.7413 12.3853 18.7979 12.2926 18.8366C12.1999 18.8752 12.1005 18.8951 12 18.8951C11.8996 18.8951 11.8002 18.8752 11.7075 18.8366C11.6148 18.7979 11.5307 18.7413 11.46 18.6699L5.25003 12.4299C4.46579 11.6283 4.02664 10.5514 4.02664 9.42992C4.02664 8.30846 4.46579 7.23158 5.25003 6.42992C6.04919 5.64091 7.127 5.19849 8.25003 5.19849C9.37306 5.19849 10.4509 5.64091 11.25 6.42992C11.343 6.52365 11.4536 6.59804 11.5755 6.64881C11.6973 6.69958 11.828 6.72572 11.96 6.72572C12.092 6.72572 12.2227 6.69958 12.3446 6.64881C12.4665 6.59804 12.5771 6.52365 12.67 6.42992C13.4692 5.64091 14.547 5.19849 15.67 5.19849C16.7931 5.19849 17.8709 5.64091 18.67 6.42992C19.4651 7.22107 19.9186 8.29211 19.9336 9.41361C19.9485 10.5351 19.5237 11.6179 18.75 12.4299V12.4599Z"
+            fill={props.color}
+        />
+      </svg>
+    )
+  }
+  
+  export default Vector
--- a/src/components/icons/IconBuy.tsx
+++ b/src/components/icons/IconBuy.tsx
@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconBuy = () => {
+    return (
+        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19 14H5C4.73478 14 4.48043 13.8946 4.29289 13.7071C4.10536 13.5196 4 13.2652 4 13C4 12.7348 4.10536 12.4804 4.29289 12.2929C4.48043 12.1054 4.73478 12 5 12H15.44C16.1087 12 16.7582 11.7767 17.2854 11.3654C17.8126 10.9542 18.1873 10.3786 18.35 9.73L20 3.24C20.0375 3.09241 20.0407 2.93821 20.0095 2.78917C19.9783 2.64013 19.9135 2.50018 19.82 2.38C19.7227 2.25673 19.5978 2.1581 19.4554 2.09208C19.3129 2.02606 19.1569 1.99452 19 2H4.76C4.55369 1.41645 4.17193 0.910998 3.66707 0.552938C3.1622 0.194879 2.55894 0.00173951 1.94 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2H1.94C2.16843 1.99334 2.39226 2.06513 2.57421 2.20341C2.75615 2.34169 2.88525 2.53812 2.94 2.76L3 3.24L4.73 10C3.93435 10.0358 3.18551 10.3862 2.64822 10.9741C2.11093 11.5621 1.8292 12.3394 1.865 13.135C1.9008 13.9306 2.25121 14.6795 2.83914 15.2168C3.42707 15.7541 4.20435 16.0358 5 16H5.18C5.01554 16.4531 4.96269 16.9392 5.02593 17.4171C5.08917 17.895 5.26665 18.3506 5.54332 18.7454C5.81999 19.1401 6.18772 19.4624 6.61535 19.6849C7.04299 19.9074 7.51795 20.0235 8 20.0235C8.48205 20.0235 8.95701 19.9074 9.38465 19.6849C9.81228 19.4624 10.18 19.1401 10.4567 18.7454C10.7334 18.3506 10.9108 17.895 10.9741 17.4171C11.0373 16.9392 10.9845 16.4531 10.82 16H13.18C13.0155 16.4531 12.9627 16.9392 13.0259 17.4171C13.0892 17.895 13.2666 18.3506 13.5433 18.7454C13.82 19.1401 14.1877 19.4624 14.6154 19.6849C15.043 19.9074 15.5179 20.0235 16 20.0235C16.4821 20.0235 16.957 19.9074 17.3846 19.6849C17.8123 19.4624 18.18 19.1401 18.4567 18.7454C18.7334 18.3506 18.9108 17.895 18.9741 17.4171C19.0373 16.9392 18.9845 16.4531 18.82 16H19C19.2652 16 19.5196 15.8946 19.7071 15.7071C19.8946 15.5196 20 15.2652 20 15C20 14.7348 19.8946 14.4804 19.7071 14.2929C19.5196 14.1054 19.2652 14 19 14ZM17.72 4L16.41 9.24C16.3552 9.46188 16.2262 9.65831 16.0442 9.79659C15.8623 9.93487 15.6384 10.0067 15.41 10H6.78L5.28 4H17.72ZM8 18C7.80222 18 7.60888 17.9414 7.44443 17.8315C7.27998 17.7216 7.15181 17.5654 7.07612 17.3827C7.00043 17.2 6.98063 16.9989 7.01921 16.8049C7.0578 16.6109 7.15304 16.4327 7.29289 16.2929C7.43275 16.153 7.61093 16.0578 7.80491 16.0192C7.99889 15.9806 8.19996 16.0004 8.38268 16.0761C8.56541 16.1518 8.72159 16.28 8.83147 16.4444C8.94135 16.6089 9 16.8022 9 17C9 17.2652 8.89464 17.5196 8.70711 17.7071C8.51957 17.8946 8.26522 18 8 18ZM16 18C15.8022 18 15.6089 17.9414 15.4444 17.8315C15.28 17.7216 15.1518 17.5654 15.0761 17.3827C15.0004 17.2 14.9806 16.9989 15.0192 16.8049C15.0578 16.6109 15.153 16.4327 15.2929 16.2929C15.4327 16.153 15.6109 16.0578 15.8049 16.0192C15.9989 15.9806 16.2 16.0004 16.3827 16.0761C16.5654 16.1518 16.7216 16.28 16.8315 16.4444C16.9414 16.6089 17 16.8022 17 17C17 17.2652 16.8946 17.5196 16.7071 17.7071C16.5196 17.8946 16.2652 18 16 18Z" fill="#141414" />
+        </svg>
+    )
+}
+
+export default IconBuy
--- a/src/components/icons/Minus.tsx
+++ b/src/components/icons/Minus.tsx
@ -0,0 +1,18 @@
+const ArrowRight = ({ ...props }) => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default ArrowRight
--- a/src/components/icons/Plus.tsx
+++ b/src/components/icons/Plus.tsx
@ -0,0 +1,18 @@
+const ArrowLeft = ({ ...props }) => {
+  return (
+    <svg
+      width="12"
+      height="2"
+      viewBox="0 0 12 2"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default ArrowLeft
--- a/src/components/icons/Vector.tsx
+++ b/src/components/icons/Vector.tsx
@ -0,0 +1,20 @@
+
+const Vector = ({ ...props }) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+            d="M14.8299 11.2899L10.5899 7.04995C10.497 6.95622 10.3864 6.88183 10.2645 6.83106C10.1427 6.78029 10.012 6.75415 9.87994 6.75415C9.74793 6.75415 9.61723 6.78029 9.49537 6.83106C9.37351 6.88183 9.26291 6.95622 9.16994 7.04995C8.98369 7.23731 8.87915 7.49076 8.87915 7.75495C8.87915 8.01913 8.98369 8.27259 9.16994 8.45995L12.7099 11.9999L9.16994 15.5399C8.98369 15.7273 8.87915 15.9808 8.87915 16.2449C8.87915 16.5091 8.98369 16.7626 9.16994 16.9499C9.26338 17.0426 9.3742 17.116 9.49604 17.1657C9.61787 17.2155 9.74834 17.2407 9.87994 17.2399C10.0115 17.2407 10.142 17.2155 10.2638 17.1657C10.3857 17.116 10.4965 17.0426 10.5899 16.9499L14.8299 12.7099C14.9237 12.617 14.9981 12.5064 15.0488 12.3845C15.0996 12.2627 15.1257 12.132 15.1257 11.9999C15.1257 11.8679 15.0996 11.7372 15.0488 11.6154C14.9981 11.4935 14.9237 11.3829 14.8299 11.2899Z"
+            fill="#5B9A74"
+        />
+      </svg>
+    )
+  }
+  
+  export default Vector
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@ -1 +1 @@
-// index here
+export { default as IconBuy } from './IconBuy'
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@ -1,5 +1,7 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap");
+
 :root {
-  --primary: #36bf6d;
+  --primary: #5b9a74;
  --primary-light: #e0f6e8;
  --primary-lightest: #effaf4;

@ -28,14 +30,21 @@
  --text-label: #8f8f8f;
  --text-placeholder: #cccccc;

+  --disabled: #cccccc;
  --border-line: #ebebeb;
  --background: #f8f8f8;
  --white: #fbfbfb;
+  --background-arrow:rgba(20, 20, 20, 0.05);
+  --font-size: 1.6rem;
+  --line-height: 2.4rem;

-  --font-size: 16px;
-  --line-height: 24px;
+  // --font-size: 16px;
+  // --line-height: 24px;

-  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-sans: "Nunito", cursive, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica",
+    sans-serif;
+  --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
 }

 *,
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@ -89,6 +89,14 @@
        }
    }
    .custom-border-radius {
-        border-radius: 50% 20% / 10% 40%;
+        border-radius: 60% 10% 60% 2%/ 10% 40% 10% 50%;
+    }
+
+    .font-heading {
+        font-family: var(--font-heading);
+    }
+
+    .font-logo {
+        font-family: var(--font-logo);
    }
 }
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@ -1 +1,3 @@
-// constanst here
+export const KEY = {
+    ENTER: 'Enter',
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -49,6 +49,10 @@ module.exports = {
        'background': 'var(--background)',
        'white': 'var(--white)',

+        'background-arrow':'var(--background-arrow)',
+
+        'disabled': 'var(--text-disabled)',
+        
        // @deprecated (NOT use these variables)
        'primary-2': 'var(--primary-2)',
        secondary: 'var(--secondary)',
@ -112,7 +116,10 @@ module.exports = {

        '2xl': '1536px',
        // => @media (min-width: 1536px) { ... }
-      }
+      },
+      caroucel:{
+        "arrow-height":"64px"
+      },
    },
  },
  plugins: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')]
				`@ -0,0 +1 @@`
				`<svg width="10" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.194 1.006a.625.625 0 00-.888 0L3.65 5.67 1.694 3.706a.639.639 0 00-.888.919l2.4 2.4a.625.625 0 00.888 0l5.1-5.1a.625.625 0 000-.919z" fill="#FBFBFB"/></svg>`