From 662bdd413beabf7747fde7f648b191da1c3cddd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Wed, 22 Jan 2025 18:03:46 +0900
Subject: [PATCH] =?UTF-8?q?react-select=20=EB=9D=BC=EC=9D=B4=EB=B8=8C?=
 =?UTF-8?q?=EB=9F=AC=EB=A6=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/reactselect/ReactSelect.jsx        | 24 +++++++++++++++++++
 src/styles/_reset.scss                        | 16 ++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/common/reactselect/ReactSelect.jsx b/src/components/common/reactselect/ReactSelect.jsx
index 70c8e53..5fe8120 100644
--- a/src/components/common/reactselect/ReactSelect.jsx
+++ b/src/components/common/reactselect/ReactSelect.jsx
@@ -32,10 +32,33 @@ export default function ReactSelect(){
         setSelect('')
         }
     }
+    
+
+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}
         />
     )
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index a77b35e..106a50e 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -912,9 +912,22 @@ input[type=text]{
         font-size: 13px;
         padding: 7px 10px;
         color: #45576F;
+        
     }
     .custom__option--is-selected{
-        color: #fff;
+        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{
@@ -925,6 +938,7 @@ input[type=text]{
             color: #999999;
         }
     }
+    
 }
 
 // toggle