From a18eb2b320fae07f9cc28c97736194a8f021fb41 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Wed, 25 Aug 2021 18:17:57 +0700
Subject: [PATCH] feat: components SelectCommon

---
 .../ItemWishList/ItemWishList.module.scss     |  5 +--
 .../common/ItemWishList/ItemWishList.tsx      |  2 +-
 .../SelectCommon/SelectCommon.module.scss     | 32 +++++++++++++++++++
 .../common/SelectCommon/SelectCommon.tsx      | 27 ++++++++++++++++
 4 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 src/components/common/SelectCommon/SelectCommon.module.scss
 create mode 100644 src/components/common/SelectCommon/SelectCommon.tsx

diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss
index 2b43dbd53..973ff5af9 100644
--- a/src/components/common/ItemWishList/ItemWishList.module.scss
+++ b/src/components/common/ItemWishList/ItemWishList.module.scss
@@ -1,12 +1,9 @@
-@import '../../../styles/utilities';
 
 .heartToggle{
     cursor: pointer;
     width: 2.4rem;
     height: 2.4rem;
-    path{
-        stroke: var(--primary);
-    }
+
 }
 .isToggleOn{
     svg path{
diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx
index d1161e733..74d0b3b04 100644
--- a/src/components/common/ItemWishList/ItemWishList.tsx
+++ b/src/components/common/ItemWishList/ItemWishList.tsx
@@ -8,7 +8,7 @@ interface Props {
     onChange?: () => void
 }
 
-const ItemWishList = memo(({isActive, onChange}:Props) => {
+const ItemWishList = memo(({isActive=false, onChange}:Props) => {
     return(
         <div className={classNames({
             [s.heartToggle]: true, 
diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
new file mode 100644
index 000000000..dcb9120da
--- /dev/null
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -0,0 +1,32 @@
+@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;
+    &.base{
+        width: 18.6rem;
+        height: 4.8rem;
+    }
+    &.large{
+        width: 34.25rem;
+        height: 5.6rem;
+    }
+    &.default{
+        @apply border;
+    }
+    &.custom{
+        @apply border-2;
+        border-color: var(--border-line);
+        color: var(--text-label);
+    }
+    .option{
+        &:hover{
+            background-color: black;
+        }
+    }
+}
+
diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
new file mode 100644
index 000000000..8360a700f
--- /dev/null
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -0,0 +1,27 @@
+import s from './SelectCommon.module.scss'
+import classNames from 'classnames'
+
+interface Props {
+    placeHolder? : string,
+    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>)
+            }
+        </select>
+    )
+}
+
+export default SelectCommon
\ No newline at end of file