src/components/estimate/Estimate.jsx

@@ -138,7 +138,27 @@ export default function Estimate({}) {
           updatedRes = [...res]
         }
 
-        setOriginDisplayItemList(res)
+        const groupByItemGroup = (items) => {
+          const grouped = items.reduce((acc, item) => {
+            const group = item.itemGroup || '기타';
+            if (!acc[group]) {
+              acc[group] = {
+                label: group,
+                options: []
+              };
+            }
+            acc[group].options.push({
+              value: item.itemId,
+              label: `${item.itemNo} - ${item.itemName}`,
+              ...item
+            });
+            return acc;
+          }, {});
+
+          return Object.values(grouped);
+        };
+        const groupedItems = groupByItemGroup(res);
+        setOriginDisplayItemList(groupedItems)
         setDisplayItemList(updatedRes)
       }
     })
@@ -153,6 +173,19 @@ export default function Estimate({}) {
     })
   }
 
+  const groupStyles = {
+    groupHeading: (provided) => ({
+      ...provided,
+      fontSize: '14px',
+      fontWeight: 'bold',
+      color: '#333',
+      backgroundColor: '#f5f5f5',
+      padding: '8px 12px',
+      marginBottom: '4px',
+      borderBottom: '2px solid #ddd'
+    })
+  };
+
   useEffect(() => {
     // console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
     if (selectedPlan) initEstimate(selectedPlan?.planNo?? currentPid)
@@ -1998,6 +2031,7 @@ export default function Estimate({}) {
                                       classNamePrefix="custom"
                                       placeholder="Select"
                                       options={originDisplayItemList}
+                                      styles={groupStyles}
                                       onChange={(e) => {
                                         if (isObjectNotEmpty(e)) {
                                           onChangeDisplayItem(e.itemId, item.dispOrder, index, false)