🎨 styles: animation icon select common

:%s

pages/index.tsx

@@ -23,6 +23,7 @@ export default function Home() {
   return (
     <>
       <SelectCommon option={OPTION_TEST} placeholder="Sort By" onChange={handleChange} />
+      <SelectCommon option={OPTION_TEST} placeholder="Sort By" onChange={handleChange} type='custom'/>
     </>
   )
 }

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

@@ -2,6 +2,11 @@
 
 .select {
     background-color: var(--white);
+    .selectTrigger {
+        svg {
+            @apply transition-all duration-200;
+        }
+    }
     &.base {
         width: 20.6rem;
         .selectTrigger {
@@ -34,13 +39,17 @@
             @apply block;
             animation: SelectAnimation 0.2s ease-out;
         }
+        .selectTrigger {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
     }
 }
 .selectTrigger {
     @apply outline-none flex justify-between;
     color: var(--text-active);
     border-radius: 0.8rem;
-
 }
 .hoverWrapper {
     @apply hidden outline-none absolute z-10;
@@ -69,7 +78,6 @@
     }
 }
 
-
 @keyframes SelectAnimation {
     0% {
         opacity: 0;

src/components/common/SelectCommon/SelectCommon.tsx

@@ -44,7 +44,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, on
                     >   
                         {
                             option.map(item => 
-                                <SelectOption itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
+                                <SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
                             )
                         }
                     </div>

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

@@ -13,6 +13,7 @@
     }
     &:hover{
         background-color: var(--gray);
+        color: var(--primary);
     }
     &.isChoose{
         background-color: var(--gray);