diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
index d91b1831e..4809a46bb 100644
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -1,69 +1,90 @@
 @import "../../../styles/utilities";
 
-.select{
+.select {
     background-color: var(--white);
-    &.base{
+    .selectTrigger {
+        svg {
+            @apply transition-all duration-200;
+        }
+    }
+    &.base {
         width: 20.6rem;
-        .selectTrigger{
+        .selectTrigger {
             width: 20.6rem;
             padding: 1.2rem 1.6rem;
         }
     }
-    &.large{
+    &.large {
         width: 34.25rem;
-        .selectTrigger{
+        .selectTrigger {
             width: 34.25rem;
             padding: 1.6rem 1.6rem;
         }
     }
-    &.default{
-        .selectTrigger{
+    &.default {
+        .selectTrigger {
             @apply border-solid border border-current;
-        }   
+        }
     }
-    &.custom{
-        .selectTrigger{
+    &.custom {
+        .selectTrigger {
             @apply border-2;
             border-color: var(--border-line);
             color: var(--text-label);
         }
     }
-    &.isActive{
-        .selectOptionWrapper{
+    &:hover {
+        cursor: pointer;
+        .hoverWrapper {
             @apply block;
+            animation: SelectAnimation 0.2s ease-out;
+        }
+        .selectTrigger {
+            svg {
+                transform: rotate(180deg);
+            }
         }
     }
 }
-.selectTrigger{
+.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;
+.hoverWrapper {
+    @apply hidden outline-none absolute z-10;
+    padding-top: 0.6rem;
+    .selectOptionWrapper {
+        border-radius: 0.8rem;
+        background-color: var(--white);
+        padding: 0.4rem 0rem 0.4rem 0rem;
+        &.base {
+            width: 20.6rem;
+        }
+        &.large {
+            width: 34.25rem;
+        }
+        &.default {
+            @apply border-solid border border-current;
+        }
+        &.custom {
+            @apply border-2;
+            border-color: var(--border-line);
+            color: var(--text-label);
+        }
     }
-    &.large{
-        width: 34.25rem;
-    }
-    &.default{
-        @apply border-solid border border-current; 
-    }
-    &.custom{
-        @apply border-2;
-        border-color: var(--border-line);
-        color: var(--text-label);
-    }
-    &.active{
-        @apply hidden;
+    &:hover {
+        @apply block;
     }
 }
 
-
-
+@keyframes SelectAnimation {
+    0% {
+        opacity: 0;
+        transform: translateY(1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx
index 5bb3d15d6..9b8c88e24 100644
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -1,43 +1,25 @@
 import s from './SelectCommon.module.scss'
 import classNames from 'classnames'
-import { useState, useRef, useEffect } from 'react'
+import { useState } from 'react'
 import { IconVectorDown } from 'src/components/icons'
 import SelectOption from './SelectOption/SelectOption'
 
 interface Props {
-    children? : React.ReactNode,
+    placeholder? : string,
     size?: 'base' | 'large',
     type?: 'default' | 'custom',
-    option: {name: string}[],
+    option: {name: string, value: string}[],
+    onChange?: (value: string) => void,
 }
 
-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 
-            }
-            else{
-                setActive(false)
-            }
-        }
-        document.addEventListener('click', handleClick)
-        return () => {
-            document.removeEventListener('click', handleClick)
-        }
-    }, [ref])
+const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
+    const [selectedName, setSelectedName] = useState(placeholder)
+    const [selectedValue, setSelectedValue] = useState('')
 
-    const changeActiveStatus = () => {
-        setActive(!isActive)
-    }
-
-    const changeSelectedName = (item:string) => {
+    const changeSelectedName = (item:string, value: string) => {
+        setSelectedValue(value)
         setSelectedName(item)
+        onChange && onChange(value)
     }
     return(
         <>
@@ -45,29 +27,29 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                 [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 => 
-                            <SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
-                        )
-                    }
+                
+                <div className={s.hoverWrapper}>
+                    <div className={classNames({
+                        [s.selectOptionWrapper] : true,
+                        [s[type]] : !!type,
+                        [s[size]] : !!size,
+                    })}
+                    >   
+                        {
+                            option.map(item => 
+                                <SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
+                            )
+                        }
+                    </div>
                 </div>
+
             </div>
         </>
     )
diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
index 5448f9879..ef504c112 100644
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
@@ -13,5 +13,9 @@
     }
     &:hover{
         background-color: var(--gray);
+        color: var(--primary);
+    }
+    &.isChoose{
+        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
index 54877d5fe..7e1968f9e 100644
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
@@ -2,20 +2,22 @@ import s from './SelectOption.module.scss'
 import classNames from 'classnames'
 
 interface Props{
-    onClick: (value: string) => void,
+    onClick: (name: string, value: string) => void,
     itemName: string,
     size: 'base' | 'large',
+    value: string,
+    selected?: boolean,
 }
 
-const SelectOption = ({onClick, itemName, size}: Props) => {
-
+const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
     const changeName  = () => {
-        onClick(itemName)
+        onClick(itemName, value)
     }
     return(
         <div className={classNames({
             [s.selectOption] : true,
             [s[size]] : !!size,
+            [s.isChoose] : selected ,
         })}
             onClick = {changeName}
         >{itemName}</div>
diff --git a/src/components/icons/IconVectorDown.tsx b/src/components/icons/IconVectorDown.tsx
index 019fc2806..0bb1cb8c1 100644
--- a/src/components/icons/IconVectorDown.tsx
+++ b/src/components/icons/IconVectorDown.tsx
@@ -1,5 +1,3 @@
-
-
 const IconVectorDown = ({ ...props }) => {
     return (
       <svg