feat: 자재 관리 페이지 대규모 개선

- 파이프 수량 계산 로직 수정 (단관 개수가 아닌 실제 길이 기반 계산)
- UI 전면 개편 (DevonThink 스타일의 간결하고 세련된 디자인)
- 자재별 그룹핑 로직 개선:
  * 플랜지: 동일 사양별 그룹핑, WN 스케줄 표시, ORIFICE 풀네임 표시
  * 피팅: 상세 타입 표시 (니플 길이, 엘보 각도/연결, 티 타입, 리듀서 타입 등)
  * 밸브: 동일 사양별 그룹핑, 타입/연결방식/압력 표시
  * 볼트: 크기/재질/길이별 그룹핑 (8SET → 개별 집계)
  * 가스켓: 동일 사양별 그룹핑, 재질/상세내역/두께 분리 표시
  * UNKNOWN: 원본 설명 전체 표시, 동일 항목 그룹핑
- 전체 카테고리 버튼 제거 (표시 복잡도 감소)
- 카테고리별 동적 컬럼 헤더 및 레이아웃 적용

frontend/src/utils/excelExport.js

@@ -133,6 +133,25 @@ const formatMaterialForExcel = (material, includeComparison = false) => {
       .trim();
   }
   
+  // 니플의 경우 길이 정보 명시적 추가
+  if (category === 'FITTING' && cleanDescription.toLowerCase().includes('nipple')) {
+    // fitting_details에서 길이 정보 가져오기
+    if (material.fitting_details && material.fitting_details.length_mm) {
+      const lengthMm = Math.round(material.fitting_details.length_mm);
+      // 이미 길이 정보가 있는지 확인
+      if (!cleanDescription.match(/\d+\s*mm/i)) {
+        cleanDescription += ` ${lengthMm}mm`;
+      }
+    }
+    // 또는 기존 설명에서 길이 정보 추출
+    else {
+      const lengthMatch = material.original_description?.match(/(\d+)\s*mm/i);
+      if (lengthMatch && !cleanDescription.match(/\d+\s*mm/i)) {
+        cleanDescription += ` ${lengthMatch[1]}mm`;
+      }
+    }
+  }
+  
   // 구매 수량 계산
   const purchaseInfo = calculatePurchaseQuantity(material);