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

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

🎯 프로젝트 선택 시스템
- 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/index.html

@@ -19,7 +19,11 @@
             <div class="nav-section">
                 <h3>프로젝트 관리</h3>
                 <ul>
-                    <li><a href="#" onclick="showPage('project-registration')" class="nav-item active">
+                    <li><a href="#" onclick="showPage('project-management')" class="nav-item active">
+                        <span class="nav-icon">🏢</span>
+                        프로젝트 관리
+                    </a></li>
+                    <li><a href="#" onclick="showPage('project-registration')" class="nav-item">
                         <span class="nav-icon">📋</span>
                         프로젝트 등록
                     </a></li>
@@ -64,8 +68,256 @@
 
     <!-- 메인 컨텐츠 -->
     <div class="main-content">
+        <!-- 프로젝트 관리 페이지 -->
+        <div id="project-management" class="page active">
+            <div class="page-header">
+                <h2>프로젝트 관리</h2>
+                <p class="page-description">진행 중인 프로젝트를 선택하여 세부 관리를 시작합니다.</p>
+            </div>
+            
+            <div class="project-management-container">
+                <!-- 프로젝트 필터 및 검색 -->
+                <div class="project-filters">
+                    <div class="filter-section">
+                        <div class="search-box">
+                            <input type="text" placeholder="프로젝트명 또는 Job No. 검색..." class="search-input">
+                            <button class="search-btn">🔍</button>
+                        </div>
+                        <div class="filter-buttons">
+                            <button class="filter-btn active" data-filter="all">전체</button>
+                            <button class="filter-btn" data-filter="planning">계획</button>
+                            <button class="filter-btn" data-filter="in-progress">진행중</button>
+                            <button class="filter-btn" data-filter="production">제작중</button>
+                            <button class="filter-btn" data-filter="completed">완료</button>
+                        </div>
+                    </div>
+                    <div class="project-stats">
+                        <div class="stat-item">
+                            <span class="stat-number">12</span>
+                            <span class="stat-label">전체 프로젝트</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-number">8</span>
+                            <span class="stat-label">진행중</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-number">3</span>
+                            <span class="stat-label">제작중</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-number">1</span>
+                            <span class="stat-label">지연</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 프로젝트 리스트 -->
+                <div class="project-list">
+                    <div class="project-card status-production" data-job-no="TK-2024-015">
+                        <div class="project-header">
+                            <div class="project-title">
+                                <h3>ABC 공장 배관공사</h3>
+                                <span class="job-no">TK-2024-015</span>
+                            </div>
+                            <div class="project-status">
+                                <span class="status-badge status-production">제작중</span>
+                                <span class="progress-text">75%</span>
+                            </div>
+                        </div>
+                        
+                        <div class="project-info">
+                            <div class="info-row">
+                                <span class="info-label">고객사</span>
+                                <span class="info-value">ABC 케미칼</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">납기일</span>
+                                <span class="info-value">2024-03-30</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">납품방식</span>
+                                <span class="info-value">현장납품</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">담당 PM</span>
+                                <span class="info-value">이PM</span>
+                            </div>
+                        </div>
+                        
+                        <div class="project-progress">
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width: 75%"></div>
+                            </div>
+                            <div class="progress-stages">
+                                <div class="stage completed">설계</div>
+                                <div class="stage completed">구매</div>
+                                <div class="stage active">제작</div>
+                                <div class="stage">검사</div>
+                                <div class="stage">납품</div>
+                            </div>
+                        </div>
+                        
+                        <div class="project-actions">
+                            <button class="btn btn-primary" onclick="selectProject('TK-2024-015')">📊 프로젝트 관리</button>
+                            <button class="btn btn-secondary" onclick="showPage('production-meeting')">🏭 생산회의록</button>
+                        </div>
+                    </div>
+                    
+                    <div class="project-card status-planning" data-job-no="TK-2024-016">
+                        <div class="project-header">
+                            <div class="project-title">
+                                <h3>DEF 플랜트 배관 설치</h3>
+                                <span class="job-no">TK-2024-016</span>
+                            </div>
+                            <div class="project-status">
+                                <span class="status-badge status-planning">계획</span>
+                                <span class="progress-text">25%</span>
+                            </div>
+                        </div>
+                        
+                        <div class="project-info">
+                            <div class="info-row">
+                                <span class="info-label">고객사</span>
+                                <span class="info-value">DEF 화학</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">납기일</span>
+                                <span class="info-value">2024-04-15</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">납품방식</span>
+                                <span class="info-value">공장인도</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">담당 PM</span>
+                                <span class="info-value">박PM</span>
+                            </div>
+                        </div>
+                        
+                        <div class="project-progress">
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width: 25%"></div>
+                            </div>
+                            <div class="progress-stages">
+                                <div class="stage active">설계</div>
+                                <div class="stage">구매</div>
+                                <div class="stage">제작</div>
+                                <div class="stage">검사</div>
+                                <div class="stage">납품</div>
+                            </div>
+                        </div>
+                        
+                        <div class="project-actions">
+                            <button class="btn btn-primary" onclick="selectProject('TK-2024-016')">📊 프로젝트 관리</button>
+                            <button class="btn btn-secondary disabled">🏭 생산회의록</button>
+                        </div>
+                    </div>
+                    
+                    <div class="project-card status-in-progress" data-job-no="TK-2024-017">
+                        <div class="project-header">
+                            <div class="project-title">
+                                <h3>GHI 정유 공장 개보수</h3>
+                                <span class="job-no">TK-2024-017</span>
+                            </div>
+                            <div class="project-status">
+                                <span class="status-badge status-in-progress">진행중</span>
+                                <span class="progress-text">60%</span>
+                            </div>
+                        </div>
+                        
+                        <div class="project-info">
+                            <div class="info-row">
+                                <span class="info-label">고객사</span>
+                                <span class="info-value">GHI 정유 / 한국엔지니어링</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">납기일</span>
+                                <span class="info-value">2024-05-20</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">납품방식</span>
+                                <span class="info-value">부분납품</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">담당 PM</span>
+                                <span class="info-value">최PM</span>
+                            </div>
+                        </div>
+                        
+                        <div class="project-progress">
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width: 60%"></div>
+                            </div>
+                            <div class="progress-stages">
+                                <div class="stage completed">설계</div>
+                                <div class="stage active">구매</div>
+                                <div class="stage">제작</div>
+                                <div class="stage">검사</div>
+                                <div class="stage">납품</div>
+                            </div>
+                        </div>
+                        
+                        <div class="project-actions">
+                            <button class="btn btn-primary" onclick="selectProject('TK-2024-017')">📊 프로젝트 관리</button>
+                            <button class="btn btn-secondary" onclick="showPage('incoming-inspection')">📦 입고 검수</button>
+                        </div>
+                    </div>
+                    
+                    <div class="project-card status-completed" data-job-no="TK-2024-012">
+                        <div class="project-header">
+                            <div class="project-title">
+                                <h3>JKL 화학 공장 신설</h3>
+                                <span class="job-no">TK-2024-012</span>
+                            </div>
+                            <div class="project-status">
+                                <span class="status-badge status-completed">완료</span>
+                                <span class="progress-text">100%</span>
+                            </div>
+                        </div>
+                        
+                        <div class="project-info">
+                            <div class="info-row">
+                                <span class="info-label">고객사</span>
+                                <span class="info-value">JKL 화학</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">납기일</span>
+                                <span class="info-value">2024-02-28</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">납품방식</span>
+                                <span class="info-value">현장납품</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">담당 PM</span>
+                                <span class="info-value">김PM</span>
+                            </div>
+                        </div>
+                        
+                        <div class="project-progress">
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width: 100%"></div>
+                            </div>
+                            <div class="progress-stages">
+                                <div class="stage completed">설계</div>
+                                <div class="stage completed">구매</div>
+                                <div class="stage completed">제작</div>
+                                <div class="stage completed">검사</div>
+                                <div class="stage completed">납품</div>
+                            </div>
+                        </div>
+                        
+                        <div class="project-actions">
+                            <button class="btn btn-secondary" onclick="selectProject('TK-2024-012')">📋 프로젝트 보기</button>
+                            <button class="btn btn-success">✅ 완료됨</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <!-- 프로젝트 등록 페이지 -->
-        <div id="project-registration" class="page active">
+        <div id="project-registration" class="page">
             <div class="page-header">
                 <h2>프로젝트 등록 요청</h2>
                 <p class="page-description">새로운 프로젝트의 기본 정보를 입력하여 등록을 요청합니다.</p>

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 로드 완료');

demo/styles/devonthink.css

@@ -560,6 +560,21 @@ body {
     color: white;
 }
 
+.status-planning {
+    background-color: var(--dt-gray-400);
+    color: white;
+}
+
+.status-production {
+    background-color: var(--dt-primary);
+    color: white;
+}
+
+.status-in-progress {
+    background-color: var(--dt-warning);
+    color: var(--dt-gray-800);
+}
+
 @media (max-width: 600px) {
     .request-item {
         flex-direction: column;
@@ -575,6 +590,316 @@ body {
     }
 }
 
+/* 프로젝트 관리 컨테이너 */
+.project-management-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+/* 프로젝트 필터 */
+.project-filters {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: var(--dt-shadow);
+    border: 1px solid var(--dt-gray-200);
+    padding: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.filter-section {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.search-box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.search-input {
+    padding: 8px 12px;
+    border: 1px solid var(--dt-gray-300);
+    border-radius: 6px;
+    font-size: 14px;
+    width: 300px;
+    background-color: white;
+}
+
+.search-btn {
+    padding: 8px 12px;
+    border: none;
+    background-color: var(--dt-primary);
+    color: white;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.filter-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.filter-btn {
+    padding: 6px 16px;
+    border: 1px solid var(--dt-gray-300);
+    background-color: white;
+    color: var(--dt-gray-700);
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.filter-btn:hover {
+    background-color: var(--dt-gray-50);
+}
+
+.filter-btn.active {
+    background-color: var(--dt-primary);
+    color: white;
+    border-color: var(--dt-primary);
+}
+
+.project-stats {
+    display: flex;
+    gap: 24px;
+}
+
+.stat-item {
+    text-align: center;
+}
+
+.stat-number {
+    display: block;
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--dt-primary);
+    line-height: 1;
+}
+
+.stat-label {
+    font-size: 12px;
+    color: var(--dt-gray-600);
+    font-weight: 500;
+}
+
+/* 프로젝트 리스트 */
+.project-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 24px;
+}
+
+@media (max-width: 800px) {
+    .project-list {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* 프로젝트 카드 */
+.project-card {
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: var(--dt-shadow);
+    border: 1px solid var(--dt-gray-200);
+    padding: 24px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.project-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--dt-shadow-lg);
+}
+
+.project-card.status-production {
+    border-left: 4px solid var(--dt-primary);
+}
+
+.project-card.status-planning {
+    border-left: 4px solid var(--dt-gray-400);
+}
+
+.project-card.status-in-progress {
+    border-left: 4px solid var(--dt-warning);
+}
+
+.project-card.status-completed {
+    border-left: 4px solid var(--dt-success);
+}
+
+.project-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 20px;
+}
+
+.project-title h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--dt-gray-800);
+    margin-bottom: 4px;
+}
+
+.project-title .job-no {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--dt-primary);
+    font-family: 'Monaco', 'Menlo', monospace;
+}
+
+.project-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.progress-text {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--dt-gray-600);
+}
+
+/* 프로젝트 정보 */
+.project-info {
+    margin-bottom: 20px;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 0;
+    border-bottom: 1px solid var(--dt-gray-100);
+}
+
+.info-row:last-child {
+    border-bottom: none;
+}
+
+.info-label {
+    font-size: 12px;
+    color: var(--dt-gray-600);
+    font-weight: 500;
+}
+
+.info-value {
+    font-size: 13px;
+    color: var(--dt-gray-800);
+    font-weight: 600;
+}
+
+/* 프로젝트 진행률 */
+.project-progress {
+    margin-bottom: 20px;
+}
+
+.progress-stages {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 12px;
+}
+
+.stage {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--dt-gray-500);
+    text-align: center;
+    flex: 1;
+    position: relative;
+}
+
+.stage.completed {
+    color: var(--dt-success);
+}
+
+.stage.active {
+    color: var(--dt-primary);
+}
+
+.stage::after {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--dt-gray-300);
+}
+
+.stage.completed::after {
+    background-color: var(--dt-success);
+}
+
+.stage.active::after {
+    background-color: var(--dt-primary);
+}
+
+/* 프로젝트 액션 */
+.project-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.project-actions .btn {
+    flex: 1;
+    font-size: 12px;
+    padding: 8px 12px;
+}
+
+.btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+    .project-filters {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .filter-section {
+        justify-content: center;
+    }
+    
+    .search-input {
+        width: 100%;
+        max-width: 300px;
+    }
+    
+    .project-stats {
+        justify-content: center;
+    }
+    
+    .project-card {
+        padding: 20px;
+    }
+    
+    .project-header {
+        flex-direction: column;
+        gap: 12px;
+    }
+    
+    .project-actions {
+        flex-direction: column;
+    }
+}
+
 /* 자동 생성 정보 */
 .auto-generated {
     margin: 20px 0;