feat: SelectOption

pages/index.tsx

@@ -1,18 +1,33 @@
 
 import { Layout } from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import {SelectCommon} from 'src/components/common'
+
+const OPTION_SORT = [
+  {
+    name: "By Name"
+  },
+  {
+    name: "Price (High to Low)"
+  },
+  {
+    name: "On Sale"
+  }
+]
 
 export default function Home() {
   return (
     <>
-      <HomeBanner />
+      {/* <HomeBanner />
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
       <HomeCTA />
       <HomeRecipe />
-      <HomeSubscribe />
+      <HomeSubscribe /> */}
+      <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
+      <SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon>
 
       // todo: uncomment
       {/* <ModalCreateUserInfo/> */}

src/components/common/SelectCommon/SelectCommon.module.scss

@@ -48,15 +48,9 @@
     margin-top: 0.6rem;
     &.base{
         width: 20.6rem;
-        .selectOption{
-            padding: 1.2rem 1.6rem;
-        }
     }
     &.large{
         width: 34.25rem;
-        .selectOption{
-            padding: 1.6rem 1.6rem;
-        }
     }
     &.default{
         @apply border-solid border border-current; 
@@ -69,11 +63,6 @@
     &.active{
         @apply hidden;
     }
-    .selectOption{
-        &:hover{
-            background-color: var(--background);
-        }
-    }
 }
 
 

src/components/common/SelectCommon/SelectCommon.tsx

@@ -2,6 +2,7 @@ import s from './SelectCommon.module.scss'
 import classNames from 'classnames'
 import { useState, useRef, useEffect } from 'react'
 import { IconVectorDown } from 'src/components/icons'
+import SelectOption from './SelectOption/SelectOption'
 
 interface Props {
     children? : React.ReactNode,
@@ -35,6 +36,9 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
         setActive(!isActive)
     }
 
+    const changeSelectedName = (item:string) => {
+        setSelectedName(item)
+    }
     return(
         <>
             <div className={classNames({
@@ -60,12 +64,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                 >   
                     {
                         option.map(item => 
-                            <div className={classNames({
+                            <SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
-                                [s.selectOption] : true,
-                                [s[size]] : !!size,
-                            })}
-                                onClick = { () => setSelectedName(item.name) }
-                            >{item.name}</div>
                         )
                     }
                 </div>

src/components/common/SelectCommon/SelectOption/SelectOption.module.scss

@@ -0,0 +1,17 @@
+@import "../../../../styles/utilities";
+
+.selectOption {
+    @apply outline-none;
+    background-color: var(--white);
+    &.base{
+        width: 20.4rem;
+        padding: 0.8rem 1.6rem;
+    }
+    &.large{
+        width: 33.75rem;
+        padding: 0.8rem 1.6rem;
+    }
+    &:hover{
+        background-color: var(--gray);
+    }
+}

src/components/common/SelectCommon/SelectOption/SelectOption.tsx

@@ -0,0 +1,25 @@
+import s from './SelectOption.module.scss'
+import classNames from 'classnames'
+
+interface Props{
+    onClick: (value: string) => void,
+    itemName: string,
+    size: 'base' | 'large',
+}
+
+const SelectOption = ({onClick, itemName, size}: Props) => {
+
+    const changeName  = () => {
+        onClick(itemName)
+    }
+    return(
+        <div className={classNames({
+            [s.selectOption] : true,
+            [s[size]] : !!size,
+        })}
+            onClick = {changeName}
+        >{itemName}</div>
+    )
+}
+
+export default SelectOption