🏢 프로젝트 관리 페이지 추가 - 워크플로우 시작점
핵심 구현사항: ✅ 전체 워크플로우의 시작점이 되는 프로젝트 관리 페이지 완성 - 사이드바에 '프로젝트 관리' 메뉴 추가 (최상단 배치) - 기본 페이지를 프로젝트 관리로 변경 🎯 프로젝트 선택 시스템 - 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%) 🔄 워크플로우 연결 - 프로젝트 선택 → 각 기능 페이지로 연결 - 선택된 프로젝트 정보 전역 공유 - 다른 페이지에서 프로젝트 컨텍스트 유지 시연 준비: 전체 워크플로우의 중심이 되는 프로젝트 관리 시스템 완성
This commit is contained in:
Hyungi Ahn
256
demo/index.html
256
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>
|
||||
|
||||
Reference in New Issue
Block a user