워크플로우 시스템 구축 완료

- 워크플로우 개요 페이지에 플로우차트 형태 추가 (3x2 그리드)
- 각 워크플로우 단계별 독립 HTML 페이지 생성 (1-4단계)
- 클릭 가능한 워크플로우 박스와 상세 페이지 연결
- DevonThink 스타일 적용 및 반응형 디자인
- 구매/물류팀 용어 통일 및 프레젠테이션 업데이트

demo/scripts/main.js

@@ -359,213 +359,55 @@ function initializePage(pageId) {
 function initializeProjectManagement() {
     console.log('프로젝트 관리 페이지 초기화');
     
-    // 드롭다운 외부 클릭 이벤트 설정
-    setupDropdownOutsideClick();
-    
     // 애니메이션 효과
-    animateElements('.project-selector-header');
-    animateElements('.project-dropdown-container');
-    animateElements('.project-stats-simple');
+    animateElements('.simple-project-selector');
 }
 
-// 드롭다운 외부 클릭 설정
-function setupDropdownOutsideClick() {
-    document.addEventListener('click', function(e) {
-        const dropdown = document.querySelector('.project-dropdown');
-        const dropdownMenu = document.getElementById('project-dropdown-menu');
-        const dropdownDisplay = document.querySelector('.dropdown-display');
-        
-        if (!dropdown.contains(e.target)) {
-            dropdownMenu.classList.remove('active');
-            dropdownDisplay.classList.remove('active');
-        }
-    });
-}
-
-// 프로젝트 드롭다운 토글
-function toggleProjectDropdown() {
-    const dropdownMenu = document.getElementById('project-dropdown-menu');
-    const dropdownDisplay = document.querySelector('.dropdown-display');
-    
-    dropdownMenu.classList.toggle('active');
-    dropdownDisplay.classList.toggle('active');
-    
-    // 검색 입력창에 포커스
-    if (dropdownMenu.classList.contains('active')) {
-        setTimeout(() => {
-            const searchInput = document.querySelector('.dropdown-search-input');
-            if (searchInput) {
-                searchInput.focus();
-            }
-        }, 100);
-    }
-}
-
-// 드롭다운에서 프로젝트 선택
-function selectProjectFromDropdown(jobNo) {
-    const projectData = getProjectData(jobNo);
-    if (!projectData) return;
-    
-    // 드롭다운 닫기
-    const dropdownMenu = document.getElementById('project-dropdown-menu');
-    const dropdownDisplay = document.querySelector('.dropdown-display');
-    dropdownMenu.classList.remove('active');
-    dropdownDisplay.classList.remove('active');
-    
-    // 선택된 프로젝트 텍스트 업데이트
-    const selectedText = document.getElementById('selected-project-text');
-    selectedText.textContent = `${projectData.name} (${jobNo})`;
-    
-    // 프로젝트 정보 카드 표시
-    showProjectInfo(projectData);
-    
-    // 전역 변수 업데이트
-    selectedProject = jobNo;
-    
-    // 세션 스토리지에 저장
-    sessionStorage.setItem('selectedProject', JSON.stringify(projectData));
-    
-    showNotification(`${projectData.name} 프로젝트가 선택되었습니다.`, 'success');
-}
-
-// 프로젝트 데이터 가져오기
-function getProjectData(jobNo) {
-    const projectsData = {
-        'TK-2024-015': {
-            jobNo: 'TK-2024-015',
-            name: 'ABC 공장 배관공사',
-            customer: 'ABC 케미칼',
-            deadline: '2024-03-30',
-            delivery: '현장납품',
-            pm: '이PM',
-            status: '제작중',
-            statusClass: 'status-production',
-            progress: '75%'
-        },
-        'TK-2024-016': {
-            jobNo: 'TK-2024-016',
-            name: 'DEF 플랜트 배관 설치',
-            customer: 'DEF 화학',
-            deadline: '2024-04-15',
-            delivery: '공장인도',
-            pm: '박PM',
-            status: '계획',
-            statusClass: 'status-planning',
-            progress: '25%'
-        },
-        'TK-2024-017': {
-            jobNo: 'TK-2024-017',
-            name: 'GHI 정유 공장 개보수',
-            customer: 'GHI 정유 / 한국엔지니어링',
-            deadline: '2024-05-20',
-            delivery: '부분납품',
-            pm: '최PM',
-            status: '진행중',
-            statusClass: 'status-in-progress',
-            progress: '60%'
-        },
-        'TK-2024-012': {
-            jobNo: 'TK-2024-012',
-            name: 'JKL 화학 공장 신설',
-            customer: 'JKL 화학',
-            deadline: '2024-02-28',
-            delivery: '현장납품',
-            pm: '김PM',
-            status: '완료',
-            statusClass: 'status-completed',
-            progress: '100%'
-        }
-    };
-    
-    return projectsData[jobNo];
-}
-
-// 프로젝트 정보 표시
-function showProjectInfo(projectData) {
-    const infoContainer = document.getElementById('selected-project-info');
-    
-    // 정보 업데이트
-    document.getElementById('info-project-title').textContent = projectData.name;
-    document.getElementById('info-job-no').textContent = projectData.jobNo;
-    document.getElementById('info-customer').textContent = projectData.customer;
-    document.getElementById('info-deadline').textContent = projectData.deadline;
-    document.getElementById('info-delivery').textContent = projectData.delivery;
-    document.getElementById('info-pm').textContent = projectData.pm;
-    document.getElementById('info-progress').textContent = projectData.progress;
-    
-    // 상태 배지 업데이트
-    const statusBadge = document.getElementById('info-status');
-    statusBadge.textContent = projectData.status;
-    statusBadge.className = `status-badge ${projectData.statusClass}`;
-    
-    // 버튼 상태 업데이트
-    updateActionButtons(projectData);
-    
-    // 정보 카드 표시
-    infoContainer.style.display = 'block';
-}
-
-// 액션 버튼 상태 업데이트
-function updateActionButtons(projectData) {
-    const buttons = {
-        meeting: document.getElementById('btn-production-meeting'),
-        inspection: document.getElementById('btn-incoming-inspection'),
-        work: document.getElementById('btn-production-work')
-    };
-    
-    // 모든 버튼 활성화
-    Object.values(buttons).forEach(btn => {
-        btn.classList.remove('disabled');
-        btn.style.opacity = '1';
-        btn.style.pointerEvents = 'auto';
-    });
-    
-    // 상태에 따른 버튼 비활성화
-    switch (projectData.statusClass) {
-        case 'status-planning':
-            buttons.meeting.classList.add('disabled');
-            buttons.meeting.style.opacity = '0.5';
-            buttons.meeting.style.pointerEvents = 'none';
-            break;
-        case 'status-completed':
-            buttons.meeting.textContent = '🏭 생산회의록 (완료)';
-            buttons.inspection.textContent = '📦 입고 검수 (완료)';
-            buttons.work.textContent = '🔧 생산팀 작업 (완료)';
-            break;
-    }
-}
-
-// 드롭다운 프로젝트 필터링
-function filterProjects(query) {
-    const options = document.querySelectorAll('.dropdown-option');
-    const searchQuery = query.toLowerCase().trim();
-    
-    options.forEach(option => {
-        const title = option.querySelector('.option-title').textContent.toLowerCase();
-        const jobNo = option.querySelector('.option-job-no').textContent.toLowerCase();
-        const customer = option.querySelector('.option-customer').textContent.toLowerCase();
-        
-        if (!searchQuery || 
-            title.includes(searchQuery) || 
-            jobNo.includes(searchQuery) || 
-            customer.includes(searchQuery)) {
-            option.style.display = 'block';
-        } else {
-            option.style.display = 'none';
-        }
-    });
-}
-
-// 프로젝트 세부 관리로 이동
-function goToProjectDetail() {
-    if (!selectedProject) {
-        showNotification('프로젝트를 먼저 선택해주세요.', 'warning');
+// 프로젝트 선택 (간단한 select 박스용)
+function selectProject(jobNo) {
+    if (!jobNo) {
+        // 선택 해제
+        document.getElementById('project-actions').style.display = 'none';
+        selectedProject = null;
         return;
     }
     
-    showNotification('프로젝트 세부 관리 페이지는 추후 구현 예정입니다.', 'info');
+    // 프로젝트 선택됨
+    selectedProject = jobNo;
+    
+    // 액션 버튼들 표시
+    document.getElementById('project-actions').style.display = 'flex';
+    
+    // 세션 스토리지에 저장 (간단한 정보만)
+    sessionStorage.setItem('selectedProject', JSON.stringify({
+        jobNo: jobNo,
+        name: getProjectName(jobNo)
+    }));
+    
+    showNotification(`${getProjectName(jobNo)} 프로젝트가 선택되었습니다.`, 'success');
 }
 
+// 프로젝트 이름 가져오기
+function getProjectName(jobNo) {
+    const projectNames = {
+        'TK-2024-015': 'ABC 공장 배관공사',
+        'TK-2024-016': 'DEF 플랜트 배관 설치', 
+        'TK-2024-017': 'GHI 정유 공장 개보수',
+        'TK-2024-012': 'JKL 화학 공장 신설'
+    };
+    return projectNames[jobNo] || '알 수 없는 프로젝트';
+}
+
+// 참고: 실제 구현시에는 다음과 같이 필터링할 예정
+// function getActiveProjects() {
+//     // 납기가 지나지 않았고 완료 처리가 안된 프로젝트만 반환
+//     return projects.filter(project => {
+//         const today = new Date();
+//         const deadline = new Date(project.deadline);
+//         return deadline >= today && project.status !== 'completed';
+//     });
+// }
+
 // 프로젝트 등록 페이지 초기화
 function initializeProjectRegistration() {
     console.log('프로젝트 등록 페이지 초기화');
@@ -986,9 +828,5 @@ window.hideModal = hideModal;
 window.showNotification = showNotification;
 window.clearForm = clearForm;
 window.selectProject = selectProject;
-window.toggleProjectDropdown = toggleProjectDropdown;
-window.selectProjectFromDropdown = selectProjectFromDropdown;
-window.filterProjects = filterProjects;
-window.goToProjectDetail = goToProjectDetail;
 
 console.log('TK Project Demo JavaScript 로드 완료');