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

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

frontend/src/pages/BOMManagementPage.jsx

@@ -0,0 +1,451 @@
+import React, { useState, useEffect } from 'react';
+import { fetchMaterials } from '../api';
+import api from '../api';
+import {
+  PipeMaterialsView,
+  FittingMaterialsView,
+  FlangeMaterialsView,
+  ValveMaterialsView,
+  GasketMaterialsView,
+  BoltMaterialsView,
+  SupportMaterialsView
+} from '../components/bom';
+import './BOMManagementPage.css';
+
+const BOMManagementPage = ({ 
+  onNavigate, 
+  selectedProject,
+  fileId,
+  jobNo,
+  bomName,
+  revision,
+  filename,
+  user
+}) => {
+  const [materials, setMaterials] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedCategory, setSelectedCategory] = useState('PIPE');
+  const [selectedMaterials, setSelectedMaterials] = useState(new Set());
+  const [exportHistory, setExportHistory] = useState([]);
+  const [availableRevisions, setAvailableRevisions] = useState([]);
+  const [currentRevision, setCurrentRevision] = useState(revision || 'Rev.0');
+  const [userRequirements, setUserRequirements] = useState({});
+  const [purchasedMaterials, setPurchasedMaterials] = useState(new Set());
+  const [error, setError] = useState(null);
+
+  // 카테고리 정의
+  const categories = [
+    { key: 'PIPE', label: 'Pipes', icon: '🔧', color: '#3b82f6' },
+    { key: 'FITTING', label: 'Fittings', icon: '⚙️', color: '#10b981' },
+    { key: 'FLANGE', label: 'Flanges', icon: '🔩', color: '#f59e0b' },
+    { key: 'VALVE', label: 'Valves', icon: '🚰', color: '#ef4444' },
+    { key: 'GASKET', label: 'Gaskets', icon: '⭕', color: '#8b5cf6' },
+    { key: 'BOLT', label: 'Bolts', icon: '🔩', color: '#6b7280' },
+    { key: 'SUPPORT', label: 'Supports', icon: '🏗️', color: '#f97316' }
+  ];
+
+  // 자료 로드 함수들
+  const loadMaterials = async (id) => {
+    try {
+      setLoading(true);
+      console.log('🔍 자재 데이터 로딩 중...', { 
+        file_id: id, 
+        selectedProject: selectedProject?.job_no || selectedProject?.official_project_code,
+        jobNo 
+      });
+      
+      // 구매신청된 자재 먼저 확인
+      const projectJobNo = selectedProject?.job_no || selectedProject?.official_project_code || jobNo;
+      await loadPurchasedMaterials(projectJobNo);
+      
+      const response = await fetchMaterials({ 
+        file_id: parseInt(id), 
+        limit: 10000,
+        exclude_requested: false,
+        job_no: projectJobNo
+      });
+      
+      if (response.data?.materials) {
+        const materialsData = response.data.materials;
+        console.log(`✅ ${materialsData.length}개 원본 자재 로드 완료`);
+        setMaterials(materialsData);
+        setError(null);
+      } else {
+        console.warn('⚠️ 자재 데이터가 없습니다:', response.data);
+        setMaterials([]);
+      }
+    } catch (error) {
+      console.error('자재 로드 실패:', error);
+      setError('자재 로드에 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadAvailableRevisions = async () => {
+    try {
+      const response = await api.get('/files/', {
+        params: { job_no: jobNo }
+      });
+      
+      const allFiles = Array.isArray(response.data) ? response.data : response.data?.files || [];
+      const sameBomFiles = allFiles.filter(file => 
+        (file.bom_name || file.original_filename) === bomName
+      );
+      
+      sameBomFiles.sort((a, b) => {
+        const revA = parseInt(a.revision?.replace('Rev.', '') || '0');
+        const revB = parseInt(b.revision?.replace('Rev.', '') || '0');
+        return revB - revA;
+      });
+      
+      setAvailableRevisions(sameBomFiles);
+    } catch (error) {
+      console.error('리비전 목록 조회 실패:', error);
+    }
+  };
+
+  const loadPurchasedMaterials = async (jobNo) => {
+    try {
+      // 새로운 API로 구매신청된 자재 ID 목록 조회
+      const response = await api.get('/purchase-request/requested-materials', {
+        params: { 
+          job_no: jobNo,
+          file_id: fileId
+        }
+      });
+      
+      if (response.data?.requested_material_ids) {
+        const purchasedIds = new Set(response.data.requested_material_ids);
+        setPurchasedMaterials(purchasedIds);
+        console.log(`✅ ${purchasedIds.size}개 구매신청된 자재 ID 로드 완료`);
+      }
+    } catch (error) {
+      console.error('구매신청 자재 조회 실패:', error);
+    }
+  };
+
+  const loadUserRequirements = async (fileId) => {
+    try {
+      const response = await api.get(`/files/${fileId}/user-requirements`);
+      if (response.data?.requirements) {
+        const reqMap = {};
+        response.data.requirements.forEach(req => {
+          reqMap[req.material_id] = req.requirement;
+        });
+        setUserRequirements(reqMap);
+      }
+    } catch (error) {
+      console.error('사용자 요구사항 로드 실패:', error);
+    }
+  };
+
+  // 초기 로드
+  useEffect(() => {
+    if (fileId) {
+      loadMaterials(fileId);
+      loadAvailableRevisions();
+      loadUserRequirements(fileId);
+    }
+  }, [fileId]);
+
+  // 카테고리별 자재 필터링
+  const getCategoryMaterials = (category) => {
+    return materials.filter(material => 
+      material.classified_category === category || 
+      material.category === category
+    );
+  };
+
+  // 카테고리별 컴포넌트 렌더링
+  const renderCategoryView = () => {
+    const categoryMaterials = getCategoryMaterials(selectedCategory);
+    const commonProps = {
+      materials: categoryMaterials,
+      selectedMaterials,
+      setSelectedMaterials,
+      userRequirements,
+      setUserRequirements,
+      purchasedMaterials,
+      fileId,
+      user,
+      onNavigate
+    };
+
+    switch (selectedCategory) {
+      case 'PIPE':
+        return <PipeMaterialsView {...commonProps} />;
+      case 'FITTING':
+        return <FittingMaterialsView {...commonProps} />;
+      case 'FLANGE':
+        return <FlangeMaterialsView {...commonProps} />;
+      case 'VALVE':
+        return <ValveMaterialsView {...commonProps} />;
+      case 'GASKET':
+        return <GasketMaterialsView {...commonProps} />;
+      case 'BOLT':
+        return <BoltMaterialsView {...commonProps} />;
+      case 'SUPPORT':
+        return <SupportMaterialsView {...commonProps} />;
+      default:
+        return <div>카테고리를 선택해주세요.</div>;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)'
+      }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{
+            width: '60px',
+            height: '60px',
+            border: '4px solid #e2e8f0',
+            borderTop: '4px solid #3b82f6',
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite',
+            margin: '0 auto 20px'
+          }}></div>
+          <div style={{ fontSize: '18px', color: '#64748b', fontWeight: '600' }}>
+            Loading Materials...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ 
+      padding: '40px', 
+      background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)', 
+      minHeight: '100vh' 
+    }}>
+      {/* 헤더 섹션 */}
+      <div style={{
+        background: 'rgba(255, 255, 255, 0.95)',
+        backdropFilter: 'blur(10px)',
+        borderRadius: '20px',
+        padding: '32px',
+        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        border: '1px solid rgba(255, 255, 255, 0.2)',
+        marginBottom: '40px'
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '28px' }}>
+          <div>
+            <h2 style={{ 
+              fontSize: '28px', 
+              fontWeight: '700', 
+              color: '#0f172a', 
+              margin: '0 0 8px 0',
+              letterSpacing: '-0.025em'
+            }}>
+              BOM Materials Management
+            </h2>
+            <p style={{ 
+              fontSize: '16px', 
+              color: '#64748b', 
+              margin: 0,
+              fontWeight: '400'
+            }}>
+              {bomName} - {currentRevision} | Project: {selectedProject?.job_name || jobNo}
+            </p>
+          </div>
+          <button
+            onClick={() => onNavigate('dashboard')}
+            style={{
+              background: 'white',
+              color: '#6b7280',
+              border: '1px solid #d1d5db',
+              borderRadius: '12px',
+              padding: '12px 20px',
+              cursor: 'pointer',
+              fontSize: '14px',
+              fontWeight: '600',
+              transition: 'all 0.2s ease',
+              letterSpacing: '0.025em'
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.background = '#f9fafb';
+              e.target.style.borderColor = '#9ca3af';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.background = 'white';
+              e.target.style.borderColor = '#d1d5db';
+            }}
+          >
+            Back to Dashboard
+          </button>
+        </div>
+
+        {/* 통계 정보 */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+          gap: '20px',
+          marginBottom: '32px'
+        }}>
+          <div style={{
+            background: 'linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)',
+            padding: '20px',
+            borderRadius: '12px',
+            textAlign: 'center'
+          }}>
+            <div style={{ fontSize: '32px', fontWeight: '700', color: '#1d4ed8', marginBottom: '4px' }}>
+              {materials.length}
+            </div>
+            <div style={{ fontSize: '14px', color: '#1d4ed8', fontWeight: '500' }}>
+              Total Materials
+            </div>
+          </div>
+          
+          <div style={{
+            background: 'linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%)',
+            padding: '20px',
+            borderRadius: '12px',
+            textAlign: 'center'
+          }}>
+            <div style={{ fontSize: '32px', fontWeight: '700', color: '#059669', marginBottom: '4px' }}>
+              {getCategoryMaterials(selectedCategory).length}
+            </div>
+            <div style={{ fontSize: '14px', color: '#059669', fontWeight: '500' }}>
+              {selectedCategory} Items
+            </div>
+          </div>
+          
+          <div style={{
+            background: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)',
+            padding: '20px',
+            borderRadius: '12px',
+            textAlign: 'center'
+          }}>
+            <div style={{ fontSize: '32px', fontWeight: '700', color: '#92400e', marginBottom: '4px' }}>
+              {selectedMaterials.size}
+            </div>
+            <div style={{ fontSize: '14px', color: '#92400e', fontWeight: '500' }}>
+              Selected
+            </div>
+          </div>
+          
+          <div style={{
+            background: 'linear-gradient(135deg, #fee2e2 0%, #fecaca 100%)',
+            padding: '20px',
+            borderRadius: '12px',
+            textAlign: 'center'
+          }}>
+            <div style={{ fontSize: '32px', fontWeight: '700', color: '#dc2626', marginBottom: '4px' }}>
+              {purchasedMaterials.size}
+            </div>
+            <div style={{ fontSize: '14px', color: '#dc2626', fontWeight: '500' }}>
+              Purchased
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 카테고리 탭 */}
+      <div style={{
+        background: 'rgba(255, 255, 255, 0.95)',
+        backdropFilter: 'blur(10px)',
+        borderRadius: '20px',
+        padding: '24px 32px',
+        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        border: '1px solid rgba(255, 255, 255, 0.2)',
+        marginBottom: '40px'
+      }}>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
+          gap: '16px'
+        }}>
+          {categories.map((category) => {
+            const isActive = selectedCategory === category.key;
+            const count = getCategoryMaterials(category.key).length;
+            
+            return (
+              <button
+                key={category.key}
+                onClick={() => setSelectedCategory(category.key)}
+                style={{
+                  background: isActive 
+                    ? `linear-gradient(135deg, ${category.color} 0%, ${category.color}dd 100%)`
+                    : 'white',
+                  color: isActive ? 'white' : '#64748b',
+                  border: isActive ? 'none' : '1px solid #e2e8f0',
+                  borderRadius: '12px',
+                  padding: '16px 12px',
+                  cursor: 'pointer',
+                  fontSize: '14px',
+                  fontWeight: '600',
+                  transition: 'all 0.2s ease',
+                  textAlign: 'center',
+                  boxShadow: isActive ? `0 4px 14px 0 ${category.color}39` : '0 2px 8px rgba(0,0,0,0.05)'
+                }}
+                onMouseEnter={(e) => {
+                  if (!isActive) {
+                    e.target.style.background = '#f8fafc';
+                    e.target.style.borderColor = '#cbd5e1';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isActive) {
+                    e.target.style.background = 'white';
+                    e.target.style.borderColor = '#e2e8f0';
+                  }
+                }}
+              >
+                <div style={{ fontSize: '20px', marginBottom: '8px' }}>
+                  {category.icon}
+                </div>
+                <div style={{ marginBottom: '4px' }}>
+                  {category.label}
+                </div>
+                <div style={{ 
+                  fontSize: '12px', 
+                  opacity: 0.8,
+                  fontWeight: '500'
+                }}>
+                  {count} items
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 카테고리별 컨텐츠 */}
+      <div style={{
+        background: 'rgba(255, 255, 255, 0.95)',
+        backdropFilter: 'blur(10px)',
+        borderRadius: '20px',
+        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        border: '1px solid rgba(255, 255, 255, 0.2)',
+        overflow: 'hidden'
+      }}>
+        {error ? (
+          <div style={{
+            padding: '60px',
+            textAlign: 'center',
+            color: '#dc2626'
+          }}>
+            <div style={{ fontSize: '48px', marginBottom: '16px' }}>⚠️</div>
+            <div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
+              Error Loading Materials
+            </div>
+            <div style={{ fontSize: '14px' }}>
+              {error}
+            </div>
+          </div>
+        ) : (
+          renderCategoryView()
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BOMManagementPage;