+ +
+
+

프로젝트 관리

+

진행 중인 프로젝트를 선택하여 세부 관리를 시작합니다.

+
+ +
+ +
+
+
+ + +
+
+ + + + + +
+
+
+
+ 12 + 전체 프로젝트 +
+
+ 8 + 진행중 +
+
+ 3 + 제작중 +
+
+ 1 + 지연 +
+
+
+ + +
+
+
+
+

ABC 공장 배관공사

+ TK-2024-015 +
+
+ 제작중 + 75% +
+
+ +
+
+ 고객사 + ABC 케미칼 +
+
+ 납기일 + 2024-03-30 +
+
+ 납품방식 + 현장납품 +
+
+ 담당 PM + 이PM +
+
+ +
+
+
+
+
+
설계
+
구매
+
제작
+
검사
+
납품
+
+
+ +
+ + +
+
+ +
+
+
+

DEF 플랜트 배관 설치

+ TK-2024-016 +
+
+ 계획 + 25% +
+
+ +
+
+ 고객사 + DEF 화학 +
+
+ 납기일 + 2024-04-15 +
+
+ 납품방식 + 공장인도 +
+
+ 담당 PM + 박PM +
+
+ +
+
+
+
+
+
설계
+
구매
+
제작
+
검사
+
납품
+
+
+ +
+ + +
+
+ +
+
+
+

GHI 정유 공장 개보수

+ TK-2024-017 +
+
+ 진행중 + 60% +
+
+ +
+
+ 고객사 + GHI 정유 / 한국엔지니어링 +
+
+ 납기일 + 2024-05-20 +
+
+ 납품방식 + 부분납품 +
+
+ 담당 PM + 최PM +
+
+ +
+
+
+
+
+
설계
+
구매
+
제작
+
검사
+
납품
+
+
+ +
+ + +
+
+ +
+
+
+

JKL 화학 공장 신설

+ TK-2024-012 +
+
+ 완료 + 100% +
+
+ +
+
+ 고객사 + JKL 화학 +
+
+ 납기일 + 2024-02-28 +
+
+ 납품방식 + 현장납품 +
+
+ 담당 PM + 김PM +
+
+ +
+
+
+
+
+
설계
+
구매
+
제작
+
검사
+
납품
+
+
+ +
+ + +
+
+
+
+
+ -
+

프로젝트 등록 요청

새로운 프로젝트의 기본 정보를 입력하여 등록을 요청합니다.

diff --git a/demo/scripts/main.js b/demo/scripts/main.js index 6fc663b..a96899c 100644 --- a/demo/scripts/main.js +++ b/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 로드 완료'); diff --git a/demo/styles/devonthink.css b/demo/styles/devonthink.css index b1f1ad0..a735702 100644 --- a/demo/styles/devonthink.css +++ b/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;