feat: BOM 관리 시스템 대폭 개선 및 Docker 배포 가이드 추가

- 🎨 UI/UX 개선: 데본씽크 스타일 모던 디자인 적용
- 📁 컴포넌트 구조 개선: 폴더별 체계적 관리 (common/, bom/, materials/)
- 🔧 BOM 관리 페이지 리팩토링: NewMaterialsPage → BOMManagementPage + 카테고리별 컴포넌트 분리
- 💾 구매신청 기능 개선: 선택된 자재 비활성화, 제목 편집, 엑셀 다운로드
- 📊 자재 표시 개선: 타입/서브타입 컬럼 정리, 상세 정보 복원
- 🐛 CSS 빌드 오류 수정: NewMaterialsPage.css 문법 오류 해결
- 📚 문서화: PAGES_GUIDE.md 추가, README에 Docker 캐시 문제 해결 가이드 추가
- 🔄 API 개선: 구매신청 자재 조회, 제목 수정 엔드포인트 추가

frontend/src/components/bom/index.js

@@ -0,0 +1,3 @@
+// BOM Components
+export * from './materials';
+export * from './shared';

frontend/src/components/bom/materials/BoltMaterialsView.jsx

@@ -0,0 +1,460 @@
+import React, { useState } from 'react';
+import { exportMaterialsToExcel } from '../../../utils/excelExport';
+import api from '../../../api';
+import { FilterableHeader } from '../shared';
+
+const BoltMaterialsView = ({ 
+  materials, 
+  selectedMaterials, 
+  setSelectedMaterials,
+  userRequirements,
+  setUserRequirements,
+  purchasedMaterials,
+  fileId,
+  user 
+}) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+  const [columnFilters, setColumnFilters] = useState({});
+  const [showFilterDropdown, setShowFilterDropdown] = useState(null);
+  // 볼트 추가요구사항 추출 함수
+  const extractBoltAdditionalRequirements = (description) => {
+    const additionalReqs = [];
+    
+    // 표면처리 패턴 확인
+    const surfacePatterns = {
+      'ELEC.GALV': 'ELEC.GALV',
+      'ELEC GALV': 'ELEC.GALV',
+      'GALVANIZED': 'GALVANIZED',
+      'GALV': 'GALV',
+      'HOT DIP GALV': 'HDG',
+      'HDG': 'HDG',
+      'ZINC PLATED': 'ZINC PLATED',
+      'ZINC': 'ZINC',
+      'PLAIN': 'PLAIN'
+    };
+    
+    for (const [pattern, treatment] of Object.entries(surfacePatterns)) {
+      if (description.includes(pattern)) {
+        additionalReqs.push(treatment);
+        break; // 첫 번째 매치만 사용
+      }
+    }
+    
+    return additionalReqs.join(', ') || '-';
+  };
+
+  const parseBoltInfo = (material) => {
+    const qty = Math.round(material.quantity || 0);
+    const safetyQty = Math.ceil(qty * 1.05); // 5% 여유율
+    const purchaseQty = Math.ceil(safetyQty / 4) * 4; // 4의 배수
+    
+    // 볼트 상세 정보 우선 사용
+    const boltDetails = material.bolt_details || {};
+    
+    // 길이 정보 (bolt_details 우선, 없으면 원본 설명에서 추출)
+    let boltLength = '-';
+    if (boltDetails.length && boltDetails.length !== '-') {
+      boltLength = boltDetails.length;
+    } else {
+      // 원본 설명에서 길이 추출
+      const description = material.original_description || '';
+      const lengthPatterns = [
+        /(\d+(?:\.\d+)?)\s*LG/i,  // 75 LG, 90.0000 LG
+        /(\d+(?:\.\d+)?)\s*mm/i,  // 50mm
+        /(\d+(?:\.\d+)?)\s*MM/i,  // 50MM
+        /LG[,\s]*(\d+(?:\.\d+)?)/i // LG, 75 형태
+      ];
+      
+      for (const pattern of lengthPatterns) {
+        const match = description.match(pattern);
+        if (match) {
+          let lengthValue = match[1];
+          // 소수점 제거 (145.0000 → 145)
+          if (lengthValue.includes('.') && lengthValue.endsWith('.0000')) {
+            lengthValue = lengthValue.split('.')[0];
+          } else if (lengthValue.includes('.') && /\.0+$/.test(lengthValue)) {
+            lengthValue = lengthValue.split('.')[0];
+          }
+          boltLength = `${lengthValue}mm`;
+          break;
+        }
+      }
+    }
+    
+    // 재질 정보 (bolt_details 우선, 없으면 기본 필드 사용)
+    let boltGrade = '-';
+    if (boltDetails.material_standard && boltDetails.material_grade) {
+      // bolt_details에서 완전한 재질 정보 구성
+      if (boltDetails.material_grade !== 'UNKNOWN' && boltDetails.material_grade !== boltDetails.material_standard) {
+        boltGrade = `${boltDetails.material_standard} ${boltDetails.material_grade}`;
+      } else {
+        boltGrade = boltDetails.material_standard;
+      }
+    } else if (material.full_material_grade && material.full_material_grade !== '-') {
+      boltGrade = material.full_material_grade;
+    } else if (material.material_grade && material.material_grade !== '-') {
+      boltGrade = material.material_grade;
+    }
+    
+    // 볼트 타입 (PSV_BOLT, LT_BOLT 등)
+    let boltSubtype = 'BOLT_GENERAL';
+    if (boltDetails.bolt_type && boltDetails.bolt_type !== 'UNKNOWN') {
+      boltSubtype = boltDetails.bolt_type;
+    } else {
+      // 원본 설명에서 특수 볼트 타입 추출
+      const description = material.original_description || '';
+      const upperDesc = description.toUpperCase();
+      if (upperDesc.includes('PSV')) {
+        boltSubtype = 'PSV_BOLT';
+      } else if (upperDesc.includes('LT')) {
+        boltSubtype = 'LT_BOLT';
+      } else if (upperDesc.includes('CK')) {
+        boltSubtype = 'CK_BOLT';
+      }
+    }
+    
+    // 추가요구사항 추출 (ELEC.GALV 등)
+    const additionalReq = extractBoltAdditionalRequirements(material.original_description || '');
+    
+    return {
+      type: 'BOLT',
+      subtype: boltSubtype,
+      size: material.size_spec || material.main_nom || '-',
+      pressure: '-', // 볼트는 압력 등급 없음
+      schedule: boltLength, // 길이 정보
+      grade: boltGrade,
+      additionalReq: additionalReq, // 추가요구사항
+      quantity: purchaseQty,
+      unit: 'SETS'
+    };
+  };
+
+  // 정렬 처리
+  const handleSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // 필터링된 및 정렬된 자재 목록
+  const getFilteredAndSortedMaterials = () => {
+    let filtered = materials.filter(material => {
+      return Object.entries(columnFilters).every(([key, filterValue]) => {
+        if (!filterValue) return true;
+        const info = parseBoltInfo(material);
+        const value = info[key]?.toString().toLowerCase() || '';
+        return value.includes(filterValue.toLowerCase());
+      });
+    });
+
+    if (sortConfig.key) {
+      filtered.sort((a, b) => {
+        const aInfo = parseBoltInfo(a);
+        const bInfo = parseBoltInfo(b);
+        const aValue = aInfo[sortConfig.key] || '';
+        const bValue = bInfo[sortConfig.key] || '';
+        
+        if (sortConfig.direction === 'asc') {
+          return aValue > bValue ? 1 : -1;
+        } else {
+          return aValue < bValue ? 1 : -1;
+        }
+      });
+    }
+
+    return filtered;
+  };
+
+  // 전체 선택/해제 (구매신청된 자재 제외)
+  const handleSelectAll = () => {
+    const filteredMaterials = getFilteredAndSortedMaterials();
+    const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+    
+    if (selectedMaterials.size === selectableMaterials.length) {
+      setSelectedMaterials(new Set());
+    } else {
+      setSelectedMaterials(new Set(selectableMaterials.map(m => m.id)));
+    }
+  };
+
+  // 개별 선택 (구매신청된 자재는 선택 불가)
+  const handleMaterialSelect = (materialId) => {
+    if (purchasedMaterials.has(materialId)) {
+      return; // 구매신청된 자재는 선택 불가
+    }
+    
+    const newSelected = new Set(selectedMaterials);
+    if (newSelected.has(materialId)) {
+      newSelected.delete(materialId);
+    } else {
+      newSelected.add(materialId);
+    }
+    setSelectedMaterials(newSelected);
+  };
+
+  // 엑셀 내보내기
+  const handleExportToExcel = async () => {
+    const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
+    if (selectedMaterialsData.length === 0) {
+      alert('내보낼 자재를 선택해주세요.');
+      return;
+    }
+
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    const excelFileName = `BOLT_Materials_${timestamp}.xlsx`;
+
+    const dataWithRequirements = selectedMaterialsData.map(material => ({
+      ...material,
+      user_requirement: userRequirements[material.id] || ''
+    }));
+
+    try {
+      await api.post('/files/save-excel', {
+        file_id: fileId,
+        category: 'BOLT',
+        materials: dataWithRequirements,
+        filename: excelFileName,
+        user_id: user?.id
+      });
+
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'BOLT',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+
+      alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
+    } catch (error) {
+      console.error('엑셀 저장 실패:', error);
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'BOLT',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+    }
+  };
+
+  const filteredMaterials = getFilteredAndSortedMaterials();
+
+  return (
+    <div style={{ padding: '32px' }}>
+      {/* 헤더 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <div>
+          <h3 style={{ 
+            fontSize: '24px', 
+            fontWeight: '700', 
+            color: '#0f172a', 
+            margin: '0 0 8px 0' 
+          }}>
+            Bolt Materials
+          </h3>
+          <p style={{ 
+            fontSize: '14px', 
+            color: '#64748b', 
+            margin: 0 
+          }}>
+            {filteredMaterials.length} items • {selectedMaterials.size} selected
+          </p>
+        </div>
+        
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            onClick={handleSelectAll}
+            style={{
+              background: 'white',
+              color: '#6b7280',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            {selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
+          </button>
+          
+          <button
+            onClick={handleExportToExcel}
+            disabled={selectedMaterials.size === 0}
+            style={{
+              background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #6b7280 0%, #4b5563 100%)' : '#e5e7eb',
+              color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            Export to Excel ({selectedMaterials.size})
+          </button>
+        </div>
+      </div>
+
+      {/* 테이블 */}
+      <div style={{ 
+        background: 'white', 
+        borderRadius: '12px', 
+        overflow: 'hidden',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
+      }}>
+        {/* 헤더 */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+          gap: '16px',
+          padding: '16px',
+          background: '#f8fafc',
+          borderBottom: '1px solid #e2e8f0',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: '#374151'
+        }}>
+          <div>
+            <input
+              type="checkbox"
+              checked={(() => {
+                const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+                return selectedMaterials.size === selectableMaterials.length && selectableMaterials.length > 0;
+              })()}
+              onChange={handleSelectAll}
+              style={{ cursor: 'pointer' }}
+            />
+          </div>
+          <FilterableHeader sortKey="subtype" filterKey="subtype">Type</FilterableHeader>
+          <FilterableHeader sortKey="size" filterKey="size">Size</FilterableHeader>
+          <FilterableHeader sortKey="pressure" filterKey="pressure">Pressure</FilterableHeader>
+          <FilterableHeader sortKey="schedule" filterKey="schedule">Length</FilterableHeader>
+          <FilterableHeader sortKey="grade" filterKey="grade">Material Grade</FilterableHeader>
+          <FilterableHeader sortKey="quantity" filterKey="quantity">Quantity</FilterableHeader>
+          <div>Unit</div>
+          <div>User Requirement</div>
+        </div>
+
+        {/* 데이터 행들 */}
+        <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
+          {filteredMaterials.map((material, index) => {
+            const info = parseBoltInfo(material);
+            const isSelected = selectedMaterials.has(material.id);
+            const isPurchased = purchasedMaterials.has(material.id);
+            
+            return (
+              <div
+                key={material.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+                  gap: '16px',
+                  padding: '16px',
+                  borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
+                  background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
+                  transition: 'background 0.15s ease'
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = '#f8fafc';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = 'white';
+                  }
+                }}
+              >
+                <div>
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => handleMaterialSelect(material.id)}
+                    disabled={isPurchased}
+                    style={{ 
+                      cursor: isPurchased ? 'not-allowed' : 'pointer',
+                      opacity: isPurchased ? 0.5 : 1
+                    }}
+                  />
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
+                  {info.subtype}
+                  {isPurchased && (
+                    <span style={{
+                      marginLeft: '8px',
+                      padding: '2px 6px',
+                      background: '#fbbf24',
+                      color: '#92400e',
+                      borderRadius: '4px',
+                      fontSize: '10px',
+                      fontWeight: '500'
+                    }}>
+                      PURCHASED
+                    </span>
+                  )}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.size}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.pressure}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.schedule}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.grade}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
+                  {info.quantity}
+                </div>
+                <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                  {info.unit}
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    value={userRequirements[material.id] || ''}
+                    onChange={(e) => setUserRequirements({
+                      ...userRequirements,
+                      [material.id]: e.target.value
+                    })}
+                    placeholder="Enter requirement..."
+                    style={{
+                      width: '100%',
+                      padding: '6px 8px',
+                      border: '1px solid #d1d5db',
+                      borderRadius: '4px',
+                      fontSize: '12px'
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredMaterials.length === 0 && (
+        <div style={{
+          textAlign: 'center',
+          padding: '60px 20px',
+          color: '#64748b'
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔩</div>
+          <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+            No Bolt Materials Found
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            {Object.keys(columnFilters).some(key => columnFilters[key]) 
+              ? 'Try adjusting your filters' 
+              : 'No bolt materials available in this BOM'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BoltMaterialsView;

frontend/src/components/bom/materials/FittingMaterialsView.jsx

@@ -0,0 +1,666 @@
+import React, { useState } from 'react';
+import { exportMaterialsToExcel } from '../../../utils/excelExport';
+import api from '../../../api';
+import { FilterableHeader, MaterialTable } from '../shared';
+
+const FittingMaterialsView = ({ 
+  materials, 
+  selectedMaterials, 
+  setSelectedMaterials,
+  userRequirements,
+  setUserRequirements,
+  purchasedMaterials,
+  fileId,
+  user,
+  onNavigate 
+}) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+  const [columnFilters, setColumnFilters] = useState({});
+  const [showFilterDropdown, setShowFilterDropdown] = useState(null);
+
+  // 니플 끝단 정보 추출 (기존 로직 복원)
+  const extractNippleEndInfo = (description) => {
+    const descUpper = description.toUpperCase();
+    
+    // 니플 끝단 패턴들 (기존 NewMaterialsPage와 동일)
+    const endPatterns = {
+      'PBE': 'PBE',      // Plain Both End
+      'BBE': 'BBE',      // Bevel Both End  
+      'POE': 'POE',      // Plain One End
+      'BOE': 'BOE',      // Bevel One End
+      'TOE': 'TOE',      // Thread One End
+      'SW X NPT': 'SW×NPT',  // Socket Weld x NPT
+      'SW X SW': 'SW×SW',    // Socket Weld x Socket Weld
+      'NPT X NPT': 'NPT×NPT', // NPT x NPT
+      'BOTH END THREADED': 'B.E.T',
+      'B.E.T': 'B.E.T',
+      'ONE END THREADED': 'O.E.T',
+      'O.E.T': 'O.E.T',
+      'THREADED': 'THD'
+    };
+    
+    for (const [pattern, display] of Object.entries(endPatterns)) {
+      if (descUpper.includes(pattern)) {
+        return display;
+      }
+    }
+    
+    return '';
+  };
+
+  // 피팅 정보 파싱 (기존 상세 로직 복원)
+  const parseFittingInfo = (material) => {
+    const fittingDetails = material.fitting_details || {};
+    const classificationDetails = material.classification_details || {};
+    
+    // 개선된 분류기 결과 우선 사용
+    const fittingTypeInfo = classificationDetails.fitting_type || {};
+    const scheduleInfo = classificationDetails.schedule_info || {};
+    
+    // 기존 필드와 새 필드 통합
+    const fittingType = fittingTypeInfo.type || fittingDetails.fitting_type || '';
+    const fittingSubtype = fittingTypeInfo.subtype || fittingDetails.fitting_subtype || '';
+    const mainSchedule = scheduleInfo.main_schedule || fittingDetails.schedule || '';
+    const redSchedule = scheduleInfo.red_schedule || '';
+    const hasDifferentSchedules = scheduleInfo.has_different_schedules || false;
+    
+    const description = material.original_description || '';
+    
+    // 피팅 타입별 상세 표시
+    let displayType = '';
+    
+    // 개선된 분류기 결과 우선 표시
+    if (fittingType === 'TEE' && fittingSubtype === 'REDUCING') {
+      displayType = 'TEE REDUCING';
+    } else if (fittingType === 'REDUCER' && fittingSubtype === 'CONCENTRIC') {
+      displayType = 'REDUCER CONC';
+    } else if (fittingType === 'REDUCER' && fittingSubtype === 'ECCENTRIC') {
+      displayType = 'REDUCER ECC';
+    } else if (description.toUpperCase().includes('TEE RED')) {
+      displayType = 'TEE REDUCING';
+    } else if (description.toUpperCase().includes('RED CONC')) {
+      displayType = 'REDUCER CONC';
+    } else if (description.toUpperCase().includes('RED ECC')) {
+      displayType = 'REDUCER ECC';
+    } else if (description.toUpperCase().includes('CAP')) {
+      if (description.includes('NPT(F)')) {
+        displayType = 'CAP NPT(F)';
+      } else if (description.includes('SW')) {
+        displayType = 'CAP SW';
+      } else if (description.includes('BW')) {
+        displayType = 'CAP BW';
+      } else {
+        displayType = 'CAP';
+      }
+    } else if (description.toUpperCase().includes('PLUG')) {
+      if (description.toUpperCase().includes('HEX')) {
+        if (description.includes('NPT(M)')) {
+          displayType = 'HEX PLUG NPT(M)';
+        } else {
+          displayType = 'HEX PLUG';
+        }
+      } else if (description.includes('NPT(M)')) {
+        displayType = 'PLUG NPT(M)';
+      } else if (description.includes('NPT')) {
+        displayType = 'PLUG NPT';
+      } else {
+        displayType = 'PLUG';
+      }
+    } else if (fittingType === 'NIPPLE') {
+      const length = fittingDetails.length_mm || fittingDetails.avg_length_mm;
+      const endInfo = extractNippleEndInfo(description);
+      
+      let nippleType = 'NIPPLE';
+      if (length) nippleType += ` ${length}mm`;
+      if (endInfo) nippleType += ` ${endInfo}`;
+      
+      displayType = nippleType;
+    } else if (fittingType === 'ELBOW') {
+      let elbowDetails = [];
+      
+      // 각도 정보 추출
+      if (fittingSubtype.includes('90DEG') || description.includes('90') || description.includes('90°')) {
+        elbowDetails.push('90°');
+      } else if (fittingSubtype.includes('45DEG') || description.includes('45') || description.includes('45°')) {
+        elbowDetails.push('45°');
+      }
+      
+      // 반경 정보 추출 (Long Radius / Short Radius)
+      if (fittingSubtype.includes('LONG_RADIUS') || description.toUpperCase().includes('LR') || description.toUpperCase().includes('LONG RADIUS')) {
+        elbowDetails.push('LR');
+      } else if (fittingSubtype.includes('SHORT_RADIUS') || description.toUpperCase().includes('SR') || description.toUpperCase().includes('SHORT RADIUS')) {
+        elbowDetails.push('SR');
+      }
+      
+      // 연결 방식
+      if (description.includes('SW')) {
+        elbowDetails.push('SW');
+      } else if (description.includes('BW')) {
+        elbowDetails.push('BW');
+      }
+      
+      // 기본값 설정 (각도가 없으면 90도로 가정)
+      if (!elbowDetails.some(detail => detail.includes('°'))) {
+        elbowDetails.unshift('90°');
+      }
+      
+      displayType = `ELBOW ${elbowDetails.join(' ')}`.trim();
+    } else if (fittingType === 'TEE') {
+      // TEE 타입과 연결 방식 상세 표시
+      let teeDetails = [];
+      
+      // 등경/축소 타입
+      if (fittingSubtype === 'EQUAL' || description.toUpperCase().includes('TEE EQ')) {
+        teeDetails.push('EQ');
+      } else if (fittingSubtype === 'REDUCING' || description.toUpperCase().includes('TEE RED')) {
+        teeDetails.push('RED');
+      }
+      
+      // 연결 방식
+      if (description.includes('SW')) {
+        teeDetails.push('SW');
+      } else if (description.includes('BW')) {
+        teeDetails.push('BW');
+      }
+      
+      displayType = `TEE ${teeDetails.join(' ')}`.trim();
+    } else if (fittingType === 'REDUCER') {
+      const reducerType = fittingSubtype === 'CONCENTRIC' ? 'CONC' : fittingSubtype === 'ECCENTRIC' ? 'ECC' : '';
+      const sizes = fittingDetails.reduced_size ? `${material.size_spec}×${fittingDetails.reduced_size}` : material.size_spec;
+      displayType = `RED ${reducerType} ${sizes}`.trim();
+    } else if (fittingType === 'SWAGE') {
+      const swageType = fittingSubtype || '';
+      displayType = `SWAGE ${swageType}`.trim();
+    } else if (fittingType === 'OLET') {
+      const oletSubtype = fittingSubtype || '';
+      let oletDisplayName = '';
+      
+      // 백엔드 분류기 결과 우선 사용
+      switch (oletSubtype) {
+        case 'SOCKOLET':
+          oletDisplayName = 'SOCK-O-LET';
+          break;
+        case 'WELDOLET':
+          oletDisplayName = 'WELD-O-LET';
+          break;
+        case 'ELLOLET':
+          oletDisplayName = 'ELL-O-LET';
+          break;
+        case 'THREADOLET':
+          oletDisplayName = 'THREAD-O-LET';
+          break;
+        case 'ELBOLET':
+          oletDisplayName = 'ELB-O-LET';
+          break;
+        case 'NIPOLET':
+          oletDisplayName = 'NIP-O-LET';
+          break;
+        case 'COUPOLET':
+          oletDisplayName = 'COUP-O-LET';
+          break;
+        default:
+          // 백엔드 분류가 없으면 description에서 직접 추출
+          const upperDesc = description.toUpperCase();
+          if (upperDesc.includes('SOCK-O-LET') || upperDesc.includes('SOCKOLET')) {
+            oletDisplayName = 'SOCK-O-LET';
+          } else if (upperDesc.includes('WELD-O-LET') || upperDesc.includes('WELDOLET')) {
+            oletDisplayName = 'WELD-O-LET';
+          } else if (upperDesc.includes('ELL-O-LET') || upperDesc.includes('ELLOLET')) {
+            oletDisplayName = 'ELL-O-LET';
+          } else if (upperDesc.includes('THREAD-O-LET') || upperDesc.includes('THREADOLET')) {
+            oletDisplayName = 'THREAD-O-LET';
+          } else if (upperDesc.includes('ELB-O-LET') || upperDesc.includes('ELBOLET')) {
+            oletDisplayName = 'ELB-O-LET';
+          } else if (upperDesc.includes('NIP-O-LET') || upperDesc.includes('NIPOLET')) {
+            oletDisplayName = 'NIP-O-LET';
+          } else if (upperDesc.includes('COUP-O-LET') || upperDesc.includes('COUPOLET')) {
+            oletDisplayName = 'COUP-O-LET';
+          } else {
+            oletDisplayName = 'OLET';
+          }
+      }
+      
+      displayType = oletDisplayName;
+    } else if (!displayType) {
+      displayType = fittingType || 'FITTING';
+    }
+    
+    // 압력 등급과 스케줄 추출 (기존 NewMaterialsPage 로직)
+    let pressure = '-';
+    let schedule = '-';
+    
+    // 압력 등급 찾기 (3000LB, 6000LB 등) - 소켓웰드 피팅에 특히 중요
+    const pressureMatch = description.match(/(\d+)LB/i);
+    if (pressureMatch) {
+      pressure = `${pressureMatch[1]}LB`;
+    }
+    
+    // 소켓웰드 피팅의 경우 압력 등급이 더 중요함
+    if (description.includes('SW') && !pressureMatch) {
+      // SW 피팅인데 압력이 명시되지 않은 경우 기본값 설정
+      if (description.includes('3000') || description.includes('3K')) {
+        pressure = '3000LB';
+      } else if (description.includes('6000') || description.includes('6K')) {
+        pressure = '6000LB';
+      }
+    }
+    
+    // 스케줄 표시 (분리 스케줄 지원)
+    if (hasDifferentSchedules && mainSchedule && redSchedule) {
+      schedule = `${mainSchedule}×${redSchedule}`;
+    } else if (mainSchedule) {
+      schedule = mainSchedule;
+    } else {
+      // Description에서 스케줄 추출
+      const scheduleMatch = description.match(/SCH\s*(\d+[A-Z]*)/i);
+      if (scheduleMatch) {
+        schedule = `SCH ${scheduleMatch[1]}`;
+      }
+    }
+    
+    return {
+      type: 'FITTING',
+      subtype: displayType,
+      size: material.size_spec || '-',
+      pressure: pressure,
+      schedule: schedule,
+      grade: material.full_material_grade || material.material_grade || '-',
+      quantity: Math.round(material.quantity || 0),
+      unit: '개',
+      isFitting: true
+    };
+  };
+
+  // 정렬 처리
+  const handleSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // 필터링된 및 정렬된 자재 목록
+  const getFilteredAndSortedMaterials = () => {
+    let filtered = materials.filter(material => {
+      return Object.entries(columnFilters).every(([key, filterValue]) => {
+        if (!filterValue) return true;
+        const info = parseFittingInfo(material);
+        const value = info[key]?.toString().toLowerCase() || '';
+        return value.includes(filterValue.toLowerCase());
+      });
+    });
+
+    if (sortConfig.key) {
+      filtered.sort((a, b) => {
+        const aInfo = parseFittingInfo(a);
+        const bInfo = parseFittingInfo(b);
+        const aValue = aInfo[sortConfig.key] || '';
+        const bValue = bInfo[sortConfig.key] || '';
+        
+        if (sortConfig.direction === 'asc') {
+          return aValue > bValue ? 1 : -1;
+        } else {
+          return aValue < bValue ? 1 : -1;
+        }
+      });
+    }
+
+    return filtered;
+  };
+
+  // 전체 선택/해제 (구매신청된 자재 제외)
+  const handleSelectAll = () => {
+    const filteredMaterials = getFilteredAndSortedMaterials();
+    const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+    
+    if (selectedMaterials.size === selectableMaterials.length) {
+      setSelectedMaterials(new Set());
+    } else {
+      setSelectedMaterials(new Set(selectableMaterials.map(m => m.id)));
+    }
+  };
+
+  // 개별 선택 (구매신청된 자재는 선택 불가)
+  const handleMaterialSelect = (materialId) => {
+    if (purchasedMaterials.has(materialId)) {
+      return; // 구매신청된 자재는 선택 불가
+    }
+    
+    const newSelected = new Set(selectedMaterials);
+    if (newSelected.has(materialId)) {
+      newSelected.delete(materialId);
+    } else {
+      newSelected.add(materialId);
+    }
+    setSelectedMaterials(newSelected);
+  };
+
+  // 엑셀 내보내기
+  const handleExportToExcel = async () => {
+    const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
+    if (selectedMaterialsData.length === 0) {
+      alert('내보낼 자재를 선택해주세요.');
+      return;
+    }
+
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    const excelFileName = `FITTING_Materials_${timestamp}.xlsx`;
+
+    const dataWithRequirements = selectedMaterialsData.map(material => ({
+      ...material,
+      user_requirement: userRequirements[material.id] || ''
+    }));
+
+    try {
+      await api.post('/files/save-excel', {
+        file_id: fileId,
+        category: 'FITTING',
+        materials: dataWithRequirements,
+        filename: excelFileName,
+        user_id: user?.id
+      });
+
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'FITTING',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+
+      alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
+    } catch (error) {
+      console.error('엑셀 저장 실패:', error);
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'FITTING',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+    }
+  };
+
+  const filteredMaterials = getFilteredAndSortedMaterials();
+
+  // 필터 헤더 컴포넌트
+  const FilterableHeader = ({ sortKey, filterKey, children }) => (
+    <div className="filterable-header" style={{ position: 'relative' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <span
+          onClick={() => handleSort(sortKey)}
+          style={{ cursor: 'pointer', flex: 1 }}
+        >
+          {children}
+          {sortConfig.key === sortKey && (
+            <span style={{ marginLeft: '4px' }}>
+              {sortConfig.direction === 'asc' ? '↑' : '↓'}
+            </span>
+          )}
+        </span>
+        <button
+          onClick={() => setShowFilterDropdown(showFilterDropdown === filterKey ? null : filterKey)}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '2px',
+            fontSize: '12px',
+            color: '#6b7280'
+          }}
+        >
+          🔍
+        </button>
+      </div>
+      {showFilterDropdown === filterKey && (
+        <div style={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          background: 'white',
+          border: '1px solid #e2e8f0',
+          borderRadius: '6px',
+          padding: '8px',
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          zIndex: 1000,
+          minWidth: '150px'
+        }}>
+          <input
+            type="text"
+            placeholder={`Filter ${children}...`}
+            value={columnFilters[filterKey] || ''}
+            onChange={(e) => setColumnFilters({
+              ...columnFilters,
+              [filterKey]: e.target.value
+            })}
+            style={{
+              width: '100%',
+              padding: '4px 8px',
+              border: '1px solid #d1d5db',
+              borderRadius: '4px',
+              fontSize: '12px'
+            }}
+            autoFocus
+          />
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div style={{ padding: '32px' }}>
+      {/* 헤더 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <div>
+          <h3 style={{ 
+            fontSize: '24px', 
+            fontWeight: '700', 
+            color: '#0f172a', 
+            margin: '0 0 8px 0' 
+          }}>
+            Fitting Materials
+          </h3>
+          <p style={{ 
+            fontSize: '14px', 
+            color: '#64748b', 
+            margin: 0 
+          }}>
+            {filteredMaterials.length} items • {selectedMaterials.size} selected
+          </p>
+        </div>
+        
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            onClick={handleSelectAll}
+            style={{
+              background: 'white',
+              color: '#6b7280',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            {selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
+          </button>
+          
+          <button
+            onClick={handleExportToExcel}
+            disabled={selectedMaterials.size === 0}
+            style={{
+              background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)' : '#e5e7eb',
+              color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            Export to Excel ({selectedMaterials.size})
+          </button>
+        </div>
+      </div>
+
+      {/* 테이블 */}
+      <div style={{ 
+        background: 'white', 
+        borderRadius: '12px', 
+        overflow: 'hidden',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
+      }}>
+        {/* 헤더 */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+          gap: '16px',
+          padding: '16px',
+          background: '#f8fafc',
+          borderBottom: '1px solid #e2e8f0',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: '#374151'
+        }}>
+          <div>
+            <input
+              type="checkbox"
+              checked={(() => {
+                const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+                return selectedMaterials.size === selectableMaterials.length && selectableMaterials.length > 0;
+              })()}
+              onChange={handleSelectAll}
+              style={{ cursor: 'pointer' }}
+            />
+          </div>
+          <div>Type</div>
+          <div>Size</div>
+          <div>Pressure</div>
+          <div>Schedule</div>
+          <div>Material Grade</div>
+          <div>Quantity</div>
+          <div>Unit</div>
+          <div>User Requirement</div>
+        </div>
+
+        {/* 데이터 행들 */}
+        <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
+          {filteredMaterials.map((material, index) => {
+            const info = parseFittingInfo(material);
+            const isSelected = selectedMaterials.has(material.id);
+            const isPurchased = purchasedMaterials.has(material.id);
+            
+            return (
+              <div
+                key={material.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+                  gap: '16px',
+                  padding: '16px',
+                  borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
+                  background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
+                  transition: 'background 0.15s ease'
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = '#f8fafc';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = 'white';
+                  }
+                }}
+              >
+                <div>
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => handleMaterialSelect(material.id)}
+                    disabled={isPurchased}
+                    style={{ 
+                      cursor: isPurchased ? 'not-allowed' : 'pointer',
+                      opacity: isPurchased ? 0.5 : 1
+                    }}
+                  />
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
+                  {info.subtype}
+                  {isPurchased && (
+                    <span style={{
+                      marginLeft: '8px',
+                      padding: '2px 6px',
+                      background: '#fbbf24',
+                      color: '#92400e',
+                      borderRadius: '4px',
+                      fontSize: '10px',
+                      fontWeight: '500'
+                    }}>
+                      PURCHASED
+                    </span>
+                  )}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.size}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.pressure}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.schedule}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.grade}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
+                  {info.quantity}
+                </div>
+                <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                  {info.unit}
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    value={userRequirements[material.id] || ''}
+                    onChange={(e) => setUserRequirements({
+                      ...userRequirements,
+                      [material.id]: e.target.value
+                    })}
+                    placeholder="Enter requirement..."
+                    style={{
+                      width: '100%',
+                      padding: '6px 8px',
+                      border: '1px solid #d1d5db',
+                      borderRadius: '4px',
+                      fontSize: '12px'
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredMaterials.length === 0 && (
+        <div style={{
+          textAlign: 'center',
+          padding: '60px 20px',
+          color: '#64748b'
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>⚙️</div>
+          <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+            No Fitting Materials Found
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            {Object.keys(columnFilters).some(key => columnFilters[key]) 
+              ? 'Try adjusting your filters' 
+              : 'No fitting materials available in this BOM'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FittingMaterialsView;

frontend/src/components/bom/materials/FlangeMaterialsView.jsx

@@ -0,0 +1,512 @@
+import React, { useState } from 'react';
+import { exportMaterialsToExcel } from '../../../utils/excelExport';
+import api from '../../../api';
+import { FilterableHeader, MaterialTable } from '../shared';
+
+const FlangeMaterialsView = ({ 
+  materials, 
+  selectedMaterials, 
+  setSelectedMaterials,
+  userRequirements,
+  setUserRequirements,
+  purchasedMaterials,
+  fileId,
+  user,
+  onNavigate 
+}) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+  const [columnFilters, setColumnFilters] = useState({});
+  const [showFilterDropdown, setShowFilterDropdown] = useState(null);
+
+  // 플랜지 정보 파싱
+  const parseFlangeInfo = (material) => {
+    const description = material.original_description || '';
+    const flangeDetails = material.flange_details || {};
+
+    const flangeTypeMap = {
+      'WN': 'WELD NECK FLANGE',
+      'WELD_NECK': 'WELD NECK FLANGE',
+      'SO': 'SLIP ON FLANGE',
+      'SLIP_ON': 'SLIP ON FLANGE',
+      'SW': 'SOCKET WELD FLANGE',
+      'SOCKET_WELD': 'SOCKET WELD FLANGE',
+      'BLIND': 'BLIND FLANGE',
+      'REDUCING': 'REDUCING FLANGE',
+      'ORIFICE': 'ORIFICE FLANGE',
+      'SPECTACLE': 'SPECTACLE BLIND',
+      'PADDLE': 'PADDLE BLIND',
+      'SPACER': 'SPACER'
+    };
+
+    const facingTypeMap = {
+      'RF': 'RAISED FACE',
+      'RAISED_FACE': 'RAISED FACE',
+      'FF': 'FLAT FACE',
+      'FLAT_FACE': 'FLAT FACE',
+      'RTJ': 'RING TYPE JOINT',
+      'RING_TYPE_JOINT': 'RING TYPE JOINT'
+    };
+
+    const rawFlangeType = flangeDetails.flange_type || '';
+    const rawFacingType = flangeDetails.facing_type || '';
+
+    let displayType = flangeTypeMap[rawFlangeType] || rawFlangeType || '-';
+    let facingType = facingTypeMap[rawFacingType] || rawFacingType || '-';
+
+    // Description에서 추출
+    if (displayType === '-') {
+      const desc = description.toUpperCase();
+      if (desc.includes('ORIFICE')) {
+        displayType = 'ORIFICE FLANGE';
+      } else if (desc.includes('SPECTACLE')) {
+        displayType = 'SPECTACLE BLIND';
+      } else if (desc.includes('PADDLE')) {
+        displayType = 'PADDLE BLIND';
+      } else if (desc.includes('SPACER')) {
+        displayType = 'SPACER';
+      } else if (desc.includes('REDUCING') || desc.includes('RED')) {
+        displayType = 'REDUCING FLANGE';
+      } else if (desc.includes('BLIND')) {
+        displayType = 'BLIND FLANGE';
+      } else if (desc.includes('WN')) {
+        displayType = 'WELD NECK FLANGE';
+      } else if (desc.includes('SO')) {
+        displayType = 'SLIP ON FLANGE';
+      } else if (desc.includes('SW')) {
+        displayType = 'SOCKET WELD FLANGE';
+      } else {
+        displayType = 'FLANGE';
+      }
+    }
+
+    if (facingType === '-') {
+      const desc = description.toUpperCase();
+      if (desc.includes('RF')) {
+        facingType = 'RAISED FACE';
+      } else if (desc.includes('FF')) {
+        facingType = 'FLAT FACE';
+      } else if (desc.includes('RTJ')) {
+        facingType = 'RING TYPE JOINT';
+      }
+    }
+
+    // 원본 설명에서 스케줄 추출
+    let schedule = '-';
+    const upperDesc = description.toUpperCase();
+    
+    // SCH 40, SCH 80 등의 패턴 찾기
+    if (upperDesc.includes('SCH')) {
+      const schMatch = description.match(/SCH\s*(\d+[A-Z]*)/i);
+      if (schMatch && schMatch[1]) {
+        schedule = `SCH ${schMatch[1]}`;
+      }
+    }
+    
+    // 압력 등급 추출
+    let pressure = '-';
+    const pressureMatch = description.match(/(\d+)LB/i);
+    if (pressureMatch) {
+      pressure = `${pressureMatch[1]}LB`;
+    }
+
+    return {
+      type: 'FLANGE',
+      subtype: displayType,  // 풀네임 플랜지 타입
+      facing: facingType,    // 새로 추가: 끝단처리 정보
+      size: material.size_spec || '-',
+      pressure: flangeDetails.pressure_rating || pressure,
+      schedule: schedule,
+      grade: material.full_material_grade || material.material_grade || '-',
+      quantity: Math.round(material.quantity || 0),
+      unit: '개',
+      isFlange: true // 플랜지 구분용 플래그
+    };
+  };
+
+  // 정렬 처리
+  const handleSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // 필터링된 및 정렬된 자재 목록
+  const getFilteredAndSortedMaterials = () => {
+    let filtered = materials.filter(material => {
+      return Object.entries(columnFilters).every(([key, filterValue]) => {
+        if (!filterValue) return true;
+        const info = parseFlangeInfo(material);
+        const value = info[key]?.toString().toLowerCase() || '';
+        return value.includes(filterValue.toLowerCase());
+      });
+    });
+
+    if (sortConfig.key) {
+      filtered.sort((a, b) => {
+        const aInfo = parseFlangeInfo(a);
+        const bInfo = parseFlangeInfo(b);
+        const aValue = aInfo[sortConfig.key] || '';
+        const bValue = bInfo[sortConfig.key] || '';
+        
+        if (sortConfig.direction === 'asc') {
+          return aValue > bValue ? 1 : -1;
+        } else {
+          return aValue < bValue ? 1 : -1;
+        }
+      });
+    }
+
+    return filtered;
+  };
+
+  // 전체 선택/해제
+  const handleSelectAll = () => {
+    const filteredMaterials = getFilteredAndSortedMaterials();
+    if (selectedMaterials.size === filteredMaterials.length) {
+      setSelectedMaterials(new Set());
+    } else {
+      setSelectedMaterials(new Set(filteredMaterials.map(m => m.id)));
+    }
+  };
+
+  // 개별 선택
+  const handleMaterialSelect = (materialId) => {
+    const newSelected = new Set(selectedMaterials);
+    if (newSelected.has(materialId)) {
+      newSelected.delete(materialId);
+    } else {
+      newSelected.add(materialId);
+    }
+    setSelectedMaterials(newSelected);
+  };
+
+  // 엑셀 내보내기
+  const handleExportToExcel = async () => {
+    const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
+    if (selectedMaterialsData.length === 0) {
+      alert('내보낼 자재를 선택해주세요.');
+      return;
+    }
+
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    const excelFileName = `FLANGE_Materials_${timestamp}.xlsx`;
+
+    const dataWithRequirements = selectedMaterialsData.map(material => ({
+      ...material,
+      user_requirement: userRequirements[material.id] || ''
+    }));
+
+    try {
+      await api.post('/files/save-excel', {
+        file_id: fileId,
+        category: 'FLANGE',
+        materials: dataWithRequirements,
+        filename: excelFileName,
+        user_id: user?.id
+      });
+
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'FLANGE',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+
+      alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
+    } catch (error) {
+      console.error('엑셀 저장 실패:', error);
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'FLANGE',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+    }
+  };
+
+  const filteredMaterials = getFilteredAndSortedMaterials();
+
+  // 필터 헤더 컴포넌트
+  const FilterableHeader = ({ sortKey, filterKey, children }) => (
+    <div className="filterable-header" style={{ position: 'relative' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <span
+          onClick={() => handleSort(sortKey)}
+          style={{ cursor: 'pointer', flex: 1 }}
+        >
+          {children}
+          {sortConfig.key === sortKey && (
+            <span style={{ marginLeft: '4px' }}>
+              {sortConfig.direction === 'asc' ? '↑' : '↓'}
+            </span>
+          )}
+        </span>
+        <button
+          onClick={() => setShowFilterDropdown(showFilterDropdown === filterKey ? null : filterKey)}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '2px',
+            fontSize: '12px',
+            color: '#6b7280'
+          }}
+        >
+          🔍
+        </button>
+      </div>
+      {showFilterDropdown === filterKey && (
+        <div style={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          background: 'white',
+          border: '1px solid #e2e8f0',
+          borderRadius: '6px',
+          padding: '8px',
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          zIndex: 1000,
+          minWidth: '150px'
+        }}>
+          <input
+            type="text"
+            placeholder={`Filter ${children}...`}
+            value={columnFilters[filterKey] || ''}
+            onChange={(e) => setColumnFilters({
+              ...columnFilters,
+              [filterKey]: e.target.value
+            })}
+            style={{
+              width: '100%',
+              padding: '4px 8px',
+              border: '1px solid #d1d5db',
+              borderRadius: '4px',
+              fontSize: '12px'
+            }}
+            autoFocus
+          />
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div style={{ padding: '32px' }}>
+      {/* 헤더 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <div>
+          <h3 style={{ 
+            fontSize: '24px', 
+            fontWeight: '700', 
+            color: '#0f172a', 
+            margin: '0 0 8px 0' 
+          }}>
+            Flange Materials
+          </h3>
+          <p style={{ 
+            fontSize: '14px', 
+            color: '#64748b', 
+            margin: 0 
+          }}>
+            {filteredMaterials.length} items • {selectedMaterials.size} selected
+          </p>
+        </div>
+        
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            onClick={handleSelectAll}
+            style={{
+              background: 'white',
+              color: '#6b7280',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            {selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
+          </button>
+          
+          <button
+            onClick={handleExportToExcel}
+            disabled={selectedMaterials.size === 0}
+            style={{
+              background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)' : '#e5e7eb',
+              color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            Export to Excel ({selectedMaterials.size})
+          </button>
+        </div>
+      </div>
+
+      {/* 테이블 */}
+      <div style={{ 
+        background: 'white', 
+        borderRadius: '12px', 
+        overflow: 'hidden',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
+      }}>
+        {/* 헤더 */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '50px 1fr 200px 150px 120px 100px 120px 150px 80px 80px 200px',
+          gap: '12px',
+          padding: '16px',
+          background: '#f8fafc',
+          borderBottom: '1px solid #e2e8f0',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: '#374151'
+        }}>
+          <div>
+            <input
+              type="checkbox"
+              checked={selectedMaterials.size === filteredMaterials.length && filteredMaterials.length > 0}
+              onChange={handleSelectAll}
+              style={{ cursor: 'pointer' }}
+            />
+          </div>
+          <FilterableHeader sortKey="subtype" filterKey="subtype">Type</FilterableHeader>
+          <FilterableHeader sortKey="facing" filterKey="facing">Facing</FilterableHeader>
+          <FilterableHeader sortKey="size" filterKey="size">Size</FilterableHeader>
+          <FilterableHeader sortKey="pressure" filterKey="pressure">Pressure</FilterableHeader>
+          <FilterableHeader sortKey="schedule" filterKey="schedule">Schedule</FilterableHeader>
+          <FilterableHeader sortKey="grade" filterKey="grade">Material Grade</FilterableHeader>
+          <FilterableHeader sortKey="quantity" filterKey="quantity">Quantity</FilterableHeader>
+          <div>Unit</div>
+          <div>User Requirement</div>
+        </div>
+
+        {/* 데이터 행들 */}
+        <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
+          {filteredMaterials.map((material, index) => {
+            const info = parseFlangeInfo(material);
+            const isSelected = selectedMaterials.has(material.id);
+            const isPurchased = purchasedMaterials.has(material.id);
+            
+            return (
+              <div
+                key={material.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '50px 1fr 200px 150px 120px 100px 120px 150px 80px 80px 200px',
+                  gap: '12px',
+                  padding: '16px',
+                  borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
+                  background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
+                  transition: 'background 0.15s ease'
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = '#f8fafc';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = 'white';
+                  }
+                }}
+              >
+                <div>
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => handleMaterialSelect(material.id)}
+                    style={{ cursor: 'pointer' }}
+                  />
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  FLANGE
+                  {isPurchased && (
+                    <span style={{
+                      marginLeft: '8px',
+                      padding: '2px 6px',
+                      background: '#fbbf24',
+                      color: '#92400e',
+                      borderRadius: '4px',
+                      fontSize: '10px',
+                      fontWeight: '500'
+                    }}>
+                      PURCHASED
+                    </span>
+                  )}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
+                  {info.subtype}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.facing}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.size}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.pressure}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.schedule}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.grade}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
+                  {info.quantity}
+                </div>
+                <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                  {info.unit}
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    value={userRequirements[material.id] || ''}
+                    onChange={(e) => setUserRequirements({
+                      ...userRequirements,
+                      [material.id]: e.target.value
+                    })}
+                    placeholder="Enter requirement..."
+                    style={{
+                      width: '100%',
+                      padding: '6px 8px',
+                      border: '1px solid #d1d5db',
+                      borderRadius: '4px',
+                      fontSize: '12px'
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredMaterials.length === 0 && (
+        <div style={{
+          textAlign: 'center',
+          padding: '60px 20px',
+          color: '#64748b'
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔩</div>
+          <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+            No Flange Materials Found
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            {Object.keys(columnFilters).some(key => columnFilters[key]) 
+              ? 'Try adjusting your filters' 
+              : 'No flange materials available in this BOM'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FlangeMaterialsView;

frontend/src/components/bom/materials/GasketMaterialsView.jsx

@@ -0,0 +1,396 @@
+import React, { useState } from 'react';
+import { exportMaterialsToExcel } from '../../../utils/excelExport';
+import api from '../../../api';
+import { FilterableHeader } from '../shared';
+
+const GasketMaterialsView = ({ 
+  materials, 
+  selectedMaterials, 
+  setSelectedMaterials,
+  userRequirements,
+  setUserRequirements,
+  purchasedMaterials,
+  fileId,
+  user 
+}) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+  const [columnFilters, setColumnFilters] = useState({});
+  const [showFilterDropdown, setShowFilterDropdown] = useState(null);
+
+  const parseGasketInfo = (material) => {
+    const qty = Math.round(material.quantity || 0);
+    const purchaseQty = Math.ceil(qty * 1.05 / 5) * 5; // 5% 여유율 + 5의 배수
+    
+    // original_description에서 재질 정보 파싱 (기존 NewMaterialsPage와 동일)
+    const description = material.original_description || '';
+    let materialStructure = '-'; // H/F/I/O 부분
+    let materialDetail = '-'; // SS304/GRAPHITE/CS/CS 부분
+    
+    // H/F/I/O와 재질 상세 정보 추출
+    const materialMatch = description.match(/H\/F\/I\/O\s+(.+?)(?:,|$)/);
+    if (materialMatch) {
+      materialStructure = 'H/F/I/O';
+      materialDetail = materialMatch[1].trim();
+      // 두께 정보 제거 (별도 추출)
+      materialDetail = materialDetail.replace(/,?\s*\d+(?:\.\d+)?mm$/, '').trim();
+    }
+    
+    // 압력 정보 추출
+    let pressure = '-';
+    const pressureMatch = description.match(/(\d+LB)/);
+    if (pressureMatch) {
+      pressure = pressureMatch[1];
+    }
+    
+    // 두께 정보 추출
+    let thickness = '-';
+    const thicknessMatch = description.match(/(\d+(?:\.\d+)?)\s*mm/i);
+    if (thicknessMatch) {
+      thickness = thicknessMatch[1] + 'mm';
+    }
+    
+    return {
+      type: 'GASKET',
+      subtype: 'SWG', // 항상 SWG로 표시
+      size: material.size_spec || '-',
+      pressure: pressure,
+      schedule: thickness, // 두께를 schedule 열에 표시
+      materialStructure: materialStructure,
+      materialDetail: materialDetail,
+      thickness: thickness,
+      grade: materialDetail, // 재질 상세를 grade로 표시
+      quantity: purchaseQty,
+      unit: '개',
+      isGasket: true
+    };
+  };
+
+  // 정렬 처리
+  const handleSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // 필터링된 및 정렬된 자재 목록
+  const getFilteredAndSortedMaterials = () => {
+    let filtered = materials.filter(material => {
+      return Object.entries(columnFilters).every(([key, filterValue]) => {
+        if (!filterValue) return true;
+        const info = parseGasketInfo(material);
+        const value = info[key]?.toString().toLowerCase() || '';
+        return value.includes(filterValue.toLowerCase());
+      });
+    });
+
+    if (sortConfig.key) {
+      filtered.sort((a, b) => {
+        const aInfo = parseGasketInfo(a);
+        const bInfo = parseGasketInfo(b);
+        const aValue = aInfo[sortConfig.key] || '';
+        const bValue = bInfo[sortConfig.key] || '';
+        
+        if (sortConfig.direction === 'asc') {
+          return aValue > bValue ? 1 : -1;
+        } else {
+          return aValue < bValue ? 1 : -1;
+        }
+      });
+    }
+
+    return filtered;
+  };
+
+  // 전체 선택/해제 (구매신청된 자재 제외)
+  const handleSelectAll = () => {
+    const filteredMaterials = getFilteredAndSortedMaterials();
+    const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+    
+    if (selectedMaterials.size === selectableMaterials.length) {
+      setSelectedMaterials(new Set());
+    } else {
+      setSelectedMaterials(new Set(selectableMaterials.map(m => m.id)));
+    }
+  };
+
+  // 개별 선택 (구매신청된 자재는 선택 불가)
+  const handleMaterialSelect = (materialId) => {
+    if (purchasedMaterials.has(materialId)) {
+      return; // 구매신청된 자재는 선택 불가
+    }
+    
+    const newSelected = new Set(selectedMaterials);
+    if (newSelected.has(materialId)) {
+      newSelected.delete(materialId);
+    } else {
+      newSelected.add(materialId);
+    }
+    setSelectedMaterials(newSelected);
+  };
+
+  // 엑셀 내보내기
+  const handleExportToExcel = async () => {
+    const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
+    if (selectedMaterialsData.length === 0) {
+      alert('내보낼 자재를 선택해주세요.');
+      return;
+    }
+
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    const excelFileName = `GASKET_Materials_${timestamp}.xlsx`;
+
+    const dataWithRequirements = selectedMaterialsData.map(material => ({
+      ...material,
+      user_requirement: userRequirements[material.id] || ''
+    }));
+
+    try {
+      await api.post('/files/save-excel', {
+        file_id: fileId,
+        category: 'GASKET',
+        materials: dataWithRequirements,
+        filename: excelFileName,
+        user_id: user?.id
+      });
+
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'GASKET',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+
+      alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
+    } catch (error) {
+      console.error('엑셀 저장 실패:', error);
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'GASKET',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+    }
+  };
+
+  const filteredMaterials = getFilteredAndSortedMaterials();
+
+  return (
+    <div style={{ padding: '32px' }}>
+      {/* 헤더 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <div>
+          <h3 style={{ 
+            fontSize: '24px', 
+            fontWeight: '700', 
+            color: '#0f172a', 
+            margin: '0 0 8px 0' 
+          }}>
+            Gasket Materials
+          </h3>
+          <p style={{ 
+            fontSize: '14px', 
+            color: '#64748b', 
+            margin: 0 
+          }}>
+            {filteredMaterials.length} items • {selectedMaterials.size} selected
+          </p>
+        </div>
+        
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            onClick={handleSelectAll}
+            style={{
+              background: 'white',
+              color: '#6b7280',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            {selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
+          </button>
+          
+          <button
+            onClick={handleExportToExcel}
+            disabled={selectedMaterials.size === 0}
+            style={{
+              background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)' : '#e5e7eb',
+              color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            Export to Excel ({selectedMaterials.size})
+          </button>
+        </div>
+      </div>
+
+      {/* 테이블 */}
+      <div style={{ 
+        background: 'white', 
+        borderRadius: '12px', 
+        overflow: 'hidden',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
+      }}>
+        {/* 헤더 */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+          gap: '16px',
+          padding: '16px',
+          background: '#f8fafc',
+          borderBottom: '1px solid #e2e8f0',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: '#374151'
+        }}>
+          <div>
+            <input
+              type="checkbox"
+              checked={(() => {
+                const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+                return selectedMaterials.size === selectableMaterials.length && selectableMaterials.length > 0;
+              })()}
+              onChange={handleSelectAll}
+              style={{ cursor: 'pointer' }}
+            />
+          </div>
+          <FilterableHeader sortKey="subtype" filterKey="subtype">Type</FilterableHeader>
+          <FilterableHeader sortKey="size" filterKey="size">Size</FilterableHeader>
+          <FilterableHeader sortKey="pressure" filterKey="pressure">Pressure</FilterableHeader>
+          <FilterableHeader sortKey="schedule" filterKey="schedule">Thickness</FilterableHeader>
+          <FilterableHeader sortKey="grade" filterKey="grade">Material Grade</FilterableHeader>
+          <FilterableHeader sortKey="quantity" filterKey="quantity">Quantity</FilterableHeader>
+          <div>Unit</div>
+          <div>User Requirement</div>
+        </div>
+
+        {/* 데이터 행들 */}
+        <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
+          {filteredMaterials.map((material, index) => {
+            const info = parseGasketInfo(material);
+            const isSelected = selectedMaterials.has(material.id);
+            const isPurchased = purchasedMaterials.has(material.id);
+            
+            return (
+              <div
+                key={material.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+                  gap: '16px',
+                  padding: '16px',
+                  borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
+                  background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
+                  transition: 'background 0.15s ease'
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = '#f8fafc';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = 'white';
+                  }
+                }}
+              >
+                <div>
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => handleMaterialSelect(material.id)}
+                    disabled={isPurchased}
+                    style={{ 
+                      cursor: isPurchased ? 'not-allowed' : 'pointer',
+                      opacity: isPurchased ? 0.5 : 1
+                    }}
+                  />
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
+                  {info.subtype}
+                  {isPurchased && (
+                    <span style={{
+                      marginLeft: '8px',
+                      padding: '2px 6px',
+                      background: '#fbbf24',
+                      color: '#92400e',
+                      borderRadius: '4px',
+                      fontSize: '10px',
+                      fontWeight: '500'
+                    }}>
+                      PURCHASED
+                    </span>
+                  )}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.size}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.pressure}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.schedule}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.grade}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
+                  {info.quantity}
+                </div>
+                <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                  {info.unit}
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    value={userRequirements[material.id] || ''}
+                    onChange={(e) => setUserRequirements({
+                      ...userRequirements,
+                      [material.id]: e.target.value
+                    })}
+                    placeholder="Enter requirement..."
+                    style={{
+                      width: '100%',
+                      padding: '6px 8px',
+                      border: '1px solid #d1d5db',
+                      borderRadius: '4px',
+                      fontSize: '12px'
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredMaterials.length === 0 && (
+        <div style={{
+          textAlign: 'center',
+          padding: '60px 20px',
+          color: '#64748b'
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>⭕</div>
+          <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+            No Gasket Materials Found
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            {Object.keys(columnFilters).some(key => columnFilters[key]) 
+              ? 'Try adjusting your filters' 
+              : 'No gasket materials available in this BOM'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GasketMaterialsView;

frontend/src/components/bom/materials/PipeMaterialsView.jsx

@@ -0,0 +1,525 @@
+import React, { useState } from 'react';
+import { exportMaterialsToExcel } from '../../../utils/excelExport';
+import api from '../../../api';
+import { FilterableHeader, MaterialTable } from '../shared';
+
+const PipeMaterialsView = ({ 
+  materials, 
+  selectedMaterials, 
+  setSelectedMaterials,
+  userRequirements,
+  setUserRequirements,
+  purchasedMaterials,
+  fileId,
+  user,
+  onNavigate 
+}) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+  const [columnFilters, setColumnFilters] = useState({});
+  const [showFilterDropdown, setShowFilterDropdown] = useState(null);
+
+  // 파이프 구매 수량 계산 (기존 로직 복원)
+  const calculatePipePurchase = (material) => {
+    const pipeDetails = material.pipe_details || {};
+    const totalLength = pipeDetails.length || material.length || 0;
+    const standardLength = 6; // 표준 6M
+    
+    const purchaseCount = Math.ceil(totalLength / standardLength);
+    const totalPurchaseLength = purchaseCount * standardLength;
+    const wasteLength = totalPurchaseLength - totalLength;
+    const wastePercentage = totalLength > 0 ? (wasteLength / totalLength * 100) : 0;
+    
+    return {
+      totalLength,
+      standardLength,
+      purchaseCount,
+      totalPurchaseLength,
+      wasteLength,
+      wastePercentage
+    };
+  };
+
+  // 파이프 정보 파싱 (기존 상세 로직 복원)
+  const parsePipeInfo = (material) => {
+    const calc = calculatePipePurchase(material);
+    const pipeDetails = material.pipe_details || {};
+    
+    return {
+      type: 'PIPE',
+      subtype: pipeDetails.manufacturing_method || 'SMLS',
+      size: material.size_spec || '-',
+      schedule: pipeDetails.schedule || material.schedule || '-',
+      grade: material.full_material_grade || material.material_grade || '-',
+      length: calc.totalLength,
+      quantity: calc.purchaseCount,
+      unit: '본',
+      details: calc,
+      isPipe: true
+    };
+  };
+
+  // 정렬 처리
+  const handleSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // 필터링된 및 정렬된 자재 목록
+  const getFilteredAndSortedMaterials = () => {
+    let filtered = materials.filter(material => {
+      return Object.entries(columnFilters).every(([key, filterValue]) => {
+        if (!filterValue) return true;
+        const info = parsePipeInfo(material);
+        const value = info[key]?.toString().toLowerCase() || '';
+        return value.includes(filterValue.toLowerCase());
+      });
+    });
+
+    if (sortConfig.key) {
+      filtered.sort((a, b) => {
+        const aInfo = parsePipeInfo(a);
+        const bInfo = parsePipeInfo(b);
+        const aValue = aInfo[sortConfig.key] || '';
+        const bValue = bInfo[sortConfig.key] || '';
+        
+        if (sortConfig.direction === 'asc') {
+          return aValue > bValue ? 1 : -1;
+        } else {
+          return aValue < bValue ? 1 : -1;
+        }
+      });
+    }
+
+    return filtered;
+  };
+
+  // 전체 선택/해제
+  const handleSelectAll = () => {
+    const filteredMaterials = getFilteredAndSortedMaterials();
+    if (selectedMaterials.size === filteredMaterials.length) {
+      setSelectedMaterials(new Set());
+    } else {
+      setSelectedMaterials(new Set(filteredMaterials.map(m => m.id)));
+    }
+  };
+
+  // 개별 선택
+  const handleMaterialSelect = (materialId) => {
+    const newSelected = new Set(selectedMaterials);
+    if (newSelected.has(materialId)) {
+      newSelected.delete(materialId);
+    } else {
+      newSelected.add(materialId);
+    }
+    setSelectedMaterials(newSelected);
+  };
+
+  // 엑셀 내보내기
+  const handleExportToExcel = async () => {
+    const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
+    if (selectedMaterialsData.length === 0) {
+      alert('내보낼 자재를 선택해주세요.');
+      return;
+    }
+
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    const excelFileName = `PIPE_Materials_${timestamp}.xlsx`;
+
+    // 사용자 요구사항 포함
+    const dataWithRequirements = selectedMaterialsData.map(material => ({
+      ...material,
+      user_requirement: userRequirements[material.id] || ''
+    }));
+
+    try {
+      // 서버에 엑셀 파일 저장 요청
+      await api.post('/files/save-excel', {
+        file_id: fileId,
+        category: 'PIPE',
+        materials: dataWithRequirements,
+        filename: excelFileName,
+        user_id: user?.id
+      });
+
+      // 클라이언트에서 다운로드
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'PIPE',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+
+      alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
+    } catch (error) {
+      console.error('엑셀 저장 실패:', error);
+      // 실패해도 다운로드는 진행
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'PIPE',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+    }
+  };
+
+  const filteredMaterials = getFilteredAndSortedMaterials();
+
+  // 필터 헤더 컴포넌트
+  const FilterableHeader = ({ sortKey, filterKey, children }) => (
+    <div className="filterable-header" style={{ position: 'relative' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <span
+          onClick={() => handleSort(sortKey)}
+          style={{ cursor: 'pointer', flex: 1 }}
+        >
+          {children}
+          {sortConfig.key === sortKey && (
+            <span style={{ marginLeft: '4px' }}>
+              {sortConfig.direction === 'asc' ? '↑' : '↓'}
+            </span>
+          )}
+        </span>
+        <button
+          onClick={() => setShowFilterDropdown(showFilterDropdown === filterKey ? null : filterKey)}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '2px',
+            fontSize: '12px',
+            color: '#6b7280'
+          }}
+        >
+          🔍
+        </button>
+      </div>
+      {showFilterDropdown === filterKey && (
+        <div style={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          background: 'white',
+          border: '1px solid #e2e8f0',
+          borderRadius: '6px',
+          padding: '8px',
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          zIndex: 1000,
+          minWidth: '150px'
+        }}>
+          <input
+            type="text"
+            placeholder={`Filter ${children}...`}
+            value={columnFilters[filterKey] || ''}
+            onChange={(e) => setColumnFilters({
+              ...columnFilters,
+              [filterKey]: e.target.value
+            })}
+            style={{
+              width: '100%',
+              padding: '4px 8px',
+              border: '1px solid #d1d5db',
+              borderRadius: '4px',
+              fontSize: '12px'
+            }}
+            autoFocus
+          />
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div style={{ padding: '32px' }}>
+      {/* 헤더 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <div>
+          <h3 style={{ 
+            fontSize: '24px', 
+            fontWeight: '700', 
+            color: '#0f172a', 
+            margin: '0 0 8px 0' 
+          }}>
+            Pipe Materials
+          </h3>
+          <p style={{ 
+            fontSize: '14px', 
+            color: '#64748b', 
+            margin: 0 
+          }}>
+            {filteredMaterials.length} items • {selectedMaterials.size} selected
+          </p>
+        </div>
+        
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            onClick={handleSelectAll}
+            style={{
+              background: 'white',
+              color: '#6b7280',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            {selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
+          </button>
+          
+          <button
+            onClick={handleExportToExcel}
+            disabled={selectedMaterials.size === 0}
+            style={{
+              background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)' : '#e5e7eb',
+              color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            Export to Excel ({selectedMaterials.size})
+          </button>
+        </div>
+      </div>
+
+      {/* 테이블 */}
+      <div style={{ 
+        background: 'white', 
+        borderRadius: '12px', 
+        overflow: 'hidden',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
+      }}>
+        {/* 헤더 */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '50px 1fr 120px 120px 120px 150px 100px 80px 80px 200px',
+          gap: '16px',
+          padding: '16px',
+          background: '#f8fafc',
+          borderBottom: '1px solid #e2e8f0',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: '#374151'
+        }}>
+          <div>
+            <input
+              type="checkbox"
+              checked={selectedMaterials.size === filteredMaterials.length && filteredMaterials.length > 0}
+              onChange={handleSelectAll}
+              style={{ cursor: 'pointer' }}
+            />
+          </div>
+          <FilterableHeader 
+            sortKey="type" 
+            filterKey="type"
+            sortConfig={sortConfig}
+            onSort={handleSort}
+            columnFilters={columnFilters}
+            onFilterChange={setColumnFilters}
+            showFilterDropdown={showFilterDropdown}
+            setShowFilterDropdown={setShowFilterDropdown}
+          >
+            Type
+          </FilterableHeader>
+          <FilterableHeader 
+            sortKey="subtype" 
+            filterKey="subtype"
+            sortConfig={sortConfig}
+            onSort={handleSort}
+            columnFilters={columnFilters}
+            onFilterChange={setColumnFilters}
+            showFilterDropdown={showFilterDropdown}
+            setShowFilterDropdown={setShowFilterDropdown}
+          >
+            Subtype
+          </FilterableHeader>
+          <FilterableHeader 
+            sortKey="size" 
+            filterKey="size"
+            sortConfig={sortConfig}
+            onSort={handleSort}
+            columnFilters={columnFilters}
+            onFilterChange={setColumnFilters}
+            showFilterDropdown={showFilterDropdown}
+            setShowFilterDropdown={setShowFilterDropdown}
+          >
+            Size
+          </FilterableHeader>
+          <FilterableHeader 
+            sortKey="schedule" 
+            filterKey="schedule"
+            sortConfig={sortConfig}
+            onSort={handleSort}
+            columnFilters={columnFilters}
+            onFilterChange={setColumnFilters}
+            showFilterDropdown={showFilterDropdown}
+            setShowFilterDropdown={setShowFilterDropdown}
+          >
+            Schedule
+          </FilterableHeader>
+          <FilterableHeader 
+            sortKey="grade" 
+            filterKey="grade"
+            sortConfig={sortConfig}
+            onSort={handleSort}
+            columnFilters={columnFilters}
+            onFilterChange={setColumnFilters}
+            showFilterDropdown={showFilterDropdown}
+            setShowFilterDropdown={setShowFilterDropdown}
+          >
+            Material Grade
+          </FilterableHeader>
+          <FilterableHeader 
+            sortKey="length" 
+            filterKey="length"
+            sortConfig={sortConfig}
+            onSort={handleSort}
+            columnFilters={columnFilters}
+            onFilterChange={setColumnFilters}
+            showFilterDropdown={showFilterDropdown}
+            setShowFilterDropdown={setShowFilterDropdown}
+          >
+            Length (M)
+          </FilterableHeader>
+          <FilterableHeader 
+            sortKey="quantity" 
+            filterKey="quantity"
+            sortConfig={sortConfig}
+            onSort={handleSort}
+            columnFilters={columnFilters}
+            onFilterChange={setColumnFilters}
+            showFilterDropdown={showFilterDropdown}
+            setShowFilterDropdown={setShowFilterDropdown}
+          >
+            Quantity
+          </FilterableHeader>
+          <div>Unit</div>
+          <div>User Requirement</div>
+        </div>
+
+        {/* 데이터 행들 */}
+        <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
+          {filteredMaterials.map((material, index) => {
+            const info = parsePipeInfo(material);
+            const isSelected = selectedMaterials.has(material.id);
+            const isPurchased = purchasedMaterials.has(material.id);
+            
+            return (
+              <div
+                key={material.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '50px 1fr 120px 120px 120px 150px 100px 80px 80px 200px',
+                  gap: '16px',
+                  padding: '16px',
+                  borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
+                  background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
+                  transition: 'background 0.15s ease'
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = '#f8fafc';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = 'white';
+                  }
+                }}
+              >
+                <div>
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => handleMaterialSelect(material.id)}
+                    style={{ cursor: 'pointer' }}
+                  />
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  PIPE
+                  {isPurchased && (
+                    <span style={{
+                      marginLeft: '8px',
+                      padding: '2px 6px',
+                      background: '#fbbf24',
+                      color: '#92400e',
+                      borderRadius: '4px',
+                      fontSize: '10px',
+                      fontWeight: '500'
+                    }}>
+                      PURCHASED
+                    </span>
+                  )}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
+                  {info.subtype}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.size}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.schedule}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.grade}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', textAlign: 'right' }}>
+                  {info.length.toFixed(2)}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
+                  {info.quantity}
+                </div>
+                <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                  {info.unit}
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    value={userRequirements[material.id] || ''}
+                    onChange={(e) => setUserRequirements({
+                      ...userRequirements,
+                      [material.id]: e.target.value
+                    })}
+                    placeholder="Enter requirement..."
+                    style={{
+                      width: '100%',
+                      padding: '6px 8px',
+                      border: '1px solid #d1d5db',
+                      borderRadius: '4px',
+                      fontSize: '12px'
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredMaterials.length === 0 && (
+        <div style={{
+          textAlign: 'center',
+          padding: '60px 20px',
+          color: '#64748b'
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔧</div>
+          <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+            No Pipe Materials Found
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            {Object.keys(columnFilters).some(key => columnFilters[key]) 
+              ? 'Try adjusting your filters' 
+              : 'No pipe materials available in this BOM'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PipeMaterialsView;

frontend/src/components/bom/materials/SupportMaterialsView.jsx

@@ -0,0 +1,377 @@
+import React, { useState } from 'react';
+import { exportMaterialsToExcel } from '../../../utils/excelExport';
+import api from '../../../api';
+import { FilterableHeader } from '../shared';
+
+const SupportMaterialsView = ({ 
+  materials, 
+  selectedMaterials, 
+  setSelectedMaterials,
+  userRequirements,
+  setUserRequirements,
+  purchasedMaterials,
+  fileId,
+  user 
+}) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+  const [columnFilters, setColumnFilters] = useState({});
+  const [showFilterDropdown, setShowFilterDropdown] = useState(null);
+
+  const parseSupportInfo = (material) => {
+    const desc = material.original_description || '';
+    const isUrethaneBlock = desc.includes('URETHANE') || desc.includes('BLOCK SHOE') || desc.includes('우레탄');
+    const isClamp = desc.includes('CLAMP') || desc.includes('클램프');
+    
+    let subtypeText = '';
+    if (isUrethaneBlock) {
+      subtypeText = '우레탄블럭슈';
+    } else if (isClamp) {
+      subtypeText = '클램프';
+    } else {
+      subtypeText = '유볼트';
+    }
+    
+    return {
+      type: 'SUPPORT',
+      subtype: subtypeText,
+      size: material.main_nom || material.size_inch || material.size_spec || '-',
+      pressure: '-', // 서포트는 압력 등급 없음
+      schedule: '-', // 서포트는 스케줄 없음
+      description: material.original_description || '-',
+      grade: material.full_material_grade || material.material_grade || '-',
+      additionalReq: '-',
+      quantity: Math.round(material.quantity || 0),
+      unit: '개',
+      isSupport: true
+    };
+  };
+
+  // 정렬 처리
+  const handleSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // 필터링된 및 정렬된 자재 목록
+  const getFilteredAndSortedMaterials = () => {
+    let filtered = materials.filter(material => {
+      return Object.entries(columnFilters).every(([key, filterValue]) => {
+        if (!filterValue) return true;
+        const info = parseSupportInfo(material);
+        const value = info[key]?.toString().toLowerCase() || '';
+        return value.includes(filterValue.toLowerCase());
+      });
+    });
+
+    if (sortConfig.key) {
+      filtered.sort((a, b) => {
+        const aInfo = parseSupportInfo(a);
+        const bInfo = parseSupportInfo(b);
+        const aValue = aInfo[sortConfig.key] || '';
+        const bValue = bInfo[sortConfig.key] || '';
+        
+        if (sortConfig.direction === 'asc') {
+          return aValue > bValue ? 1 : -1;
+        } else {
+          return aValue < bValue ? 1 : -1;
+        }
+      });
+    }
+
+    return filtered;
+  };
+
+  // 전체 선택/해제 (구매신청된 자재 제외)
+  const handleSelectAll = () => {
+    const filteredMaterials = getFilteredAndSortedMaterials();
+    const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+    
+    if (selectedMaterials.size === selectableMaterials.length) {
+      setSelectedMaterials(new Set());
+    } else {
+      setSelectedMaterials(new Set(selectableMaterials.map(m => m.id)));
+    }
+  };
+
+  // 개별 선택 (구매신청된 자재는 선택 불가)
+  const handleMaterialSelect = (materialId) => {
+    if (purchasedMaterials.has(materialId)) {
+      return; // 구매신청된 자재는 선택 불가
+    }
+    
+    const newSelected = new Set(selectedMaterials);
+    if (newSelected.has(materialId)) {
+      newSelected.delete(materialId);
+    } else {
+      newSelected.add(materialId);
+    }
+    setSelectedMaterials(newSelected);
+  };
+
+  // 엑셀 내보내기
+  const handleExportToExcel = async () => {
+    const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
+    if (selectedMaterialsData.length === 0) {
+      alert('내보낼 자재를 선택해주세요.');
+      return;
+    }
+
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    const excelFileName = `SUPPORT_Materials_${timestamp}.xlsx`;
+
+    const dataWithRequirements = selectedMaterialsData.map(material => ({
+      ...material,
+      user_requirement: userRequirements[material.id] || ''
+    }));
+
+    try {
+      await api.post('/files/save-excel', {
+        file_id: fileId,
+        category: 'SUPPORT',
+        materials: dataWithRequirements,
+        filename: excelFileName,
+        user_id: user?.id
+      });
+
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'SUPPORT',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+
+      alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
+    } catch (error) {
+      console.error('엑셀 저장 실패:', error);
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'SUPPORT',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+    }
+  };
+
+  const filteredMaterials = getFilteredAndSortedMaterials();
+
+  return (
+    <div style={{ padding: '32px' }}>
+      {/* 헤더 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <div>
+          <h3 style={{ 
+            fontSize: '24px', 
+            fontWeight: '700', 
+            color: '#0f172a', 
+            margin: '0 0 8px 0' 
+          }}>
+            Support Materials
+          </h3>
+          <p style={{ 
+            fontSize: '14px', 
+            color: '#64748b', 
+            margin: 0 
+          }}>
+            {filteredMaterials.length} items • {selectedMaterials.size} selected
+          </p>
+        </div>
+        
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            onClick={handleSelectAll}
+            style={{
+              background: 'white',
+              color: '#6b7280',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            {selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
+          </button>
+          
+          <button
+            onClick={handleExportToExcel}
+            disabled={selectedMaterials.size === 0}
+            style={{
+              background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)' : '#e5e7eb',
+              color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            Export to Excel ({selectedMaterials.size})
+          </button>
+        </div>
+      </div>
+
+      {/* 테이블 */}
+      <div style={{ 
+        background: 'white', 
+        borderRadius: '12px', 
+        overflow: 'hidden',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
+      }}>
+        {/* 헤더 */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+          gap: '16px',
+          padding: '16px',
+          background: '#f8fafc',
+          borderBottom: '1px solid #e2e8f0',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: '#374151'
+        }}>
+          <div>
+            <input
+              type="checkbox"
+              checked={(() => {
+                const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+                return selectedMaterials.size === selectableMaterials.length && selectableMaterials.length > 0;
+              })()}
+              onChange={handleSelectAll}
+              style={{ cursor: 'pointer' }}
+            />
+          </div>
+          <FilterableHeader sortKey="subtype" filterKey="subtype">Type</FilterableHeader>
+          <FilterableHeader sortKey="size" filterKey="size">Size</FilterableHeader>
+          <FilterableHeader sortKey="pressure" filterKey="pressure">Pressure</FilterableHeader>
+          <FilterableHeader sortKey="schedule" filterKey="schedule">Schedule</FilterableHeader>
+          <FilterableHeader sortKey="grade" filterKey="grade">Material Grade</FilterableHeader>
+          <FilterableHeader sortKey="quantity" filterKey="quantity">Quantity</FilterableHeader>
+          <div>Unit</div>
+          <div>User Requirement</div>
+        </div>
+
+        {/* 데이터 행들 */}
+        <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
+          {filteredMaterials.map((material, index) => {
+            const info = parseSupportInfo(material);
+            const isSelected = selectedMaterials.has(material.id);
+            const isPurchased = purchasedMaterials.has(material.id);
+            
+            return (
+              <div
+                key={material.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+                  gap: '16px',
+                  padding: '16px',
+                  borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
+                  background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
+                  transition: 'background 0.15s ease'
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = '#f8fafc';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = 'white';
+                  }
+                }}
+              >
+                <div>
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => handleMaterialSelect(material.id)}
+                    disabled={isPurchased}
+                    style={{ 
+                      cursor: isPurchased ? 'not-allowed' : 'pointer',
+                      opacity: isPurchased ? 0.5 : 1
+                    }}
+                  />
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
+                  {info.subtype}
+                  {isPurchased && (
+                    <span style={{
+                      marginLeft: '8px',
+                      padding: '2px 6px',
+                      background: '#fbbf24',
+                      color: '#92400e',
+                      borderRadius: '4px',
+                      fontSize: '10px',
+                      fontWeight: '500'
+                    }}>
+                      PURCHASED
+                    </span>
+                  )}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.size}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.pressure}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.schedule}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.grade}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
+                  {info.quantity}
+                </div>
+                <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                  {info.unit}
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    value={userRequirements[material.id] || ''}
+                    onChange={(e) => setUserRequirements({
+                      ...userRequirements,
+                      [material.id]: e.target.value
+                    })}
+                    placeholder="Enter requirement..."
+                    style={{
+                      width: '100%',
+                      padding: '6px 8px',
+                      border: '1px solid #d1d5db',
+                      borderRadius: '4px',
+                      fontSize: '12px'
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredMaterials.length === 0 && (
+        <div style={{
+          textAlign: 'center',
+          padding: '60px 20px',
+          color: '#64748b'
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>🏗️</div>
+          <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+            No Support Materials Found
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            {Object.keys(columnFilters).some(key => columnFilters[key]) 
+              ? 'Try adjusting your filters' 
+              : 'No support materials available in this BOM'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SupportMaterialsView;

frontend/src/components/bom/materials/ValveMaterialsView.jsx

@@ -0,0 +1,403 @@
+import React, { useState } from 'react';
+import { exportMaterialsToExcel } from '../../../utils/excelExport';
+import api from '../../../api';
+import { FilterableHeader } from '../shared';
+
+const ValveMaterialsView = ({ 
+  materials, 
+  selectedMaterials, 
+  setSelectedMaterials,
+  userRequirements,
+  setUserRequirements,
+  purchasedMaterials,
+  fileId,
+  user 
+}) => {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+  const [columnFilters, setColumnFilters] = useState({});
+  const [showFilterDropdown, setShowFilterDropdown] = useState(null);
+
+  const parseValveInfo = (material) => {
+    const valveDetails = material.valve_details || {};
+    const description = material.original_description || '';
+    
+    // 밸브 타입 파싱 (GATE, BALL, CHECK, GLOBE 등) - 기존 NewMaterialsPage와 동일
+    let valveType = valveDetails.valve_type || '';
+    if (!valveType && description) {
+      if (description.includes('GATE')) valveType = 'GATE';
+      else if (description.includes('BALL')) valveType = 'BALL';
+      else if (description.includes('CHECK')) valveType = 'CHECK';
+      else if (description.includes('GLOBE')) valveType = 'GLOBE';
+      else if (description.includes('BUTTERFLY')) valveType = 'BUTTERFLY';
+      else if (description.includes('NEEDLE')) valveType = 'NEEDLE';
+      else if (description.includes('RELIEF')) valveType = 'RELIEF';
+    }
+    
+    // 연결 방식 파싱 (FLG, SW, THRD 등) - 기존 NewMaterialsPage와 동일
+    let connectionType = '';
+    if (description.includes('FLG')) {
+      connectionType = 'FLG';
+    } else if (description.includes('SW X THRD')) {
+      connectionType = 'SW×THRD';
+    } else if (description.includes('SW')) {
+      connectionType = 'SW';
+    } else if (description.includes('THRD')) {
+      connectionType = 'THRD';
+    } else if (description.includes('BW')) {
+      connectionType = 'BW';
+    }
+    
+    // 압력 등급 파싱
+    let pressure = '-';
+    const pressureMatch = description.match(/(\d+)LB/i);
+    if (pressureMatch) {
+      pressure = `${pressureMatch[1]}LB`;
+    }
+    
+    // 스케줄은 밸브에는 일반적으로 없음 (기본값)
+    let schedule = '-';
+    
+    return {
+      type: 'VALVE',
+      subtype: `${valveType} ${connectionType}`.trim() || 'VALVE', // 타입과 연결방식 결합
+      valveType: valveType,
+      connectionType: connectionType,
+      size: material.size_spec || '-',
+      pressure: pressure,
+      schedule: schedule,
+      grade: material.material_grade || '-',
+      quantity: Math.round(material.quantity || 0),
+      unit: '개',
+      isValve: true
+    };
+  };
+
+  // 정렬 처리
+  const handleSort = (key) => {
+    let direction = 'asc';
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({ key, direction });
+  };
+
+  // 필터링된 및 정렬된 자재 목록
+  const getFilteredAndSortedMaterials = () => {
+    let filtered = materials.filter(material => {
+      return Object.entries(columnFilters).every(([key, filterValue]) => {
+        if (!filterValue) return true;
+        const info = parseValveInfo(material);
+        const value = info[key]?.toString().toLowerCase() || '';
+        return value.includes(filterValue.toLowerCase());
+      });
+    });
+
+    if (sortConfig.key) {
+      filtered.sort((a, b) => {
+        const aInfo = parseValveInfo(a);
+        const bInfo = parseValveInfo(b);
+        const aValue = aInfo[sortConfig.key] || '';
+        const bValue = bInfo[sortConfig.key] || '';
+        
+        if (sortConfig.direction === 'asc') {
+          return aValue > bValue ? 1 : -1;
+        } else {
+          return aValue < bValue ? 1 : -1;
+        }
+      });
+    }
+
+    return filtered;
+  };
+
+  // 전체 선택/해제 (구매신청된 자재 제외)
+  const handleSelectAll = () => {
+    const filteredMaterials = getFilteredAndSortedMaterials();
+    const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+    
+    if (selectedMaterials.size === selectableMaterials.length) {
+      setSelectedMaterials(new Set());
+    } else {
+      setSelectedMaterials(new Set(selectableMaterials.map(m => m.id)));
+    }
+  };
+
+  // 개별 선택 (구매신청된 자재는 선택 불가)
+  const handleMaterialSelect = (materialId) => {
+    if (purchasedMaterials.has(materialId)) {
+      return; // 구매신청된 자재는 선택 불가
+    }
+    
+    const newSelected = new Set(selectedMaterials);
+    if (newSelected.has(materialId)) {
+      newSelected.delete(materialId);
+    } else {
+      newSelected.add(materialId);
+    }
+    setSelectedMaterials(newSelected);
+  };
+
+  // 엑셀 내보내기
+  const handleExportToExcel = async () => {
+    const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
+    if (selectedMaterialsData.length === 0) {
+      alert('내보낼 자재를 선택해주세요.');
+      return;
+    }
+
+    const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+    const excelFileName = `VALVE_Materials_${timestamp}.xlsx`;
+
+    const dataWithRequirements = selectedMaterialsData.map(material => ({
+      ...material,
+      user_requirement: userRequirements[material.id] || ''
+    }));
+
+    try {
+      await api.post('/files/save-excel', {
+        file_id: fileId,
+        category: 'VALVE',
+        materials: dataWithRequirements,
+        filename: excelFileName,
+        user_id: user?.id
+      });
+
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'VALVE',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+
+      alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
+    } catch (error) {
+      console.error('엑셀 저장 실패:', error);
+      exportMaterialsToExcel(dataWithRequirements, excelFileName, {
+        category: 'VALVE',
+        filename: excelFileName,
+        uploadDate: new Date().toLocaleDateString()
+      });
+    }
+  };
+
+  const filteredMaterials = getFilteredAndSortedMaterials();
+
+  return (
+    <div style={{ padding: '32px' }}>
+      {/* 헤더 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <div>
+          <h3 style={{ 
+            fontSize: '24px', 
+            fontWeight: '700', 
+            color: '#0f172a', 
+            margin: '0 0 8px 0' 
+          }}>
+            Valve Materials
+          </h3>
+          <p style={{ 
+            fontSize: '14px', 
+            color: '#64748b', 
+            margin: 0 
+          }}>
+            {filteredMaterials.length} items • {selectedMaterials.size} selected
+          </p>
+        </div>
+        
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            onClick={handleSelectAll}
+            style={{
+              background: 'white',
+              color: '#6b7280',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            {selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
+          </button>
+          
+          <button
+            onClick={handleExportToExcel}
+            disabled={selectedMaterials.size === 0}
+            style={{
+              background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)' : '#e5e7eb',
+              color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
+              border: 'none',
+              borderRadius: '8px',
+              padding: '10px 16px',
+              cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
+              fontSize: '14px',
+              fontWeight: '500'
+            }}
+          >
+            Export to Excel ({selectedMaterials.size})
+          </button>
+        </div>
+      </div>
+
+      {/* 테이블 */}
+      <div style={{ 
+        background: 'white', 
+        borderRadius: '12px', 
+        overflow: 'hidden',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
+      }}>
+        {/* 헤더 */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+          gap: '16px',
+          padding: '16px',
+          background: '#f8fafc',
+          borderBottom: '1px solid #e2e8f0',
+          fontSize: '14px',
+          fontWeight: '600',
+          color: '#374151'
+        }}>
+          <div>
+            <input
+              type="checkbox"
+              checked={(() => {
+                const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
+                return selectedMaterials.size === selectableMaterials.length && selectableMaterials.length > 0;
+              })()}
+              onChange={handleSelectAll}
+              style={{ cursor: 'pointer' }}
+            />
+          </div>
+          <FilterableHeader sortKey="subtype" filterKey="subtype">Type</FilterableHeader>
+          <FilterableHeader sortKey="size" filterKey="size">Size</FilterableHeader>
+          <FilterableHeader sortKey="pressure" filterKey="pressure">Pressure</FilterableHeader>
+          <FilterableHeader sortKey="schedule" filterKey="schedule">Schedule</FilterableHeader>
+          <FilterableHeader sortKey="grade" filterKey="grade">Material Grade</FilterableHeader>
+          <FilterableHeader sortKey="quantity" filterKey="quantity">Quantity</FilterableHeader>
+          <div>Unit</div>
+          <div>User Requirement</div>
+        </div>
+
+        {/* 데이터 행들 */}
+        <div style={{ maxHeight: '600px', overflowY: 'auto' }}>
+          {filteredMaterials.map((material, index) => {
+            const info = parseValveInfo(material);
+            const isSelected = selectedMaterials.has(material.id);
+            const isPurchased = purchasedMaterials.has(material.id);
+            
+            return (
+              <div
+                key={material.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
+                  gap: '16px',
+                  padding: '16px',
+                  borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
+                  background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
+                  transition: 'background 0.15s ease'
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = '#f8fafc';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected && !isPurchased) {
+                    e.target.style.background = 'white';
+                  }
+                }}
+              >
+                <div>
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => handleMaterialSelect(material.id)}
+                    disabled={isPurchased}
+                    style={{ 
+                      cursor: isPurchased ? 'not-allowed' : 'pointer',
+                      opacity: isPurchased ? 0.5 : 1
+                    }}
+                  />
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
+                  {info.subtype}
+                  {isPurchased && (
+                    <span style={{
+                      marginLeft: '8px',
+                      padding: '2px 6px',
+                      background: '#fbbf24',
+                      color: '#92400e',
+                      borderRadius: '4px',
+                      fontSize: '10px',
+                      fontWeight: '500'
+                    }}>
+                      PURCHASED
+                    </span>
+                  )}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.size}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.pressure}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.schedule}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937' }}>
+                  {info.grade}
+                </div>
+                <div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
+                  {info.quantity}
+                </div>
+                <div style={{ fontSize: '14px', color: '#6b7280' }}>
+                  {info.unit}
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    value={userRequirements[material.id] || ''}
+                    onChange={(e) => setUserRequirements({
+                      ...userRequirements,
+                      [material.id]: e.target.value
+                    })}
+                    placeholder="Enter requirement..."
+                    style={{
+                      width: '100%',
+                      padding: '6px 8px',
+                      border: '1px solid #d1d5db',
+                      borderRadius: '4px',
+                      fontSize: '12px'
+                    }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {filteredMaterials.length === 0 && (
+        <div style={{
+          textAlign: 'center',
+          padding: '60px 20px',
+          color: '#64748b'
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>🚰</div>
+          <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+            No Valve Materials Found
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            {Object.keys(columnFilters).some(key => columnFilters[key]) 
+              ? 'Try adjusting your filters' 
+              : 'No valve materials available in this BOM'}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ValveMaterialsView;

frontend/src/components/bom/materials/index.js

@@ -0,0 +1,8 @@
+// BOM Materials Components
+export { default as PipeMaterialsView } from './PipeMaterialsView';
+export { default as FittingMaterialsView } from './FittingMaterialsView';
+export { default as FlangeMaterialsView } from './FlangeMaterialsView';
+export { default as ValveMaterialsView } from './ValveMaterialsView';
+export { default as GasketMaterialsView } from './GasketMaterialsView';
+export { default as BoltMaterialsView } from './BoltMaterialsView';
+export { default as SupportMaterialsView } from './SupportMaterialsView';

frontend/src/components/bom/shared/FilterableHeader.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+const FilterableHeader = ({ 
+  sortKey, 
+  filterKey, 
+  children, 
+  sortConfig, 
+  onSort, 
+  columnFilters, 
+  onFilterChange, 
+  showFilterDropdown, 
+  setShowFilterDropdown 
+}) => {
+  return (
+    <div className="filterable-header" style={{ position: 'relative' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <span
+          onClick={() => onSort(sortKey)}
+          style={{ cursor: 'pointer', flex: 1 }}
+        >
+          {children}
+          {sortConfig.key === sortKey && (
+            <span style={{ marginLeft: '4px' }}>
+              {sortConfig.direction === 'asc' ? '↑' : '↓'}
+            </span>
+          )}
+        </span>
+        <button
+          onClick={() => setShowFilterDropdown(showFilterDropdown === filterKey ? null : filterKey)}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '2px',
+            fontSize: '12px',
+            color: '#6b7280'
+          }}
+        >
+          🔍
+        </button>
+      </div>
+      {showFilterDropdown === filterKey && (
+        <div style={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          background: 'white',
+          border: '1px solid #e2e8f0',
+          borderRadius: '6px',
+          padding: '8px',
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          zIndex: 1000,
+          minWidth: '150px'
+        }}>
+          <input
+            type="text"
+            placeholder={`Filter ${children}...`}
+            value={columnFilters[filterKey] || ''}
+            onChange={(e) => onFilterChange({
+              ...columnFilters,
+              [filterKey]: e.target.value
+            })}
+            style={{
+              width: '100%',
+              padding: '4px 8px',
+              border: '1px solid #d1d5db',
+              borderRadius: '4px',
+              fontSize: '12px'
+            }}
+            autoFocus
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FilterableHeader;

frontend/src/components/bom/shared/MaterialTable.jsx

@@ -0,0 +1,161 @@
+import React from 'react';
+
+const MaterialTable = ({ 
+  children, 
+  className = '',
+  style = {} 
+}) => {
+  return (
+    <div 
+      className={`material-table ${className}`}
+      style={{ 
+        background: 'white', 
+        borderRadius: '12px', 
+        overflow: 'hidden',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+        ...style
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const MaterialTableHeader = ({ 
+  children, 
+  gridColumns,
+  className = '' 
+}) => {
+  return (
+    <div 
+      className={`material-table-header ${className}`}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: gridColumns,
+        gap: '16px',
+        padding: '16px',
+        background: '#f8fafc',
+        borderBottom: '1px solid #e2e8f0',
+        fontSize: '14px',
+        fontWeight: '600',
+        color: '#374151'
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const MaterialTableBody = ({ 
+  children, 
+  maxHeight = '600px',
+  className = '' 
+}) => {
+  return (
+    <div 
+      className={`material-table-body ${className}`}
+      style={{ 
+        maxHeight, 
+        overflowY: 'auto' 
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const MaterialTableRow = ({ 
+  children, 
+  gridColumns,
+  isSelected = false,
+  isPurchased = false,
+  isLast = false,
+  onClick,
+  className = '' 
+}) => {
+  return (
+    <div
+      className={`material-table-row ${className}`}
+      onClick={onClick}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: gridColumns,
+        gap: '16px',
+        padding: '16px',
+        borderBottom: !isLast ? '1px solid #f1f5f9' : 'none',
+        background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
+        transition: 'background 0.15s ease',
+        cursor: onClick ? 'pointer' : 'default'
+      }}
+      onMouseEnter={(e) => {
+        if (!isSelected && !isPurchased && !onClick) {
+          e.target.style.background = '#f8fafc';
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isSelected && !isPurchased && !onClick) {
+          e.target.style.background = 'white';
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const MaterialTableCell = ({ 
+  children, 
+  align = 'left',
+  fontWeight = 'normal',
+  color = '#1f2937',
+  className = '' 
+}) => {
+  return (
+    <div 
+      className={`material-table-cell ${className}`}
+      style={{ 
+        fontSize: '14px', 
+        color, 
+        fontWeight,
+        textAlign: align 
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const MaterialTableEmpty = ({ 
+  icon = '📦',
+  title = 'No Materials Found',
+  message = 'No materials available',
+  className = '' 
+}) => {
+  return (
+    <div 
+      className={`material-table-empty ${className}`}
+      style={{
+        textAlign: 'center',
+        padding: '60px 20px',
+        color: '#64748b'
+      }}
+    >
+      <div style={{ fontSize: '48px', marginBottom: '16px' }}>{icon}</div>
+      <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+        {title}
+      </div>
+      <div style={{ fontSize: '14px' }}>
+        {message}
+      </div>
+    </div>
+  );
+};
+
+// 복합 컴포넌트로 export
+MaterialTable.Header = MaterialTableHeader;
+MaterialTable.Body = MaterialTableBody;
+MaterialTable.Row = MaterialTableRow;
+MaterialTable.Cell = MaterialTableCell;
+MaterialTable.Empty = MaterialTableEmpty;
+
+export default MaterialTable;

frontend/src/components/bom/shared/index.js

@@ -0,0 +1,3 @@
+// BOM Shared Components
+export { default as FilterableHeader } from './FilterableHeader';
+export { default as MaterialTable } from './MaterialTable';