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

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

frontend/src/pages/BOMManagementPage.css

@@ -0,0 +1,184 @@
+/* BOM Management Page Styles */
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.bom-management-page {
+  padding: 40px;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  min-height: 100vh;
+}
+
+.bom-header-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 32px;
+  box-shadow: 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);
+  margin-bottom: 40px;
+}
+
+.bom-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.bom-stat-card {
+  padding: 20px;
+  border-radius: 12px;
+  text-align: center;
+  transition: transform 0.2s ease;
+}
+
+.bom-stat-card:hover {
+  transform: translateY(-2px);
+}
+
+.bom-stat-number {
+  font-size: 32px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.bom-stat-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.bom-category-tabs {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 24px 32px;
+  box-shadow: 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);
+  margin-bottom: 40px;
+}
+
+.bom-category-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 16px;
+}
+
+.bom-category-button {
+  border-radius: 12px;
+  padding: 16px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  text-align: center;
+  border: none;
+  outline: none;
+}
+
+.bom-category-button:hover {
+  transform: translateY(-1px);
+}
+
+.bom-category-icon {
+  font-size: 20px;
+  margin-bottom: 8px;
+}
+
+.bom-category-count {
+  font-size: 12px;
+  opacity: 0.8;
+  font-weight: 500;
+}
+
+.bom-content-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  box-shadow: 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;
+}
+
+.bom-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+.bom-loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid #e2e8f0;
+  border-top: 4px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 20px;
+}
+
+.bom-loading-text {
+  font-size: 18px;
+  color: #64748b;
+  font-weight: 600;
+}
+
+.bom-error {
+  padding: 60px;
+  text-align: center;
+  color: #dc2626;
+}
+
+.bom-error-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.bom-error-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.bom-error-message {
+  font-size: 14px;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+  .bom-management-page {
+    padding: 20px;
+  }
+  
+  .bom-header-card {
+    padding: 24px;
+  }
+  
+  .bom-stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+  
+  .bom-category-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+  
+  .bom-category-button {
+    padding: 12px 8px;
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .bom-stats-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .bom-category-grid {
+    grid-template-columns: 1fr;
+  }
+}

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;

frontend/src/pages/InactiveProjectsPage.jsx

@@ -0,0 +1,398 @@
+import React, { useState } from 'react';
+
+const InactiveProjectsPage = ({ 
+  onNavigate, 
+  user, 
+  projects, 
+  inactiveProjects, 
+  onActivateProject,
+  onDeleteProject 
+}) => {
+  const [selectedProjects, setSelectedProjects] = useState(new Set());
+
+  // 비활성 프로젝트 목록 필터링
+  const inactiveProjectList = projects.filter(project => 
+    inactiveProjects.has(project.job_no)
+  );
+
+  // 프로젝트 선택/해제
+  const handleProjectSelect = (projectNo) => {
+    setSelectedProjects(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(projectNo)) {
+        newSet.delete(projectNo);
+      } else {
+        newSet.add(projectNo);
+      }
+      return newSet;
+    });
+  };
+
+  // 전체 선택/해제
+  const handleSelectAll = () => {
+    if (selectedProjects.size === inactiveProjectList.length) {
+      setSelectedProjects(new Set());
+    } else {
+      setSelectedProjects(new Set(inactiveProjectList.map(p => p.job_no)));
+    }
+  };
+
+  // 선택된 프로젝트들 활성화
+  const handleBulkActivate = () => {
+    if (selectedProjects.size === 0) {
+      alert('활성화할 프로젝트를 선택해주세요.');
+      return;
+    }
+    
+    if (window.confirm(`선택된 ${selectedProjects.size}개 프로젝트를 활성화하시겠습니까?`)) {
+      selectedProjects.forEach(projectNo => {
+        const project = projects.find(p => p.job_no === projectNo);
+        if (project) {
+          onActivateProject(project);
+        }
+      });
+      setSelectedProjects(new Set());
+    }
+  };
+
+  // 선택된 프로젝트들 삭제
+  const handleBulkDelete = () => {
+    if (selectedProjects.size === 0) {
+      alert('삭제할 프로젝트를 선택해주세요.');
+      return;
+    }
+    
+    if (window.confirm(`선택된 ${selectedProjects.size}개 프로젝트를 완전히 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.`)) {
+      selectedProjects.forEach(projectNo => {
+        onDeleteProject(projectNo);
+      });
+      setSelectedProjects(new Set());
+    }
+  };
+
+  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: '24px', 
+              fontWeight: '700', 
+              color: '#0f172a', 
+              margin: '0 0 4px 0',
+              letterSpacing: '-0.025em'
+            }}>
+              Inactive Projects Management
+            </h2>
+            <p style={{ 
+              fontSize: '14px', 
+              color: '#64748b', 
+              margin: 0,
+              fontWeight: '400'
+            }}>
+              Manage deactivated projects - activate or permanently delete
+            </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, #fef3c7 0%, #fde68a 100%)',
+            padding: '20px',
+            borderRadius: '12px',
+            textAlign: 'center'
+          }}>
+            <div style={{ fontSize: '28px', fontWeight: '700', color: '#92400e', marginBottom: '4px' }}>
+              {inactiveProjectList.length}
+            </div>
+            <div style={{ fontSize: '14px', color: '#92400e', fontWeight: '500' }}>
+              Inactive Projects
+            </div>
+          </div>
+          
+          <div style={{
+            background: 'linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)',
+            padding: '20px',
+            borderRadius: '12px',
+            textAlign: 'center'
+          }}>
+            <div style={{ fontSize: '28px', fontWeight: '700', color: '#1d4ed8', marginBottom: '4px' }}>
+              {selectedProjects.size}
+            </div>
+            <div style={{ fontSize: '14px', color: '#1d4ed8', fontWeight: '500' }}>
+              Selected
+            </div>
+          </div>
+        </div>
+
+        {/* 일괄 작업 버튼들 */}
+        {inactiveProjectList.length > 0 && (
+          <div style={{ display: 'flex', gap: '12px', marginBottom: '24px' }}>
+            <button
+              onClick={handleSelectAll}
+              style={{
+                background: 'white',
+                color: '#6b7280',
+                border: '1px solid #d1d5db',
+                borderRadius: '8px',
+                padding: '10px 16px',
+                cursor: 'pointer',
+                fontSize: '14px',
+                fontWeight: '500',
+                transition: 'all 0.2s ease'
+              }}
+              onMouseEnter={(e) => {
+                e.target.style.background = '#f9fafb';
+                e.target.style.borderColor = '#9ca3af';
+              }}
+              onMouseLeave={(e) => {
+                e.target.style.background = 'white';
+                e.target.style.borderColor = '#d1d5db';
+              }}
+            >
+              {selectedProjects.size === inactiveProjectList.length ? 'Deselect All' : 'Select All'}
+            </button>
+            
+            <button
+              onClick={handleBulkActivate}
+              disabled={selectedProjects.size === 0}
+              style={{
+                background: selectedProjects.size > 0 ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)' : '#e5e7eb',
+                color: selectedProjects.size > 0 ? 'white' : '#9ca3af',
+                border: 'none',
+                borderRadius: '8px',
+                padding: '10px 16px',
+                cursor: selectedProjects.size > 0 ? 'pointer' : 'not-allowed',
+                fontSize: '14px',
+                fontWeight: '500',
+                transition: 'all 0.2s ease'
+              }}
+            >
+              Activate Selected ({selectedProjects.size})
+            </button>
+            
+            <button
+              onClick={handleBulkDelete}
+              disabled={selectedProjects.size === 0}
+              style={{
+                background: selectedProjects.size > 0 ? 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)' : '#e5e7eb',
+                color: selectedProjects.size > 0 ? 'white' : '#9ca3af',
+                border: 'none',
+                borderRadius: '8px',
+                padding: '10px 16px',
+                cursor: selectedProjects.size > 0 ? 'pointer' : 'not-allowed',
+                fontSize: '14px',
+                fontWeight: '500',
+                transition: 'all 0.2s ease'
+              }}
+            >
+              Delete Selected ({selectedProjects.size})
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 비활성 프로젝트 목록 */}
+      <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)'
+      }}>
+        <h3 style={{ 
+          fontSize: '20px', 
+          fontWeight: '700', 
+          color: '#0f172a', 
+          margin: '0 0 24px 0',
+          letterSpacing: '-0.025em'
+        }}>
+          Inactive Projects List
+        </h3>
+
+        {inactiveProjectList.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 Inactive Projects
+            </div>
+            <div style={{ fontSize: '14px' }}>
+              All projects are currently active
+            </div>
+          </div>
+        ) : (
+          <div style={{
+            display: 'grid',
+            gap: '16px'
+          }}>
+            {inactiveProjectList.map((project) => (
+              <div
+                key={project.job_no}
+                style={{
+                  background: 'white',
+                  border: '1px solid #e2e8f0',
+                  borderRadius: '12px',
+                  padding: '20px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  transition: 'all 0.2s ease',
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+                }}
+                onMouseEnter={(e) => {
+                  e.target.style.borderColor = '#cbd5e1';
+                  e.target.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
+                }}
+                onMouseLeave={(e) => {
+                  e.target.style.borderColor = '#e2e8f0';
+                  e.target.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '16px', flex: 1 }}>
+                  <input
+                    type="checkbox"
+                    checked={selectedProjects.has(project.job_no)}
+                    onChange={() => handleProjectSelect(project.job_no)}
+                    style={{
+                      width: '18px',
+                      height: '18px',
+                      cursor: 'pointer'
+                    }}
+                  />
+                  
+                  <div style={{ flex: 1 }}>
+                    <div style={{ 
+                      fontSize: '18px', 
+                      fontWeight: '600', 
+                      color: '#1a202c', 
+                      marginBottom: '4px'
+                    }}>
+                      {project.job_name || project.job_no}
+                    </div>
+                    <div style={{ 
+                      fontSize: '14px', 
+                      color: '#64748b'
+                    }}>
+                      Code: {project.job_no} | Client: {project.client_name || 'N/A'}
+                    </div>
+                  </div>
+                </div>
+                
+                <div style={{ display: 'flex', gap: '12px' }}>
+                  <button
+                    onClick={() => {
+                      if (window.confirm(`"${project.job_name || project.job_no}" 프로젝트를 활성화하시겠습니까?`)) {
+                        onActivateProject(project);
+                      }
+                    }}
+                    style={{
+                      background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '8px',
+                      padding: '8px 16px',
+                      cursor: 'pointer',
+                      fontSize: '14px',
+                      fontWeight: '500',
+                      transition: 'all 0.2s ease'
+                    }}
+                    onMouseEnter={(e) => {
+                      e.target.style.transform = 'translateY(-1px)';
+                      e.target.style.boxShadow = '0 4px 12px rgba(16, 185, 129, 0.4)';
+                    }}
+                    onMouseLeave={(e) => {
+                      e.target.style.transform = 'translateY(0)';
+                      e.target.style.boxShadow = 'none';
+                    }}
+                  >
+                    Activate
+                  </button>
+                  
+                  <button
+                    onClick={() => {
+                      if (window.confirm(`"${project.job_name || project.job_no}" 프로젝트를 완전히 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.`)) {
+                        onDeleteProject(project.job_no);
+                      }
+                    }}
+                    style={{
+                      background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '8px',
+                      padding: '8px 16px',
+                      cursor: 'pointer',
+                      fontSize: '14px',
+                      fontWeight: '500',
+                      transition: 'all 0.2s ease'
+                    }}
+                    onMouseEnter={(e) => {
+                      e.target.style.transform = 'translateY(-1px)';
+                      e.target.style.boxShadow = '0 4px 12px rgba(239, 68, 68, 0.4)';
+                    }}
+                    onMouseLeave={(e) => {
+                      e.target.style.transform = 'translateY(0)';
+                      e.target.style.boxShadow = 'none';
+                    }}
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default InactiveProjectsPage;

frontend/src/pages/NewMaterialsPage.css

@@ -58,6 +58,8 @@
   border-color: #4299e1;
   box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
 }
+
+.materials-header {
   display: flex;
   align-items: center;
   justify-content: space-between;

frontend/src/pages/NewMaterialsPage.jsx

@@ -13,7 +13,8 @@ const NewMaterialsPage = ({
   jobNo,
   bomName,
   revision,
-  filename 
+  filename,
+  user
 }) => {
   const [materials, setMaterials] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -127,15 +128,21 @@ const NewMaterialsPage = ({
   const loadMaterials = async (id) => {
     try {
       setLoading(true);
-      console.log('🔍 자재 데이터 로딩 중...', { file_id: id });
+      console.log('🔍 자재 데이터 로딩 중...', { 
+        file_id: id, 
+        selectedProject: selectedProject?.job_no || selectedProject?.official_project_code,
+        jobNo 
+      });
       
       // 구매신청된 자재 먼저 확인
-      await loadPurchasedMaterials(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  // 구매신청된 자재도 포함하여 표시
+        exclude_requested: false,  // 구매신청된 자재도 포함하여 표시
+        job_no: projectJobNo  // 프로젝트별 필터링 추가
       });
       
       if (response.data?.materials) {

frontend/src/pages/PurchaseRequestPage.jsx

@@ -8,6 +8,8 @@ const PurchaseRequestPage = ({ onNavigate, fileId, jobNo, selectedProject }) =>
     const [selectedRequest, setSelectedRequest] = useState(null);
     const [requestMaterials, setRequestMaterials] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [editingTitle, setEditingTitle] = useState(null);
+    const [newTitle, setNewTitle] = useState('');
 
     useEffect(() => {
         loadRequests();
@@ -81,6 +83,45 @@ const PurchaseRequestPage = ({ onNavigate, fileId, jobNo, selectedProject }) =>
         }
     };
 
+    const handleEditTitle = (request) => {
+        setEditingTitle(request.request_id);
+        setNewTitle(request.request_no);
+    };
+
+    const handleSaveTitle = async (requestId) => {
+        try {
+            const response = await api.patch(`/purchase-request/${requestId}/title`, {
+                title: newTitle
+            });
+            
+            if (response.data.success) {
+                // 목록에서 해당 요청의 제목 업데이트
+                setRequests(prev => prev.map(req => 
+                    req.request_id === requestId 
+                        ? { ...req, request_no: newTitle }
+                        : req
+                ));
+                
+                // 선택된 요청도 업데이트
+                if (selectedRequest?.request_id === requestId) {
+                    setSelectedRequest(prev => ({ ...prev, request_no: newTitle }));
+                }
+                
+                setEditingTitle(null);
+                setNewTitle('');
+                console.log('✅ 구매신청 제목 업데이트 완료');
+            }
+        } catch (error) {
+            console.error('❌ 제목 업데이트 실패:', error);
+            alert('제목 업데이트 실패: ' + error.message);
+        }
+    };
+
+    const handleCancelEdit = () => {
+        setEditingTitle(null);
+        setNewTitle('');
+    };
+
     return (
         <div className="purchase-request-page">
             <div className="page-header">
@@ -111,7 +152,82 @@ const PurchaseRequestPage = ({ onNavigate, fileId, jobNo, selectedProject }) =>
                                     onClick={() => handleRequestSelect(request)}
                                 >
                                     <div className="request-header">
-                                        <span className="request-no">{request.request_no}</span>
+                                        {editingTitle === request.request_id ? (
+                                            <div className="title-edit" onClick={(e) => e.stopPropagation()}>
+                                                <input
+                                                    type="text"
+                                                    value={newTitle}
+                                                    onChange={(e) => setNewTitle(e.target.value)}
+                                                    onKeyPress={(e) => {
+                                                        if (e.key === 'Enter') {
+                                                            handleSaveTitle(request.request_id);
+                                                        } else if (e.key === 'Escape') {
+                                                            handleCancelEdit();
+                                                        }
+                                                    }}
+                                                    style={{
+                                                        width: '200px',
+                                                        padding: '4px 8px',
+                                                        border: '1px solid #ddd',
+                                                        borderRadius: '4px',
+                                                        fontSize: '14px'
+                                                    }}
+                                                    autoFocus
+                                                />
+                                                <button
+                                                    onClick={() => handleSaveTitle(request.request_id)}
+                                                    style={{
+                                                        marginLeft: '8px',
+                                                        padding: '4px 8px',
+                                                        background: '#10b981',
+                                                        color: 'white',
+                                                        border: 'none',
+                                                        borderRadius: '4px',
+                                                        cursor: 'pointer',
+                                                        fontSize: '12px'
+                                                    }}
+                                                >
+                                                    저장
+                                                </button>
+                                                <button
+                                                    onClick={handleCancelEdit}
+                                                    style={{
+                                                        marginLeft: '4px',
+                                                        padding: '4px 8px',
+                                                        background: '#6b7280',
+                                                        color: 'white',
+                                                        border: 'none',
+                                                        borderRadius: '4px',
+                                                        cursor: 'pointer',
+                                                        fontSize: '12px'
+                                                    }}
+                                                >
+                                                    취소
+                                                </button>
+                                            </div>
+                                        ) : (
+                                            <div className="title-display">
+                                                <span className="request-no">{request.request_no}</span>
+                                                <button
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        handleEditTitle(request);
+                                                    }}
+                                                    style={{
+                                                        marginLeft: '8px',
+                                                        padding: '2px 6px',
+                                                        background: 'transparent',
+                                                        border: '1px solid #d1d5db',
+                                                        borderRadius: '4px',
+                                                        cursor: 'pointer',
+                                                        fontSize: '12px',
+                                                        color: '#6b7280'
+                                                    }}
+                                                >
+                                                    ✏️
+                                                </button>
+                                            </div>
+                                        )}
                                         <span className="request-date">
                                             {new Date(request.requested_at).toLocaleDateString()}
                                         </span>
@@ -154,6 +270,57 @@ const PurchaseRequestPage = ({ onNavigate, fileId, jobNo, selectedProject }) =>
                                 </button>
                             </div>
                             
+                            {/* 원본 파일 정보 */}
+                            <div className="original-file-info" style={{
+                                background: '#f8fafc',
+                                border: '1px solid #e2e8f0',
+                                borderRadius: '8px',
+                                padding: '16px',
+                                marginBottom: '20px'
+                            }}>
+                                <h3 style={{ 
+                                    fontSize: '16px', 
+                                    fontWeight: '600', 
+                                    color: '#374151', 
+                                    marginBottom: '12px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '8px'
+                                }}>
+                                    📄 원본 파일 정보
+                                </h3>
+                                <div className="file-details" style={{
+                                    display: 'grid',
+                                    gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+                                    gap: '12px'
+                                }}>
+                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>파일명:</span>
+                                        <span className="value" style={{ color: '#1f2937' }}>{selectedRequest.original_filename || 'N/A'}</span>
+                                    </div>
+                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>프로젝트:</span>
+                                        <span className="value" style={{ color: '#1f2937' }}>{selectedRequest.job_no} - {selectedRequest.job_name}</span>
+                                    </div>
+                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>신청일:</span>
+                                        <span className="value" style={{ color: '#1f2937' }}>{new Date(selectedRequest.requested_at).toLocaleString()}</span>
+                                    </div>
+                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>신청자:</span>
+                                        <span className="value" style={{ color: '#1f2937' }}>{selectedRequest.requested_by}</span>
+                                    </div>
+                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>자재 수량:</span>
+                                        <span className="value" style={{ color: '#1f2937', fontWeight: '600' }}>{selectedRequest.material_count}개</span>
+                                    </div>
+                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>카테고리:</span>
+                                        <span className="value" style={{ color: '#1f2937' }}>{selectedRequest.category || '전체'}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            
                             <div className="materials-table">
                                 {/* 업로드 당시 분류된 정보를 그대로 표시 */}
                                 {requestMaterials.length === 0 ? (