🏢 프로젝트 관리 페이지 추가 - 워크플로우 시작점

핵심 구현사항:
✅ 전체 워크플로우의 시작점이 되는 프로젝트 관리 페이지 완성
- 사이드바에 '프로젝트 관리' 메뉴 추가 (최상단 배치)
- 기본 페이지를 프로젝트 관리로 변경

🎯 프로젝트 선택 시스템
- 4개 샘플 프로젝트 (계획/진행중/제작중/완료 상태)
- 각 프로젝트별 상세 정보 (고객사, 납기일, 납품방식, 담당PM)
- 5단계 진행률 표시 (설계→구매→제작→검사→납품)
- 상태별 색상 구분 및 진행률 바

🔍 검색 및 필터 기능
- 프로젝트명/Job No./고객사 통합 검색
- 상태별 필터 (전체/계획/진행중/제작중/완료)
- 실시간 통계 표시 (전체 12개, 진행중 8개, 제작중 3개, 지연 1개)
- 검색 결과 카운트 알림

🎨 카드 기반 UI 디자인
- DevonThink 스타일 프로젝트 카드
- 호버 효과 (lift-up 애니메이션)
- 상태별 좌측 컬러 바 (파란색/회색/노랑/초록)
- 반응형 그리드 레이아웃 (2열→1열)

⚡ 인터랙티브 기능
- 프로젝트 선택 시 세션 스토리지 저장
- 각 프로젝트별 맞춤 액션 버튼
  - 제작중: '프로젝트 관리' + '생산회의록'
  - 계획중: '프로젝트 관리' + 비활성화된 '생산회의록'
  - 진행중: '프로젝트 관리' + '입고 검수'
  - 완료: '프로젝트 보기' + '완료됨'

📊 하드코딩 데이터
- TK-2024-015: ABC 공장 배관공사 (제작중 75%)
- TK-2024-016: DEF 플랜트 배관 설치 (계획 25%)
- TK-2024-017: GHI 정유 공장 개보수 (진행중 60%)
- TK-2024-012: JKL 화학 공장 신설 (완료 100%)

🔄 워크플로우 연결
- 프로젝트 선택 → 각 기능 페이지로 연결
- 선택된 프로젝트 정보 전역 공유
- 다른 페이지에서 프로젝트 컨텍스트 유지

시연 준비: 전체 워크플로우의 중심이 되는 프로젝트 관리 시스템 완성

demo/scripts/main.js

@@ -1,7 +1,8 @@
 // TK Project Demo - Main JavaScript
 
 // 전역 변수
-let currentPage = 'project-registration';
+let currentPage = 'project-management';
+let selectedProject = null;
 let currentUser = {
     name: '김그룹장',
     role: '생산팀',
@@ -348,6 +349,155 @@ function initializePage(pageId) {
         case 'production-work':
             initializeProductionWork();
             break;
+        case 'project-management':
+            initializeProjectManagement();
+            break;
+    }
+}
+
+// 프로젝트 관리 페이지 초기화
+function initializeProjectManagement() {
+    console.log('프로젝트 관리 페이지 초기화');
+    
+    // 프로젝트 카드 애니메이션
+    animateElements('.project-card');
+    
+    // 필터 버튼 이벤트 설정
+    setupProjectFilters();
+    
+    // 검색 기능 설정
+    setupProjectSearch();
+}
+
+// 프로젝트 필터 설정
+function setupProjectFilters() {
+    const filterButtons = document.querySelectorAll('.filter-btn');
+    
+    filterButtons.forEach(btn => {
+        btn.addEventListener('click', function() {
+            // 활성 버튼 변경
+            filterButtons.forEach(b => b.classList.remove('active'));
+            this.classList.add('active');
+            
+            // 필터 적용
+            const filter = this.getAttribute('data-filter');
+            filterProjects(filter);
+        });
+    });
+}
+
+// 프로젝트 검색 설정
+function setupProjectSearch() {
+    const searchInput = document.querySelector('.search-input');
+    const searchBtn = document.querySelector('.search-btn');
+    
+    if (searchInput && searchBtn) {
+        searchBtn.addEventListener('click', performSearch);
+        searchInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                performSearch();
+            }
+        });
+    }
+}
+
+// 검색 실행
+function performSearch() {
+    const searchInput = document.querySelector('.search-input');
+    const query = searchInput.value.toLowerCase().trim();
+    
+    if (!query) {
+        showAllProjects();
+        return;
+    }
+    
+    const projectCards = document.querySelectorAll('.project-card');
+    let visibleCount = 0;
+    
+    projectCards.forEach(card => {
+        const title = card.querySelector('h3').textContent.toLowerCase();
+        const jobNo = card.querySelector('.job-no').textContent.toLowerCase();
+        const customer = card.querySelector('.info-value').textContent.toLowerCase();
+        
+        if (title.includes(query) || jobNo.includes(query) || customer.includes(query)) {
+            card.style.display = 'block';
+            visibleCount++;
+        } else {
+            card.style.display = 'none';
+        }
+    });
+    
+    showNotification(`${visibleCount}개의 프로젝트를 찾았습니다.`, 'info');
+}
+
+// 프로젝트 필터링
+function filterProjects(filter) {
+    const projectCards = document.querySelectorAll('.project-card');
+    let visibleCount = 0;
+    
+    projectCards.forEach(card => {
+        if (filter === 'all') {
+            card.style.display = 'block';
+            visibleCount++;
+        } else {
+            const hasStatus = card.classList.contains(`status-${filter}`);
+            if (hasStatus) {
+                card.style.display = 'block';
+                visibleCount++;
+            } else {
+                card.style.display = 'none';
+            }
+        }
+    });
+    
+    // 통계 업데이트
+    updateProjectStats(filter, visibleCount);
+}
+
+// 모든 프로젝트 표시
+function showAllProjects() {
+    const projectCards = document.querySelectorAll('.project-card');
+    projectCards.forEach(card => {
+        card.style.display = 'block';
+    });
+}
+
+// 프로젝트 통계 업데이트
+function updateProjectStats(filter, count) {
+    const filterName = {
+        'all': '전체',
+        'planning': '계획',
+        'in-progress': '진행중',
+        'production': '제작중',
+        'completed': '완료'
+    };
+    
+    showNotification(`${filterName[filter]} 프로젝트: ${count}개`, 'info');
+}
+
+// 프로젝트 선택
+function selectProject(jobNo) {
+    selectedProject = jobNo;
+    
+    // 프로젝트 정보 저장
+    const projectCard = document.querySelector(`[data-job-no="${jobNo}"]`);
+    if (projectCard) {
+        const projectName = projectCard.querySelector('h3').textContent;
+        const customer = projectCard.querySelector('.info-value').textContent;
+        
+        // 세션 스토리지에 저장
+        sessionStorage.setItem('selectedProject', JSON.stringify({
+            jobNo: jobNo,
+            name: projectName,
+            customer: customer
+        }));
+        
+        showNotification(`${projectName} (${jobNo}) 프로젝트가 선택되었습니다.`, 'success');
+        
+        // 프로젝트 세부 관리 페이지로 이동 (현재는 알림만)
+        setTimeout(() => {
+            showNotification('프로젝트 세부 관리 기능은 추후 구현 예정입니다.', 'info');
+        }, 1000);
     }
 }
 
@@ -770,5 +920,6 @@ window.showModal = showModal;
 window.hideModal = hideModal;
 window.showNotification = showNotification;
 window.clearForm = clearForm;
+window.selectProject = selectProject;
 
 console.log('TK Project Demo JavaScript 로드 완료');