워크플로우 시스템 구축 완료
- 워크플로우 개요 페이지에 플로우차트 형태 추가 (3x2 그리드) - 각 워크플로우 단계별 독립 HTML 페이지 생성 (1-4단계) - 클릭 가능한 워크플로우 박스와 상세 페이지 연결 - DevonThink 스타일 적용 및 반응형 디자인 - 구매/물류팀 용어 통일 및 프레젠테이션 업데이트
This commit is contained in:
Hyungi Ahn
@@ -5,6 +5,33 @@ TK Project는 수주부터 납품까지의 전체 프로젝트 라이프사이
|
||||
|
||||
---
|
||||
|
||||
## 🏢 0. 프로젝트 관리 (워크플로우 시작점)
|
||||
|
||||
### 0.1 프로젝트 선택 시스템
|
||||
- **목적**: 전체 워크플로우의 중심이 되는 프로젝트 접근점
|
||||
- **담당자**: 모든 사용자 (권한에 따른 접근 제어)
|
||||
- **주요 기능**:
|
||||
- 활성 프로젝트 목록 표시 (납기 미경과, 미완료 프로젝트만)
|
||||
- 간단하고 직관적인 프로젝트 선택 인터페이스
|
||||
- 선택된 프로젝트 컨텍스트 전역 유지
|
||||
|
||||
### 0.2 워크플로우 연결
|
||||
```
|
||||
프로젝트 선택 → 세션 저장 → 각 기능 모듈로 분기
|
||||
├── 📋 프로젝트 등록/수정
|
||||
├── 🏭 생산회의록
|
||||
├── 📦 입고 검수 관리
|
||||
├── 🔧 생산팀 작업 관리
|
||||
└── 🔍 품질 검사 시스템
|
||||
```
|
||||
|
||||
### 0.3 실제 구현 시 고려사항
|
||||
- **동적 필터링**: 납기일 기준 활성 프로젝트만 표시
|
||||
- **권한 기반 접근**: 사용자 권한에 따른 프로젝트 접근 제어
|
||||
- **실시간 동기화**: 프로젝트 상태 변경 시 즉시 반영
|
||||
|
||||
---
|
||||
|
||||
## 🚀 1. 준비 단계
|
||||
|
||||
### 1.1 프로젝트 등록
|
||||
@@ -135,11 +162,13 @@ TK Project는 수주부터 납품까지의 전체 프로젝트 라이프사이
|
||||
|
||||
## 🎯 핵심 목표
|
||||
|
||||
1. **통합 관리**: 수주부터 납품까지 원스톱 관리
|
||||
2. **실시간 현황**: 언제든 프로젝트 상태 확인 가능
|
||||
3. **유연성**: 각 부서별 맞춤형 워크플로우 지원
|
||||
4. **데이터 축적**: 문제 발생 이력을 통한 개선점 도출
|
||||
5. **승인 체계**: 단계별 필수 확인을 통한 품질 보장
|
||||
1. **중앙집중식 프로젝트 관리**: 모든 워크플로우의 시작점 제공
|
||||
2. **통합 관리**: 수주부터 납품까지 원스톱 관리
|
||||
3. **실시간 현황**: 언제든 프로젝트 상태 확인 가능
|
||||
4. **유연성**: 각 부서별 맞춤형 워크플로우 지원
|
||||
5. **데이터 축적**: 문제 발생 이력을 통한 개선점 도출
|
||||
6. **승인 체계**: 단계별 필수 확인을 통한 품질 보장
|
||||
7. **사용자 경험**: 직관적이고 간단한 인터페이스 제공
|
||||
|
||||
---
|
||||
|
||||
|
||||
639
demo/index.html
639
demo/index.html
@@ -53,6 +53,16 @@
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<h3>워크플로우</h3>
|
||||
<ul>
|
||||
<li><a href="#" onclick="showPage('workflow-overview')" class="nav-item">
|
||||
<span class="nav-icon">🔄</span>
|
||||
전체 워크플로우
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
@@ -70,134 +80,24 @@
|
||||
<div class="main-content">
|
||||
<!-- 프로젝트 관리 페이지 -->
|
||||
<div id="project-management" class="page active">
|
||||
<div class="project-selector-container">
|
||||
<div class="project-selector-header">
|
||||
<h1>TK Project</h1>
|
||||
<p class="selector-description">프로젝트를 선택하여 관리를 시작하세요</p>
|
||||
<div class="simple-project-selector">
|
||||
<h1>TK Project</h1>
|
||||
<p>프로젝트를 선택하여 관리를 시작하세요</p>
|
||||
|
||||
<div class="project-select-box">
|
||||
<select id="project-select" onchange="selectProject(this.value)">
|
||||
<option value="">프로젝트를 선택하세요</option>
|
||||
<option value="TK-2024-015">ABC 공장 배관공사 (TK-2024-015)</option>
|
||||
<option value="TK-2024-016">DEF 플랜트 배관 설치 (TK-2024-016)</option>
|
||||
<option value="TK-2024-017">GHI 정유 공장 개보수 (TK-2024-017)</option>
|
||||
<option value="TK-2024-012">JKL 화학 공장 신설 (TK-2024-012)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="project-selector-main">
|
||||
<div class="project-dropdown-container">
|
||||
<div class="project-dropdown" onclick="toggleProjectDropdown()">
|
||||
<div class="dropdown-display">
|
||||
<span class="dropdown-text" id="selected-project-text">프로젝트를 선택하세요</span>
|
||||
<span class="dropdown-arrow">▼</span>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="project-dropdown-menu">
|
||||
<div class="dropdown-search">
|
||||
<input type="text" placeholder="프로젝트 검색..." class="dropdown-search-input" onkeyup="filterProjects(this.value)">
|
||||
</div>
|
||||
<div class="dropdown-options" id="dropdown-options">
|
||||
<div class="dropdown-option" data-job-no="TK-2024-015" onclick="selectProjectFromDropdown('TK-2024-015')">
|
||||
<div class="option-main">
|
||||
<span class="option-title">ABC 공장 배관공사</span>
|
||||
<span class="option-job-no">TK-2024-015</span>
|
||||
</div>
|
||||
<div class="option-details">
|
||||
<span class="option-customer">ABC 케미칼</span>
|
||||
<span class="option-status status-production">제작중</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-option" data-job-no="TK-2024-016" onclick="selectProjectFromDropdown('TK-2024-016')">
|
||||
<div class="option-main">
|
||||
<span class="option-title">DEF 플랜트 배관 설치</span>
|
||||
<span class="option-job-no">TK-2024-016</span>
|
||||
</div>
|
||||
<div class="option-details">
|
||||
<span class="option-customer">DEF 화학</span>
|
||||
<span class="option-status status-planning">계획</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-option" data-job-no="TK-2024-017" onclick="selectProjectFromDropdown('TK-2024-017')">
|
||||
<div class="option-main">
|
||||
<span class="option-title">GHI 정유 공장 개보수</span>
|
||||
<span class="option-job-no">TK-2024-017</span>
|
||||
</div>
|
||||
<div class="option-details">
|
||||
<span class="option-customer">GHI 정유 / 한국엔지니어링</span>
|
||||
<span class="option-status status-in-progress">진행중</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-option" data-job-no="TK-2024-012" onclick="selectProjectFromDropdown('TK-2024-012')">
|
||||
<div class="option-main">
|
||||
<span class="option-title">JKL 화학 공장 신설</span>
|
||||
<span class="option-job-no">TK-2024-012</span>
|
||||
</div>
|
||||
<div class="option-details">
|
||||
<span class="option-customer">JKL 화학</span>
|
||||
<span class="option-status status-completed">완료</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 선택된 프로젝트 정보 -->
|
||||
<div class="selected-project-info" id="selected-project-info" style="display: none;">
|
||||
<div class="project-info-card">
|
||||
<div class="project-info-header">
|
||||
<h3 id="info-project-title">프로젝트명</h3>
|
||||
<span class="info-job-no" id="info-job-no">Job No.</span>
|
||||
</div>
|
||||
|
||||
<div class="project-info-details">
|
||||
<div class="info-row">
|
||||
<span class="info-label">고객사</span>
|
||||
<span class="info-value" id="info-customer">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납기일</span>
|
||||
<span class="info-value" id="info-deadline">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">납품방식</span>
|
||||
<span class="info-value" id="info-delivery">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">담당 PM</span>
|
||||
<span class="info-value" id="info-pm">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">진행상태</span>
|
||||
<span class="info-value">
|
||||
<span class="status-badge" id="info-status">-</span>
|
||||
<span id="info-progress">0%</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-actions">
|
||||
<button class="btn btn-primary" id="btn-project-detail" onclick="goToProjectDetail()">📊 프로젝트 세부관리</button>
|
||||
<button class="btn btn-secondary" id="btn-production-meeting" onclick="showPage('production-meeting')">🏭 생산회의록</button>
|
||||
<button class="btn btn-secondary" id="btn-incoming-inspection" onclick="showPage('incoming-inspection')">📦 입고 검수</button>
|
||||
<button class="btn btn-secondary" id="btn-production-work" onclick="showPage('production-work')">🔧 생산팀 작업</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 프로젝트 통계 -->
|
||||
<div class="project-stats-simple">
|
||||
<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 class="project-actions" id="project-actions" style="display: none;">
|
||||
<button class="btn btn-primary" onclick="showPage('production-meeting')">🏭 생산회의록</button>
|
||||
<button class="btn btn-primary" onclick="showPage('incoming-inspection')">📦 입고 검수</button>
|
||||
<button class="btn btn-primary" onclick="showPage('production-work')">🔧 생산팀 작업</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -772,6 +672,493 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 워크플로우 개요 페이지 -->
|
||||
<div id="workflow-overview" class="page">
|
||||
<div class="page-header">
|
||||
<h2>🔄 TK Project 전체 워크플로우</h2>
|
||||
<p class="page-description">수주부터 납품까지의 전체 프로젝트 라이프사이클 관리 시스템</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-overview-container">
|
||||
<div class="workflow-flowchart">
|
||||
<!-- 첫 번째 행 -->
|
||||
<div class="workflow-row">
|
||||
<div class="workflow-box" onclick="showPage('workflow-stage-1')">
|
||||
<div class="box-number">1</div>
|
||||
<div class="box-icon">📋</div>
|
||||
<div class="box-title">준비 단계</div>
|
||||
<div class="box-subtitle">수주 → Job No. 부여 → 담당자 배정<br>외주/자체제작 결정 → 각 부서 일정 수립</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow horizontal">→</div>
|
||||
|
||||
<div class="workflow-box" onclick="showPage('workflow-stage-2')">
|
||||
<div class="box-number">2</div>
|
||||
<div class="box-icon">🚀</div>
|
||||
<div class="box-title">프로젝트 진행 (발주)</div>
|
||||
<div class="box-subtitle">외주: 도면 → 견적 → 발주 → 관리<br>자체: BOM → 구매신청 → 발주 → 입고</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow horizontal">→</div>
|
||||
|
||||
<div class="workflow-box" onclick="showPage('workflow-stage-3')">
|
||||
<div class="box-number">3</div>
|
||||
<div class="box-icon">🔧</div>
|
||||
<div class="box-title">제작 단계</div>
|
||||
<div class="box-subtitle">외주: 업체 공정표 관리 + NCR 처리<br>자체: 생산팀 공정관리 + 자재 인수인계</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 두 번째 행 -->
|
||||
<div class="workflow-row">
|
||||
<div class="workflow-box" onclick="showPage('workflow-stage-4')">
|
||||
<div class="box-number">4</div>
|
||||
<div class="box-icon">🏭</div>
|
||||
<div class="box-title">생산회의</div>
|
||||
<div class="box-subtitle">제작 전/중 현황 관리<br>공정표 표시 개선 + 실시간 모니터링</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow horizontal">→</div>
|
||||
|
||||
<div class="workflow-box" onclick="showPage('workflow-stage-5')">
|
||||
<div class="box-number">5</div>
|
||||
<div class="box-icon">📦</div>
|
||||
<div class="box-title">납품 (출하전 보고서)</div>
|
||||
<div class="box-subtitle">필수 확인점 완료 확인<br>대표 승인 → 출하 가능</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow horizontal">→</div>
|
||||
|
||||
<div class="workflow-box special" onclick="showPage('workflow-stage-0')">
|
||||
<div class="box-number">💡</div>
|
||||
<div class="box-icon">⚡</div>
|
||||
<div class="box-title">특이사항</div>
|
||||
<div class="box-subtitle">긴급/가공건: 구두신청 → 긴급진행<br>각 팀장이 워크플로우 자유 변형 가능</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 연결선들 -->
|
||||
<div class="flow-connections">
|
||||
<!-- 세로 연결선 (1→4) -->
|
||||
<div class="vertical-line" style="left: 16.66%; top: 45%; height: 10%;"></div>
|
||||
<!-- 세로 연결선 (2→5) -->
|
||||
<div class="vertical-line" style="left: 50%; top: 45%; height: 10%;"></div>
|
||||
<!-- 세로 연결선 (3→특이사항) -->
|
||||
<div class="vertical-line" style="left: 83.33%; top: 45%; height: 10%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="workflow-summary">
|
||||
<h3>🎯 핵심 목표</h3>
|
||||
<ul>
|
||||
<li><strong>중앙집중식 프로젝트 관리:</strong> 모든 프로젝트 정보를 한 곳에서 통합 관리</li>
|
||||
<li><strong>구매 신청 중심 자재 관리:</strong> 구매 프로세스를 중심으로 한 완전한 자재 추적</li>
|
||||
<li><strong>실시간 정보 연동:</strong> 부서 간 정보 공유 및 실시간 업데이트</li>
|
||||
<li><strong>사용자 경험 최적화:</strong> 직관적이고 효율적인 업무 프로세스</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 워크플로우 상세 페이지들 -->
|
||||
<!-- Stage 0: 프로젝트 관리 -->
|
||||
<div id="workflow-stage-0" class="page">
|
||||
<div class="page-header">
|
||||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||||
<h2>🏢 0단계: 프로젝트 관리 (워크플로우 시작점)</h2>
|
||||
<p class="page-description">전체 워크플로우의 중심이 되는 프로젝트 접근점</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>📋 주요 기능</h3>
|
||||
<ul class="feature-list">
|
||||
<li>활성 프로젝트 목록 표시 (납기 미경과, 미완료 프로젝트만)</li>
|
||||
<li>간단하고 직관적인 프로젝트 선택 인터페이스</li>
|
||||
<li>선택된 프로젝트 컨텍스트 전역 유지</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🔄 워크플로우 연결</h3>
|
||||
<div class="workflow-connection">
|
||||
<div class="connection-item">프로젝트 선택</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="connection-item">세션 저장</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="connection-item">각 기능 모듈로 분기</div>
|
||||
</div>
|
||||
<div class="module-list">
|
||||
<div class="module-item">📋 프로젝트 등록/수정</div>
|
||||
<div class="module-item">🏭 생산회의록</div>
|
||||
<div class="module-item">📦 입고 검수 관리</div>
|
||||
<div class="module-item">🔧 생산팀 작업 관리</div>
|
||||
<div class="module-item">🔍 품질 검사 시스템</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>⚙️ 실제 구현 시 고려사항</h3>
|
||||
<div class="consideration-grid">
|
||||
<div class="consideration-item">
|
||||
<h4>동적 필터링</h4>
|
||||
<p>납기일 기준 활성 프로젝트만 표시</p>
|
||||
</div>
|
||||
<div class="consideration-item">
|
||||
<h4>권한 기반 접근</h4>
|
||||
<p>사용자 권한에 따른 프로젝트 접근 제어</p>
|
||||
</div>
|
||||
<div class="consideration-item">
|
||||
<h4>실시간 동기화</h4>
|
||||
<p>프로젝트 상태 변경 시 즉시 반영</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 1: 준비 단계 -->
|
||||
<div id="workflow-stage-1" class="page">
|
||||
<div class="page-header">
|
||||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||||
<h2>🚀 1단계: 준비 단계</h2>
|
||||
<p class="page-description">프로젝트 등록 및 각 부서별 업무 분기 단계</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>📋 프로젝트 등록</h3>
|
||||
<div class="process-flow">
|
||||
<div class="process-step">
|
||||
<h4>수주에 따른 Job No. 부여</h4>
|
||||
<p><strong>담당자:</strong> 영업 또는 PM</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<h4>업무 내용</h4>
|
||||
<ul>
|
||||
<li>관련 정보 업로드 (관련 자료 + 담당자 정리본)</li>
|
||||
<li>일정을 고려한 외주 & 자체제작 여부 확정</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🏗️ 업무 분기 및 일정 수립</h3>
|
||||
<p>등록된 정보와 확정된 일정을 토대로 각 부서별 업무 분기:</p>
|
||||
|
||||
<div class="department-grid">
|
||||
<div class="department-card">
|
||||
<h4>🏗️ 설계팀</h4>
|
||||
<ul>
|
||||
<li>도면 일정 수립</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="department-card">
|
||||
<h4>🔍 품질팀</h4>
|
||||
<ul>
|
||||
<li>검사 포인트 확인 및 일정 수립</li>
|
||||
<li>ITP 작성</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="department-card">
|
||||
<h4>🛒 구매/물류팀</h4>
|
||||
<ul>
|
||||
<li>외주 제작 일정 시작과 끝 입력</li>
|
||||
<li>항목별 소요 일수 산정 (필요시 견적 진행)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="department-card">
|
||||
<h4>🏭 생산팀</h4>
|
||||
<ul>
|
||||
<li>납기일 확인 후 제작일정 수립</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 2: 프로젝트 진행 단계 -->
|
||||
<div id="workflow-stage-2" class="page">
|
||||
<div class="page-header">
|
||||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||||
<h2>🔄 2단계: 프로젝트 진행 단계 (발주)</h2>
|
||||
<p class="page-description">외주 및 자체제작 프로세스 관리</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>🏢 외주의 경우</h3>
|
||||
<div class="process-flow">
|
||||
<div class="process-step">도면 업로드</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">견적진행</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">발주</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">관리페이지 (납기, 검사포인트 등)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🏭 자체제작의 경우</h3>
|
||||
<div class="process-flow-vertical">
|
||||
<div class="process-step">도면(BOM) 업로드</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">분류</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">구매신청</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">견적/발주</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">입고</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">검수 및 보관</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">검사</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">불출</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>📝 중요 사항</h3>
|
||||
<div class="important-notes">
|
||||
<div class="note-item">
|
||||
<h4>보관 단계</h4>
|
||||
<p>입고 위치 정보 입력 필수</p>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<h4>추가분 발생시</h4>
|
||||
<p>리비전 로직으로 진행</p>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<h4>긴급/가공건</h4>
|
||||
<p>구두로 신청(근거는 남겨야됨) → 긴급 진행 → 사후 처리(발주 담당자)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 3: 제작 단계 -->
|
||||
<div id="workflow-stage-3" class="page">
|
||||
<div class="page-header">
|
||||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||||
<h2>🛠️ 3단계: 제작 단계</h2>
|
||||
<p class="page-description">외주 및 자체제작 생산 관리</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>🏢 외주의 경우</h3>
|
||||
<div class="responsibility-card">
|
||||
<h4>담당부서: 구매/물류팀</h4>
|
||||
<ul>
|
||||
<li>납기, 업체 공정표의 정보 입력 페이지</li>
|
||||
<li>품질팀은 해당 입력을 토대로 검사일정 수립</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ncr-process">
|
||||
<h4>📋 NCR 발생시 처리 순서</h4>
|
||||
<div class="process-flow">
|
||||
<div class="process-step">품질 작성</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">구매/물류팀 전달</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">업체송부</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">구매/물류팀이 업체 답변 수령</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">품질 전달</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🏭 자체제작의 경우</h3>
|
||||
<div class="department-responsibilities">
|
||||
<div class="responsibility-card">
|
||||
<h4>생산팀</h4>
|
||||
<ul>
|
||||
<li>공정표 이용한 공정관리</li>
|
||||
<li>생산회의에 활용</li>
|
||||
<li>해당 회의에서 관련 프로젝트 발주현황 확인 가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="responsibility-card">
|
||||
<h4>구매/물류팀</h4>
|
||||
<ul>
|
||||
<li>생산팀 자재 인수인계 (자재 상태 변경)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>⚠️ 문제 발생시 대응</h3>
|
||||
<div class="problem-handling">
|
||||
<h4>작업중 미수령 자재 있을시</h4>
|
||||
<p>생산팀에서 검색하기 쉽게 유도 (위치정보 등)</p>
|
||||
|
||||
<h4>문제 발생시 (자재문제 이외에도 설계미스, 품질미스, 생산미스 전부 포함)</h4>
|
||||
<p>종류와 발생 사유등을 쉽게 입력하여 차후 프로젝트에 활용할 수 있도록 설계</p>
|
||||
|
||||
<h4>데일리체크 개선</h4>
|
||||
<p>생산회의 제작전, 제작중 모든 고정에 대한 현황을 알 수 있도록 개선</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 4: 생산회의 -->
|
||||
<div id="workflow-stage-4" class="page">
|
||||
<div class="page-header">
|
||||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||||
<h2>🏢 4단계: 생산회의</h2>
|
||||
<p class="page-description">프로젝트 진행 현황 통합 관리</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>📊 생산회의 주요 기능</h3>
|
||||
<div class="meeting-features">
|
||||
<div class="feature-card">
|
||||
<h4>공정표 표시 개선</h4>
|
||||
<p>제작전, 제작중 모든 공정에 대한 현황을 한눈에 확인</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>프로젝트 발주현황 확인</h4>
|
||||
<p>관련 프로젝트의 발주 상태를 실시간으로 파악</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>데일리체크 통합</h4>
|
||||
<p>일일 작업 현황 및 이슈사항 종합 관리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🎯 회의 목적</h3>
|
||||
<ul class="purpose-list">
|
||||
<li>전체 프로젝트 진행 상황 점검</li>
|
||||
<li>부서간 협업 이슈 해결</li>
|
||||
<li>일정 지연 요소 사전 파악</li>
|
||||
<li>자재 수급 현황 확인</li>
|
||||
<li>품질 이슈 공유 및 대응</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>📋 회의 구성 요소</h3>
|
||||
<div class="meeting-components">
|
||||
<div class="component-item">
|
||||
<h4>📈 공정 진행률</h4>
|
||||
<p>각 프로젝트별 공정 완료 현황</p>
|
||||
</div>
|
||||
<div class="component-item">
|
||||
<h4>📦 자재 현황</h4>
|
||||
<p>입고 예정, 검수 완료, 불출 대기 자재 현황</p>
|
||||
</div>
|
||||
<div class="component-item">
|
||||
<h4>⚠️ 이슈 사항</h4>
|
||||
<p>데일리체크에서 올라온 문제점 및 해결 방안</p>
|
||||
</div>
|
||||
<div class="component-item">
|
||||
<h4>📅 일정 조정</h4>
|
||||
<p>지연 요소에 따른 일정 재조정</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 5: 납품 -->
|
||||
<div id="workflow-stage-5" class="page">
|
||||
<div class="page-header">
|
||||
<button class="btn-back" onclick="showPage('workflow-overview')">← 워크플로우로 돌아가기</button>
|
||||
<h2>📦 5단계: 납품 (출하전 보고서)</h2>
|
||||
<p class="page-description">최종 품질 확인 및 출하 승인 프로세스</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>✅ 출하전 필수 확인점</h3>
|
||||
<div class="checklist-grid">
|
||||
<div class="checklist-item">
|
||||
<h4>🔍 품질 검사</h4>
|
||||
<ul>
|
||||
<li>최종 품질 검사 완료</li>
|
||||
<li>모든 NCR 처리 완료</li>
|
||||
<li>고객 요구사항 충족 확인</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="checklist-item">
|
||||
<h4>📋 문서 완성</h4>
|
||||
<ul>
|
||||
<li>제작 완료 보고서</li>
|
||||
<li>품질 검사 성적서</li>
|
||||
<li>납품 관련 서류</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="checklist-item">
|
||||
<h4>📦 포장 및 준비</h4>
|
||||
<ul>
|
||||
<li>적절한 포장 완료</li>
|
||||
<li>운송 준비 완료</li>
|
||||
<li>납품 일정 확정</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🔄 승인 프로세스</h3>
|
||||
<div class="approval-flow">
|
||||
<div class="approval-step">
|
||||
<h4>1단계: 필수 확인점 검토</h4>
|
||||
<p>상기 공정별 필수 확인점 여부 표시</p>
|
||||
</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="approval-step">
|
||||
<h4>2단계: 미완료 항목 확인</h4>
|
||||
<p>미완료 표시 있으면 승인요청 불가</p>
|
||||
</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="approval-step">
|
||||
<h4>3단계: 대표 승인</h4>
|
||||
<p>대표님 승인 후 출하 가능</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>📊 최종 보고서 구성</h3>
|
||||
<div class="report-components">
|
||||
<div class="report-item">
|
||||
<h4>프로젝트 개요</h4>
|
||||
<p>Job No., 고객사, 납기일 등 기본 정보</p>
|
||||
</div>
|
||||
<div class="report-item">
|
||||
<h4>제작 현황</h4>
|
||||
<p>공정별 완료 현황 및 소요 시간</p>
|
||||
</div>
|
||||
<div class="report-item">
|
||||
<h4>품질 현황</h4>
|
||||
<p>검사 결과, NCR 처리 내역</p>
|
||||
</div>
|
||||
<div class="report-item">
|
||||
<h4>특이사항</h4>
|
||||
<p>프로젝트 진행 중 발생한 주요 이슈 및 해결 방안</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
|
||||
@@ -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 로드 완료');
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
72
demo/workflow-stage-1.html
Normal file
72
demo/workflow-stage-1.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>1단계: 준비 단계 - TK Project</title>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/devonthink.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="workflow-detail-page">
|
||||
<div class="page-header">
|
||||
<a href="index.html#workflow-overview" class="btn-back">← 워크플로우로 돌아가기</a>
|
||||
<h1>🚀 1단계: 준비 단계</h1>
|
||||
<p class="page-description">프로젝트 등록 및 각 부서별 업무 분기 단계</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>📋 프로젝트 등록</h3>
|
||||
<div class="process-flow">
|
||||
<div class="process-step">
|
||||
<h4>수주에 따른 Job No. 부여</h4>
|
||||
<p><strong>담당자:</strong> 영업 또는 PM</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<h4>업무 내용</h4>
|
||||
<ul>
|
||||
<li>관련 정보 업로드 (관련 자료 + 담당자 정리본)</li>
|
||||
<li>일정을 고려한 외주 & 자체제작 여부 확정</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🏗️ 업무 분기 및 일정 수립</h3>
|
||||
<p>등록된 정보와 확정된 일정을 토대로 각 부서별 업무 분기:</p>
|
||||
|
||||
<div class="department-grid">
|
||||
<div class="department-card">
|
||||
<h4>🏗️ 설계팀</h4>
|
||||
<ul>
|
||||
<li>도면 일정 수립</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="department-card">
|
||||
<h4>🔍 품질팀</h4>
|
||||
<ul>
|
||||
<li>검사 포인트 확인 및 일정 수립</li>
|
||||
<li>ITP 작성</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="department-card">
|
||||
<h4>🛒 구매/물류팀</h4>
|
||||
<ul>
|
||||
<li>외주 제작 일정 시작과 끝 입력</li>
|
||||
<li>항목별 소요 일수 산정 (필요시 견적 진행)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="department-card">
|
||||
<h4>🏭 생산팀</h4>
|
||||
<ul>
|
||||
<li>납기일 확인 후 제작일정 수립</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
demo/workflow-stage-2.html
Normal file
73
demo/workflow-stage-2.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>2단계: 프로젝트 진행 단계 - TK Project</title>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/devonthink.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="workflow-detail-page">
|
||||
<div class="page-header">
|
||||
<a href="index.html#workflow-overview" class="btn-back">← 워크플로우로 돌아가기</a>
|
||||
<h1>🔄 2단계: 프로젝트 진행 단계 (발주)</h1>
|
||||
<p class="page-description">외주 및 자체제작 프로세스 관리</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>🏢 외주의 경우</h3>
|
||||
<div class="process-flow">
|
||||
<div class="process-step">도면 업로드</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">견적진행</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">발주</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">관리페이지 (납기, 검사포인트 등)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🏭 자체제작의 경우</h3>
|
||||
<div class="process-flow-vertical">
|
||||
<div class="process-step">도면(BOM) 업로드</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">분류</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">구매신청</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">견적/발주</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">입고</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">검수 및 보관</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">검사</div>
|
||||
<div class="arrow-down">↓</div>
|
||||
<div class="process-step">불출</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>📝 중요 사항</h3>
|
||||
<div class="important-notes">
|
||||
<div class="note-item">
|
||||
<h4>보관 단계</h4>
|
||||
<p>입고 위치 정보 입력 필수</p>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<h4>추가분 발생시</h4>
|
||||
<p>리비전 로직으로 진행</p>
|
||||
</div>
|
||||
<div class="note-item">
|
||||
<h4>긴급/가공건</h4>
|
||||
<p>구두로 신청(근거는 남겨야됨) → 긴급 진행 → 사후 처리(발주 담당자)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
82
demo/workflow-stage-3.html
Normal file
82
demo/workflow-stage-3.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>3단계: 제작 단계 - TK Project</title>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/devonthink.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="workflow-detail-page">
|
||||
<div class="page-header">
|
||||
<a href="index.html#workflow-overview" class="btn-back">← 워크플로우로 돌아가기</a>
|
||||
<h1>🛠️ 3단계: 제작 단계</h1>
|
||||
<p class="page-description">외주 및 자체제작 생산 관리</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>🏢 외주의 경우</h3>
|
||||
<div class="responsibility-card">
|
||||
<h4>담당부서: 구매/물류팀</h4>
|
||||
<ul>
|
||||
<li>납기, 업체 공정표의 정보 입력 페이지</li>
|
||||
<li>품질팀은 해당 입력을 토대로 검사일정 수립</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ncr-process">
|
||||
<h4>📋 NCR 발생시 처리 순서</h4>
|
||||
<div class="process-flow">
|
||||
<div class="process-step">품질 작성</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">구매/물류팀 전달</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">업체송부</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">구매/물류팀이 업체 답변 수령</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="process-step">품질 전달</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🏭 자체제작의 경우</h3>
|
||||
<div class="department-responsibilities">
|
||||
<div class="responsibility-card">
|
||||
<h4>생산팀</h4>
|
||||
<ul>
|
||||
<li>공정표 이용한 공정관리</li>
|
||||
<li>생산회의에 활용</li>
|
||||
<li>해당 회의에서 관련 프로젝트 발주현황 확인 가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="responsibility-card">
|
||||
<h4>구매/물류팀</h4>
|
||||
<ul>
|
||||
<li>생산팀 자재 인수인계 (자재 상태 변경)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>⚠️ 문제 발생시 대응</h3>
|
||||
<div class="problem-handling">
|
||||
<h4>작업중 미수령 자재 있을시</h4>
|
||||
<p>생산팀에서 검색하기 쉽게 유도 (위치정보 등)</p>
|
||||
|
||||
<h4>문제 발생시 (자재문제 이외에도 설계미스, 품질미스, 생산미스 전부 포함)</h4>
|
||||
<p>종류와 발생 사유등을 쉽게 입력하여 차후 프로젝트에 활용할 수 있도록 설계</p>
|
||||
|
||||
<h4>데일리체크 개선</h4>
|
||||
<p>생산회의 제작전, 제작중 모든 고정에 대한 현황을 알 수 있도록 개선</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
72
demo/workflow-stage-4.html
Normal file
72
demo/workflow-stage-4.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>4단계: 생산회의 - TK Project</title>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/devonthink.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="workflow-detail-page">
|
||||
<div class="page-header">
|
||||
<a href="index.html#workflow-overview" class="btn-back">← 워크플로우로 돌아가기</a>
|
||||
<h1>🏢 4단계: 생산회의</h1>
|
||||
<p class="page-description">프로젝트 진행 현황 통합 관리</p>
|
||||
</div>
|
||||
|
||||
<div class="workflow-detail-container">
|
||||
<div class="detail-section">
|
||||
<h3>📊 생산회의 주요 기능</h3>
|
||||
<div class="meeting-features">
|
||||
<div class="feature-card">
|
||||
<h4>공정표 표시 개선</h4>
|
||||
<p>제작전, 제작중 모든 공정에 대한 현황을 한눈에 확인</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>프로젝트 발주현황 확인</h4>
|
||||
<p>관련 프로젝트의 발주 상태를 실시간으로 파악</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h4>데일리체크 통합</h4>
|
||||
<p>일일 작업 현황 및 이슈사항 종합 관리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>🎯 회의 목적</h3>
|
||||
<ul class="purpose-list">
|
||||
<li>전체 프로젝트 진행 상황 점검</li>
|
||||
<li>부서간 협업 이슈 해결</li>
|
||||
<li>일정 지연 요소 사전 파악</li>
|
||||
<li>자재 수급 현황 확인</li>
|
||||
<li>품질 이슈 공유 및 대응</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3>📋 회의 구성 요소</h3>
|
||||
<div class="meeting-components">
|
||||
<div class="component-item">
|
||||
<h4>📈 공정 진행률</h4>
|
||||
<p>각 프로젝트별 공정 완료 현황</p>
|
||||
</div>
|
||||
<div class="component-item">
|
||||
<h4>📦 자재 현황</h4>
|
||||
<p>입고 예정, 검수 완료, 불출 대기 자재 현황</p>
|
||||
</div>
|
||||
<div class="component-item">
|
||||
<h4>⚠️ 이슈 사항</h4>
|
||||
<p>데일리체크에서 올라온 문제점 및 해결 방안</p>
|
||||
</div>
|
||||
<div class="component-item">
|
||||
<h4>📅 일정 조정</h4>
|
||||
<p>지연 요소에 따른 일정 재조정</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
748
presentation.html
Normal file
748
presentation.html
Normal file
@@ -0,0 +1,748 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TK Project 시스템 발표</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #2d3748;
|
||||
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.presentation-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
margin-bottom: 40px;
|
||||
padding: 40px;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
animation: slideIn 0.8s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide:nth-child(1) { animation-delay: 0.1s; }
|
||||
.slide:nth-child(2) { animation-delay: 0.2s; }
|
||||
.slide:nth-child(3) { animation-delay: 0.3s; }
|
||||
.slide:nth-child(4) { animation-delay: 0.4s; }
|
||||
.slide:nth-child(5) { animation-delay: 0.5s; }
|
||||
.slide:nth-child(6) { animation-delay: 0.6s; }
|
||||
.slide:nth-child(7) { animation-delay: 0.7s; }
|
||||
.slide:nth-child(8) { animation-delay: 0.8s; }
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
color: #4299e1;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.2em;
|
||||
color: #2d3748;
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 3px solid #4299e1;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
color: #2d3748;
|
||||
margin: 20px 0 15px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
color: #666;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.workflow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 25px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.workflow-step {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
border-left: 5px solid #4299e1;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.workflow-step:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
background: #4299e1;
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
color: #2d3748;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.step-description {
|
||||
color: #4a5568;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 30px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
border: 2px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #4299e1, #ed8936);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
border-color: #4299e1;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3em;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
color: #2d3748;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.feature-points {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.feature-points li {
|
||||
padding: 8px 0;
|
||||
color: #4a5568;
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.feature-points li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #48bb78;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.scenario-flow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.scenario-step {
|
||||
background: linear-gradient(135deg, #4299e1 0%, #ed8936 100%);
|
||||
color: white;
|
||||
padding: 20px 25px;
|
||||
border-radius: 25px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.scenario-step:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.scenario-step::after {
|
||||
content: '→';
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 1.5em;
|
||||
color: #4299e1;
|
||||
}
|
||||
|
||||
.scenario-step:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.benefits-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.benefit-item {
|
||||
background: linear-gradient(135deg, #4299e1 0%, #ed8936 100%);
|
||||
color: white;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.benefit-item:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.benefit-title {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tech-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.tech-item {
|
||||
background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-item:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.demo-link {
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.demo-button {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #4299e1 0%, #ed8936 100%);
|
||||
color: white;
|
||||
padding: 15px 40px;
|
||||
border-radius: 30px;
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.demo-button:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
|
||||
border-left: 5px solid #ed8936;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.presentation-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.workflow-grid,
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.scenario-flow {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.scenario-step::after {
|
||||
content: '↓';
|
||||
right: 50%;
|
||||
top: 100%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="presentation-container">
|
||||
<!-- 타이틀 슬라이드 -->
|
||||
<div class="slide">
|
||||
<h1>🏭 TK Project</h1>
|
||||
<p class="subtitle">구매 신청 중심 자재 관리 통합 시스템</p>
|
||||
<div class="highlight">
|
||||
<h3>🎯 핵심 개념</h3>
|
||||
<p style="font-size: 1.2em; font-weight: bold; color: #4299e1; text-align: center; margin-bottom: 15px;">
|
||||
"구매 신청으로 촉발되는 자재 관리 정보의 실시간 통합 연동"
|
||||
</p>
|
||||
<p>구매 신청부터 자재 불출까지의 모든 과정을 하나의 시스템에서 관리하여<br>
|
||||
<strong>정보 단절 없는 완전한 자재 추적</strong>을 실현합니다.</p>
|
||||
|
||||
<div class="scenario-flow" style="margin-top: 20px;">
|
||||
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">구매 신청</div>
|
||||
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">발주 처리</div>
|
||||
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">입고 검수</div>
|
||||
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">창고 보관</div>
|
||||
<div class="scenario-step" style="min-width: 120px; padding: 10px 15px; font-size: 0.9em;">생산 불출</div>
|
||||
</div>
|
||||
<p style="text-align: center; margin-top: 15px; font-style: italic; color: #718096;">
|
||||
모든 부서가 실시간으로 동일한 자재 정보를 공유
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 워크플로우 개요 -->
|
||||
<div class="slide">
|
||||
<h2>🔄 전체 워크플로우</h2>
|
||||
<div class="workflow-grid">
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-title">📋 준비 단계</div>
|
||||
<div class="step-description">수주 → Job No. 부여 → 담당자 배정<br>외주/자체제작 결정 → 각 부서 일정 수립</div>
|
||||
</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-title">🚀 프로젝트 진행 (발주)</div>
|
||||
<div class="step-description">외주: 도면 → 견적 → 발주 → 관리<br>자체: BOM → 구매신청 → 발주 → 입고</div>
|
||||
</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-title">🛠️ 제작 단계</div>
|
||||
<div class="step-description">외주: 업체 공정표 관리 + NCR 처리<br>자체: 생산팀 공정관리 + 자재 인수인계</div>
|
||||
</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-title">🏢 생산회의</div>
|
||||
<div class="step-description">제작 전/중 현황 관리<br>공정표 표시 개선 + 실시간 모니터링</div>
|
||||
</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">5</div>
|
||||
<div class="step-title">📦 납품 (출하전 보고서)</div>
|
||||
<div class="step-description">필수 확인점 완료 확인<br>대표 승인 → 출하 가능</div>
|
||||
</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">💡</div>
|
||||
<div class="step-title">⚡ 특이사항</div>
|
||||
<div class="step-description">긴급/가공건: 구두신청 → 긴급진행<br>각 팀장이 워크플로우 자유 변형 가능</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight">
|
||||
<h3>🎯 핵심 특징</h3>
|
||||
<ul class="feature-points">
|
||||
<li><strong>정형화된 루틴:</strong> 프로젝트 등록 → 구매신청 → 구매 → 생산팀 인계 → 비용지불</li>
|
||||
<li><strong>실시간 현황:</strong> 진행중 = 생산회의록, 납품대기 = 출하전 보고서</li>
|
||||
<li><strong>데이터 축적:</strong> 문제 발생 이력을 통한 차후 프로젝트 개선</li>
|
||||
<li><strong>유연한 시스템:</strong> 각 부서별 담당자가 워크플로우 맞춤 설정 가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구매 신청 중심 자재 관리 통합 시스템 -->
|
||||
<div class="slide">
|
||||
<h2>🛒 구매 신청 중심 자재 관리 통합 시스템</h2>
|
||||
|
||||
<div class="highlight" style="margin-bottom: 30px;">
|
||||
<h3>💡 시스템 핵심 철학</h3>
|
||||
<p>구매 신청 한 번으로 시작되는 자재의 모든 여정을 실시간으로 추적하고 관리합니다.<br>
|
||||
각 부서는 동일한 자재 정보를 실시간으로 공유하여 <strong>정보 단절 없는 완벽한 협업</strong>을 실현합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">📝</span>
|
||||
<div class="feature-title">구매 신청 시스템</div>
|
||||
<ul class="feature-points">
|
||||
<li>BOM 기반 자동 구매 신청</li>
|
||||
<li>프로젝트별 자재 소요량 산출</li>
|
||||
<li>긴급/일반 구매 구분 처리</li>
|
||||
<li>승인 워크플로우 자동화</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">🛍️</span>
|
||||
<div class="feature-title">발주 관리 시스템</div>
|
||||
<ul class="feature-points">
|
||||
<li>공급업체별 자동 발주 생성</li>
|
||||
<li>납기일 기반 우선순위 관리</li>
|
||||
<li>발주 현황 실시간 추적</li>
|
||||
<li>공급업체 성과 분석</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">📦</span>
|
||||
<div class="feature-title">입고 검수 시스템</div>
|
||||
<ul class="feature-points">
|
||||
<li>발주 정보 자동 연동</li>
|
||||
<li>QR코드 기반 입고 처리</li>
|
||||
<li>3단계 검수 프로세스</li>
|
||||
<li>부적합품 NCR 자동 생성</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">🏪</span>
|
||||
<div class="feature-title">물류 관리 시스템</div>
|
||||
<ul class="feature-points">
|
||||
<li>구역별 체계적 보관 관리</li>
|
||||
<li>QR코드 기반 위치 추적</li>
|
||||
<li>재고 현황 실시간 업데이트</li>
|
||||
<li>자동 재고 알림 시스템</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">🔄</span>
|
||||
<div class="feature-title">자재 추적 시스템</div>
|
||||
<ul class="feature-points">
|
||||
<li>신청→발주→입고→보관→불출 전 과정 추적</li>
|
||||
<li>모든 부서 실시간 정보 공유</li>
|
||||
<li>자재 상태 변경 즉시 알림</li>
|
||||
<li>프로젝트별 자재 소요 현황</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<span class="feature-icon">📊</span>
|
||||
<div class="feature-title">통합 대시보드</div>
|
||||
<ul class="feature-points">
|
||||
<li>부서별 맞춤 정보 제공</li>
|
||||
<li>자재 부족 사전 경고</li>
|
||||
<li>구매 성과 분석 리포트</li>
|
||||
<li>프로젝트 지연 위험 알림</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight">
|
||||
<h3>🔗 실시간 연동 효과</h3>
|
||||
<div class="scenario-flow">
|
||||
<div class="scenario-step">설계팀<br><small>BOM 등록</small></div>
|
||||
<div class="scenario-step">구매/물류팀<br><small>발주 처리</small></div>
|
||||
<div class="scenario-step">구매/물류팀<br><small>입고 검수</small></div>
|
||||
<div class="scenario-step">생산팀<br><small>자재 확인</small></div>
|
||||
<div class="scenario-step">품질팀<br><small>검사 관리</small></div>
|
||||
</div>
|
||||
<p style="text-align: center; margin-top: 15px; font-style: italic;">
|
||||
한 부서의 작업이 즉시 모든 관련 부서에 반영
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 시연 시나리오 -->
|
||||
<div class="slide">
|
||||
<h2>🎪 시연 시나리오</h2>
|
||||
<h3>🎬 "ABC 공장 배관공사 프로젝트" 시나리오</h3>
|
||||
<div class="scenario-flow">
|
||||
<div class="scenario-step">프로젝트 선택</div>
|
||||
<div class="scenario-step">생산회의 확인</div>
|
||||
<div class="scenario-step">입고 검수</div>
|
||||
<div class="scenario-step">품질 검사</div>
|
||||
<div class="scenario-step">생산팀 작업</div>
|
||||
</div>
|
||||
<div class="highlight">
|
||||
<h3>📝 시연 포인트</h3>
|
||||
<ul class="feature-points">
|
||||
<li><strong>Scene 0:</strong> TK Project 메인 화면에서 "ABC 공장 배관공사" 선택</li>
|
||||
<li><strong>Scene 1:</strong> 생산회의록에서 공정표, 일정, Follow-up 확인</li>
|
||||
<li><strong>Scene 2:</strong> 스테인리스 파이프 입고 검수 및 보관 위치 지정</li>
|
||||
<li><strong>Scene 3:</strong> 게이트밸브 품질 검사 및 적합 판정</li>
|
||||
<li><strong>Scene 4:</strong> 용접팀 일일 작업 현황 및 자재 부족 이슈 기록</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기대 효과 -->
|
||||
<div class="slide">
|
||||
<h2>🎯 기대 효과</h2>
|
||||
|
||||
<div class="highlight" style="margin-bottom: 30px;">
|
||||
<h3>🛒 구매/물류 업무 중심 통합의 핵심 가치</h3>
|
||||
<p style="font-size: 1.1em; color: #4a5568;">
|
||||
구매 신청부터 자재 불출까지의 전 과정을 구매/물류팀 중심으로 통합 관리하여<br>
|
||||
<strong>정보 단절 없는 완전한 자재 추적</strong>이 가능합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">🔗</span>
|
||||
<div class="benefit-title">실시간 자재 추적</div>
|
||||
<p>구매신청→발주→입고→보관→불출 전 과정 실시간 연동</p>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">📦</span>
|
||||
<div class="benefit-title">재고 최적화</div>
|
||||
<p>정확한 재고 현황으로 과다/부족 재고 방지</p>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">⚡</span>
|
||||
<div class="benefit-title">업무 효율성 극대화</div>
|
||||
<p>중복 입력 제거, 자동 알림으로 업무 시간 50% 단축</p>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">👥</span>
|
||||
<div class="benefit-title">부서간 정보 통합</div>
|
||||
<p>모든 부서가 동일한 자재 정보 실시간 공유</p>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">💰</span>
|
||||
<div class="benefit-title">구매 비용 절감</div>
|
||||
<p>공급업체 성과 분석, 최적 발주 타이밍 제안</p>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<span class="benefit-icon">🎯</span>
|
||||
<div class="benefit-title">프로젝트 지연 방지</div>
|
||||
<p>자재 부족 사전 알림으로 생산 차질 최소화</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight">
|
||||
<h3>📈 예상 개선 효과</h3>
|
||||
<div class="scenario-flow">
|
||||
<div class="scenario-step">자재 추적 시간<br><strong>90% 단축</strong></div>
|
||||
<div class="scenario-step">재고 정확도<br><strong>95% 향상</strong></div>
|
||||
<div class="scenario-step">구매 업무<br><strong>60% 효율화</strong></div>
|
||||
<div class="scenario-step">프로젝트 지연<br><strong>70% 감소</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 스택 -->
|
||||
<div class="slide">
|
||||
<h2>💻 기술 스택</h2>
|
||||
<div class="tech-stack">
|
||||
<div class="tech-item">React.js</div>
|
||||
<div class="tech-item">FastAPI</div>
|
||||
<div class="tech-item">PostgreSQL</div>
|
||||
<div class="tech-item">Docker</div>
|
||||
<div class="tech-item">SQLAlchemy</div>
|
||||
<div class="tech-item">JWT Auth</div>
|
||||
<div class="tech-item">CORS</div>
|
||||
<div class="tech-item">Bcrypt</div>
|
||||
</div>
|
||||
<div class="highlight">
|
||||
<h3>🏗️ 시스템 아키텍처</h3>
|
||||
<p><strong>Frontend:</strong> React.js 기반 SPA (Single Page Application)<br>
|
||||
<strong>Backend:</strong> FastAPI 기반 RESTful API 서버<br>
|
||||
<strong>Database:</strong> PostgreSQL 관계형 데이터베이스<br>
|
||||
<strong>Deployment:</strong> Docker 컨테이너 기반 배포</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 개발 방향성 및 로드맵 -->
|
||||
<div class="slide">
|
||||
<h2>🎯 개발 방향성 및 로드맵</h2>
|
||||
|
||||
<div class="highlight" style="margin-bottom: 30px;">
|
||||
<h3>💡 핵심 개발 철학</h3>
|
||||
<p style="font-size: 1.2em; font-weight: bold; color: #667eea;">
|
||||
"구매 신청으로 촉발되는 자재 관리 정보의 실시간 통합 연동"
|
||||
</p>
|
||||
<ul class="feature-points">
|
||||
<li><strong>구매 신청</strong> → <strong>발주</strong> → <strong>입고</strong> → <strong>검수</strong> → <strong>보관</strong> → <strong>불출</strong></li>
|
||||
<li>모든 부서가 동일한 자재 정보를 실시간으로 공유</li>
|
||||
<li>자재의 모든 상태 변화가 즉시 전 부서에 반영</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="workflow-grid">
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">1차</div>
|
||||
<div class="step-title">🛒 구매/물류 업무 중심 완성</div>
|
||||
<div class="step-description">
|
||||
<strong>🎯 목표:</strong> 구매/물류 프로세스 완전 자동화<br>
|
||||
✅ 구매 신청 시스템<br>
|
||||
✅ 발주 관리 시스템<br>
|
||||
✅ 입고 검수 시스템<br>
|
||||
✅ 물류 관리 시스템<br>
|
||||
✅ 자재 추적 시스템
|
||||
</div>
|
||||
</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">2차</div>
|
||||
<div class="step-title">🏢 각 부서별 핵심업무 확장</div>
|
||||
<div class="step-description">
|
||||
<strong>🎯 목표:</strong> 부서별 맞춤 기능 추가<br>
|
||||
🔄 설계팀: BOM 관리, 도면 버전 관리<br>
|
||||
🔄 생산팀: 공정 관리, 작업 지시서<br>
|
||||
🔄 품질팀: 검사 관리, NCR 처리<br>
|
||||
🔄 영업팀: 프로젝트 현황, 고객 관리
|
||||
</div>
|
||||
</div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">3차</div>
|
||||
<div class="step-title">🚀 고도화 및 확장</div>
|
||||
<div class="step-description">
|
||||
<strong>🎯 목표:</strong> 지능형 시스템 구축<br>
|
||||
🚀 AI 기반 자재 소요량 예측<br>
|
||||
🚀 공급업체 성과 분석<br>
|
||||
🚀 모바일 앱 (현장 작업자용)<br>
|
||||
🚀 외부 업체 포털 연동
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight">
|
||||
<h3>🔗 실시간 연동 시스템 구조</h3>
|
||||
<div class="scenario-flow">
|
||||
<div class="scenario-step">구매 신청</div>
|
||||
<div class="scenario-step">발주 처리</div>
|
||||
<div class="scenario-step">입고 알림</div>
|
||||
<div class="scenario-step">검수 완료</div>
|
||||
<div class="scenario-step">창고 보관</div>
|
||||
<div class="scenario-step">생산 불출</div>
|
||||
</div>
|
||||
<p style="text-align: center; margin-top: 20px; font-style: italic;">
|
||||
각 단계마다 모든 관련 부서에 실시간 상태 업데이트
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 데모 링크 -->
|
||||
<div class="slide">
|
||||
<h2>🎮 라이브 데모</h2>
|
||||
<div class="demo-link">
|
||||
<a href="demo/index.html" class="demo-button">
|
||||
🚀 데모 시연 시작하기
|
||||
</a>
|
||||
</div>
|
||||
<div class="highlight">
|
||||
<h3>💡 데모 특징</h3>
|
||||
<ul class="feature-points">
|
||||
<li><strong>하드코딩 데이터:</strong> DB 없이 실제 업무 시나리오 구현</li>
|
||||
<li><strong>DevonThink UI:</strong> 미니멀하고 직관적인 사용자 인터페이스</li>
|
||||
<li><strong>반응형 디자인:</strong> 데스크톱 및 모바일 환경 지원</li>
|
||||
<li><strong>실시간 인터랙션:</strong> 실제 시스템과 동일한 사용자 경험</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p style="text-align: center; margin-top: 30px; color: #666; font-style: italic;">
|
||||
"수주부터 납품까지, 모든 프로세스가 하나의 시스템에서"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 스크롤 애니메이션
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.animationPlayState = 'running';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.slide').forEach(slide => {
|
||||
observer.observe(slide);
|
||||
});
|
||||
|
||||
// 호버 효과 강화
|
||||
document.querySelectorAll('.feature-card, .workflow-step, .benefit-item').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-8px) scale(1.02)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// 데모 버튼 클릭 효과
|
||||
document.querySelector('.demo-button').addEventListener('click', function(e) {
|
||||
this.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
this.style.transform = 'scale(1)';
|
||||
}, 150);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -6,7 +6,60 @@ DB 연동 없이 하드코딩으로 구현하여 전체 워크플로우를 효
|
||||
|
||||
---
|
||||
|
||||
## 🚀 핵심 기능 5선
|
||||
## 🚀 핵심 기능 6선
|
||||
|
||||
### 0. **🏢 프로젝트 관리 (워크플로우 시작점)**
|
||||
|
||||
#### 🎯 **시연 포인트**
|
||||
- 전체 워크플로우의 중심이 되는 프로젝트 선택 시스템
|
||||
- 간단하고 직관적인 UI로 빠른 프로젝트 접근
|
||||
|
||||
#### 📱 **구현 내용**
|
||||
|
||||
##### **🎨 간단한 프로젝트 선택기**
|
||||
- **중앙 배치 디자인**:
|
||||
- 큰 "TK Project" 타이틀
|
||||
- "프로젝트를 선택하여 관리를 시작하세요" 안내 문구
|
||||
- **HTML Select 박스**:
|
||||
- 4개 프로젝트 옵션 (하드코딩)
|
||||
- 깔끔하고 직관적인 드롭다운 방식
|
||||
- **동적 액션 버튼**:
|
||||
- 프로젝트 선택 시에만 표시
|
||||
- 🏭 생산회의록, 📦 입고 검수, 🔧 생산팀 작업
|
||||
|
||||
##### **💡 하드코딩 데이터**
|
||||
```javascript
|
||||
const projectOptions = [
|
||||
{ value: "TK-2024-015", text: "ABC 공장 배관공사 (TK-2024-015)" },
|
||||
{ value: "TK-2024-016", text: "DEF 플랜트 배관 설치 (TK-2024-016)" },
|
||||
{ value: "TK-2024-017", text: "GHI 정유 공장 개보수 (TK-2024-017)" },
|
||||
{ value: "TK-2024-012", text: "JKL 화학 공장 신설 (TK-2024-012)" }
|
||||
];
|
||||
```
|
||||
|
||||
##### **🔄 워크플로우 연결**
|
||||
```
|
||||
프로젝트 선택 → 세션 스토리지 저장 → 각 기능 페이지로 이동
|
||||
```
|
||||
|
||||
##### **💡 실제 구현 시 고려사항**
|
||||
- **납기 필터링**: 납기가 지나지 않고 완료 처리가 안된 프로젝트만 표시
|
||||
- **동적 로딩**: DB에서 활성 프로젝트 목록을 가져와서 select 옵션 생성
|
||||
- **권한 관리**: 사용자 권한에 따른 프로젝트 접근 제어
|
||||
|
||||
```javascript
|
||||
// 실제 구현시 필터링 로직 예시
|
||||
function getActiveProjects() {
|
||||
// 납기가 지나지 않았고 완료 처리가 안된 프로젝트만 반환
|
||||
return projects.filter(project => {
|
||||
const today = new Date();
|
||||
const deadline = new Date(project.deadline);
|
||||
return deadline >= today && project.status !== 'completed';
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 1. **📋 프로젝트 정보 등록 (2단계 시스템)**
|
||||
|
||||
@@ -626,6 +679,20 @@ const qualityData = {
|
||||
|
||||
### **🎬 시나리오: "ABC 공장 배관공사 프로젝트"**
|
||||
|
||||
#### **Scene 0: 프로젝트 선택** (기능 0)
|
||||
1. **TK Project 메인 화면 진입**
|
||||
- 중앙에 큰 "TK Project" 타이틀 표시
|
||||
- "프로젝트를 선택하여 관리를 시작하세요" 안내
|
||||
2. **프로젝트 선택**
|
||||
- HTML Select 박스 클릭
|
||||
- "ABC 공장 배관공사 (TK-2024-015)" 선택
|
||||
3. **액션 버튼 표시**
|
||||
- 🏭 생산회의록, 📦 입고 검수, 🔧 생산팀 작업 버튼 나타남
|
||||
- 선택된 프로젝트 정보 세션 스토리지에 저장
|
||||
4. **워크플로우 시작**
|
||||
- 원하는 기능 버튼 클릭하여 해당 페이지로 이동
|
||||
- 선택된 프로젝트 컨텍스트 유지
|
||||
|
||||
#### **Scene 1: 프로젝트 등록** (기능 1)
|
||||
|
||||
##### **1단계: 프로젝트 생성 및 승인**
|
||||
@@ -649,7 +716,7 @@ const qualityData = {
|
||||
4. 리스크 분석 완료 → **정보 업데이트** (납품까지 지속적 관리)
|
||||
|
||||
#### **Scene 2: 생산회의** (기능 2)
|
||||
1. **프로젝트 TK-2024-015 선택** → 생산회의록 화면 진입
|
||||
1. **프로젝트 관리 화면에서 🏭 생산회의록 버튼 클릭** → 생산회의록 화면 진입
|
||||
2. **공정표 확인** (상단)
|
||||
- 설계: 100% 완료 ✅
|
||||
- 구매: 85% 진행중 🟡
|
||||
@@ -734,6 +801,7 @@ const qualityData = {
|
||||
## 📋 개발 우선순위
|
||||
|
||||
### **Phase 1: 기본 기능 (시연용)**
|
||||
- [x] 프로젝트 관리 (워크플로우 시작점)
|
||||
- [x] 프로젝트 등록 시스템
|
||||
- [x] 생산회의록 대시보드
|
||||
- [x] 입고 관리 시스템
|
||||
|
||||
Reference in New Issue
Block a user