물건목록 즐겨찾기 색깔구분

src/components/management/StuffSearchCondition.jsx

@@ -465,6 +465,7 @@ export default function StuffSearchCondition() {
             allList = res
             allList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
             favList = res.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+
             setSchSelSaleStoreList(allList)
             setFavoriteStoreList(favList)
             setShowSaleStoreList(favList)
@@ -571,7 +572,7 @@ export default function StuffSearchCondition() {
   const onInputChange = (key) => {
     //내 물건보기 체크 풀어주기
     setMyDataCheck(false)
-
+    stuffSearch.schMyDataCheck = false
     if (key !== '') {
       setShowSaleStoreList(schSelSaleStoreList)
     } else {
@@ -885,6 +886,31 @@ export default function StuffSearchCondition() {
     }
   }
 
+  const CustomOption = (props) => {
+    const { data, innerRef, innerProps, isSelected, isFocused, isDisabled } = props
+    const customClass = data.saleStoreId === 'T01' || data.priority !== 'B' ? 'special-option' : ''
+    // 기본 선택/호버 상태 적용
+    const optionClass = `${customClass} ${isSelected ? 'custom__option--is-selected' : ''} ${isFocused ? 'custom__option--is-focused' : ''} ${isDisabled ? 'custom__option--is-disabled' : ''}`
+    console.log(optionClass)
+    return (
+      <div ref={innerRef} {...innerProps} className={`custom__option ${optionClass}`}>
+        {data.label}
+      </div>
+    )
+  }
+
+  const CustomOption2 = (props) => {
+    const { data, innerRef, innerProps, isSelected, isFocused, isDisabled } = props
+    const customClass = data.priority !== 'B' ? '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 (
     <>
       {/* 퍼블적용시작 */}
@@ -1159,6 +1185,7 @@ export default function StuffSearchCondition() {
                           })}
                           isDisabled={session?.storeLvl !== '1' ? true : session?.storeId !== 'T01' ? true : false}
                           isClearable={true}
+                          components={{ Option: CustomOption }}
                         />
                       )}
                       {session?.storeId !== 'T01' && session?.storeLvl === '1' && (
@@ -1243,6 +1270,7 @@ export default function StuffSearchCondition() {
                         value={otherSaleStoreList.filter(function (option) {
                           return option.saleStoreId === otherSaleStoreId
                         })}
+                        components={{ Option: CustomOption2 }}
                       />
                     </div>
                     <div className="d-check-box light">