From b35d48d248969d8a3d287ac7ab65893decbc8387 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Thu, 26 Aug 2021 18:08:32 +0700
Subject: [PATCH 1/7] feat: component SelectCommon

---
 pages/index.tsx                               | 11 +--
 .../SelectCommon/SelectCommon.module.scss     | 73 +++++++++++++++---
 .../common/SelectCommon/SelectCommon.tsx      | 76 +++++++++++++++----
 src/components/icons/IconVectorDown.tsx       | 21 +++++
 src/components/icons/index.ts                 |  3 +-
 5 files changed, 149 insertions(+), 35 deletions(-)
 create mode 100644 src/components/icons/IconVectorDown.tsx

diff --git a/pages/index.tsx b/pages/index.tsx
index 539a8c74a..3a1c2a7fe 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -26,18 +26,11 @@ export default function Home() {
   return (
     <>
       <div>This is home page</div>
-      <ButtonCommon loading={true}>Button default</ButtonCommon>
-      <ButtonCommon type={ButonType.light} >{ButonType.light} -  Button light</ButtonCommon>
-      <ButtonCommon type={ButonType.light} disabled>{ButonType.light} -  Button light</ButtonCommon>
-      <ButtonCommon type={ButonType.light} loading = {true}>{ButonType.light} -  Button light</ButtonCommon>
-      <ButtonCommon size={ButtonSize.large} icon={<IconBuy/>}>{ButtonSize.large} - Button default large</ButtonCommon>
-      <ButtonCommon icon={<IconBuy/>} disabled isIconSuffix={true}>Button with icon disabled</ButtonCommon>
-      <ButtonCommon icon={<IconBuy/>} type={ButonType.light}>Button with icon</ButtonCommon>
       <ViewAllItem link="/all"/>
       <ItemWishList />
       <Logo />
-      <SelectCommon option={OPTION_SORT} placeHolder={"Sort By"}/>
-      <SelectCommon option={OPTION_STATES} placeHolder={"States"} type="custom" size="large"/>
+      <SelectCommon option={OPTION_SORT}>Sort by</SelectCommon>
+      <SelectCommon option={OPTION_STATES} size={"large"} type={"custom"}>States</SelectCommon>
     </>
   )
 }
diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
index dcb9120da..7de2c9c03 100644
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -1,32 +1,81 @@
 @import "../../../styles/utilities";
 
 .select{
-    @apply rounded-lg border-solid;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding: 1.2rem 1.6rem;
+    background-color: var(--white);
+    margin-left: 2rem;
     &.base{
-        width: 18.6rem;
-        height: 4.8rem;
+        width: 20.6rem;
+        .selectTrigger{
+            width: 20.6rem;
+            padding: 1.2rem 1.6rem;
+        }
     }
     &.large{
         width: 34.25rem;
-        height: 5.6rem;
+        .selectTrigger{
+            width: 34.25rem;
+            padding: 1.6rem 1.6rem;
+        }
     }
     &.default{
-        @apply border;
+        .selectTrigger{
+            @apply border-solid border border-current;
+        }   
+    }
+    &.custom{
+        .selectTrigger{
+            @apply border-2;
+            border-color: var(--border-line);
+            color: var(--text-label);
+        }
+    }
+    &.isActive{
+        .selectOptionWrapper{
+            @apply block;
+        }
+    }
+}
+.selectTrigger{
+    @apply outline-none flex justify-between;
+    color: var(--text-active);
+    border-radius: 0.8rem;
+
+}
+.selectOptionWrapper{
+    @apply outline-none hidden z-10 absolute;
+    border-radius: 0.8rem;
+    background-color: var(--white);
+    padding: 0.4rem 0rem 0.4rem 0rem;
+    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; 
     }
     &.custom{
         @apply border-2;
         border-color: var(--border-line);
         color: var(--text-label);
     }
-    .option{
+    &.active{
+        @apply hidden;
+    }
+    .selectOption{
         &:hover{
-            background-color: black;
+            background-color: var(--background);
         }
     }
 }
 
+
+
diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index 8360a700f..fcfdc4e56 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -1,26 +1,76 @@
 import s from './SelectCommon.module.scss'
 import classNames from 'classnames'
+import { useState, useRef, useEffect } from 'react'
+import { IconVectorDown } from 'src/components/icons'
 
 interface Props {
-    placeHolder? : string,
+    children? : React.ReactNode,
     size?: 'base' | 'large',
     type?: 'default' | 'custom',
     option: {name: string}[],
 }
 
-const SelectCommon = ({ type = 'default', size = 'base', option, placeHolder }: Props) => {
-    return(
-        <select className={classNames({
-            [s.select] : true,
-            [s[type]]: !!type,
-            [s[size]]: !!size,
-        })}
-        >
-            <option disabled selected hidden>{placeHolder}</option>
-            {
-                option.map(item => <option className={s.option} value={item.name}> {item.name} </option>)
+const SelectCommon = ({ type = 'default', size = 'base', option, children }: Props) => {
+    const [isActive, setActive] = useState(false)
+    const [selectedName, setSelectedName] = useState(children)
+    const ref = useRef<HTMLDivElement>(null)
+    
+    useEffect(() => {
+        const handleClick = (event: MouseEvent) => {
+            const { target } = event;
+            if (!ref?.current || ref?.current.contains(target as Node)) {
+                return 
             }
-        </select>
+            else{
+                setActive(false)
+            }
+        }
+        document.addEventListener('click', handleClick)
+        return () => {
+            document.removeEventListener('click', handleClick)
+        }
+    }, [ref])
+
+    const changeActiveStatus = () => {
+        setActive(!isActive)
+    }
+
+    return(
+        <>
+            <div className={classNames({
+                [s.select] : true,
+                [s[size]] : !!size,
+                [s[type]] : !!type,
+                [s.isActive] : isActive,
+            })}
+                onClick = { changeActiveStatus }
+                ref = {ref}
+            >
+                <div className={classNames({
+                    [s.selectTrigger] : true,
+                    
+                })}
+                >{selectedName}<IconVectorDown /></div>
+
+                <div className={classNames({
+                    [s.selectOptionWrapper] : true,
+                    [s[type]] : !!type,
+                    [s[size]] : !!size,
+                })}
+                >   
+                    {
+                        option.map(item => 
+                            <div className={classNames({
+                                [s.selectOption] : true,
+                                [s[size]] : !!size,
+                            })}
+                                onClick = { () => setSelectedName(item.name)}
+                            >{item.name}</div>
+                        )
+                    }
+                </div>
+            </div>
+        </>
     )
 }
 
diff --git a/src/components/icons/IconVectorDown.tsx b/src/components/icons/IconVectorDown.tsx
new file mode 100644
index 000000000..019fc2806
--- /dev/null
+++ b/src/components/icons/IconVectorDown.tsx
@@ -0,0 +1,21 @@
+
+
+const IconVectorDown = ({ ...props }) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="-6 -9 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+            d="M10.9999 1.16994C10.8126 0.983692 10.5591 0.87915 10.2949 0.87915C10.0308 0.87915 9.77731 0.983692 9.58995 1.16994L5.99995 4.70994L2.45995 1.16994C2.27259 0.983692 2.01913 0.87915 1.75495 0.87915C1.49076 0.87915 1.23731 0.983692 1.04995 1.16994C0.95622 1.26291 0.881826 1.37351 0.831057 1.49537C0.780288 1.61723 0.75415 1.74793 0.75415 1.87994C0.75415 2.01195 0.780288 2.14266 0.831057 2.26452C0.881826 2.38638 0.95622 2.49698 1.04995 2.58994L5.28995 6.82994C5.38291 6.92367 5.49351 6.99806 5.61537 7.04883C5.73723 7.0996 5.86794 7.12574 5.99995 7.12574C6.13196 7.12574 6.26267 7.0996 6.38453 7.04883C6.50638 6.99806 6.61699 6.92367 6.70995 6.82994L10.9999 2.58994C11.0937 2.49698 11.1681 2.38638 11.2188 2.26452C11.2696 2.14266 11.2957 2.01195 11.2957 1.87994C11.2957 1.74793 11.2696 1.61723 11.2188 1.49537C11.1681 1.37351 11.0937 1.26291 10.9999 1.16994Z"
+            fill="#141414"
+        />
+      </svg>
+    )
+  }
+  
+  export default IconVectorDown
\ No newline at end of file
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 74f5ca62f..86fe02e22 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1,3 +1,4 @@
 export { default as IconBuy } from './IconBuy'
 export { default as IconHeart } from './IconHeart'
-export { default as IconVector } from './IconVector'
\ No newline at end of file
+export { default as IconVector } from './IconVector'
+export { default as IconVectorDown } from './IconVectorDown'
\ No newline at end of file

From 90ca41529898869d8dc97fdb9289b07a159d8af9 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Thu, 26 Aug 2021 18:14:15 +0700
Subject: [PATCH 2/7] style: remove margin-left (use for test)

---
 src/components/common/SelectCommon/SelectCommon.module.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
index 7de2c9c03..418c9d0e6 100644
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -2,7 +2,6 @@
 
 .select{
     background-color: var(--white);
-    margin-left: 2rem;
     &.base{
         width: 20.6rem;
         .selectTrigger{

From de5278fa964fc1fcee74e310b0ccc24568e6a2b9 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Mon, 30 Aug 2021 09:31:19 +0700
Subject: [PATCH 3/7] refactor: format code

---
 src/components/common/SelectCommon/SelectCommon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index fcfdc4e56..e0e8c390c 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -64,7 +64,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                                 [s.selectOption] : true,
                                 [s[size]] : !!size,
                             })}
-                                onClick = { () => setSelectedName(item.name)}
+                                onClick = { () => setSelectedName(item.name) }
                             >{item.name}</div>
                         )
                     }

From 648a7349c59ffdd01cb01970da1c671b66d9d77d Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Mon, 30 Aug 2021 13:54:37 +0700
Subject: [PATCH 4/7] refactor: remove inline function

---
 src/components/common/SelectCommon/SelectCommon.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index e0e8c390c..b60eb2bee 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -35,6 +35,10 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
         setActive(!isActive)
     }
 
+    const changeSelectedName = (props:string) => {
+        setSelectedName(props)
+    }
+
     return(
         <>
             <div className={classNames({
@@ -64,7 +68,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                                 [s.selectOption] : true,
                                 [s[size]] : !!size,
                             })}
-                                onClick = { () => setSelectedName(item.name) }
+                                onClick = { changeSelectedName(item.name) }
                             >{item.name}</div>
                         )
                     }

From ca41dcd19410bc49ff2daa0f15659a228c42d2e5 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Mon, 30 Aug 2021 14:03:04 +0700
Subject: [PATCH 5/7] refactor: select common

---
 src/components/common/SelectCommon/SelectCommon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index b60eb2bee..d8eb9e904 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -68,7 +68,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                                 [s.selectOption] : true,
                                 [s[size]] : !!size,
                             })}
-                                onClick = { changeSelectedName(item.name) }
+                                onClick = { changeSelectedName!.(item.name) }
                             >{item.name}</div>
                         )
                     }

From a772d3fca90ce260de80caba6d282c9ed5187aee Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Mon, 30 Aug 2021 14:07:50 +0700
Subject: [PATCH 6/7] Remove conflict

---
 pages/index.tsx                                     | 9 ---------
 src/components/common/SelectCommon/SelectCommon.tsx | 6 +-----
 src/components/icons/index.ts                       | 3 ---
 3 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 6629096ac..1d3072ef7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,14 +5,6 @@ import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCate
 export default function Home() {
   return (
     <>
-<<<<<<< HEAD
-      <div>This is home page</div>
-      <ViewAllItem link="/all"/>
-      <ItemWishList />
-      <Logo />
-      <SelectCommon option={OPTION_SORT}>Sort by</SelectCommon>
-      <SelectCommon option={OPTION_STATES} size={"large"} type={"custom"}>States</SelectCommon>
-=======
       <HomeBanner />
       <HomeFeature />
       <HomeCategories />
@@ -21,7 +13,6 @@ export default function Home() {
       <HomeCTA />
       <HomeRecipe />
       <HomeSubscribe />
->>>>>>> 08cd011b5ebb28ba4205d167dc07c81e3b9c3072
     </>
   )
 }
diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index d8eb9e904..e0e8c390c 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -35,10 +35,6 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
         setActive(!isActive)
     }
 
-    const changeSelectedName = (props:string) => {
-        setSelectedName(props)
-    }
-
     return(
         <>
             <div className={classNames({
@@ -68,7 +64,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                                 [s.selectOption] : true,
                                 [s[size]] : !!size,
                             })}
-                                onClick = { changeSelectedName!.(item.name) }
+                                onClick = { () => setSelectedName(item.name) }
                             >{item.name}</div>
                         )
                     }
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 0c3dfde93..b272e9a83 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -9,13 +9,10 @@ export { default as IconHome } from './IconHome'
 export { default as IconShopping } from './IconShopping'
 export { default as IconHeart } from './IconHeart'
 export { default as IconVector } from './IconVector'
-<<<<<<< HEAD
 export { default as IconVectorDown } from './IconVectorDown'
-=======
 export { default as IconFacebookColor } from './IconFacebookColor'
 export { default as IconGoogleColor } from './IconGoogleColor'
 export { default as IconApple } from './IconApple'
 export { default as ArrowLeft } from './ArrowLeft'
 export { default as ArrowRight } from './ArrowRight'
 export { default as Close } from './Close'
->>>>>>> 08cd011b5ebb28ba4205d167dc07c81e3b9c3072

From 38be2e7a7df37f54dd54f4cf5fad9961b30dd294 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Mon, 30 Aug 2021 15:42:58 +0700
Subject: [PATCH 7/7] feat: SelectOption

---
 pages/index.tsx                               | 19 ++++++++++++--
 .../SelectCommon/SelectCommon.module.scss     | 11 --------
 .../common/SelectCommon/SelectCommon.tsx      | 11 ++++----
 .../SelectOption/SelectOption.module.scss     | 17 +++++++++++++
 .../SelectOption/SelectOption.tsx             | 25 +++++++++++++++++++
 5 files changed, 64 insertions(+), 19 deletions(-)
 create mode 100644 src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
 create mode 100644 src/components/common/SelectCommon/SelectOption/SelectOption.tsx

diff --git a/pages/index.tsx b/pages/index.tsx
index 7ed22f1bc..8938f34a9 100644
--- a/pages/index.tsx
+++ b/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/> */}
diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
index 418c9d0e6..d91b1831e 100644
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/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);
-        }
-    }
 }
 
 
diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index e0e8c390c..5bb3d15d6 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/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({
-                                [s.selectOption] : true,
-                                [s[size]] : !!size,
-                            })}
-                                onClick = { () => setSelectedName(item.name) }
-                            >{item.name}</div>
+                            <SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
                         )
                     }
                 </div>
diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
new file mode 100644
index 000000000..5448f9879
--- /dev/null
+++ b/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);
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
new file mode 100644
index 000000000..54877d5fe
--- /dev/null
+++ b/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
\ No newline at end of file