react-select 라이브러리 수정

src/components/common/reactselect/ReactSelect.jsx

@@ -33,9 +33,32 @@ export default function ReactSelect(){
         }
     }
     
+
+const CustomOption = (props) => {
+    const { data, innerRef, innerProps, isSelected, isFocused, isDisabled } = props;
+    const customClass = data.value === '6' ? 'special-option' : '';
+    
+    // 기본 선택/호버 상태 적용
+    const optionClass = `${customClass} ${isSelected ? 'custom__option--is-selected' : ''} 
+                        ${isFocused ? 'custom__option--is-focused' : ''} 
+                        ${isDisabled ? 'custom__option--is-disabled' : ''}`;
+
+    return (
+        <div
+            ref={innerRef}
+            {...innerProps}
+            className={`custom__option ${optionClass}`}
+        >
+            {data.label}
+        </div>
+    );
+};   
+
+
     return(
         <Select 
             ref={ref} 
+            instanceId="react-select-unique-id" 
             className='react-select-custom' 
             classNamePrefix='custom'
             options={selectOption} 
@@ -44,6 +67,7 @@ export default function ReactSelect(){
             placeholder="敬称選択" 
             isClearable={true} 
             menuPlacement={'auto'}
+            components={{Option: CustomOption}}
             // isDisabled={true}
         />
     )

src/styles/_reset.scss

@@ -912,10 +912,23 @@ input[type=text]{
         font-size: 13px;
         padding: 7px 10px;
         color: #45576F;
+        
     }
     .custom__option--is-selected{
+        background-color: #2684FF;
+        color: #fff !important;
+        &.custom__option--is-focused{
+            background-color: #2684FF;
             color: #fff;
         }
+    }
+    .custom__option--is-focused{
+        background-color: #DEEBFF;
+        color: #45576F;
+    }
+    .special-option{
+        color: red;
+    }
     // disable
     &.custom--is-disabled{
         .custom__control{
@@ -925,6 +938,7 @@ input[type=text]{
             color: #999999;
         }
     }
+    
 }
 
 // toggle